Du har en snygg webbplats, investerar i marknadsföring och ser att det kommer in trafik till dina sidor. Ändå uteblir resultatet då besökarna inte konverterar. Ingen köper dina produkter, fyller i dina formulär eller klickar på länkarna som är viktigast. Hur tar du reda på anledningarna?

Med verktyg som Google Analytics ser du grundläggande, traditionell data som ger dig en känsla för vad som händer på dina sidor, men utan att berätta varför. Varför klickar inte besökarna på den där länken? Det går inte att utläsa från GA-data. För att ta reda på den underliggande anledningen behövs ett annat verktyg – heatmaps, eller värmekartor.

Vad är en heatmap?

En heatmap är en visuell representation av data som visas med färger. De fungerar lite som en väderkarta där röda områden är varma och blå är kalla. Varma områden representerar aktivitet och blå områden inaktivitet. Aktivitet innebär exempelvis många klick, lång scrollning eller att muspekaren vistas länge i ett område. Det ger dig en tydligare bild av var på dina sidor besökaren dröjer sig kvar, och resultaten kan vara förvånande. Exempel på tjänster som erbjuder heatmaps är Hotjar och CrazyEgg.

Vanliga typer av heatmaps

Heatmaps är ett samlingsnamn för olika typer av visualiseringar. Det finns huvudsakligen tre varianter som gör det lättare att förstå hur din webbplats fungerar för besökarna.

• Klickkartor (Click Maps): Klickkartor visar exakt var besökare klickar med sin mus på en sida. En klickkarta avslöjar vilka knappar, länkar och bilder som är populära. Dessutom visar den så kallade "döda klick" – klick på element som inte är klickbara. Detta är en guldgruva för att förstå användarnas förväntningar och frustrationer.
• Scrollkartor (Scroll Maps): Scrollkartor använder färggradienter för att indikera hur långt ner på sidan besökarna faktiskt scrollar på dina webbsidor. Du kan se den genomsnittliga "vikningen" (average fold), alltså den punkt dit de flesta besökare når innan de tappar intresset. Om din viktigaste call-to-action (CTA) ligger i ett "kallt" blått område, är det troligt att besökarna aldrig ens ser den. Detta kallas ibland för en "falsk botten".
• Rörelsekartor (Move Maps): Rörelsekartor spårar var besökare rör sin muspekare. Forskning visar en korrelation mellan ögonrörelser och musrörelser. En rörelsekarta ger en bra indikation på vilka delar av din sida som fångar användarnas uppmärksamhet, även om de inte klickar. Det är ett bra verktyg för att analysera hur väl din sidlayout och innehållet fungerar.

Du kan använda en åt gången eller alla tre på samma gång. Vad du väljer beror helt på situationen och dina behov. Vissa verktyg erbjuder en större uppsättning verktyg som har ännu större bredd på vad du kan se, men de tre ovan är en utmärkt grund att börja med.

De riktiga fördelarna med heatmaps

Det finns många bra anledningar till varför din webbplats bör använda heatmaps. Genom att använda dem i din analysprocess får du utökad information som kan betyda stor skillnad för konverteringsgraden. Du behöver inte längre gissa hur flödet genom dina webbsidor ser ut – du får tydlig, praktisk och enkel data som berättar vad du behöver veta.

