En heatmap, eller värmekarta, är ett av de mest lättlästa sätten att förstå hur besökare beter sig på en webbsida. I stället för långa tabeller med siffror lägger den ett färgat lager ovanpå själva sidan, där varma färger visar var aktiviteten är hög och kalla färger var den är låg. Du ser alltså med blotta ögat vad folk klickar på, hur långt de scrollar och var de rör sig. Den här guiden går igenom de vanliga karttyperna, hur du tolkar färgerna och vilka misstag som är lätta att göra.
Vad en heatmap egentligen visar
En heatmap samlar beteende från många besökare och lägger ihop det till en enda bild. Varje enskild besökares klick eller scroll är för litet för att säga något, men när tusen personer beter sig likadant framträder ett mönster. Färgskalan går oftast från blått eller grönt i den kalla änden till gult, orange och rött i den varma. Rött betyder mycket aktivitet, blått betyder lite. Det är hela grundprincipen: varmt är mycket, kallt är lite.
Det viktiga att komma ihåg är att en heatmap beskriver vad som händer, inte varför. Den pekar ut var du ska titta närmare, men svaret på varför något sker får du ofta genom att kombinera kartan med andra data, som sessionsinspelningar eller enkäter. Verktyg som Hotjar och Microsoft Clarity erbjuder både heatmaps och inspelningar just för att de kompletterar varandra.
De fyra vanliga karttyperna
Klickkarta (click map)
Klickkartan visar var besökarna klickar, eller trycker på mobil. Varje klick blir en punkt, och där många klick samlas blir det varmt. Det här är ofta den mest handfasta kartan, eftersom ett klick är en tydlig avsikt.
Så tolkar du den: leta efter var de varma fläckarna sitter i förhållande till dina viktiga knappar och länkar. Får din främsta uppmaning, till exempel en köp- eller kontaktknapp, verkligen de flesta klicken? Ett vanligt och nyttigt fynd är att besökare klickar på saker som inte är klickbara, som en rubrik, en bild eller ett ord som ser ut som en länk. Det är en signal om att folk förväntar sig något där, och att du kanske bör göra elementet klickbart.
Scrollkarta (scroll map)
Scrollkartan visar hur långt ner på sidan besökarna tar sig. Överst är det nästan alltid varmt, eftersom alla ser toppen. Ju längre ner du kommer, desto kallare blir det, i takt med att besökare hoppar av. Den punkt där färgen tydligt svalnar kallas ofta för brytpunkt eller fold, och den berättar hur stor andel som faktiskt når en viss höjd.
Så tolkar du den: se efter var det stora tappet sker. Ligger din viktigaste information eller din uppmaning nedanför den punkt där bara en liten del av besökarna finns kvar? Då bör du flytta upp den. En scrollkarta är särskilt användbar på långa sidor och artiklar, där du snabbt ser om folk läser klart eller tröttnar halvvägs.
Rörelsekarta (move- eller hovermap)
Rörelsekartan bygger på var muspekaren rör sig på datorn. Tanken är att pekaren ibland följer med blicken, så att varma områden kan antyda vart uppmärksamheten riktas. Det här är den karttyp du ska vara mest försiktig med, av skäl vi återkommer till nedan.
Så tolkar du den: använd den som en grov fingervisning om vilka delar av sidan som får uppmärksamhet, inte som ett facit. Den fungerar bäst som komplement till klick- och scrollkartan, inte som ensam grund för beslut.
Touch- och tryckkartor på mobil
På mobil finns ingen muspekare, så där handlar det om tryck och svep i stället för klick och hovring. En touchkarta visar var på skärmen fingrarna landar. Eftersom mobil ofta står för en stor del av trafiken är det värt att läsa mobilkartorna separat från datorkartorna. Beteendet skiljer sig: tummen når inte överallt lika lätt, och besökare sveper i stället för att flytta en pekare.
Så tolkar du den: kontrollera att viktiga knappar hamnar där tummen når naturligt, och håll utkik efter tryck på element som inte reagerar. Jämför gärna samma sida på mobil och dator, för mönstren är sällan identiska.
Så tolkar du färgerna rätt
Färgskalan är alltid relativ. En heatmap normaliserar sig själv efter den mest aktiva punkten på just den sidan, vilket betyder att rött inte är ett fast antal klick utan helt enkelt det hetaste området i det här urvalet. Två kartor går därför inte att jämföra rakt av bara utifrån hur röda de ser ut. En sida med få besökare kan ha lika röda fläckar som en med många, trots att de bakomliggande siffrorna skiljer sig kraftigt.
Därför bör du alltid väga in hur mycket data kartan bygger på. Med för få besökare blir mönstret slumpartat, och en enda ovanlig besökare kan färga bilden. Ett rimligt underlag och en tydlig tidsperiod gör tolkningen mer pålitlig.
Vanliga misstag att undvika
- Att tro att hovring är blick. Rörelsekartan bygger på muspekaren, och sambandet mellan var pekaren är och vart ögat tittar är svagt. Många låter pekaren vila stilla medan de läser på en helt annan del av skärmen. Vill du veta vart blicken faktiskt går krävs riktig ögonspårning, inte en musbaserad karta.
- Att jämföra färger mellan sidor. Eftersom skalan är relativ säger rött på en sida inget om rött på en annan. Titta på siffrorna bakom, inte bara på nyansen.
- Att dra slutsatser av för lite data. Ett par hundra besökare kan räcka för en grov bild, men ju viktigare beslut, desto mer underlag bör du kräva.
- Att blanda ihop mobil och dator. Layout och beteende skiljer sig, och en gemensam karta döljer det. Läs enheterna var för sig.
- Att stanna vid kartan. En heatmap visar vad, inte varför. Bekräfta dina hypoteser med inspelningar, enkäter eller ett riktigt test innan du bygger om en sida.
Från karta till förbättring
Det bästa sättet att använda heatmaps är som utgångspunkt för frågor. En kall knapp, ett klick på fel ställe eller en scrollkarta som svalnar för tidigt är alla ledtrådar. Nästa steg är att formulera en hypotes, testa en ändring och mäta om det blev bättre. Just den kopplingen mellan observation och test är kärnan i konverteringsoptimering, och heatmaps är ett av de mest lättillgängliga verktygen för att komma igång. Vill du gå vidare hittar du fler guider och verktygsjämförelser på heatmap.se.