Hotjar Heatmaps: hoe en waarom je het moet gebruiken!

- Robert de Kok - 12 november 2020 - Laatste update op 24 november 2020
Clickmap Maatwerk Online

In dit artikel

Hoe maak je bezoekersgedrag inzichtelijk? Onder andere door het gebruiken van de meest populaire functionaliteit die Hotjar biedt: het instellen van Click, Scroll en Move Heatmaps.

Inzichten vanuit deze Heatmaps gebruik je vervolgens om de inrichting van je website te optimaliseren. Iedere online marketeer komt vroeg of laat in aanraking met de tool Hotjar.

Mocht dit de eerste keer zijn dat je over Hotjar leest: het is een tool waarmee je bezoekersgedrag inzichtelijk kunt maken, maar je bezoekers ook actief en passief om feedback kunt vragen. Ook kun je bijna letterlijk over de schouders meekijken door opnames te maken van sessies.

Wat ons betreft een absolute must have in het arsenaal van een online marketeer.

Waarom je Hotjar Heatmaps moet gebruiken

  • Een extra databron om gedrag en de behoeftes van je websitebezoekers inzichtelijk te maken.
  • Antwoord op de vraag ‘Hoe gedragen mijn bezoekers zich?’. Waar Google Analytics antwoord geeft op de vraag ‘Wat doen mijn bezoekers?’.
  • Het is door het visuele aspect gemakkelijker om de data te interpreteren en hiermee aan de slag te gaan

Of men nu minder uit gaat geven of niet, het is gedurende de Corona-lockdown duidelijk geworden dat men nu juist méér online gaat kopen. Dit heeft tot gevolg dat de inkomsten van onder anderen online retailers er juist op vooruit zijn gegaan.  

In deze wordt behandeld hoe je Hotjar Heatmaps kunt gebruiken om tot waardevolle inzichten te komen.

Clickmap uit Hotjar

Voorbeeld van een Clickmap met Hotjar

Click-, Scroll en Move Heatmaps

Veruit de meest gebruikte functie van Hotjar zijn de Click-, Scroll- en Move Heatmaps. Deze functionaliteit biedt de mogelijkheid een laag over een specifieke pagina of paginatype heen te leggen. Bij paginatypes moet je denken aan pagina’s die er qua structuur hetzelfde uitzien, zoals categoriepagina’s (Product List Pages – PLP) of productpagina’s (PDP). Een enkele productpagina zal niet voldoende verkeer krijgen voor voldoende inzichten, maar bundel je deze met alle andere productpagina’s, dan wel!

Je hebt verder de mogelijkheid te kiezen uit opnames van Desktop, Tablet en Mobiel. Ben je specifiek benieuwd naar inzichten voor Mobiel, dan selecteer je enkel Mobiel.

Paginaweergaven bundelen

Het bundelen van paginaweergaven is zinvol omdat niet ieder product voldoende paginaweergaves krijgt om waardevolle inzichten te krijgen. Afhankelijk van het abonnement kun je 1.000, 2.000 of 10.000 paginaweergaves opnemen met één Heatmap. Waarbij je zult begrijpen dat hoe hoger dit aantal is, hoe dichter de inzichten bij de waarheid zullen zitten.

Click Heatmap

Deze Heatmap geeft weer waar bezoekers van de pagina op hebben geklikt.

  • Klikken zij op de Homepage vooral op een specifiek menu item?
  • Klikken zij op een Productpagina op de productspecificaties?
  • Welke filters op de categoriepagina wordt het meest aangeklikt?

Wat wellicht nog interessanter is: op welke níet aanklikbare elementen wordt er toch geklikt? Blijkbaar lijkt zo’n onderdeel van de pagina aanklikbaar, maar is dit niet mogelijk. Dit kan leiden tot frustratie – clickrage – en iemand die de website verlaat.

Wat te doen? Maak dit element wel aanklikbaar of plaats er een link achter. Of heroverweeg je design, waardoor het element niet meer aanklikbaar lijkt.

Heatmap Groepslessen van onze klant Active Health Center

In de Heatmap van een van onze klanten zagen we terug dat onder andere Groepslessen veel werd aangeklikt, maar niet aanklikbaar was. Oplossing: aanklikbaar maken door in een modal de groepslessen te tonen wanneer op groepslessen wordt geklikt.

