Heatmap analyse is een visuele weergave van waar bezoekers op een website klikken, bewegen of hoe ver ze naar beneden scrollen. De data wordt vertaald naar kleuren, waarbij warme kleuren zoals rood aangeven waar de meeste interactie plaatsvindt en koude kleuren zoals blauw waar nauwelijks iets gebeurt.
Technisch proces
- Je plaatst een klein stukje JavaScript-code in de header van je website. Deze code fungeert als een tracker die elke interactie registreert.
- De software volgt de coördinaten van de muiscursor en registreert elke klik op het scherm. Ook wordt bijgehouden tot welk percentage van de pagina de bezoeker is gescrold.
- Alle verzamelde individuele gebruikerssessies worden over elkaar heen gelegd in een database. De tool berekent welke pixels het vaakst zijn geraakt of bezocht.
- De software genereert een visuele laag over je bestaande website-ontwerp. De intensiteit van de kleur bepaalt hoeveel activiteit er op die specifieke plek is geregistreerd.
Belangrijke varianten
Click maps
Deze laten precies zien waar mensen klikken. Dat is handig om te zien of een afbeelding die geen link is toch wordt aangeklikt, of dat mensen juist de belangrijkste knop negeren.
Scroll maps
Hierbij zie je hoe ver mensen naar beneden gaan op een pagina. Het is een kleurverloop van rood bovenaan naar blauw onderaan, wat aangeeft waar de meeste bezoekers afhaken.
Move maps
Deze volgen de beweging van de muiscursor over het scherm. Omdat mensen hun muis vaak onbewust gebruiken als een soort leeswijzer, geeft dit een indicatie van waar de aandacht naar uitgaat.
Session replays
Dit zijn video-opnames van individuele bezoeken. Je ziet precies hoe één specifieke gebruiker door de site navigeert, inclusief aarzelingen en foutieve kliks.
Praktijkvoorbeeld
Stel je een webshop voor op example.nl die een grote banner heeft bovenin de homepage met een call-to-action button voor de nieuwe collectie. De eigenaar ziet in Google Analytics dat veel mensen op de pagina komen, maar weinig mensen klikken door naar de collectie zelf.
Bij een click map blijkt dat bezoekers massaal klikken op de afbeelding van het model in de banner, maar niet op de knop met de tekst Koop nu. De afbeelding is echter geen link; alleen de knop werkt. Bezoekers raken gefrustreerd omdat ze denken dat de foto klikbaar is.
<!-- Foutieve opzet: alleen de button is een link -->
<div class="banner">
<img src="model.jpg">
<a href="/collectie" class="button">Koop nu</a>
</div>
<!-- Verbetering: de hele banner wordt klikbaar -->
<a href="/collectie" class="banner-link">
<img src="model.jpg">
<span class="button">Koop nu</span>
</a>
Veelgemaakte fouten
- Te snel conclusies trekken bij weinig data. Als je heatmap gebaseerd is op tien bezoekers, zie je toevalstreffers en geen patronen. Je hebt een significante hoeveelheid data nodig voordat de kleuren betekenis krijgen.
- Aannemen dat muisbewegingen gelijk staan aan aandacht. Een move map laat zien waar de cursor is, maar niet noodzakelijkerwijs waar de ogen naar kijken. Mensen bewegen hun muis soms zomaar heen en weer terwijl ze nadenken.
- Heatmaps gebruiken als enige bewijs voor een wijziging. Een heatmap laat zien wat er gebeurt, maar niet waarom. Je weet dat mensen niet klikken, maar je weet niet of dat komt door een slechte tekst, een onduidelijk aanbod of een technisch defect.
- Het negeren van verschillende apparaten. Een desktop-heatmap ziet er totaal anders uit dan een mobiele heatmap. Als je alleen naar de desktopversie kijkt, mis je het feit dat mobiele gebruikers misschien helemaal niet tot de belangrijkste knop scrollen.
Wanneer wel of niet gebruiken
Gebruik heatmap analyse als je een bestaande pagina hebt met voldoende verkeer en je wilt weten waar de wrijving zit. Het is ideaal voor landingspagina’s waarbij één specifieke actie centraal staat, zoals een inschrijving of aankoop.
Sla het over bij hele kleine pagina’s met weinig bezoekers, omdat de data dan simpelweg niet representatief is. Ook is het minder nuttig voor puur informatieve tekstpagina’s waar mensen alleen maar lezen en niet hoeven te klikken; daar vertellen scroll maps je wel iets, maar voegen click maps niets toe.
Controle van de werking
- Installeer de tracker en open je eigen website in een incognitovenster.
- Klik op verschillende elementen, scroll naar beneden en beweeg je muis over specifieke secties.
- Wacht een paar minuten en open het dashboard van je heatmap tool.
- Controleer of jouw specifieke acties zichtbaar zijn in de meest recente sessie-opnames.
- Kijk of de coördinaten van je klikken exact overeenkomen met de elementen op het scherm; als de kleuren verschoven zijn, staat de tracker niet goed ingesteld.
Vaak worden knoppen simpelweg groter gemaakt om meer klikken te krijgen, terwijl de heatmap laat zien dat mensen eigenlijk op een heel ander element klikken.
Kijk eens naar je belangrijkste landingspagina en check of de rode vlekken op de plekken zitten waar jij wilt dat mensen klikken.
Open je huidige statistieken en vergelijk de klikpercentages met de visuele data van je heatmap.
