Zo gebruik je heatmaps & verhoog je de conversie

Bij het optimaliseren van de conversie van je website (en daarmee de uiteindelijke omzet) is het belangrijk om je gebruikers te leren kennen. Welke informatie willen de gebruikers? Hoe navigeren ze? Met het antwoord op deze vragen, kun je je website optimaliseren gericht op de behoeften van je doelgroep.

Inzicht krijgen in de gebruikers van je website kan op veel verschillende manieren. Een relatief goedkope en eenvoudige manier is het gebruik van heatmaps. Welke inzichten geven heatmaps en hoe kun je met deze inzichten je conversie verhogen?

Welke soorten heatmaps zijn er?

Er zijn verschillende (online) tools die de heatmaps kunnen genereren, zoals MouseFlow, ClickTale of Crazy Egg. Deze online tools genereren 3 soorten heatmaps, die verschillende inzichten geven en waar je verschillende conclusies uit kan trekken. De soorten heatmaps die dergelijke online tools genereren zijn:

Klik-heatmaps

In een klik-heatmap zie je waar de gebruikers van je website hebben geklikt. Door de de kleuren van de heatmap wordt het duidelijk op welke elementen relatief veel, of juist weinig wordt geklikt. Deze heatmap brengt daardoor duidelijk naar voren welke elementen je doelgroep als belangrijk beschouwt.

 

Beweging-heatmaps

Een beweging-heatmap laat zien hoe de gebruikers hun muis over de website bewegen. Uit meerdere onderzoeken is gebleken dat de beweging-heatmap heel dicht in de buurt van eye-tracking komt. Met deze heatmap kun je dus nagaan welke onderdelen van je website opvallen en welke eigenlijk niet gezien worden.

 

Scroll-heatmaps

De scroll-heatmap geeft aan hoe ver gebruikers op de website naar beneden scrollen. Door deze heatmap krijg je dus inzicht in het percentage van gebruikers dat bepaalde elementen onder de vouw wel of niet ziet.

 

De combinatie van verschillende heatmaps
Uit de verschillende heatmaps zijn hele nuttige inzichten te verkrijgen. Door verschillende soorten heatmaps met elkaar te combineren, krijg je nóg diepere inzichten. Door een scroll-heatmap en een klik-heatmap (of beweging-heatmap) te combineren, kun je nagaan welk percentage van de gebruikers die een element in beeld hebben, deze ook daadwerkelijk hebben gebruikt. Verderop in dit artikel licht ik dit verder toe aan de hand van een voorbeeld.

Hoe verkrijg je nuttige inzichten uit heatmaps?

Bij het optimaliseren van je website is het belangrijk om gestructureerd aan de slag te gaan. Met structuur zorg je ervoor dat je de verwachtingen, die jij en de mensen om je heen hebben, ook daadwerkelijk waar kan maken.

Er zijn verschillende methoden om inzicht te krijgen in de mogelijke verbeteringen. Het analyseren van heatmaps valt onder het onderzoeken van een website. Hier krijg je inzichten uit die zichzelf nog moeten ‘bewijzen’. Het bewijzen van deze verbeteringen doe je met behulp van A/B-testen.

Hieronder de stappen van gestructureerd optimaliseren met behulp van heatmaps:

1. Pijnpunten website achterhalen

Voordat je een heatmap-tool los laat op je website, is het belangrijk om na te gaan op welke pagina’s van je website de meeste winst te behalen is. Duik dus eerst de data in van een tool als Google Analytics of Omniture. Zie je bijvoorbeeld dat in een cruciale stap van de customer journey het uitstappercentage (en bouncepercentage) erg hoog is? Dan weet je dat je een belangrijke pagina gevonden hebt om te optimaliseren.

2. Stel doelen op

Wat wil je bereiken met het analyseren van de heatmap(s)? In de eerste stap heb je achterhaald op welke pagina(‘s) van je website de meeste winst te behalen is, in deze stap bedenk je welke inzichten je wilt verkrijgen uit de heatmaps.

Voorbeelden van doelen:

• Achterhalen waarom er teveel gebruikers afhaken in een bepaalde stap van de funnel.
• Inzicht krijgen in het deel van de bezoekers dat een bepaald element op de website gebruikt.
• Het achterhalen of de focus van gebruikers overeenkomt met het doel van de pagina.

3. Heatmap-tool z’n werk laten doen

Zoals beschreven zijn er verschillende tools die heatmaps kunnen genereren. Zorg dat je vooraf goed op de hoogte bent van de functionaliteiten van de verschillende tools en maak op basis hiervan een keuze die aansluit bij je doelen. Let hierbij ook op het maximale aantal opnamen dat in de verschillende abonnementen zit.

