Elke website die geld verdient door websiteverkeer weet dat het de truc is om zo lang mogelijk de aandacht van zijn bezoekers vast te houden. Toch is er een lange lijst aan websites die willekeurig zijn gaan experimenteren met optimaliseren. Zo wordt er vaak gedacht: een homepagina van twee jaar oud, doe een paar aanpassingen en hij kan weer twee jaar vooruit! Dat is een grote fout,  want deze willekeurige aanpassingen zorgen er juist voor dat:

  • Conversieratio wordt verlaagd
  • Verkoopkansen worden verloren
  • Bezoekers afschrikken

Iedere website is namelijk anders en wat voor de één enorm goed werkt, werkt niet automatisch ook voor de ander. Heatmaps laten dus precies  zien wat er veranderd of verbeterd moet worden aan de hand van het bezoekersgedrag.

Wat is een Heatmap?

Heatmaps zijn visuele inzichten in de aandacht, engagement en interacties van je bezoekers die worden verkregen op het moment dat ze door je website navigeren. 

Uit deze inzichten kun je opmaken waar de gebieden met de meeste interactie zich bevinden, zoals hieronder weergegeven:

heat map
Bron: www.pixeller.co

Warme tinten geven de gebieden aan waar de aandacht van je bezoekers het grootst is. Koude tinten daarentegen, geven aan welke gebieden niet of nauwelijk gezien worden.

Door het analyseren van hoe je bezoekers zich op specifieke pagina’s gedragen, kom je erachter waar de veranderingen gemaakt moeten worden om je conversieratio te verhogen, bijvoorbeeld door middel van A/B testen.

Wanneer gebruik je een Heatmap op je website?

Heatmaps zijn enorm handig: ze meten de mate van aandacht, engagement en het aantal kliks op je website. Hierbij een aantal hoofdredenen voor het gebruik van heatmaps, om je een concreter beeld te geven:

  • Mate van engagement.  Schrijf je online artikelen en vraag je je af tot waar je publiek leest? Het gebruik van heatmaps kan je helpen om deze “scroll” te visualiseren. En als hieruit blijkt dat slechts een beperkt aantal mensen het halen tot aan je CTA, dan is het tijd voor een verandering.
  • Mate van handelingen Waar klikken mijn bezoekers? Klikken ze op de juiste button? Heatmaps helpen je om te zien of bezoekers doen wat je graag wilt dat ze doen, waarbij het ook laat zien waar het blijft hangen.
  • Mate van aandacht.  Welke titels krijgen de meeste aandacht? Welke afbeeldingen worden het meest bekeken? Welke elementen leiden af van de hoofdinhoud? Zien bezoekers mijn formulier? Met de antwoorden op deze vragen kun je je conversie ratio enorm verhogen.
heat map
Bron: Unbounce

Door antwoord te krijgen op bovengenoemde vragen,  word je geholpen om antwoord te kunnen geven op nog meer breinbrekende vragen:

  • Waar moet ik de belangrijkste inhoud plaatsen?
  • Wat is de beste manier om afbeeldingen en video’s te gebruiken?
  • Op welke punten worden mijn bezoekers afgeleid?
  • Waar moet ik het hebben over mijn product/service?

Nu je een beter beed hebt van het idee van heatmaps, is het tijd om te kijken naar de verschillende soorten die er zijn,

Welke Heatmap(s) moet ik gebruiken?

De meeste heatmapoplossingen genereren een visualisatie van de gebruikersinteracties vanuit verschillende oogpunten. Het idee is om naar allemaal te kijken voor een goed beeld van het gedrag van je bezoekers.

Click-Heatmap

Een click-heatmap zorgt dat je handelingen op je website kunt kwantificeren. Het is een visuele vertegenwoordiging van alle kliks die bezoekers op je website hebben gemaakt. Deze “map” genereert waardevolle data, aangezien het je precies laat zien hoe bezoekers zich gedragen op je website.

Elke keer dat iemand ergens op je website klikt, laat de heat map dit zien met een lichtpunt. Dus als je grote, witte gebieden ziet, dan weet je waar de meeste kliks worden gemaakt.

click heat map
Bron: Sumo

Door snel te kunnen identificeren waar de ‘hot spots’ op je website zitten, kun je meteen zien of bezoekers klikken waar je wilt dat ze klikken. Op de afbeelding hierboven is te zien dat de ‘SHARE’ en ‘IMAGE SHARE’ buttons het minst populair zijn.

Scroll-Map

De scroll-map laat je zien hoe ver je bezoekers naar beneden scrollen op een pagina, en dan vooral welke elementen daarbij de meeste aandacht krijgen. Door gebruik te maken van een scroll-map, kun je vaststellen of je gebruikers de juiste onderdelen van je website zien of dat ze te veel worden afgeleid.

