Mouse-Heatmaps: 8 Wege, wie sie Ihr Produkt verbessern können
Sehen, was Nutzer wirklich tun – nicht nur, was sie sagen: Umfragen und Analysen erzählen nur einen Teil der Geschichte. Mouse-Heatmaps zeigen, wo Nutzer zögern, Schwierigkeiten haben oder am meisten interagieren – so treffen Sie selbstbewusst datenbasierte Entscheidungen.
Fokussieren Sie sich auf wichtige Verbesserungen und Features: Anstatt zu raten, woran Sie als Nächstes arbeiten sollten, zeigen Heatmaps, wo Nutzer verweilen (oder frustriert sind) – so erhalten Sie klare Hinweise, was vorrangig bearbeitet werden muss.
Finden Sie heraus, warum Nutzer abspringen – und beseitigen Sie die Ursachen: Nicht alle Absprünge sind gleich. Heatmaps zeigen, ob Nutzer wichtige CTAs übersehen, mit Formularfeldern kämpfen oder verwirrt sind – damit Sie Hürden beseitigen, bevor Nutzer abspringen.
Verborgene Reibungen im Aktivierungstrichter entdecken: Klicken Nutzer an unerwarteten Stellen? Bleiben sie an entscheidenden Schritten hängen? Heatmaps decken Engpässe auf, damit Sie den Ablauf optimieren und Konversionen steigern können.
Wahrscheinlich der interessanteste und lohnendste Teil der Arbeit eines Product Managers ist es, herauszufinden, wie die eigenen Nutzer denken und handeln, wenn sie das Produkt verwenden.
Dafür führen wir üblicherweise Nutzerinterviews durch, starten Umfragen und analysieren unsere Daten. Es gibt jedoch noch ein weiteres wertvolles Werkzeug im Repertoire eines PMs, das dabei hilft, sich besser in die Nutzer hineinzuversetzen – Maus-Heatmaps!
Heute möchte ich mit Ihnen die praktischen Anwendungsfälle von Maus-Heatmaps sowie deren effektive Nutzung zur Verbesserung Ihres Produkts durchgehen.
Du willst mehr vom The CPO Club?
Registriere dich für eine kostenlose Mitgliedschaft, um diesen Artikel vollständig zu lesen:
Have an account? Log In
Was sind Maus-Heatmaps und wie funktionieren sie?
Eine Maus-Heatmap (auch bekannt als Attention-Heatmap) ist ein Produktanalyse-Tool, das visualisiert, wie Nutzer durch ihre Mausbewegungen mit Ihrer Oberfläche interagieren. Sie legt eine visuelle Überlagerung – typischerweise mit Farbverläufen – auf einen Screenshot Ihrer Benutzeroberfläche, um darzustellen, wo Nutzer am häufigsten mit der Maus verweilen, sich bewegen und klicken.
Dies hilft Ihnen dabei zu erkennen, welche Elemente Aufmerksamkeit auf sich ziehen, an welchen Punkten Nutzer zögern oder was komplett ignoriert wird. Maus-Heatmaps sind besonders nützlich, wenn sie zusammen mit anderen Heatmaps wie Scroll-Heatmaps verwendet werden, die aufzeichnen, wie weit Nutzer auf einer Seite nach unten scrollen.
In Kombination liefern diese Werkzeuge ein umfassenderes Bild über das Engagement Ihrer Nutzer – was sie sehen, was sie überspringen und wohin ihre Aufmerksamkeit natürlich gelenkt wird.
Verschiedene Arten von Heatmaps werden von Product Managern und UX-Designern häufig verwendet, um Einblicke in das Verhalten ihrer Nutzer zu gewinnen, darunter Scroll-Maps, Click-Maps, User-Attention-Maps, Eye-Tracking-Heatmaps und viele weitere Heatmap-Beispiele. Jede Variante kann spezifische Erkenntnisse liefern, die Ihnen helfen, die Nutzerbindung zu steigern und das Engagement zu erhöhen. Heute möchte ich jedoch besonders auf eine Art im Detail eingehen – die Maus-Heatmap.
Eine Maus-Heatmap bezeichnet man auch als „Aggregat“, da sie kombinierte Daten aus mehreren verschiedenen Nutzerinteraktionen umfasst – Klickverhalten, Scrollverhalten und Mausbewegungen.
Maus-Heatmaps sind in der Welt der visuellen Produktanalyse relativ neu, da es eine schwierige Aufgabe ist, die Daten dieser drei unterschiedlichen Verhaltensweisen in einer einzigen Visualisierung zusammenzuführen. Erst mit dem Aufkommen von KI-Modellen war es für Analysetools möglich, dies umzusetzen.
Praxisnahe Anwendungsfälle zur Optimierung Ihres Produkts mit Maus-Tracking
Mit einem generellen Verständnis davon, was diese Heatmaps sind, lassen Sie uns nun auf mehrere praktische Anwendungsfälle eingehen, bei denen Sie durch das Betrachten und Analysieren Ihrer Maus-Heatmaps einen echten Mehrwert für Ihr Produkt schaffen können.
Wie Product Manager Maus-Heatmaps einsetzen
Auch wenn die Analyse von Nutzerinteraktionen zunächst mehr etwas für UX-Designer zu sein scheint, können Product Manager Maus-Heatmaps ebenfalls einsetzen, um ganz eigene Problemstellungen zu lösen. Hier sind einige Wege, wie ich dieses Tool zur Verbesserung meiner Produkte genutzt habe.
#1: Engpässe im Aktivierungstrichter finden
Nach meinen Erfahrungen mit Aktivierungsherausforderungen ist die Optimierung von Trichtern eine der komplexesten, aber auch wirkungsvollsten Aufgaben eines Product Managers. Selbst eine bescheidene Steigerung der Aktivierungsrate um 10% kann einen Kaskadeneffekt im gesamten Trichter auslösen und die Umwandlung von Free → Paid erheblich steigern.
Allerdings ist Aktivierung kein reines Zahlenspiel—es ist ein Puzzle, das tiefe Einsichten in das Nutzerverhalten, iterative Experimente und die Bereitschaft erfordert, bestehende Annahmen über das Nutzerverhalten infrage zu stellen. Der Schlüssel ist nicht nur, mehr Nutzer durch den Trichter zu führen, sondern herauszufinden, warum sie überhaupt aussteigen.
Dazu nutzt ein Product Manager im Grunde alle verfügbaren Tools, darunter Analysen, Umfragen usw. Auch Maus-Heatmaps gehören zu diesen Werkzeugen. Hier ist ein Beispiel, wie sie helfen können, die Aktivierung zu verbessern.
Stellen Sie sich vor, Sie arbeiten bei Atlassian und haben sich das Quartalsziel gesetzt, die Einrichtungsrate von Jira Cloud zu verbessern.
Wenn Sie sich den Aktivierungstrichter mit Ihrem Analyse-Tool ansehen, stellen Sie fest, dass es einen deutlichen Abfall bei dem Schritt gibt, in dem Nutzer ihren Jira-Instanznamen eingeben und ihre Atlassian-Website erstellen.
Um herauszufinden, was passiert ist, könnten Sie Ihr Heatmap-Tool öffnen und sich die Maus-Heatmap ansehen. Dabei stellen Sie fest, dass die Nutzer viel Zeit auf der Seite verbringen und aktiv auf das Feld für den Site-Namen und das Feld „Get Started In Jira“ klicken.
Das ist kein normales Verhalten, denn Sie möchten, dass Nutzer jeweils nur einmal auf die Felder klicken und nicht länger als 10–15 Sekunden auf dieser Seite verbringen. Sie starten eine Untersuchung und beauftragen Ihr QA-Team, den Sachverhalt zu prüfen.
Was Ihr Team herausfindet, ist, dass für eine bestimmte Gruppe von Nutzern der Seitennamen-Validator (der prüft, ob der Name bereits existiert) immer einen Fehler anzeigt, egal was eingetippt wird.
Der Grund dafür ist, dass ein unsichtbares Google Recaptcha diese Nutzer für Bots hält. Um das zu beheben, sprechen Sie mit Ihrem Security-Team, erfahren, dass der Sicherheitslevel für Recaptcha höher eingestellt ist als nötig, und senken ihn entsprechend.
Das Ergebnis: Sie schalten Ihre Nutzer frei, ermöglichen ihnen die Erstellung ihrer Seite und verbessern Ihre Aktivierungsrate erheblich.
#2: Unterstützung bei der Feature-Priorisierung
Bei der Priorisierung von Funktionen ist der entscheidende Faktor, den Sie berücksichtigen, die Auswirkung dieser Funktion auf Ihre Nutzer. Sie messen diese Auswirkung anhand von Daten, Ihrem Wissen über die Nutzerbedürfnisse (basierend auf Umfragen und Interviews), Ihrem Bauchgefühl und dem Nutzerverhalten auf Ihrer Oberfläche.
Letzteres ist der Bereich, in dem Ihnen Mauskarten helfen können.
Zurück zu unserem Jira-Beispiel. Nehmen wir an, Sie möchten verbessern, wie Menschen das Backlog organisieren und es gibt dafür mehr als 20 Funktionsideen. Um sie nach Nutzerbedürfnissen zu priorisieren, schauen Sie sich das Heatmap-Bild der Backlog-Seite an. Nach Sichtung sehen Sie, dass im Bereich der Schnellfilter besonders viel Aktivität herrscht.
Also gehen Sie in Ihr Analysetool und erstellen eine Verteilungsgrafik der am häufigsten von Ihren Nutzern angewendeten Schnellfilter. Beim Blick auf diese Daten sehen Sie, dass ca. 50% aller Jira-Nutzer einen Schnellfilter erstellen, der Aufgaben mit dem Status „To Do“ anzeigt.
Eine großartige Möglichkeit, die Nutzererfahrung hier zu verbessern, wäre, einen eigenen Filter-Button für Status anzubieten. Angenommen, diese Funktionsidee steht schon auf Ihrer Verbesserungs-Liste, können Sie mit dieser Erkenntnis ihre Priorität erhöhen und sie an die Spitze des Backlogs Ihres Teams verschieben.
#3: Conversion-Rate-Optimierung
Im Hinblick auf die Komplexität kann die Optimierung der Conversion-Rate (CR) problemlos mit Aktivierungstrichtern mithalten. Ich habe Monate damit verbracht, die CR und ähnliche Kennzahlen für meine Produkte zu analysieren, neue Funktionen zur Verbesserung eingeführt, festgestellt, dass sie nichts bringen, wieder andere eingeführt und diesen Zyklus wiederholt, bis ich etwas gebaut habe, das die Conversion-Rate tatsächlich erhöht.
Genauso wie bei der Aktivierung sind Maus-Heatmaps ein äußerst effektives Werkzeug zur Analyse von Herausforderungen im Zusammenhang mit der Conversion je Produkt.
In den meisten Fällen besteht der Hauptnutzen dieses Tools darin, Situationen zu erkennen, in denen Nutzer auf falsche CTAs klicken und diejenigen ignorieren, die zur Conversion führen. Ich demonstriere das am Beispiel einer Produktseite eines Onlineshops für Gastronomieausstattung.
Stellen Sie sich vor, wir überprüfen das Heatmap-Bild dieser Seite. Sehr wahrscheinlich werden wir sehen, dass ein gewisser Teil der Nutzer auf den Button „Jetzt chatten“ oberhalb des Haupt-CTAs (Produkt ansehen) klickt. Ich verstehe, das Unternehmen hat diesen Button platziert, um die Nutzer davon zu überzeugen, dass die Produkte die günstigsten auf dem Markt sind.
Das Problem hier ist jedoch, dass der Klick auf „Jetzt chatten“ die Nutzer davon abhält, das Produkt anzuschauen und es zu kaufen – was die Conversion-Rate deutlich senkt.
Mein Vorschlag wäre hier, diese Botschaft und den CTA an eine weniger prominente Stelle der Seite zu verschieben, um zu vermeiden, die Reise der Nutzer zu unterbrechen.
#5: A/B-Test zur Feature-Validierung
Eine weitere nützliche Anwendung von Maus-Heatmaps ist die Feature-Validierung durch A/B-Tests. Dabei können Heatmaps eine wertvolle Datenquelle sein, indem sie Ihnen visuell zeigen, welche Verbesserungen (oder auch nicht) im Nutzerverhalten zu erkennen sind.
In diesem Fall führen Sie den A/B-Test durch, bei dem in Variante A das Feature aktiviert ist und in Variante B nicht. Sie stellen sicher, dass Ihr Heatmapping-Tool in beiden Varianten die Nutzerinteraktionen verfolgt, damit Sie die Maus-Heatmaps nebeneinander vergleichen können.
Beim Betrachten können Sie schnell Änderungen im Nutzerverhalten erkennen und sehen, ob Ihr neues Feature die gewünschte Wirkung erzielt hat.
Ein Beispiel wäre das Hinzufügen eines „Alle herunterladen“-Buttons auf der Dateibrowser-Seite Ihres Cloudspeicherprodukts. Wenn die Nutzer anfangen, diesen Button aktiv zu benutzen, statt jede Datei einzeln herunterzuladen, ist Ihr neues Feature ein Erfolg.
Wie UX-Designer Maus-Heatmaps verwenden
Heatmaps sind ein fantastisches Werkzeug zur Analyse von Nutzerinteraktionen. Daher zähle ich sie zu den unverzichtbaren Tools im Repertoire von UX-Designern. Hier sind einige Möglichkeiten, wie mein UX-Team Maus-Heatmaps genutzt hat, um ihr Design zu verbessern.
#6: Steigerung der Ausfüllrate bei Formularen
Unabhängig davon, welches Produkt Sie haben, werden Sie höchstwahrscheinlich mindestens ein Formular in Ihrem Aktivierungs- oder Monetarisierungstrichter haben. Außerdem werden Sie meiner Erfahrung nach mit großer Wahrscheinlichkeit Personen/Konversionen an dem Trichterschritt verlieren, an dem sie dieses Formular ausfüllen.
Der Hauptgrund, warum Sie sie verlieren, ist wahrscheinlich eine schlechte Nutzererfahrung, die sie langweilt oder frustriert. Um herauszufinden, ob dies bei Ihrem Formular der Fall ist und das Problem zu beheben, führen Produktdesigner Usability-Tests durch und beobachten das Verhalten ihrer Nutzer genau. Das Problem bei diesen Tests ist jedoch, dass sie sowohl zeit- als auch ressourcenintensiv sind.
Maus-Heatmap-Analysen für Formulare können jedoch einen erheblichen Teil der Usability-Probleme zu einem Bruchteil der Kosten identifizieren.
Wenn Sie beispielsweise einen großen Abbruch auf Ihrem Registrierungsformular beim Checkout feststellen und einen Blick auf das Heatmap-Bild werfen, erkennen Sie vielleicht, dass es bei den ersten Feldern eine hohe Mausaktivität gibt, die dann beim Feld „Telefonnummer“ plötzlich abfällt.
Dies könnte darauf hinweisen, dass Nutzer sich unwohl fühlen, ihre Telefonnummer anzugeben, und Sie sollten überlegen, einen alternativen Weg zur Identifizierung anzubieten.
#7: Behebung von Navigationsproblemen
Manchmal liegt der Rückgang bei der Entdeckung und Nutzung Ihrer Funktionen oder Bereiche Ihrer Website daran, dass Nutzer diese auf Ihrer Plattform nicht finden können.
Wenn Sie ein E-Commerce-Shop sind, der gerade angefangen hat, professionelle Sportschuhe (z. B. Wrestling, Basketball usw.) zu verkaufen, würden Sie selbstverständlich einen neuen Bereich unter Ihrer bestehenden Navigation hinzufügen und den Rest als erledigt ansehen.
Stellen Sie sich jedoch vor, dass der Traffic in Ihrem Bereich für Sportschuhe deutlich unter den Erwartungen liegt. Nach der Auswertung der Maus-Heatmap könnten Sie feststellen, dass nur sehr wenige Nutzer mit der Maus über diesen Bereich in Ihrer Navigation fahren.
Einerseits könnte dies auf mangelndes Interesse an Sportschuhen hindeuten. Andererseits könnte es sein, dass die Nutzer gar nicht bemerkt haben, dass Sie diesen Bereich hinzugefügt haben, weil die Liste der Schuhtypen in Ihrer Navigation bereits sehr umfangreich ist.
Es ist zwar sinnvoll, Ihre Bereiche organisiert zu halten, aber wenn Sie etwas Neues hinzufügen, sollten Sie es (zumindest anfangs) an eine prominente Stelle setzen. Ein UX-Designer könnte also in Betracht ziehen, diesen neuen Bereich direkt in die obere Navigationsleiste zu setzen. Alternativ könnten Sie ihn an derselben Stelle belassen, aber zum Beispiel mit einem „Neu“-Tag hervorheben, um mehr Aufmerksamkeit zu erregen.
#8: Verbesserung der Lesbarkeit
Dieser Fall ist besonders relevant für Blogs oder andere Ressourcen mit langen Inhalten. Mitunter verschlechtert die Art, wie Ihr Text gestaltet ist, die Lesbarkeit – was dazu führt, dass Nutzer den Artikel abbrechen.
Wie bei den vorherigen Anwendungsfällen können Sie dies mit Maus-Heatmaps diagnostizieren. Wenn Sie beispielsweise sehen, dass Nutzer mit dem Mauszeiger über jede Zeile Ihres Textes fahren, könnte das darauf hindeuten, dass der Textbereich zu breit ist, um die Zeilen bequem mit den Augen zu verfolgen (weswegen stattdessen der Mauszeiger dafür genutzt wird).
Heatmap-Software, die Sie in Betracht ziehen sollten
Nachdem die praktischen Anwendungsfälle von Maus-Heatmaps behandelt wurden, möchte ich auch noch kurz auf verschiedene Heatmap-Analytics-Produkte eingehen, die dieses Tool anbieten, sowie Ihnen die Unterschiede in deren Herangehensweise zeigen.
Hotjar
Hotjar bietet keine Maus-Heatmap im eigentlichen Sinne an. Stattdessen hat das Tool die Informationen, die Sie normalerweise in einer Maus-Heatmap finden würden, in verschiedene Map-Typen unterteilt. Sie erhalten also Klick-Heatmaps, Scroll-Heatmaps, Heatmaps für Mausbewegungen und sogenannte Rage-Click-Heatmaps. So sieht seine "Move Map" aus:
Auch wenn es auf den ersten Blick umständlich erscheint, separate Heatmaps zu haben, ermöglichen diese eine wesentlich detailliertere Auswertung für jede Art von Interaktion (z. B. Scrollen).
Darüber hinaus bieten sie zusätzliche Funktionen wie eine Echtzeit-Anzeige der Website-Besucherzahlen, Sitzungswiederholungen, eine visuelle Darstellung der Engagement-Zonen im Seitenlayout und mehr.
Crazy Egg
Bei Crazy Egg erhalten Sie eine Heatmap, die sowohl Datensätze von Nutzerklicks als auch Maus-Hovern beinhaltet. Mithilfe ihrer proprietären Algorithmen können diese beiden verschiedenen Interaktionstypen zu einer einzigen Karte zusammengeführt werden, die die wichtigsten Interessenszonen Ihrer Nutzer abbildet.
Im Vergleich zu Hotjar ist die Granularität etwas geringer. Allerdings ist diese Art der kombinierten Heatmap sehr hilfreich, wenn Sie sich einen Überblick darüber verschaffen möchten, wie Nutzer mit Ihrem UX-Design interagieren, anstatt die exakten Klickpositionen oder die Scrolltiefe zu analysieren.
Wie bei Hotjar erhalten Sie bei Crazy Egg auch Sitzungsaufzeichnungen und weitere Analysefunktionen.
Mouseflow
Auch Mouseflow bietet Ihnen – wie Hotjar – sechs verschiedene Arten von Mousetracking-Heatmaps anstelle einer einzigen kombinierten Auswertung. Sie bekommen die üblichen Typen, darunter Klick-, Hover- und Scroll-Heatmaps.
Darüber hinaus verfügt Mouseflow jedoch auch über eine spezielle Heatmap, die auf solchen Plattformen selten zu finden ist: die geografische Heatmap.
Statt die Nutzerinteraktion auf Ihrem UX-Design zu visualisieren, zeigt diese Heatmap die Weltkarte an und hebt jene Regionen hervor, aus denen die meisten Nutzer (und Interaktionen) stammen.
Unverzichtbar für Nutzerinterviews und Usability-Tests
Ich behaupte, dass Nutzerinterviews die wertvollste Tätigkeit sind, die Produktmanager durchführen. Aber genau wie Usability-Tests sind sie sehr zeitaufwändig.
Daher sollten Sie Maustasten-Heatmaps als fantastische (und kostengünstige) Alternative in Betracht ziehen, um Antworten auf einige der einfacheren Fragen über Ihre Kunden zu erhalten, und Ihre wertvolle Interviewzeit lieber für die schwierigeren Themen nutzen.
Suchen Sie nach weiteren Möglichkeiten, Ihre Produkte zu verbessern? Frischen Sie Ihr Wissen und Ihre Fähigkeiten in diesem spannenden Beruf auf, indem Sie unseren Newsletter abonnieren. Damit bleiben Sie stets auf dem Laufenden bei den neuesten Themen im Produktmanagement und profitieren von unserem erstklassigen Bildungsangebot sowie unseren Software-Listen.