Heatmap

Vad är en heatmap?

En heatmap är en grafisk representation av data som använder ett system med färgkodning för att representera olika värden. Heatmaps används i olika former av analyser men är vanligast för att visa användarbeteende på specifika webbsidor eller webbsidesmallar. Heatmaps kan användas för att visa var användarna har klickat på en sida, hur långt de har scrollat ner på en sida eller för att visa resultaten av eyetracking-tester.

När man tittar på lärdomar från 127 000 experiment är team som lagt till heatmaps ytterligare 16% mer framgångsrika i sina optimeringsinsatser.

Heatmaps ger data om var användare har klickat på en sida och hur långt de har scrollat ner på en sida. En heatmap över en webbsida kan till exempel visa vilka områden på sidan som det är mest sannolikt att man klickar på. Använd den här informationen för att förbättra sidans design genom att se till att de viktigaste elementen finns i de mest synliga områdena.

Med heatmaps kan du spåra användarengagemang på en webbsida. Du kan t.ex. använda en heatmap för att se hur långt användarna scrollar ner på en sida eller hur lång tid de spenderar på varje sidelement. Den här informationen säkerställer att det viktigaste innehållet är lätt att hitta och läsa.

Du kan göra utformningen och användbarheten av dina webbsidor mycket bättre genom visualisering av heatmaps. Om du letar efter ett sätt att få mer insikt i hur dina användare interagerar med din webbplats är heatmaps ett bra ställe att börja på.

Fördelar med att använda heatmaps

Analysverktyg som Google Analytics eller Site Catalyst är bra på att tillhandahålla mätvärden för att visa vilka sidor användarna besöker, men de kan sakna detaljer när det gäller att förstå hur användarna engagerar sig i dessa sidor. Heatmaps kan ge en mer omfattande översikt över hur användarna verkligen beter sig och den faktiska konverteringsgraden.

Heatmaps är också mycket mer visuella än vanliga analysrapporter, vilket kan göra dem lättare att analysera på ett ögonblick. Detta gör dem mer tillgängliga, särskilt för personer som inte är vana vid att analysera stora mängder komplexa data.

Bra heatmapverktyg, som CrazyEgg eller Hotjar (som nu ägs av Contentsquare), gör det möjligt för analytiker att segmentera och filtrera data. Genom dataanalys kan det vara lätt att se hur olika typer av användare engagerar sig i en viss sida. Detta skiljer sig från att skapa heatmaps i verktyg som Excel, där data bara läggs ut i ett varmt-till-kallt (eller vice versa) format.

Heatmaps för uppmärksamhet kan hjälpa dig med:

• Visualisera en mängd olika datapunkter, inklusive musklick, scrolldjup och ögonrörelser.
• Identifiera områden på en sida som är mest (eller minst) engagerande.
• Testa olika designförändringar för att se hur de påverkar användarnas beteende.
• Felsökning av problem med en sidas användbarhet.

Dessutom kan heatmaps avsevärt förbättra processerna för A/B-testning. Det kan du göra:

• Visualisera skillnader i användarbeteende mellan olika varianter
• Identifiera varför vissa varianter presterar bättre
• Vägleda hypotesbildning för framtida A/A-testning

Exempel på detta: En heatmap kan visa att användare klickar oftare på en call to action-knapp i variant B, vilket förklarar dess högre konverteringsgrad.

Vanliga fallgropar vid tolkning av data från heatmaps

• Förväxling av korrelation och orsakssamband: Många klick tyder inte alltid på effektivitet; användare kanske klickar av förvirring.
• Förbise siddesignens inverkan: Layout- och designelement kan påverka användarnas beteende och heatmapsnas resultat.
• Misstolka klick som positivt engagemang: Klick kan bero på frustration eller slumpmässigt beteende, inte på intresse.
• Bortse från sammanhanget kring användarresan: Heatmaps visar beteendet på en enda sida och missar den bredare användarresan.
• Överförtroende för aggregerad data: Övergripande heatmaps kan dölja viktiga skillnader mellan olika användarsegment.
• Ignorera kalla områden: Områden med låg interaktion kan avslöja designproblem eller irrelevant innehåll.
• Felaktigurvalsstorlek: Otillräckliga data kan leda till felaktiga slutsatser och beslut.

Vilka är de olika typerna av heatmaps?

Det finns många olika typer av heatmaps, men några av de vanligaste är