• Upptäck "döda klick": Besökare som försöker klicka på bilder, ikoner, texter och annat som de tror är en länk riskerar att lämna webbsidan i frustration när det inte fungerar. Så kallade döda klick som inte leder till ett positivt resultat förvirrar besökaren och minskar chansen till konvertering. Här får du en tydlig signal var webbplatsen har dålig design som behöver fixas snabbt. Exempelvis genom att göra elementen klickbara, tydligt indikera att de inte är länkar eller ha en mycket tydligare CTA.
• Identifiera den "falska botten": En scrollkarta visar var du tappar besökarnas uppmärksamhet. Om du ser att merparten av dina besökare aldrig scrollar förbi en viss stor bild eller en sektion mitt på sidan, då har du hittat en "falsk botten". Användarna tror att sidan är slut, eller har tröttnat, och kan missa viktig information och dina avgörande call-to-actions som ligger längre ner. Insikten hjälper dig att justera layouten för att uppmuntra besökaren att scrolla längre ner.
• Optimera din Call-to-Action (CTA): Är din "Köp nu"-knapp placerad där ingen ser den? Får den färre klick än en obetydlig länk i sidfoten? En klickkarta ger dig svaret svart på vitt. Kanske upptäcker du att besökarna klickar mer på en bild av produkten än på själva knappen. Insikten hjälper dig att A/B-testa varianter där du exempelvis gör hela produktbilden klickbar, vilket kan ha en enorm inverkan på din konverteringsgrad. Med en heatmap är det tydligare vilka delar av dina CTA:s som drar uppmärksamheten. Fungerar rubriken, beskrivningen, knappen, länkar? Var hovrar besökaren med muspekaren, och var klickas det mest?
• Analysera formulärprestanda: Formulär är ofta en plats där konverteringar dör. En rörelsekarta visar var besökarna tvekar eller rör sig planlöst över ett formulärfält. Du får indikationer på när fältets syfte är oklart eller att besökaren känner sig osäker. Med den insikten kan du lägga till förklarande text, förenkla formuläret eller lägga till trygghetssymboler för att minska osäkerheten.
• Hitta nya innehållsidéer: Genom att analysera klickkartor på dina webbsidor kan du se vilka ämnen eller rubriker som lockar till sig klick (även "döda klick"). Det är en direkt signal från besökarna om vad de vill lära sig mer om, vilket ger dig konkreta idéer för framtida artiklar eller guider som garanterat kommer att vara relevanta. Får ämnet "heatmaps" betydligt fler klick från huvudmenyn än de andra länkarna? Då är det läge att optimera dina sidor om heatmaps och kanske skapa nya.

Du måste inte ta del av alla fördelar direkt. Du kanske vill börja med att hitta dina sidors falska botten först och optimera för det innan du går vidare med att se var besökarna klickar mest. Eller tvärtom. Börja enkelt och utöka sakta om du är osäker. Med rätt verktyg kan du mäta allt och ha informationen redo när du väljer att använda den.

‍

Så fungerar heatmaps i praktiken – fyra steg

Om du har ett modernt CMS som driver din webbplats är det mycket enkelt att komma igång med verktyg som gör heatmaps. Andra, egenutvecklade eller mer specialbyggda lösningar kan behöva lite extra trixande för att komma igång. I det stora hela är det fyra steg som krävs.

1. Installation

För att heatmap-verktygen ska fungera måste de installera en spårningskod – ett litet skripts – som laddas för varje besökare. Koden ser till att information om besöket sparas så att du kan förstå beteenden. Installationen av koden sker oftast genom ett tillägg för just ditt CMS-verktyg, exempelvis Wordpress. I vissa fall kan du behöva lägga in spårkoden manuellt enligt heatmap-verktygens instruktioner.

2. Datainsamling

När spårningskoden finns på din webbplats börjar den arbeta. Besökarna ser inget, men koden registrerar allt de gör och sparar det i en databas. Besökarna kan vara lugna, allt som görs är anonymiserat så att sajtägare inte vet vem som gör vad – bara att något görs. Dessutom sparas inte information som kan vara känslig, exempelvis fomulärdata. Viktigt om datainsamlingen är att den sker helt automatiskt och du behöver i princip inte göra något alls för att det ska fungera.

3. Visualisering

När du har tillräckligt mycket data från spårningskoden kan heatmap-verktygen visualisera besökarnas beteenden åt dig. Antingen som statiska bilder eller som videoinspelningar som detaljerat visar exakt hur besökare rör sig på webbplatsen. Är det en statisk bild används skärmdumpar från din webbplats där insamlad data placeras ovanpå bilden som färger i nyanser från mörkrött till ljusblått eller ljusgrönt, alternativt helt transparent.

4. Tolkning av data

När du har visualiseringen måste du tolka innehållet utifrån vad du ser. Det är viktigt att förstå hela sammanhanget, exempelvis genom att koppla på statistik från Google Analytics som avslöjar fler detaljer, som "bounce rate" och "time on page". Se den större bilden och används så mycket information som möjligt tillsammans med heatmaps för att förstå dina besökare.