Punten om specifiek op te letten

  • Kliks op elementen die niet aanklikbaar zijn.
  • Elementen/productingangen waar het meest op geklikt wordt. Hier zijn je bezoekers het meest geïnteresseerd in. Het is een overweging waard de delen te verwijderen waar niemand op klikt.
  • Klikken de bezoekers het meest op de elementen – bijvoorbeeld je call to action – die hen verder de funnel in leidt? Zo niet, dan zorgen andere elementen waarschijnlijk voor afleiding. Hier kun je heroverwegen deze afleiding te verwijderen en het effect hier van te meten.
  • Productingangen die laag op de pagina staan, maar relatief veel kliks krijgen. Blijkbaar zijn je bezoekers hierin geïnteresseerd. Overweging waard hen tegemoet te komen en deze productingang hoger op de pagina te plaatsen.
Clickmap van productingangen

In dit geval staat Zoekmachine Optimalisatie op de juiste plek

Scroll Heatmap

What’s in a name? Deze Heatmap geeft weer tot waar de bezoekers op je pagina(type) scrollen. Waarbij ook de gemiddelde vouw – dat is zeker nog altijd een ding – wordt weergegeven. Deze Heatmap geeft inzicht welk percentage van de bezoekers tot welk deel van de pagina scrollen.

Scrollmap in Hotjar

Voorbeeld Scroll Heatmap

Punten om specifiek op te letten

Het patroon van de regenboog 🌈, rood en zeer snel naar geel, groen, blauw en zwart, om verschillende redenen:

  • Is er sprake van een ‘valse bodem’: Is het duidelijk dat er meer content staat waar je een flinke terugval ziet in verkeer? Het design geeft hier misschien het idee dat niet verder gescrold kan worden.
  • Je content is niet boeiend genoeg om door te scrollen. Pijnlijk, maar dit komt voor.
  • Elementen die (te veel) ruimte innemen. Sliders, full screen video’s of enorme afbeeldingen. Houdt het de aandacht niet vast en neemt het te veel ruimte in, dan is er eens kans dat bezoekers niet doorscrollen maar weggaan.
  • Productingangen die laag op de pagina staan, maar relatief veel kliks krijgen. Blijkbaar zijn je bezoekers hierin geïnteresseerd. Overweging waard hen tegemoet te komen en deze productingang hoger op de pagina te plaatsen.

Alles in het donkerblauwe gedeelte (slechts 30% of minder krijgt dit in beeld):

  • Staat je call to action in donkerblauwe deel? Dan krijgt 70% of meer (!) deze niet te zien. Hierdoor kunnen ze niet verder in de funnel. Is dit het geval? Dan is het een goed idee om je call to action omhoog te plaatsen. Het advies is minimaal één call to action zo hoog mogelijk op een pagina te plaatsen, zodat iedereen deze te zien krijgt. Herhaal hem vervolgens elders op de pagina nog een keer, zodat niet teruggescrold hoeft te worden.
  • Wordt de pagina na je call to action snel donkerblauw of zelfs zwart? Geen ramp, ze scrollen dan ver genoeg om door te gaan in je funnel. Hoewel de content die onder je call to action misschien overbodig is en verwijderd kan worden.

Zeker op mobiel is het belangrijk om goed na te denken welke elementen voor komen in de viewport. Het scherm is zoveel kleiner dat grote elementen, die niet goed meeschalen vanuit desktop, zoveel ruimte in kunnen nemen dat scrollen geen nut lijkt te hebben.

Dit is één van de redenen waarom mobile first en responsive web design een flinke opkomst hebben gemaakt de afgelopen jaren.

Verschillen tussen Desktop en Mobiel

Op Desktop zien we vaak een afbeelding-links en afbeelding-rechts patroon. Op Mobiel schaalt dit vaak naar twee afbeeldingen in een viewport die niet veel toevoegen voor de bezoeker

Move Heatmap

Software aanbieders die aangeven dat de Move Heatmaps ingezet kunnen worden als vervanging van ‘eye-tracking’ software dien je vanuit ons standpunt niet te geloven.

Er zijn verschillende onderzoeken uitgevoerd waarbij opvallend genoeg de software aanbieders een sterke correlatie vinden tussen oogbewegingen en muisbewegingen en waar dus de aandacht naar uitgaat. Persoonlijk gebruiken wij deze Move Heatmaps niet, omdat het onzeker is of je iets met de data kunt.

