Få et godt indblik i brugeradfærd - Website Heatmaps
Udgivet: January 29, 2020
Senest opdateret: April 26, 2023
Estimeret læsetid: 7 minutter
Dette blogindlæg blev sidst opdateret den 29. januar 2020. Funktionerne til brugerengagement og interaktion, som tilbydes af Crazy Egg og Hotjar, kan have gennemgået ændringer siden da. Selvom vi stræber efter at være opdateret, er nøjagtigheden af oplysningerne her begrænset til den sidste revisionsdato.
Heatmaps fortæller på en visuel måde, hvordan brugere interagerer og engagerer sig på en hjemmeside.
Som navnet antyder, "mappes" elementerne eller sektionerne på en side, der får visninger, klik eller aktivitet fra sine besøgende, ved at bruge farver der indikerer varme - 'heat' - (dvs. de mest engagerede) og kolde (dvs. dem med lidt eller ingen interaktion).
(Et Heatmap-eksempel på 1902 Softwares hjemmeside i Crazy Egg).
I Crazy Egg angiver de lyseste områder (på skalaen til venstre) de mest populære afsnit på siden - i dette tilfælde vores "Det vi tilbyder"-sektion.
Du kan også se andre områder på siden, hvor vi får klik fra vores besøgende.
(Et Heatmap-eksempel (kan rulle) over 1902 Softwares hjemmeside i Hotjar).
Andre værktøjer, som fx Hotjar, bruger varme farver til at repræsentere høje niveauer af brugerengagement og kølige farver til det modsatte.
Typer af Heatmaps
Et Heatmap over brugerengagement kan vise mange forskellige ting - det kan være, der klikkes, scrolles eller blot flyttes på musen (hvilket ofte indikerer en pause, eller at der læses).
For at få fuld forståelse af, hvordan en bruger interagerer på siden, er der forskellige typer Heatmaps, der viser de forskellige aktiviteter:
1. Click Map - Dette er, hvad der ofte associeres med det generelle "Heatmap"-begreb. En visuel rapport, der viser de dele af en side, der får flest klik (eller taps på mobile enheder).
(Et Hotjar Click Map over 1902 Softwares kontaktformular, hvor de røde områder repræsenterer flest klik, og de blå områder repræsenterer færrest).
(Crazy Eggs "konfetti"-rapport, deres version af Click Map, over 1902 Softwares Umbraco webshop-side. Her ses ikke kun områder på siden, der fik klik, men også kontekst med yderligere oplysninger om fx de henvisende sider).
(Page Analytics, Google Analytics Chrome-udvidelse, giver en slags Click Map ved at tilføje bobler ved siden af elementer på siden, der kan klikkes på, og som viser procentdelen af besøgende på hjemmesiden, som klikker på specifikke links eller elementer).
2. Scroll Map - Dette Heatmap bruges til at få en indikation af forskellige sektioners popularitet på en side.
Typisk vil et Scroll Map gå fra varmt til koldt - med indholdet "above-the-fold" i det varme område, da det er den del af siden, som alle brugere ser, når de lander på siden.
(Et Crazy Egg Scroll Map over et specifikt område på 1902 Softwares hjemmeside, hvilket interessant nok viser, at sektionen med vores kunders logoer er mere populær end vores sektion med særlig udvalgt indhold, på trods af at den er placeret længere nede).
3. MoveMap - Et MoveMap er en visuel repræsentation af, hvordan besøgende bevæger sig rundt på en side.
Ifølge Hotjar tyder forskning på, at markørens placering ofte viser, hvor på siden brugere kigger.
Selvom dette kun er en antagelse, så får du alligevel en god idé om, hvordan dine besøgende bruger hjemmesidens indhold.
(Et Hotjar MoveMap over 1902 Softwares prisliste-side, der fortæller os, at der nok ikke er nogen, der læser korte beskrivelse over formularen. Vigtig viden, hvis denne tekst nu indeholder vigtig information til kunderne).
Hvad kan du få ud af et Heatmap?
Heatmaps tilbyder masser af viden om både dine brugere og hjemmesidens design, og det bedste er, at du ikke behøver at gennemse mængder af data for at få det.
Her er nogle punkter, som du kan kigge efter i dine Heatmaps for at få mere viden om brugeradfærd:
1. Får dine Call-to-Action (CTA) -knapper de klik, de fortjener?
Som ejer af en hjemmeside kender du alle hjørner og afkroge af dine sider, så selv om din CTA-placering kan virke indlysende for dig, er det måske ikke helt det samme for din førstegangs-besøgende.
Hvis dette Heatmap viser, at der er mere aktivitet andre steder på siden, end der hvor din CTA er, kan du overveje at flytte lidt rundt på elementer eller fjerne nogle for at gøre det lettere for dine besøgende at finde CTA-knappen.
2. Scroller dine besøgende langt nok ned til at kunne se det indhold, du vil have dem til at se?
Du vil gerne kommunikere meget til dine kunder, og der er jo begrænset plads "Above-the-Fold" - det er forståeligt nok.
Men hvis dette Scroll Map viser, at en vigtig del af dit indhold praktisk talt er usynligt på siden for brugerne, der rent faktisk når så langt, bør du overveje nogle ændringer.
Som tidligere nævnt er det kun forventeligt, at et Scroll Map viser et gradvist fald i engagement, efterhånden som man kommer længere ned på siden, men du skal også være opmærksom på pludselige fald - som når mappet skifter markant fra grønt til mørkeblå - hvilket ofte betyder, at brugere holder op med at scrolle og forlader siden.
Hvis du har en vigtig sektion under dette punkt, kan du overveje at flytte den højere op, eller alternativt kan du genoverveje designet af det specifikke område, hvor brugerne stopper. Det kunne være en "breaker", der ligner slutningen af siden, eller en for tidligt placeret CTA, som du kan flytte længere ned.
3. Forsøger brugere at klikke på non-clickable elementer?
(Et Crazy Egg Heatmap for vores Magento landingsside).
På vores Magento-side lod overskriften "Magento optimization and debugging" til at få mange klik, selvom den ikke var et link.
Denne iagttagelse fører til forskellige antagelser: Brugere synes måske at overskriftsdesignet ligner et link, at der burde være en dedikeret side om emnet, eller at (da dette er i et harmonika-layout) brugerne ganske enkelt forsøger at lukke fanen.
Hvis du ser klik på et ikke-klikbart element på din side, kan du overveje at revidere designet eller bruge interessen til at gøre linket til en relevant landing page.
Efter et hurtigt blik kan du sagtens foretage nogle antagelser ud fra et Heatmap, som du kan bruge som grundlag for yderligere forbedringer af design og indhold.
Men "antagelser" er et nøgleord her, for hvor brugbare Heatmaps end er, så er de ikke de vises sten - de giver ikke direkte facts om dine brugere, bortset fra hvor de klikker, eller hvor langt de scroller.
F.eks. kan Heatmaps ikke rigtig fortælle dig, om de klik, du fik på din "Kontakt os"-knap, er fra brugere, der ikke allerede havde besluttet sig, da de ankom til hjemmesiden, eller fra brugere der har besøgt siden og allerede havde til hensigt at sende dig en forespørgsel - hvilket gør en verden til forskel for konteksten af dine data.
Egentlig kan du se dine Heatmaps som et udgangspunkt - en guide til designændringer og tests, indtil du når det performance-mål, du har sat dig.
Et Heatmap er en repræsentation af de samlede brugerdata, og giver dig mulighed for at se det store billede i forhold til hvilke områder af din hjemmeside, der tiltrækker brugernes opmærksomhed, og hvilke dele der bliver ignoreret.
Men det store billede er stadig sammensat af små dele, der er værd at undersøge, så i den næste artikel vil vi fortælle om Session Recordings - hvor vi bevæger os væk fra den samlede mængde af data og dykker ned i, hvad vi kan lære af brugere på individuelt niveau.
Næste: Session Recordings: Sådan oplever brugerne hjemmesiden »