4. Heatmap(s) analyseren

Bij het analyseren van de heatmaps is het belangrijk je doel goed in het achterhoofd te houden.

Voorbeeld:
Doel: Waarom haken veel mensen af in deze stap?
Heatmap:

 

 

 

 

 

Inzicht: Veel gebruikers haken af bij de vraag naar de bouwaard van de woning. Dit kan betekenen dat de vraag te lastig is of dat mensen in deze fase nog niet toe zijn aan het beantwoorden van deze vraag.

Naast dat je op zoek gaat naar de antwoorden op het gestelde doel, zul je ook veel nieuwe inzichten kunnen krijgen waar je vooraf niet over nagedacht hebt.

5. Hypotheses opstellen

Stel op basis van je inzichten hypotheses op. Hiermee kun je in de volgende stap verifiëren of je inzichten ook resulteren in een daadwerkelijke verbetering. Een juiste hypothese bestaat uit de volgende elementen:

• Een attribuut
• Een vergelijking
• Een meetbare uitkomst

Voorbeeld hypothese:
Het toelichten van wat de bouwaard van de woning inhoudt zal zorgen voor een toename van 10 procent in het aantal ingevulde formulieren.

6. Verkregen inzichten testen

Met de heatmaps zijn inzichten verkregen op welke punten de website verbetering mogelijk is. Om dit ‘probleem’ op te lossen, zijn vaak meerdere ‘verbeteringen’ mogelijk. Om erachter te komen of dit echt verbeteringen zijn en welke verbetering het beste werkt, is A/B-testing noodzakelijk.

Hierbij is het belangrijk dat je ook van de geteste variant(en) een heatmap laat genereren, om te verifiëren of de opgestelde verbeteringen, naast bijvoorbeeld omzetstijging, ook visueel voor een verbetering lijken te zorgen.

Welke inzichten geven heatmaps? (voorbeelden)

Naast dat elke heatmap apart nieuwe inzichten geeft, kun je ook inzichten halen uit een combinatie van heatmaps. Hieronder twee voorbeelden waar inzichten verkregen kunnen worden uit de verschillende heatmaps en wat een mogelijke optimalisatie-oplossing is.

Belangrijke informatie

Probleem:
In het onderstaande voorbeeld zien we dat de 3 blokken onderaan de pagina relatief veel klikken opleveren, gezien het feit dat ‘slechts’ minder dan 40 procent van de gebruikers ook daadwerkelijk tot aan deze blokken scrollt. Hieruit kunnen we dus opmaken dat de gebruiker behoefte heeft aan de informatie die deze 3 blokken bieden, maar dat deze te laag op de pagina gepositioneerd zijn.

Oplossing:
Door het element onderaan de pagina dat veel klikken oplevert, naar boven te plaatsen, zullen meer gebruikers het element ook zien. Wanneer deze geplaatst wordt op de locatie zoals in het verbetervoorbeeld hierboven, zal al 80 procent van gebruikers deze zien. Aan de hand van een hypothese kan in een A/B-test getest worden of dit ook daadwerkelijk zorgt voor een conversieverhoging.

Klikken op niet-klikbare elementen

Probleem:

Eén van de meest verkregen inzichten uit de klik-heatmap, is dat je inzicht krijgt in plekken op je website die niet klikbaar zijn, maar die de gebruiker wel als klikbaar aanziet. Hieruit kun je bijvoorbeeld concluderen dat de gebruikers interesse hebben in meer informatie over dit onderwerp.

Oplossing:

Door elementen waar de gebruiker van verwacht dat ze klikbaar zijn ook daadwerkelijk klikbaar te maken, wordt beter aan het verwachtingspatroon van de gebruiker voldaan. Het element kan openen in een nieuwe pagina of zoals in de voorbeeldafbeelding in een popup.

Ook hiervoor geldt dat je met een A/B test kan testen of deze extra informatie ook daadwerkelijk voor een conversiestijging zorgt.

Waar moet je op letten?

Tips om zoveel mogelijk uit je heatmaps te halen.

• Ga gestructureerd te werk door vooraf na te denken over je doelen
• Combineer verschillende heatmaps om zo tot ‘diepere’ (minder voor de hand liggende) inzichten te komen
• Test je bevindingen uit de heatmaps met A/B(/C) tests. Heatmapanalyses geven je uitsluitend hints en inzichten. Test je inzichten altijd met de juiste hypotheses. Dit voorkomt teleurstellingen.

Foto intro via Flickr/Amit Agarwal/ CC BY 2.0