Wij zouden nooit “all-in” gaan op basis van deze Heatmap.
Onderzoeken ter referentie: Negatieve bevinding 1 en 2. Positieve bevinding 1 (van een aanbieder) en 2 (uit 2001).

Move Heatmap

Voorbeeld van een Move Heatmap

Punten om specifiek op te letten

Wanneer je de Heatmap alsnog wilt raadplegen, let dan op het volgende:

  • Een wirwar van muisbewegingen. Dit kan door het ontbreken van focuspunten als koppen, bullet points of duidelijke secties komen.
  • Veel activiteit op één punt. Goed als dat de bedoeling is, minder goed als het een minder relevant deel is. Blijkbaar trekt dit deel dan onnodig veel aandacht.
  • Geen activiteit kan duiden op een desinteresse. Voegt dit deel iets toe, of kan je het verwijderen?

Vanzelfsprekend is voor Mobiel geen Move Heatmap beschikbaar. Wel is het mogelijk dat je op de Click Heatmap op Mobiel een duidelijk punt terug ziet komen waar bezoekers hun vinger of duim plaatsen om te scrollen.

Tip voor de pro’s: combineer de Click en Scroll Heatmaps

Wil je écht tot waardevolle inzichten komen? Leg dan de Heatmap van de kliks en het scrollen naast elkaar.

Punten om specifiek op te letten

  • Staan de belangrijkste elementen boven de gemiddelde vouw? Denk hierbij aan je call to action, de waardepropositie of je (product)aanbod. Alles wat een landing op de pagina bijdraagt aan relevantie en duidelijkheid.
  • Bevindt de lijn van de gemiddelde vouw zich op een plek die kan duiden op een ‘valse bodem’? Bijvoorbeeld wanneer deze precies onder een afbeelding valt en er nog geen nieuwe content (deels) in beeld is.
  • Valt de call to action in het gedeelte bóven de lijn van de gemiddelde vouw? Zo niet, bekijk dan of de pagina zodanig ontworpen kan worden dat deze hoger op de pagina komt te staan.
Combinatie Click en Scroll Heatmap

Combineer de Click en Scroll Heatmap voor meer inzichten

Waarom je Hotjar vandaag moet gaan gebruiken

Het is belangrijk om inzichtelijk te krijgen wát je kunt gaan optimaliseren, wil je überhaupt aan de slag gaan met het optimaliseren van je website.

Niet op basis van je intuïtie of je ‘onderbuikgevoel’, maar op basis van data. Aan de hand van data – en dus datagedreven – je website optimaliseren en je websitebezoekers en (potentiële) klanten van dienst te zijn.

Hotjar is één van de vele databronnen die je kunt inzetten om je website te optimaliseren. Waarbij de Heatmaps een zeer populaire functionaliteit zijn die wij iedereen aanraden. Uiteindelijk is het een gegeven dat over hoe meer data je beschikt, des te gefundeerder je beslissingen zijn.

Andere functionaliteiten van Hotjar

Hotjar biedt naast het creëren van Heatmaps ook de mogelijkheid on-site klantfeedback te verzamelen, onder andere middels formulieren die je actief kunt tonen. Ook kun je bijna letterlijk over de schouder meekijken van je bezoekers middels sessie opnames.

Aan de slag met Hotjar

Heb je vragen over de inzet van Hotjar om jouw website naar het volgende niveau te tillen? Neem dan contact met ons op via het contactformulier of bel ons op 010 30 30 222. We beantwoorden je vragen graag!

Robert de Kok SEA en CRO specialist

Gelezen

93 keer

Deel

Laat een reactie achter

Hoe en waarom je on-site klantfeedback moet gaan verzamelen


- 24 november 2020 - Laatste update op 26 november 2020
Gelezen 96 keer
Robert de Kok SEA en CRO specialist
Clickmap Maatwerk Online

Hotjar Heatmaps: hoe en waarom je het moet gebruiken!


- 12 november 2020 - Laatste update op 24 november 2020
Gelezen 93 keer
Robert de Kok SEA en CRO specialist
black-friday-tips-online-marketing

Ook in 2020 een succesvolle Black Friday met deze tips!


- 12 november 2020
Gelezen 52 keer
Jens van Overbeek Content Specialist