En heatmap är en grafisk representation av data som använder ett färgkodningssystem för att representera olika värden. De visar var användare har klickat på en sida.
En heatmap är en grafisk representation av data som använder ett färgkodningssystem för att representera olika värden. Heatmaps används inom olika typer av analys men är vanligast för att visa användarbeteende på specifika webbsidor eller webbsidemallar. Heatmaps kan användas för att visa var användare har klickat på en sida, hur långt ner de har scrollat på en sida, eller för att visa resultat från ögonspårningstester.
Baserat på lärdomar från 127 000 experiment, är team som lagt till heatmapping ytterligare 16 % mer framgångsrika i sina optimeringsinsatser.
Heatmaps ger data om var användare har klickat på en sida och hur långt ner de har scrollat på en sida. En heatmap av en webbsida kan till exempel visa vilka områden på sidan som det är mest sannolikt att användare klickar på. Använd den här informationen för att förbättra sidans design genom att säkerställa att de viktigaste elementen finns i de mest synliga områdena.
Med heatmaps kan du spåra användarengagemang på en webbsida. Du kan till exempel använda en heatmap för att se hur långt ner användare scrollar på en sida eller hur lång tid de spenderar på varje sidelement. Denna information säkerställer att det viktigaste innehållet är lätt att hitta och läsa.
Du kan förbättra designen och användbarheten på dina webbsidor avsevärt genom heatmap-visualisering. Om du letar efter ett sätt att få fler insikter om hur dina användare interagerar med din webbplats är heatmaps ett bra ställe att börja.
Analysverktyg som Google Analytics eller Site Catalyst är utmärkta för att tillhandahålla mätvärden som visar vilka sidor användare besöker, men de kan sakna detaljer när det gäller att förstå hur användare engagerar sig med dessa sidor. Heatmaps kan ge en mer heltäckande översikt av hur användare verkligen beter sig och den faktiska konverteringsgraden.
Heatmaps är också mycket mer visuella än vanliga analysrapporter, vilket kan göra dem enklare att analysera vid en snabb överblick. Det gör dem mer tillgängliga, särskilt för personer som inte är vana vid att analysera stora mängder komplex data.
Bra heatmapping-verktyg, som CrazyEgg eller Hotjar (numera ägt av Contentsquare), gör det möjligt för analytiker att segmentera och filtrera data. Genom dataanalys kan det vara enkelt att se hur olika typer av användare engagerar sig med 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.
Uppmärksamhets-heatmaps kan hjälpa dig med:
Dessutom kan heatmaps avsevärt förbättra A/B-testningsprocesser. Du kan:
Exempel: En heatmap kan avslöja att användare klickar oftare på en call to action-knapp i Variant B, vilket förklarar dess högre konverteringsgrad.
Det finns många olika typer av heatmaps, men några av de vanligaste inkluderar:
Uppmärksamhets-heatmaps: detta är ett nyare format av heatmaps som kan sammanställa olika klick- och hover-heatmaps för att skapa en mer komplett bild av var besökare lade mest uppmärksamhet på en sida.
Nyare heatmap-verktyg kan också lägga till ytterligare information som värdet av varje konvertering i dina heatmaps. Om målet med en heatmap är att identifiera var mest interaktion sker kan en kombination av klickkarta och scrollkarta ge dig ytterligare aggregerade dataset om var användarbeteendet haltar. Detta kan hjälpa till att optimera din webbplats för fler konverteringar och ökat engagemang, kvantifierat med dina affärsmätvärden som intäkter.
När du läser en heatmap tittar du på en visualisering av scroll-, klick- och hover-engagemang. Denna information kan vara till hjälp när du skapar en översiktsbild av engagemanget på din webbplats eller app.
Alla typer av heatmaps går från kalla till varma färger. Blått är kallast och vitt är varmast i de flesta fall.
Blått: Det var lite interaktion med detta område
Grönt: Användare hovrade eller klickade på vissa element i detta område
Rött: Det förekom visst engagemang, hovring eller klick i detta område
Vitt: Mest uppmärksamhet ägnades åt dessa sektioner. Vanligtvis klickbara element som knappar
När du läser dessa kartor, beroende på typ (scroll, klick, engagemang), är de områden med flest användarinteraktioner varmast. Du bör fokusera din uppmärksamhet på dessa. Är det de områden du förväntar dig, som knappar och länkar, eller är det områden du inte vill att användare ska engagera sig med.
Till exempel har vi på Optimizely.com sett att användare engagerar sig med illustrationer och bilder som innehöll fejkade 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ändare gjorde detta med hjälp av en klick-heatmap och sessionsinspelningar. Våra generella webbplatsmätvärden hade inte visat detta, eftersom det inte fanns några CTA:er eller spårbara element uppsatta på illustrationerna. Du kan använda denna data till din fördel och dra uppmärksamhet till vissa sektioner med design, färgscheman och locka människor djupare in på din sida.
Du kan också kombinera heatmaps med andra dataset för att få ännu fler insikter. Med hjälp av heatmaps och sessionsinspelningar visste vi att en plus-ikon (+) var det mest interagerade elementet för ett expanderbart FAQ-dragspel på vår webbplats, där utan denna information en nedåtpil (▼) kanske hade valts. Det är viktigt att mäta heatmaps och sessionsinspelningar på din egen webbplats, eftersom detta kan variera från webbplats till webbplats.
Precis som de flesta former av webbanalys behöver 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 liknar att "avsluta" A/B-tester 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 heatmap-bilden.
Vid felaktig användning kan heatmaps vara vilseledande. De kan uppmuntra analytiker att göra antaganden som kanske inte stämmer. Det är viktigt att komma ihåg att heatmaps, liksom andra former av kvantitativ data, kan berätta vad som har hänt på en sida, men inte varför det hände.
Det är också viktigt att vara medveten om begränsningarna hos heatmap-data. Ofta visar heatmaps klick på en sida (så kallade klickkartor), men det kan bara vara en del av historien. Till exempel, när man tittar på en heatmap av ett formulär kan det visa att användare klickar på det första fältet och att det finns färre klick på de efterföljande fälten.
Denna visuella representation kan antyda att användare hoppar av processen efter att ha fyllt i det första fältet. Vad heatmaps däremot inte visar är om användare har använt tangentbordet för att tabba genom formulärfält istället för musen. För att korrekt analysera formuläranvändning kan dedikerade formuläranalysverktyg användas. Dessa mäter tiden som spenderas inom varje fält, istället för bara klick.
Att använda heatmaps innebär också att samla in användardata, vilket har integritetsimplikationer:
Heatmaps ger ett bra sätt att vid en snabb överblick se hur "populära" elementen på en viss sida är. Detta är särskilt användbart för att jämföra element som ges liknande framträdande plats på sidan. Heatmappen nedan visar var användare klickade på en produktsida för mobiltelefoner:
Det är tydligt att den nuvarande ordningen på dessa telefoner inte matchar deras popularitet. Användare 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 vore att visa telefonerna i ordning efter popularitet för att spara användare från att behöva scrolla för att hitta populära telefoner.
Heatmapping kan också vara användbart för att skilja mellan länkar när det finns mer än en länk på en sida som leder till samma destinationssida. Vissa analysverktyg, som Google Analytics, behandlar länkar till samma destination som samma länk. Det gör det omöjligt att avgöra vilken av länkarna som har fått flest klick.
Ett exempel på när denna differentiering är användbar är att avgöra hur många som använder länkarna i din sidfot jämfört med dem i din huvudnavigering. Detta är ofta mer ä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 bara texten "läs mer" en länk, men användare klickar felaktigt på ikonerna i ett försök att få mer information.
Scrollkartor 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. Scrollkartor visar inte vad användare har läst men kan belysa områden där användare scrollar förbi (dvs. inte läser) innehåll som du kanske anser vara 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, kan du vilja fokusera på att göra dina blogginlägg kortare eller mer engagerande!
Webbplatsens heatmaps kommer inte att besvara alla dina frågor om användarupplevelse och hur användare engagerar sig med 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 verktyg 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 konverteringar på dina landningssidor i realtid. Exemplen på den här sidan har alla använts för att informera A/B-tester av ändringar i sidlayouter och funktionalitet för att bättre matcha användarnas avsikt.
Heatmaps kan också integreras med A/B-tester inom Optimizely Web Experimentation. Det innebär att du kommer att kunna få en tydlig bild av hur användare engagerar sig med dina testvariationer jämfört med originalet.
