Heatmaps 101: De held die elke UX-ontwerper nodig heeft
Warmtekaarten en sessieopnamen zijn een van de populairste gespreksonderwerpen binnen de designcommunity geworden. Terwijl sommige professionals vraagtekens zetten bij de privacyaspecten ervan, vinden anderen dat de manier waarop warmtekaarten werken prima is om gebruikersgegevens privé en veilig te houden.
Er is echter één ding waar iedereen het over eens is: de waarde die jij (de UX-ontwerper) haalt uit het gebruik van een tool voor warmtekaarten.
Vandaag wil ik dit onderwerp samen met jullie verkennen en begrijpen hoe je warmtekaarten kunt gebruiken om de manier waarop je gebruikerservaringen opbouwt te verbeteren.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Waar gaan warmtekaarten over?
Warmtekaarten zijn hulpmiddelen voor het volgen en visualiseren van gegevens die je kunt gebruiken om te begrijpen hoe je doelgroep met je product of website omgaat.
Warmtekaarten zijn tweedimensionale grafieken die bepaalde delen van een gebied met bepaalde kleuren markeren om nuttige informatie over te brengen. Zo heeft de overheid van Helsinki onlangs een realtimekaart gelanceerd die laat zien welke delen van de stad het drukst zijn.
Om het aantal mensen in bepaalde wijken te visualiseren, maakten ze een warmtekaart van de stad.
Hoe meer mensen zich in een bepaald deel van de stad bevinden, hoe “warmer” het op de kaart wordt gemarkeerd. Als er niets is gemarkeerd, is de betreffende wijk niet druk.
Als visualisatietools zijn warmtekaarten behoorlijk veelzijdig. Naast het visualiseren van de “hotspots” op een fysieke kaart (zoals in het bovenstaande geval van Helsinki of de weerkaarten die we op televisie zien), kun je ze dus ook boven op je gebruikersinterface plaatsen.
In dit geval kun je de delen van je interface markeren waarmee gebruikers de meeste interactie hebben. Je kunt dit vervolgens combineren met sessieopnamen voor een diepgaande analyse van de gebruikersreis en UX-onderzoek waarmee je:
- Waardevolle inzichten krijgt in hoe gebruikers omgaan met je website of mobiele app.
- Begrijpt wat je kunt doen om de aandacht van je gebruikers beter te trekken.
- Nieuwe mogelijkheden identificeert om je UX te optimaliseren en je belangrijkste statistieken te verbeteren (het conversiepercentage verhogen, de CTR van je call-to-actionknoppen verbeteren, enzovoort).
Warmtekaarten zijn dus een geweldig hulpmiddel voor zowel UX-ontwerpers als productmanagers om te onderzoeken hoe gebruikers met hun producten omgaan en deze te verbeteren.
Populaire tools voor warmtekaarten
Laten we nu bekijken hoe je een warmtekaart voor je product kunt maken. Het web staat vol met analysetools die gebruikersinteracties in je UI-ontwerp kunnen volgen en de pagina-elementen kunnen markeren die de meeste aandacht krijgen.
De bekendste zijn Hotjar, Mouseflow, Fullstory, Crazy Egg en andere.
Maar ik wil hier niet echt diep op ingaan, omdat we een speciale samengestelde lijst met tools voor warmtekaarten hebben die je in plaats daarvan kunt bekijken.
4 belangrijke soorten warmtekaarten voor productontwerpers
Wat we een “warmtekaart” noemen, is niet één soort visuele informatie die je gebruikt om je UX te analyseren. In plaats daarvan is “warmtekaart” een overkoepelende term voor verschillende visuele hulpmiddelen die volgens hetzelfde algemene principe werken: bepaalde gebieden in je UX met verschillende kleuren markeren.
Ik wil niet alle verschillende soorten warmtekaarten doornemen, omdat veel ervan simpelweg nutteloos zijn voor product- en UX-ontwerpers. Laten we in plaats daarvan kijken naar vier soorten die ons designteam het nuttigst vindt.
1. Klikkaarten
Klikkaarten zijn waarschijnlijk het eerste waar je aan denkt wanneer warmtekaarten ter sprake komen. Het is de populairste soort warmtekaart die er is en je vindt deze in vrijwel alle tools voor warmtekaarten en analyses (behalve Google Analytics en gebeurtenisgebaseerde tools).
Een klikkaart (ook wel klik-warmtekaart genoemd) laat zien waarop je gebruikers in je interface hebben geklikt (bijvoorbeeld op de homepage van een website). Ze visualiseren de klikactiviteit van je doelgroep door de betreffende gebieden te markeren en kleurcodering te gebruiken om aan te geven welke delen van je UX “heet” of “koud” zijn.
Zo ziet de klikkaart van de carrièrepagina van Hotjar eruit.
Door de klikkaart hier te bekijken, kunnen we het volgende zien:
- Een rood “heet” gebied bij de belangrijkste CTA: “Bekijk openstaande vacatures”.
- Een beetje “warme” (gele) activiteit rond de pijlknop rechts, waarmee de uitgelichte afbeelding op de pagina wordt gewijzigd.
- Ook op de pijl links is een beetje activiteit (blauw) te zien.
Op de rest van het scherm zijn geen markeringen te zien. Dat vertelt ons dat dit gebied “koud” is en dat niemand op die gebieden heeft geklikt.
De “hete” markering op de belangrijkste CTA vertelt ons daarentegen dat veel gebruikers (waarschijnlijk de meesten, afgaand op de “hitte”) erop klikken. Vervolgens zien we de warme gebieden rond de pijlknoppen, die aangeven dat een klein deel van de gebruikers ook door de uitgelichte afbeeldingen navigeert.
Hoe gebruik je heatmaps van dit type? A/B-testen van je CTA’s!
Er zijn veel verschillende toepassingen voor klikkaarten. Je kunt ze bijvoorbeeld gebruiken om inzicht te krijgen in de effectiviteit van de plaatsing, tekst en dergelijke van je CTA. Mijn productontwerpers en ik gebruiken heatmaps echter graag om een andere reden: om onze CTA’s en andere ontwerpelementen A/B te testen.
Laat me deze toepassing illustreren aan de hand van een voorbeeld. Stel dat je verantwoordelijk bent voor de webapplicatie van ChatGPT en dat je problemen ondervindt doordat gebruikers geen nieuwe chats aanmaken en binnen één chat met de AI praten.
Na het bekijken van de heatmap zie je dat de knop “Nieuwe chat” bovenaan je zijbalk koud is (er is niets gemarkeerd).
Je neemt al snel aan dat dit komt door de kleur van de CTA, die hetzelfde is als de achtergrond van de zijbalk. Daarom voer je een A/B-experiment uit waarbij je de achtergrondkleur in variant A verandert in groen en de kleur in variant B “laat zoals die is”.
Nadat een bepaald aantal gebruikers met beide varianten heeft geïnterageerd, kun je de klikheatmap van elke variant openen en ze naast elkaar vergelijken om te zien welke variant een “hetere” knop voor Nieuwe chat heeft.
Vervolgens kies je de variant waarop op basis van je heatmapanalyse het vaakst op de CTA is geklikt.
2. Scrollkaarten
Het in kaart brengen van gebruikersklikken is geweldig, maar vertelt niet altijd het hele verhaal.
Als je klikkaart bijvoorbeeld laat zien dat je ergens onderaan je scherm een slecht presterende knop hebt, betekent dat niet noodzakelijkerwijs dat er een probleem is met de tekst, kleur of andere factoren van je CTA. Misschien is je CTA juist heel goed, maar scrollen mensen eenvoudigweg niet door de pagina om hem te zien.
Hier komen scrollkaarten (ook wel scrollheatmaps genoemd) van pas. In tegenstelling tot het vorige type, dat gebruikersklikken op je gebruikersinterface markeert, laten scrollkaarten zien hoeveel tijd gebruikers in elk gedeelte van je gebruikersinterface doorbrengen en hoe ze scrollen.
Afhankelijk van de tijd die in elk gedeelte wordt doorgebracht, wordt de pagina gemarkeerd in rood (veel tijd doorgebracht), oranje/geel (gemiddeld veel tijd doorgebracht) en groen/blauw (weinig tijd doorgebracht).
Laat me dit demonstreren aan de hand van nog een Hotjar-voorbeeld.
De afbeelding hierboven toont een van de oudere versies van de pagina “over ons” van Hotjar. Op basis van de gegevens van de scrollheatmap van deze pagina kunnen we concluderen dat:
- Al je gebruikers het bovenste deel van je pagina hebben gezien (gemarkeerd in rood). Logisch, toch?
- Vervolgens zien we dat ongeveer 75% van hen een stukje naar beneden heeft gescrold om de logo’s te bekijken van bedrijven die Hotjar gebruiken (het gedeelte met de logo’s is geel).
- Ten slotte is het onderste deel van de pagina groen, wat betekent dat slechts een deel van je gebruikers zo ver naar beneden heeft gescrold. De lijn direct boven het Glassdoor-logo vertelt ons dat slechts 57% van de gebruikers naar dat punt heeft gescrold.
Dit was een klassiek geval waarbij het bovenste deel rood is, het middelste deel geel en het onderste deel groen. In de praktijk kun je echter scrollkaarten zien waarop een specifiek gedeelte lager op je scherm goed presteert (bijvoorbeeld het gedeelte met je prijsplannen), terwijl je gebruikers de inhoud erboven en eronder negeren.
Hoe productontwerpers scrollkaarten gebruiken: contentoptimalisatie
Net als klikkaarten zijn scrollkaarten veelzijdige hulpmiddelen die je om verschillende redenen kunt gebruiken. De populairste toepassing ervan is echter het optimaliseren van de plaatsing van je content.
Zoals ik al eerder vermeldde, presteren bijvoorbeeld de prijsgedeelten op je webpagina erg goed. Dat betekent dat mensen snel door je content scrollen, vervolgens je prijsgedeelte opmerken, stoppen, het lezen en verder scrollen.
Dankzij dit gedragspatroon kunnen we het prijsgedeelte strategisch in het midden of onderaan onze pagina plaatsen. We doen dit om ervoor te zorgen dat mensen door de hele pagina scrollen (en enkele belangrijke boodschappen voor hen opmerken) voordat ze informatie over onze prijsplannen vinden.
Onze strategie hier is vergelijkbaar met die van supermarkten bij het plaatsen van zuivelproducten en bakkerijproducten. Beide zijn meestal producten die je vrij vaak koopt. Daarom plaatsen ze deze aan de tegenovergestelde kant van het gebouw, waardoor je door de hele supermarkt moet lopen om ze te pakken.
De gedachte hierachter is dat je onderweg naar de zuivelafdeling waarschijnlijk andere producten in de schappen zult opmerken en die zult kopen.
3. Bewegingskaarten
Scrollkaarten geven je een overzicht op hoog niveau van naar welke secties je gebruikers kijken. Klikkaarten zijn daarentegen wat gedetailleerder als het gaat om het aangeven op welk exact element de gebruiker heeft geklikt.
Er is echter behoefte aan iets op “middelhoog niveau” dat je kan vertellen hoe mensen door de informatie en UI-elementen binnen een specifieke sectie van je pagina navigeren.
Hier kun je gebruikmaken van bewegingskaarten. Zoals de naam al suggereert, houdt dit type warmtekaart de bewegingen van de muiscursor over je interface bij.
Net als bij andere kaarten worden de plekken in de interface gemarkeerd met een reeks kleuren (van blauw tot rood), waarbij blauw weinig muisbeweging over dat gebied betekent (en rood veel).
Laten we eens kijken hoe dit eruitziet in een blogartikel.
De kaart laat hier zien dat een klein deel van de gebruikers met hun muis over de titel en de eerste kop van het artikel beweegt. De meerderheid houdt de muis echter in de buurt van het zoekgedeelte in de rechterbovenhoek.
Hoe productontwerpers bewegingskaarten gebruiken: aandacht voor bepaalde elementen volgen
Het komt vaak voor dat bepaalde aspecten van onze UI niet klikbaar zijn, maar toch erg belangrijk zijn. We willen er dan zeker van zijn dat onze gebruikers ze hebben gezien.
Een voorbeeld hiervan is onze lijst met functies op de prijspagina. We willen misschien begrijpen aan welke functies gebruikers de meeste aandacht besteedden bij het bekijken van onze prijstabel.
Hiervoor kunnen we gebruikmaken van de menselijke gewoonte om met de muis over de dingen te bewegen die we op dat moment lezen of scannen. Zo kunnen we een muisbewegingskaart maken die ons vertelt naar welke functies gebruikers het meest kijken op onze prijspagina.
4. Woedeklikkaarten
Er zijn gewone klikken en er zijn woedeklikken.
Dit gebeurt wanneer tekortkomingen in je UX ertoe hebben geleid dat gebruikers boos worden en agressief en herhaaldelijk op een van je UI-elementen klikken omdat:
- Ze denken dat het klikbaar is, maar dat is het niet.
- Het is klikbaar, maar je product doet niets nadat de gebruiker erop heeft geklikt.
De belangrijkste reden achter het eerste geval is het ontwerpen van UI-elementen die geen knoppen of links zijn, maar er wel zo uitzien.
Wat het tweede geval betreft, kan het zijn dat je te maken hebt met:
- Een bug of crash waardoor je product de actie niet uitvoert die de betreffende knop zou moeten uitvoeren.
- Alles werkt goed, maar er ontbreekt feedback vanuit de UX. Dus ook al heeft de gebruiker met behulp van je knop succesvol gedaan wat hij wilde, je hebt hem dat niet laten weten.
- Je product is bezig met het uitvoeren van de actie die de gebruiker heeft aangevraagd, maar het proces is traag. Gebruikers ergeren zich daar óf aan, óf je hebt de gebruiker niet laten weten dat de actie wordt uitgevoerd.
Hoewel gewone klikkaarten de woedeklikken ook registreren (het zijn tenslotte gewoon klikken), kun je de woedeklikken niet onderscheiden van je gewone klikken. Daardoor trek je onjuiste conclusies uit je gegevens.
Als je knop bijvoorbeeld niet werkt en mensen er woedend op klikken, zal je gewone klikkaart je vertellen dat mensen die functie actief gebruiken, terwijl de werkelijkheid het tegenovergestelde is.
Visueel zijn woedeklikkaarten hetzelfde als gewone klikkaarten. Het enige verschil is dat veel rode plekken op een gewone klikkaart goed nieuws zijn, maar op je woedeklikkaart slecht nieuws betekenen.
Hoe productontwerpers bewegingskaarten gebruiken: slechte UX herkennen
Er bestaat geen product met een perfecte UX. Je eindigt altijd met vreselijke elementen of ervaringen (zelfs als je denkt dat dat niet zo is).
Woedeklikkaarten zijn uitstekend geschikt om verschillende soorten van deze slechte ervaringen te herkennen, waaronder slechte UX-feedback, slecht elementontwerp en andere problemen.
Warmtekaarten zijn de beste vrienden van UX-ontwerpers
Op basis van de ervaring van mijn productontwerpteam en mijzelf behoren warmtekaarten van websites tot de nuttigste hulpmiddelen voor het uitvoeren van bruikbaarheidstests en het bestuderen van gebruikersgedrag.
Met hun hulp kunt u kwantitatieve inzichten verkrijgen (waaronder hoe ze het gebruiken op desktop- en mobiele apparaten) in de effectiviteit van uw webdesign.
U kunt deze inzichten vervolgens analyseren en hiaten in uw ontwerp en functionaliteit identificeren die u moet opvullen om ervoor te zorgen dat uw product, website, e-commerceplatform of landingspagina gebruiksvriendelijk is.
Vergeet niet u te abonneren op onze nieuwsbrief voor meer bronnen en handleidingen over productmanagement, plus de nieuwste podcasts, interviews en andere inzichten van marktleiders en experts.