• Heatmaps med klick: Dessa heatmaps visar var användare klickar på en webbsida. Identifiera de viktigaste elementen på en sida och se hur användarna interagerar med olika funktioner.
• Heatmaps för rullning: Se hur långt användarna scrollar ner på en webbsida med den här typen av heatmap. Se vilka delar av en sida som är mest engagerande och hur användarna hittar den information de letar efter.
• Heatmaps över musrörelser: Dessa heatmaps visar hur en användares mus rör sig när de flyttar markören runt på en webbsida. Ta reda på var användarna tittar och hur de interagerar med olika element på sidan.
• Heatmaps för ögonspårning: Den här heatmapn visar hur användarens ögon rör sig när de tittar på en webbsida. Förstå var användarna ägnar uppmärksamhet och hur de bearbetar olika element på sidan.
• Heatmaps för konvertering: Få en bild av alla steg som dina användare tar för att slutföra en önskad åtgärd, t.ex. när de gör ett köp, klickar på call to action (ctas) eller registrerar sig för ett nyhetsbrev. Använd den här informationen för att identifiera flaskhalsar i konverteringen och vägleda användarna till att vidta önskad åtgärd.

• Attention heatmaps: Detta är ett nyare format av heatmaps och kan aggregera olika klick- och hoverheatmaps tillsammans för att skapa en mer komplett bild av var besökarna tillbringade den mesta av sin uppmärksamhet på en sida.

• Heatmaps för mobil och stationär dator: Skrollmönstret är vertikalt på mobilen. Medan det är både vertikalt och horisontellt på desktop. Skillnader i skärmstorlek har dessutom betydelse för hur synligt innehållet är. Att förstå dessa skillnader är avgörande för att skapa verkligt responsiva och användarvänliga designer.

Nyare verktyg för heatmaps kan också lägga in ytterligare information som värdet av varje konvertering på dina heatmaps. Om målet med en heatmap är att identifiera var den mesta interaktionen sker, kan en kombination av en klickkarta och en scrollkarta också ge dig ytterligare aggregerade datauppsättningar om var användarnas beteende släpar efter. Detta kan hjälpa dig att optimera din webbplats för fler konverteringar och engagemang, vilket kvantifieras med dina affärsmått som intäkter.

Hur man tolkar heatmaps

När du läser en heatmap tittar du på en visualisering av scroll-, klick- och hover-engagemang. Den här informationen kan vara till hjälp när du skapar en fågelperspektivvy av engagemanget på din webbplats eller app.

Alla typer av heatmaps går från kallt till varmt i färg. Blått är kallast och vitt är varmast i de flesta fall.

• Blå: Det var lite interaktion med det här området

• Grön: Användare höll muspekaren över eller klickade på vissa element i det här området

• Röd: Det fanns en del engagemang, svävningar eller klick i det här området

• Vit: Mest uppmärksamhet ägnades åt dessa avsnitt. Typiskt klickbara element som knappar

När du läser dessa kartor, beroende på typ (scroll, klick, engagemang), är de områden med flest användarengagemang hetast. Du vill fokusera din uppmärksamhet på dem. Är det områden som du förväntar dig, som knappar och länkar, eller är det områden som du inte vill att användarna ska ha användarengagemang med.

Till exempel, i vår egen upplevelse på Optimizely.com, har vi sett användare engagera sig med illustrationer och bilder som innehöll falska knappar och UI-element. Eftersom dessa illustrationer såg interaktiva ut, drog de uppmärksamheten bort från vårt innehåll. Vi upptäckte att användarna gjorde detta med hjälp av en heatmap över klick och sessionsinspelningar. Våra allmänna mätvärden för webbplatsen skulle inte ha visat detta, eftersom det inte fanns några CTA:er eller spårbara element på illustrationerna. Du kan använda dessa data till din fördel och uppmärksamma vissa avsnitt med design, färgscheman och locka människor längre in på din sida.

Du kan också kombinera heatmaps med andra datauppsättningar för att få ännu mer insikter. Med hjälp av heatmaps och sessionsinspelningar visste vi att en plusikon (+) var den ikon som flest interagerade med för ett expanderbart faq-dragspel på vår webbplats, där man utan denna information kanske hade valt en pil nedåt (▼). Det är viktigt att mäta heatmaps och sessionsinspelningar på din egen webbplats, eftersom detta kan skilja sig från webbplats till webbplats.

Vad du bör tänka på när du använder heatmaps

Precis som de flesta former av webbanalys måste heatmaps ha en stor mängd data innan de kan analyseras korrekt för datavisualisering. Att analysera heatmaps baserat på en liten mängd data kan liknas vid att avbryta A/B-testningar för tidigt, baserat på för få besök eller konverteringar. Eftersom heatmaps visar trender är det viktigt att ha tillräckligt med information för att säkerställa att eventuella avvikelser inte påverkar den övergripande bilden av heatmapn.

