Muis-warmtekaarten: 8 manieren waarop ze je product kunnen verbeteren
Zie wat gebruikers daadwerkelijk doen, niet alleen wat ze zeggen: Enquêtes en analyses vertellen slechts een deel van het verhaal. Muis-warmtekaarten laten zien waar gebruikers aarzelen, moeite hebben of het meest betrokken zijn—zodat je vol vertrouwen datagestuurde beslissingen kunt nemen.
Geef prioriteit aan oplossingen en functies die er echt toe doen: In plaats van te gokken waar je vervolgens aan moet werken, laten warmtekaarten zien waar gebruikers tijd doorbrengen (of gefrustreerd raken), waardoor je duidelijk ziet wat als eerste aandacht nodig heeft.
Ontdek waarom gebruikers afhaken—en los het op: Niet elke uitval is hetzelfde. Warmtekaarten laten zien of gebruikers belangrijke CTA's missen, moeite hebben met formuliervelden of in de war raken—zodat je obstakels kunt wegnemen voordat ze afhaken.
Breng verborgen knelpunten in je activeringsfunnel aan het licht: Klikken gebruikers waar ze niet zouden moeten klikken? Blijven ze steken bij belangrijke stappen? Warmtekaarten brengen knelpunten aan het licht, zodat je de gebruikersreis kunt stroomlijnen en conversies kunt verhogen.
Waarschijnlijk is het interessantste en meest lonende onderdeel van het werk van een productmanager om te leren hoe gebruikers denken en handelen bij het gebruik van hun producten.
Om dit te doen, voeren we doorgaans gebruikersinterviews uit, houden we enquêtes en analyseren we onze gegevens. Er is echter nog een andere waardevolle tool in het arsenaal van een PM die je kan helpen je in je gebruikers te verplaatsen: muisheatmaps!
Vandaag wil ik de praktische toepassingen van muisheatmaps en effectieve manieren om je product te verbeteren met je doornemen.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Wat zijn muisheatmaps en hoe werken ze?
Een muisheatmap (ook wel aandachtsheatmap genoemd) is een productanalysetool die visualiseert hoe gebruikers met je interface omgaan aan de hand van hun muisbewegingen. De tool creëert een visuele overlay—doorgaans met kleurverlopen—op een schermafbeelding van je gebruikersinterface om te laten zien waar gebruikers het vaakst de muisaanwijzer boven houden, bewegen en klikken.
Dit kan je helpen vast te stellen welke elementen de aandacht trekken, waar gebruikers mogelijk aarzelen of wat volledig wordt genegeerd. Muisheatmaps zijn vooral nuttig wanneer ze worden gebruikt naast andere typen heatmaps, zoals scrollheatmaps, die vastleggen hoever gebruikers naar beneden scrollen op de pagina.
Samen geven deze tools je een vollediger beeld van gebruikersbetrokkenheid—wat ze zien, wat ze overslaan en waar hun aandacht op natuurlijke wijze naartoe gaat.
Productmanagers en UX-ontwerpers gebruiken vaak verschillende typen heatmaps om inzicht te krijgen in het gedrag van hun gebruikers, waaronder scrollkaarten, klikkaarten, gebruikersaandachtskaarten, eye-trackingheatmaps en nog veel meer voorbeelden van heatmaps. Elk type kan specifieke inzichten opleveren waarmee je gebruikersretentie kunt stimuleren en de betrokkenheid kunt vergroten. Vandaag wil ik echter dieper ingaan op één specifiek type: de muisheatmap.
Een muisheatmap is wat je een “aggregaat” zou noemen, omdat deze gecombineerde gegevens bevat van verschillende soorten gebruikersinteracties: klikgedrag, scrollgedrag en muisbewegingsgedrag.
Muisheatmaps zijn relatief nieuw in de wereld van visuele productanalyse, omdat het een lastige taak is om de gegevens van deze drie verschillende gedragstypen in één visualisatie te combineren. Het waren de opkomst van AI-modellen die analysetools in staat stelden dit te doen.
Praktische toepassingen uit de praktijk voor het optimaliseren van je product met muistracking
Nu we een algemeen begrip hebben van deze heatmaps, duiken we in verschillende praktische toepassingen uit de praktijk waarbij je iets waardevols voor je product kunt doen door je muisheatmaps te bekijken en te analyseren.
Hoe productmanagers muisheatmaps gebruiken
Hoewel het analyseren van gebruikersinteracties misschien meer iets lijkt dat aansluit bij de behoeften van UX-ontwerpers, kunnen productmanagers muisheatmaps ook gebruiken om hun eigen problemen op te lossen. Hier zijn enkele manieren waarop ik deze tool heb gebruikt om mijn producten te verbeteren.
#1: Knelpunten in je activatiefunnel vinden
Op basis van mijn ervaring met het aanpakken van activatieproblemen is funneloptimalisatie een van de meest complexe, maar ook meest impactvolle verantwoordelijkheden van een productmanager. Zelfs een bescheiden stijging van 10% in activatie kan een kettingreactie door de hele funnel veroorzaken, waardoor de conversie van Gratis → Betaald aanzienlijk toeneemt.
Activatie draait echter niet alleen om cijfers—het is een puzzel die diepgaande gedragsinzichten, iteratief experimenteren en de bereidheid vereist om aannames over de manier waarop gebruikers met je product omgaan ter discussie te stellen. De sleutel is niet alleen om meer gebruikers door de funnel te leiden, maar om echt te begrijpen waarom ze in de eerste plaats afhaken in de activatiefunnel.
Om dit te doen, gebruikt een productmanager praktisch alle tools in zijn of haar arsenaal, waaronder analyses, enquêtes enzovoort. Ook muiskaarten behoren tot deze tools. Hier is een van de vele manieren waarop ze kunnen helpen de activatie te verbeteren.
Stel je voor dat je bij Atlassian werkt en als kwartaaldoel hebt genomen om het installatiepercentage van Jira Cloud te verbeteren.
Wanneer je de activatiefunnel bekijkt met je analysetool, zie je een aanzienlijke uitval bij de stap waarin gebruikers de naam van hun Jira-instantie invoeren en hun Atlassian-website aanmaken.
Om te begrijpen wat er is gebeurd, open je mogelijk je heatmaptool en bekijk je de muisheatmap. Je ziet dat gebruikers veel tijd op de pagina doorbrengen en actief klikken op het veld voor de sitenaam en het veld “Aan de slag in Jira”.
Dit is geen normaal gedrag, aangezien je wilt dat mensen slechts één keer op elk veld klikken en niet langer dan 10-15 seconden op deze pagina blijven. Je start een onderzoek en vraagt je QA-team om te controleren wat er aan de hand is.
Wat je team ontdekt, is dat de validatie van de sitenaam (die controleert of de naam al bestaat) voor een bepaalde groep gebruikers een foutmelding geeft, ongeacht wat ze invoeren.
De reden is dat een onzichtbare Google Recaptcha denkt dat deze gebruikers bots zijn. Om dit op te lossen, overleg je met je beveiligingsteam, ontdek je dat de beveiligingsdrempel voor recaptcha hoger ligt dan nodig is en verlaag je deze.
Als gevolg daarvan geef je je gebruikers weer toegang, laat je hen hun site aanmaken en verbeter je je activatiepercentage aanzienlijk.
#2: Helpen bij het prioriteren van functies
Als het gaat om het prioriteren van functies, is de impact van die functie op je gebruikers de belangrijkste factor waar je rekening mee houdt. Je meet deze impact op basis van gegevens, je kennis van de behoeften van gebruikers (op basis van enquêtes en interviews), je intuïtie en de manier waarop gebruikers met je interface omgaan.
Dat laatste is waar je muisheatmaps van pas komen.
We keren terug naar ons Jira-voorbeeld. Stel dat je de manier waarop mensen de backlog organiseren wilt verbeteren en dat er meer dan 20 functie-ideeën voor zijn. Om deze te prioriteren op basis van de behoeften van gebruikers, bekijk je de heatmap van de backlogpagina. Na beoordeling zie je dat er veel activiteit is in het gedeelte met snelfilters.
Vervolgens ga je naar je analysetool en haal je een verdelingsgrafiek op van de snelfilters die je gebruikers het vaakst hebben toegepast. Als je naar deze gegevens kijkt, zie je dat ongeveer 50% van alle Jira-gebruikers een snelfilter aanmaakt die de taken met de status “Te doen” toont.
Een goede manier om de ervaring van je gebruikers in dit geval te verbeteren, zou zijn om een speciale filterknop voor statussen toe te voegen. Stel dat dit functie-idee al op je lijst met verbeteringen stond; dan gebruik je dit inzicht om het een hogere prioriteit te geven en het naar de top van de backlog van je team te verplaatsen.
#3: Optimalisatie van het conversiepercentage
Wat complexiteit betreft, kan optimalisatie van het conversiepercentage (CR) gemakkelijk concurreren met activatiefunnels. Ik heb maanden besteed aan het analyseren van het CR en vergelijkbare statistieken voor mijn producten, aan het toevoegen van functies om dit te verbeteren, aan het vaststellen dat ze niet werken, aan het toevoegen van iets anders en aan het herhalen van deze cyclus totdat ik iets bouwde dat het conversiepercentage daadwerkelijk verhoogde.
Net als bij activatie zijn muisheatmaps een effectief hulpmiddel om conversie-uitdagingen voor je producten te analyseren.
In de meeste gevallen is het belangrijkste voordeel van deze tool dat je gevallen kunt identificeren waarin mensen op de verkeerde CTA's klikken en de CTA's negeren die tot conversie leiden. Laat me dit demonstreren aan de hand van de productpagina van een winkel voor commerciële keukenapparatuur.
Stel dat we de heatmap van deze webpagina bekijken. Waarschijnlijk zien we dat een bepaald aantal mensen op de knop “Nu chatten” boven de belangrijkste call-to-action (product bekijken) klikt. Ik begrijp dat het bedrijf deze heeft toegevoegd om gebruikers ervan te overtuigen dat hun producten de goedkoopste op de markt zijn.
Het probleem is echter dat klikken op “Nu chatten” de klantreis onderbreekt van gebruikers die het product bekijken en het willen kopen, waardoor het conversiepercentage aanzienlijk daalt.
Mijn suggestie zou hier zijn om dit bericht en deze CTA naar een minder prominente plek op de pagina te verplaatsen, zodat de klantreis van gebruikers niet wordt onderbroken.
#5: A/B-testen om functies te valideren
Een andere nuttige toepassing van muisheatmaps is het valideren van functies via A/B-testen. Heatmaps kunnen hierbij een waardevolle gegevensbron zijn, omdat ze visueel laten zien welke verbeteringen (of het ontbreken daarvan) er zijn in de manier waarop gebruikers met je functie omgaan.
Wat je in dit geval doet, is de A/B-test uitvoeren met je functie ingeschakeld voor variant A en uitgeschakeld voor variant B. Vervolgens zorg je ervoor dat je heatmappingtool gebruikersinteracties op beide varianten bijhoudt, zodat je de muisheatmap van elke variant naast elkaar kunt vergelijken.
Door ze te bekijken, kun je veranderingen in het gedrag van gebruikers gemakkelijk herkennen en zien of je nieuwe functie de impact had waarop je hoopte.
Een voorbeeld hiervan is het toevoegen van een knop ‘Alles downloaden’ op de bestandsbrowserpagina van je cloudopslagproduct. Als mensen actief met die knop gaan werken in plaats van elk afzonderlijk bestand in hun opslag handmatig te downloaden, is je nieuwe functie een succes.
Hoe UX-ontwerpers muis-heatmaps gebruiken
Heatmaps zijn een fantastisch hulpmiddel om gebruikersinteracties te onderzoeken. Daarom beschouw ik ze als een van de onmisbare hulpmiddelen in het arsenaal van UX-ontwerpers. Hier zijn enkele manieren waarop mijn UX-team muis-heatmaps heeft gebruikt om het ontwerp te verbeteren.
#6: Het voltooiingspercentage van formulieren verbeteren
Welk soort product je ook hebt, de kans is groot dat je ten minste één formulier in je activerings- of monetisatiefunnel hebt. Bovendien zul je op basis van mijn ervaring waarschijnlijk mensen/conversies verliezen bij de funnelstap waarin ze dit formulier invullen.
De belangrijkste reden waarom je hen verliest, is waarschijnlijk een slechte gebruikerservaring, waardoor ze zich vervelen of gefrustreerd raken. Om te begrijpen of dit bij je formulier gebeurt en om het op te lossen, voeren productontwerpers gebruikerstests uit en houden ze het gedrag van hun gebruikers nauwlettend in de gaten. Het probleem met deze tests is echter dat ze zowel tijdrovend als arbeidsintensief zijn.
Formulieranalyses met muis-heatmaps kunnen daarentegen een aanzienlijk deel van de bruikbaarheidsproblemen identificeren tegen een fractie van de kosten.
Als je bijvoorbeeld een grote uitval ziet bij je registratieformulier tijdens het afrekenen en naar de heatmap kijkt, kom je er misschien achter dat er veel muisactiviteit is in de eerste paar velden en dat de activiteit vervolgens plotseling afneemt bij het veld ‘telefoonnummer’.
Dit kan erop wijzen dat mensen zich er niet prettig bij voelen hun telefoonnummer met je te delen en dat je een alternatieve manier moet overwegen om hen te identificeren.
#7: Navigatieproblemen oplossen
Soms komt de afname in het ontdekken en gebruiken van je functies of websiteonderdelen doordat je gebruikers ze niet op je platform kunnen vinden.
Als je een e-commercewinkel bent die net professionele sportschoenen is gaan verkopen (bijvoorbeeld voor worstelen, basketbal enzovoort), zou je natuurlijk een nieuwe sectie onder je bestaande navigatie toevoegen en het daarbij laten.
Stel je echter voor dat het verkeer naar je sectie met sportschoenen veel lager is dan je had verwacht. Nadat je de muis-heatmap hebt bekeken, zie je misschien dat maar weinig mensen met hun muis over die sportsectie in je navigatie bewegen.
Aan de ene kant kan dit komen door een gebrek aan interesse in sportschoenen. Aan de andere kant hebben mensen misschien niet gemerkt dat je deze sectie hebt toegevoegd, simpelweg omdat de lijst met schoentypen in je navigatie behoorlijk uitgebreid is.
Hoewel het heel logisch is om je secties georganiseerd te houden, moet je iets nieuws op een opvallende plek plaatsen (in elk geval in het begin). Een UX-ontwerper kan daarom overwegen deze nieuwe sectie helemaal bovenaan in de navigatiebalk te plaatsen. Een andere mogelijkheid is om de sectie op dezelfde plek te laten staan, maar er een tag ‘nieuw’ aan toe te voegen om meer aandacht te trekken.
#8: De leesbaarheid verbeteren
Dit geval is vooral relevant voor blogs of andere bronnen met lange inhoud. Soms heeft de manier waarop je je tekst hebt ontworpen een negatieve invloed op de leesbaarheid, waardoor gebruikers het artikel verlaten.
Net als bij de vorige gebruikssituaties kun je dit met muis-heatmaps vaststellen. Als je bijvoorbeeld naar de heatmap kijkt en ziet dat mensen hun cursor over elke regel van je tekst bewegen, is het tekstgedeelte mogelijk te breed om elke regel met hun ogen te volgen (waardoor ze daarvoor in plaats daarvan hun muiscursor gebruiken).
Heatmapsoftware om te overwegen
Nu de praktische gebruikssituaties van muis-heatmaps zijn behandeld, wil ik ook kort ingaan op de verschillende heatmapanalyseproducten die deze tool aanbieden en je de verschillen laten zien in de manier waarop ze deze aanpakken.
Hotjar
Hotjar heeft niet echt een muis-heatmap. In plaats daarvan heeft het de informatie die je in een typische muis-heatmap kunt vinden, opgesplitst in verschillende typen kaarten. Je hebt namelijk muisklikkaarten, scrollkaarten, heatmaps van muisbewegingen en heatmaps van woedeklikken. Zo ziet de kaart van de muisbewegingen eruit.
Hoewel afzonderlijke kaarten op het eerste gezicht onhandig lijken, zijn ze veel beter in het leveren van gedetailleerdere gegevens voor elk type interactie (bijvoorbeeld scrollen).
Bovendien biedt het ook extra functionaliteiten, zoals het realtime aantal websitebezoekers, sessieherhalingen, een visuele weergave van betrokkenheidszones in de paginalay-out, enzovoort.
Crazy Egg
Met Crazy Egg krijg je een heatmap die gegevens bevat van zowel gebruikersklikken als muisbewegingen. Met hun eigen algoritmen kunnen ze deze twee verschillende soorten interacties combineren in één kaart die de algemene interessegebieden van je gebruikers weergeeft.
Vergeleken met Hotjar krijg je iets minder gedetailleerde gegevens. Dit type gecombineerde heatmap is echter erg nuttig wanneer je een overzicht wilt krijgen van hoe mensen met je UX omgaan, in plaats van de exacte locaties van klikken, scrolldiepte enzovoort te identificeren.
Net als bij Hotjar krijg je met Crazy Egg ook sessieopnamen en andere analysemogelijkheden.
Mouseflow
Net als Hotjar biedt Mouseflow je 6 verschillende typen heatmaps voor muistracking in plaats van één gecombineerde heatmap. Je krijgt de gebruikelijke typen, waaronder heatmaps voor klikken, muisbewegingen en scrollen.
Daarnaast beschikt Mouseflow echter ook over een speciaal type heatmap dat je zelden op dergelijke platforms tegenkomt: een geografische heatmap.
In plaats van gebruikersinteractie met je UX visueel weer te geven, toont deze heatmap je de wereldkaart en worden de delen van de wereld gemarkeerd waar je de meeste gebruikers (en interacties) krijgt.
Een onmisbare aanvulling op gebruikersinterviews en bruikbaarheidstests
Ik ben van mening dat gebruikersinterviews de meest waardevolle activiteit zijn die productmanagers uitvoeren. Maar net als bruikbaarheidstests kosten ze behoorlijk veel tijd.
Overweeg daarom muisheatmaps te gebruiken als een fantastisch (en goedkoop) alternatief om antwoorden te krijgen op enkele van de eenvoudigere vragen over je klanten, zodat je je kostbare interviewtijd in plaats daarvan kunt gebruiken voor de moeilijkere vragen.
Op zoek naar meer manieren om je producten te verbeteren? Fris je kennis en vaardigheden in ons fascinerende vakgebied op door je te abonneren op onze nieuwsbrief. Je blijft op de hoogte van de nieuwste onderwerpen op het gebied van productmanagement dankzij onze eersteklas educatieve content en softwarelijsten.