8 voorbeelden van warmtekaarten voor datagedreven productmanagement
Waarschijnlijk de belangrijkste eigenschap van een goede productmanager is het vermogen om zich in gebruikers te verplaatsen. Om die vaardigheid te ontwikkelen, besteden PM's uren aan gebruikersinterviews en aan het analyseren van de gegevens achter gebruikersgedrag.
Maar er is nog een andere manier om je intuïtie voor gebruikers aan te scherpen: door te analyseren hoe gebruikers met je product omgaan via warmtekaarten.
Warmtekaarten zijn slechts een van de vele tools voor gebruikersonderzoek die helpen om wrijving, intentie en kansen in de gebruikersreis bloot te leggen. Ze vallen ook onder de noemer productanalyse en helpen je om verder te kijken dan ijdelheidsstatistieken en te zien wat gebruikers daadwerkelijk doen.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Als je hier bent beland, ben je waarschijnlijk al nieuwsgierig naar de voordelen van warmtekaarten, of ben je op zoek naar praktijkvoorbeelden om de investering te rechtvaardigen.
Hoe dan ook, je bent hier aan het juiste adres. Laten we de verschillende soorten warmtekaarten uiteenzetten en bekijken hoe je ze kunt gebruiken om je productdoelen te behalen.
#1: Klikkaarten en tikkaarten
We beginnen met de populairste variant: de kaart van klikken (voor desktopinterfaces) of tikken (voor mobiele interfaces).
Klikkaarten zijn een visuele weergave van de manier waarop je gebruikers op elementen in je interface klikken. Het is eenvoudigweg een schermafbeelding van je gebruikersinterface waarin delen ervan met verschillende kleuren zijn gemarkeerd.
Als je warmtekaarttool een bepaald element in je interface markeert, betekent dit dat een gebruiker (of meerdere gebruikers) erop heeft geklikt. De kleur laat daarentegen zien hoeveel klikken het specifieke element heeft ontvangen.
Warmtekaarttools gebruiken meestal kleuren uit de temperatuurschaal.
Je ziet warmere kleuren uit dit verloop voor gebieden waarop veel wordt geklikt en koelere kleurmarkeringen voor gebieden die weinig aandacht krijgen.
Zo ziet de datavisualisatie van een tikkaart eruit voor een mobiele app waarmee je je financiën kunt beheren.
We zien dat de gebieden die het bedrag per transactie aangeven rood zijn gemarkeerd. Dit betekent dat veel mensen erop klikken (waarschijnlijk om de transactie uit te vouwen en de details te bekijken).
Het rekeningsaldo bovenaan is daarentegen groen gemarkeerd, wat aangeeft dat maar weinig mensen erop klikken.
Een klikkaart gebruiken
Klikkaarten bevatten veel bruikbare inzichten. Door te kijken naar de gebieden waarop gebruikers klikken, kun je veel leren over hun gedrag.
Als je bijvoorbeeld een app voor een dierenasiel beheert met een donatiepagina waarop gebruikers je asiel financieel kunnen steunen, kun je een klikkaart gebruiken om te zien welke donatieoptie het beste presteert.
Op basis van de bovenstaande tikkaart kunnen we zeggen dat de opties $10 en “Anders” veruit de populairste keuzes zijn bij het kiezen van het donatiebedrag.
Een belangrijk inzicht dat we hieruit halen, is dat er waarschijnlijk een donatiebedrag bestaat dat niet in de lijst staat (bijvoorbeeld $1) en dat mensen op “Anders” klikken om dat bedrag in te voeren.
Het is dus waarschijnlijk een goed idee om te bekijken welke bedragen mensen in het gedeelte “Anders” invoeren, de populairste bedragen te vinden en ze aan onze lijst toe te voegen.
#2: Scrollkaarten
Zoals de naam al suggereert, kun je met dit type warmtekaart het scrollgedrag van je gebruikers analyseren.
Scrollkaarten gebruiken ook kleurcodering op basis van de temperatuurschaal. In plaats van punten in je interface te markeren waarop mensen hebben geklikt, markeren ze volledige secties op je pagina op basis van het aantal mensen dat naar dat punt heeft gescrold en die sectie heeft gezien.
Net als bij de andere warmtekaarten krijg je warme kleurmarkeringen als veel mensen naar die sectie scrollen en deze bekijken, en koele kleuren als maar weinig mensen dat doen.
Een scrollkaart gebruiken
Scrollkaarten zijn geweldig om de positie van bepaalde elementen of secties op je pagina te optimaliseren en problemen met het gebruik of de betrokkenheid bij deze secties op te lossen.
Laten we een typische probleemanalyse doornemen door de scrollkaart van de prijspagina van een SaaS-dienst genaamd Nelio te bekijken.
Stel dat je problemen hebt met je concurrentiepositie. Om de een of andere reden geven mensen er de voorkeur aan zich bij je concurrenten aan te melden. Wanneer je vraagt waarom, zeggen ze dat de andere tool een functie voor het volgen van meerdere doelen had en die van jou niet.
Het probleem is echter dat je deze functie wel hebt. Je moet nu dus begrijpen waarom mensen deze niet tegenkomen.
Wanneer je naar de scrollkaart van je prijspagina kijkt, zie je dat de overgrote meerderheid van je gebruikers helemaal niet door de pagina scrollt. Vervolgens merk je dat de beschrijving van je functie voor het volgen van meerdere doelen onder de vouw en in de blauwe zone staat. Dit betekent dat slechts enkele van je gebruikers scrollen en erover lezen, wat kan gelden voor de meeste tools voor gebruikersgedragsanalyse.
Probleem geïdentificeerd! Om dit op te lossen, kun je overwegen de functies uit je sectie ‘Alle abonnementen bevatten’ als extra elementen aan je prijslijsten toe te voegen. Zorg er daarbij voor dat ze boven de vouw verschijnen, zodat mensen ze zonder te scrollen kunnen zien.
#3: Hoverheatmaps
Dit type heatmap, ook wel een bewegingskaart genoemd, volgt de positie van de muis, zodat je het ‘bewegingsgedrag’ van je gebruikers binnen een interface kunt visualiseren.
In de meeste gevallen gaan we er bij het gebruik van hoverheatmaps van uit dat gebruikers waarschijnlijk naar het element kijken waar hun cursor zich op bevindt. Door muisbewegingen te volgen, leggen we dus een verband met wat mensen bekijken wanneer ze door onze interface navigeren.
Visueel bestaat dit uit gemarkeerde punten (opnieuw met een kleurenschema op basis van temperatuur) voor de delen van je UI waar de muiscursor van je gebruiker zich het langst heeft bevonden. Daarnaast geven sommige heatmaptools je ook een ‘spoor’ van waar je gebruikers doorgaans beginnen en hoe ze zich door je interface bewegen.
Zo zien deze sporen eruit.
Dit is de heatmap voor muistracking van waarschijnlijk een van de beste UX-interfaces ter wereld: de website van Apple (zij zijn tenslotte de thuisbasis van de eerste UX-ontwerpers in de geschiedenis). Deze sporen laten zien dat mensen de landingspagina van MacOS Snow Leopard beginnen te verkennen door eerst de fascinerende katachtige zelf te bekijken, voordat ze de titel lezen en verdergaan met de andere elementen van de landingspagina.
Een hoverkaart gebruiken
Een van de interessante manieren waarop je een bewegingskaart kunt gebruiken, is het identificeren van afleidingen voor gebruikers.
Als je bijvoorbeeld verantwoordelijk bent voor het optimaliseren van de pagina met zoekresultaten van Amazon (het doel is dat gebruikers op een product klikken dat Amazon voor hen heeft gevonden), kun je naar de hoverheatmap kijken en zien dat de meerderheid van de gebruikers eerst naar een van je banners gaat kijken (bijvoorbeeld een soort aankondiging), voordat ze verdergaan met het bekijken van je zoekresultaten.
Dit leidt je gebruikers sterk af en kan de kans verkleinen dat ze op zoekresultaten klikken. Je verwijdert die banner dan ook of maakt deze minder visueel prominent in je interface.
#4: Aandachtsheatmaps
Tot nu toe hebben we het gehad over drie analysetools waarmee je je gebruikers visueel kunt analyseren: via klikken, muisbewegingen en scrollen op de pagina.
Hoewel elk van de bovenstaande opties ons waardevolle informatie kan bieden, kan het misleidend zijn om slechts op één ervan te vertrouwen. Als je gebruikersgedrag afzonderlijk bekijkt zonder de juiste context, krijg je mogelijk geen voldoende breed beeld van wat er werkelijk gebeurt.
Productteams gebruiken daarom doorgaans al deze typen tegelijkertijd en combineren ze de inzichten uit alle drie voordat ze deze analyseren en conclusies trekken. Toch is deze oplossing ook niet perfect, omdat je waarschijnlijk drie keer zoveel tijd nodig hebt om de volledige analyse uit te voeren.
Gelukkig kunnen moderne tools voor heatmapvisualisatie, dankzij de opkomst van AI-modellen en geavanceerde algoritmen, de informatie uit gebruikersklikken, muisbewegingen en scrollgedrag combineren in één heatmap.
Dit vierde type wordt de aandachtsheatmap genoemd, omdat deze in essentie laat zien welke delen van de UI de meeste aandacht van je gebruikers krijgen. Visueel lijkt deze sterk op een klikkaart, waarbij bepaalde elementen in je UI in verschillende kleuren uit het temperatuurskleurpalet worden gemarkeerd op basis van de hoeveelheid aandacht van gebruikers.
#5: Geografische heatmaps
Heatmaps bestaan al om ons heen sinds lang voordat mensen die techniek op gebruikersinterfaces gingen toepassen. Een van de bekendste traditionele soorten heatmaps is de geografische kaart.
In dit geval markeer je bepaalde delen op een kaart op basis van het type gegevenspunt dat je hebt geselecteerd. Als je bijvoorbeeld de geografische spreiding van toeristische locaties in Frankrijk wilt analyseren, kun je deze geografische heatmap gebruiken.
Op de bovenstaande kaart zie je het aantal hotelbedden (voornamelijk gericht op toeristen) per vierkante kilometer. Zoals we kunnen zien, zijn Corsica, de Franse Alpen en de Côte d’Azur de duidelijke winnaars in deze categorie.
Een geografische heatmap gebruiken
Het is interessant om naar de toeristische datasets van Frankrijk te kijken, maar kunnen deze heatmaps me helpen mijn digitale product te analyseren? Laat me een voorbeeld geven.
Laten we bij het onderwerp toerisme (en Frankrijk) blijven en ons voorstellen dat je een online dienst voor kortetermijnverhuur beheert (iets vergelijkbaars met Airbnb). Je hebt het idee om promotiemateriaal voor lokale festivals in Franse steden te maken en te verspreiden, zodat meer mensen via jouw dienst hotels daar boeken.
De eerste vraag die bij je opkomt is: met welke stad of welk festival moet je beginnen?
Om daar antwoord op te krijgen, kun je een geografische heatmap maken die de spreiding toont van huurwoningen en -appartementen die jouw dienst gebruiken.
Als je naar de kaart kijkt, zie je dat je dienst behoorlijk populair is in Zuid-Frankrijk. Misschien moet je dus overwegen om te beginnen met het promoten van de festivals in de Provence en aan de Côte d’Azur.
#6: Kaarten met woedeklikken
Dit is een subtype van klikkaarten dat alleen de gevallen filtert en toont waarin je gebruikers uit frustratie ergens op hebben geklikt. Heatmappingtools herkennen iets doorgaans als een woedeklik (of een dode klik) wanneer de gebruiker meerdere keren achter elkaar op hetzelfde element blijft klikken.
Een kaart met woedeklikken gebruiken
Kaarten met woedeklikken zijn geweldige hulpmiddelen om problematische gebruikerservaringen te identificeren. Het kan gaan om iets dat eruitziet alsof je erop kunt klikken, maar dat niet kan, iets dat niet intuïtief is, of gewoon een knop die niet werkt.
Als we bijvoorbeeld een gegevensanalyse van woedeklikken zouden uitvoeren op een van de pagina’s van Iterate, zouden we zeker op minstens twee plekken woedeklikken moeten zien. Dit is waarom:
Is het je opgevallen dat de twee tekstelementen blauw zijn gemarkeerd? Raad eens: het zijn geen links. Het is gewoon normale tekst die blauw is gekleurd. Veel bezoekers van Iterate (ikzelf inbegrepen) hebben geprobeerd op deze tekstelementen te klikken, in de verwachting dat ze naar een andere pagina zouden doorverwijzen.
Natuurlijk gebeurt er niets nadat je erop hebt geklikt, en daardoor kan de gebruiker gefrustreerd raken en beginnen met ‘woedeklikken’.
De les die we uit het onderzoeken van de kaart met woedeklikken van deze pagina kunnen trekken, is dat je er bijvoorbeeld voor moet zorgen dat je tekst er niet uitziet als hyperlinks. Je kunt misschien een A/B-test uitvoeren met verschillende kleuren en nagaan of je aanname dat blauwe tekst woedeklikken veroorzaakt, juist of onjuist is.
#7: Heatmaps voor oogtracking
Tot nu toe hebben we hoverkaarten gebruikt om te begrijpen waar onze gebruikers naar hebben gekeken tijdens het bekijken van onze webpagina. We gaan ervan uit dat de ogen van gebruikers meestal naar de cursor kijken. De beweging van de cursor over je interface kan je dus vertellen waarop de ogen van je gebruikers zijn gericht.
Dit is een veelgebruikte manier om aandacht te analyseren. De heatmapgegevens die deze methode oplevert, zijn echter niet perfect, omdat gebruikers niet altijd naar hun cursor kijken.
Als je nauwkeurige locatie- en numerieke gegevens wilt over waar je gebruikers naar kijken, kun je beter een heatmap voor oogtracking gebruiken.
In tegenstelling tot de andere soorten vereisen heatmaps voor oogtracking dat je gebruikers gespecialiseerde apparatuur dragen die hun oogbewegingen bijhoudt en de locatie identificeert van de elementen waarnaar ze kijken.
Dit betekent dat je je gebruikers moet uitnodigen voor speciale testsessies, ze deze trackers moet laten dragen en ze je product moet laten gebruiken. Hoewel dit veel tijdrovender en duurder is, is de kwaliteit van de gegevens die je ermee verkrijgt veel beter dan wat je uit andere soorten heatmaps van websites kunt halen.
Een oogtrackingheatmap gebruiken
Gezien de kosten van het organiseren van testsessies voor oogtracking, zul je oogtracking waarschijnlijk alleen gebruiken voor UX-optimalisatiegebieden met een grote impact.
Onderzoeken met oogtracking zijn heel gebruikelijk voor de producten van grote technologiebedrijven, waar een verbetering van 1% in de bruikbaarheid van hun producten kan leiden tot tientallen miljoenen aan omzet en ROI.
Stel je eens voor hoeveel extra ARR Amazon zou behalen als het een oogtrackingonderzoek uitvoert en de banners met uitgelichte producten zo plaatst dat het conversiepercentage met 1% toeneemt.
#8: [Bonus] Confettiheatmaps
Confettiheatmaps zijn een subtype van gewone klikheatmaps die afzonderlijke klikken tonen in plaats van het algemene gebied te markeren waar gebruikers hebben geklikt.
Het mooie van het analyseren van afzonderlijke klikken is dat je ze kunt filteren op basis van verschillende complexe datapunten.
Hier hebben we bijvoorbeeld de klikken op de CTA voor Zoeken gegroepeerd op de dag van de week waarop de klik plaatsvond.
Op basis van de gegevens kunnen we zien dat dinsdag de meeste klikken oplevert, terwijl mensen die op maandag de website bezoeken het meest afgeleid zijn (veel klikken verspreid over de hele interface).
Een confettiheatmap gebruiken
Confettiheatmaps zijn vooral nuttig wanneer je gebruikersgedrag op gedetailleerd niveau moet analyseren. In tegenstelling tot traditionele heatmaps, die geaggregeerde gegevens tonen, kun je met confettiheatmaps afzonderlijke klikken filteren op basis van parameters zoals apparaattype, verwijzingsbron of zelfs het tijdstip van de dag.
Dit type heatmap is ideaal om patronen op te sporen die anders onopgemerkt zouden blijven. Als je afrekenknop bijvoorbeeld op vrijdag meer klikken krijgt, maar op maandag veel minder, zijn je gebruikers misschien impulsieve kopers die door hun salaris worden gedreven — en is je maandagpubliek misschien nog aan het herstellen van het weekend en staart het wezenloos naar je prijspagina in plaats van te converteren.
Confettiheatmaps kunnen ook onverwachte afleidingen aan het licht brengen. Als gebruikers overal op de pagina klikken in plaats van op de plek waar je wilt dat ze klikken, zijn ze misschien in de war — of zoeken ze wanhopig naar een teken van leven. Als je navigatiemenu meer klikken krijgt dan je CTA, kan dat betekenen dat gebruikers verdwaald zijn en hopen te ontsnappen in plaats van actie te ondernemen. Je kunt inzichten uit heatmaps gebruiken om je klantreis te verfijnen, vooral wanneer je die punten van wrijving identificeert. Door te filteren op gebruikerssegment kun je zien welke groepen de meeste problemen ervaren en waar je de ervaring moet verbeteren.
Heatmaps vergroten je empathie voor gebruikers
Elk type heatmap dat we hier samen hebben ontdekt, kan je een kijkje geven in de manier waarop je gebruikers je producten verkennen en gebruiken. Als je efficiënt werkt, bieden heatmaps een snelle, laagdrempelige manier om UX-onderzoek uit te voeren voordat je investeert in diepgaandere gebruikerstests. Met hun hulp kun je de moeilijkheden die je gebruikers ervaren zien en aanvoelen, en vervolgens aan de slag gaan om deze op te lossen.
In combinatie met productanalysetools kunnen heatmaps een duidelijker beeld geven van hoe gebruikers met je product omgaan en waar ze afhaken. Als je heatmaps bijvoorbeeld combineert met tools voor sessie-opnamen, krijg je zowel het ‘wat’ als het ‘waarom’ achter gebruikersgedrag te zien.
Heatmaps zijn geweldig, maar ze zijn slechts een van de vele tools die je kunt gebruiken om empathie op te bouwen en meer te leren over de rest. Zorg er dus voor dat je je inschrijft voor onze nieuwsbrief.