När heatmaps används på fel sätt kan de vara missvisande. De kan uppmuntra analytikerna att göra antaganden som kanske inte är korrekta. Det är viktigt att komma ihåg att heatmaps, precis som andra former av kvantitativa data, kan berätta vad som har hänt på en sida, men inte varför det har hänt.

Det är också viktigt att vara medveten om begränsningarna i data från heatmaps. Ofta visar heatmaps klick på en sida (så kallade klickkartor), men det kanske bara är en del av historien. Om man till exempel tittar på en heatmap för ett formulär kan den visa att användarna klickar på det första fältet och att det är färre klick på de efterföljande fälten.

Denna visuella representation kan tyda på att användarna hoppar av processen efter att ha fyllt i det första fältet. Vad heatmaps inte visar är om användarna har använt tangentbordet för att tabba sig igenom formulärfält, snarare än musen. För att korrekt analysera formuläranvändningen kan särskilda verktyg för formuläranalys användas. Dessa mäter den tid som spenderas inom varje fält, snarare än bara klick.

Att använda heatmaps innebär också att man samlar in användardata, vilket har konsekvenser för integriteten:

• Säkerställ regelefterlevnad av GDPR och andra sekretessbestämmelser
• Implementera lämpliga samtyckesmekanismer för datainsamling
• Anonymisera personuppgifter i heatmaps (t.ex. formulärfält)
• Var transparent om datainsamling i policys för skydd av personuppgifter
• Överväg de etiska konsekvenserna av att spåra användarnas beteende

Exempel på heatmaps

Heatmaps är ett bra sätt att snabbt se hur "populära" elementen på en viss sida är. Detta är särskilt användbart för att jämföra element som har liknande framträdande plats på sidan. Värmekartan nedan visar var användarna klickade på en produktsida för mobiltelefoner:

Det är tydligt att se att den nuvarande ordningen på dessa telefoner inte matchar deras popularitet. Användarna väljer ofta den markerade telefonen, trots att den visas ganska långt ner i listan och "nedanför vikningen" på de flesta enheter. En möjlig lösning på detta skulle vara att visa telefonerna i ordning efter deras popularitet så att användarna slipper scrolla för att hitta populära telefoner.

Värmekarta kan också vara användbart för att göra skillnad mellan länkar när det finns mer än en länk på en sida som går till en viss destinationssida. Vissa analysverktyg, till exempel Google Analytics, behandlar länkar till samma destination som samma länk. Det gör det omöjligt att se vilken av länkarna som har fått flest klick.

Ett exempel på när denna skillnad är användbar är att avgöra hur många som använder länkarna i sidfoten jämfört med länkarna i huvudnavigeringen. Det är ofta fler än du förväntar dig!

Använd heatmaps för att identifiera klick på delar av en sida som faktiskt inte är länkar. I exemplet nedan är det bara texten "Läs mer" som är en länk, men användarna klickar felaktigt på ikonerna i ett försök att få mer information.

Scrollmaps visar vilken del av ditt innehåll som är mest engagerande och hur långt ner på en viss sida dina användare läser. Scrollmaps visar inte vad användarna har läst, men kan belysa områden där användarna scrollar förbi (dvs. inte läser) innehåll som du kanske tycker är viktigt. Om du har en blogg och scrollkartan visar att majoriteten av tiden spenderas i början av en artikel och väldigt lite mot slutet, kanske du vill fokusera på att göra dina blogginlägg kortare eller mer engagerande!

Slutliga tankar om heatmaps

Heatmaps för webbplatser kommer inte att besvara alla dina frågor om användarupplevelse och hur användarna engagerar sig i din webbplats, men de kan ge insikter som inte är lättillgängliga från andra analysverktyg. Så länge de används på rätt sätt och slutsatser inte dras från små mängder data, kan heatmaps vara ett mycket effektivt vapen i webbanalytikerns arsenal.

Att använda heatmaps under upptäcktsfasen av din CRO-kampanj kan verkligen hjälpa till att identifiera ytterligare områden för testning. Det hjälper dig att öka konverteringen på dina landningssidor i realtid. Exemplen på den här sidan har alla använts för att informera A/B-testning om ändringar av sidlayouter och funktionalitet för att bättre matcha användarnas avsikter.

Heatmaps kan också integreras med A/B-testningar inom Optimizely Web Experimentation. Detta innebär att du kommer att kunna få en tydlig bild av hur användare engagerar sig med dina testvariationer jämfört med ditt original.