scroll map
Bron: nguyenvincent.com

Als we kijken naar  de afbeelding hierboven over SEO, dan kunnen we zien dat de afbeelding en de twee regels tekst daaronder het meest populair zijn: ruim 85% van de bezoekers heeft deze elementen gezien.

“Percentage of Clicks”-Heatmap

De ‘percentage of clicks’ heatmap is een toevoeging op de klassieke heatmap. Deze laat je  zien, van element naar element, hoeveel kliks zijn gegenereerd door een bepaalde afbeelding of CTA. Het vermogen om kliks te kwantificeren is daarbij enorm belangrijk, dit zorgt namelijk dat je:

  • Kunt begrijpen hoeveel interactie je gebruikers hebben per element
  • Kunt vermijden dat bezoekers klikken op afbeelding zonder links erachter
heatmap-click-percent
Bron: nguyenvincent.com

“Confetti” Heatmap

Hoewel ook deze vergelijkbaar is met de klassieke heatmap, laat de confetti-heatmap iedere individuele klik op een pagina zien, in tegenstelling tot een overview van de dichtheid van alle kliks. Hierdoor wordt het dus duidelijk of mensen klikken op non-clickable elementen.

confetti-heatmap
Bron: CrazyEgg

Ondertussen weet je al meer over de verschillende typen heatmaps en hoe je ze kunt inzetten, maar er is nog een andere manier om gebruikersgedrag op  je website te analyseren: eye-tracking.

Het verschil tussen Heatmaps en Eye-Tracking

Waar heatmaps vooral gebaseerd zijn op de muisbewegingen en kliks, focust eye-tracking zich op de elementen waar je bezoekers precies naar kijken.

eye-tracking
Source: Nielsen Norman Group

Net zoals bij de heatmaps, geven de warme tinten de gebieden aan waar de meeste aandacht naar toe gaat van je bezoekers/lezers. hoewel deze techniek enorm handig is, heb je er wel een bepaalde technologie voor nodig die ingewikkelder is dan die achter de heatmaps.

Belangrijkste Heatmap Features

Wanneer je kijkt zoekt naar een tool voor heatmaps, houd de volgende punten dan in je achterhoofd:

  • Behavioral Segmentation: De heatmap tool moet de mogelijkheid bieden waarmee je je bezoekers kan segmenteren en specifiek kan targeten. (bv. nieuwe bezoekers, bezoekers met conversie, bezoekers vanuit sponsored link campaigns, etc.)
  • Map Comparison: Je moet de mogelijkheid hebben om eenvoudig en visueel de resultaten van verschillende ‘maps’ te kunnen vergelijken onder verschillende segmenten.
  • Organiseren via een Page Template: Het hebben van een specifieke heatmap voor iedere pagina kan voor moeilijkheden zorgen in de analyse, vooral als je honderden productpagina’s hebt. Je moet daarom de heatmaps kunnen instellen per template van een type pagina.
  • Responsive Heatmaps: De heatmap tool moet ook werken met pagina’s bekeken vanaf een mobiel apparaat. Handelingen moet dan ook goed worden opgenomen, zoals aanrakingen, scrollen en swipen. En uiteindelijk moet je in de analyse een duidelijk onderscheid hebben tussen de gebruikers van mobiel en desktop.
  • Exportable Maps: Hierdoor kun je de verkregen resultaten eenvoudig delen met je collega’s.
  • Dynamische Heatmaps: Je moet een duidelijk overzicht hebben van kliks op dynamische elementen: drop-down menu, slider, en elementen die worden geladen met AJAX of door gebruik van een JavaScript frameworks, zoals React.js of Angular.js.
  • Retroactive Heatmap: Is je website veranderd na je laatste heatmap? De heatmap tool moet goed het verschil laten zien tussen deze vorige en de huidge situatie van je pagina.

Verhoog je Conversieratio: Combineer Heatmaps met A/B Testen

Stel je voor dat je een heatmap hebt gebruikt om een beter beeld te krijgen van hoe bezoekers navigeren op je website. Dan wil je na het identificeren van deze zwakke punten ook de benodigde veranderingen maken. De ideale oplossing daarvoor is om te gaan A/B testen.

Het idee is om verschillende variaties te creëren van webpagina’s, advertenties, landing pagina’s, etc. om vervolgens te zien hoe deze presteren.

Door het combineren van heatmaps met A/B testen kun je in drie stappen je website optimaliseren:

  • Identificeer problemen door heatmaps
  • Test potentiële oplossingen met A/B tests
  • Kies de best presterende oplossing

Gebruik heatmaps i.c.m A/B testen om:

  • Bezoekersgedrag te analyseren
  • De sterke en zwakke gebieden op een pagina te ontdekken
  • Specifieke veranderingen te maken voor conversie verhogingen