8 Heatmap-Beispiele für datengetriebenes Produktmanagement
Wahrscheinlich ist die wichtigste Eigenschaft eines guten Product Managers die Fähigkeit, sich in die Nutzer hineinzuversetzen. Um dieses Gespür zu entwickeln, verbringen PMs viele Stunden in Nutzerinterviews und analysieren die Daten hinter dem Nutzerverhalten.
Es gibt jedoch noch eine weitere Möglichkeit, Ihr Nutzerverständnis zu schärfen – indem Sie analysieren, wie Nutzer mithilfe von Heatmaps mit Ihrem Produkt interagieren.
Heatmaps sind nur eines von vielen User-Research-Tools, die dabei helfen, Reibungspunkte, Absichten und Chancen entlang der User Journey zu erkennen. Sie gehören ebenfalls zum Bereich der Produktanalytik und ermöglichen Ihnen, über oberflächliche Kennzahlen hinauszublicken und zu sehen, was Nutzer tatsächlich tun.
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
Wenn Sie hier gelandet sind, sind Sie wahrscheinlich bereits neugierig auf die Vorteile von Heatmaps – oder Sie suchen nach praxisnahen Beispielen, um die Investition zu rechtfertigen.
So oder so sind Sie hier genau richtig. Lassen Sie uns die verschiedenen Arten von Heatmaps betrachten und wie Sie sie nutzen können, um Ihre Produktziele zu erreichen.
#1: Klick-Maps und Tap-Maps
Wir beginnen mit der beliebtesten Variante – der Karte der Klicks (für Desktop-Oberflächen) oder Taps (für mobile Benutzeroberflächen).
Klickmaps sind die visuelle Darstellung davon, wo Nutzer auf Ihrer Benutzeroberfläche klicken. Es handelt sich dabei einfach um einen Screenshot Ihrer UI, auf dem bestimmte Bereiche in unterschiedlichen Farben hervorgehoben sind.
Wenn Ihr Heatmap-Tool ein bestimmtes Element Ihrer UI hervorhebt, bedeutet das, dass ein Nutzer (oder mehrere) darauf geklickt hat. Die Farbe wiederum zeigt Ihnen an, wie oft auf dieses Element geklickt wurde.
Heatmap-Tools verwenden in der Regel Farben aus der Temperaturskala.
Sie sehen wärmere Farben aus diesem Farbverlauf in den Bereichen, die viele Klicks erhalten, und kühler hervorgehobene Stellen in Bereichen mit wenig Aufmerksamkeit.
So sieht beispielsweise die Datenvisualisierung einer Tap-Map bei einer mobilen App aus, mit der Sie Ihre Finanzen verwalten können.
Wir können sehen, dass die Bereiche mit den Beträgen der einzelnen Transaktionen rot hervorgehoben sind. Das bedeutet, dass viele Personen darauf klicken (vermutlich, um die Transaktion zu erweitern und Details anzusehen).
Der Kontostand oben hingegen ist grün markiert – was darauf hindeutet, dass nur wenige darauf klicken.
Wie man eine Klick-Map nutzt
Klickmaps liefern wertvolle, umsetzbare Erkenntnisse. Sie können viel über das Verhalten Ihrer Nutzer lernen, indem Sie betrachten, welche Bereiche angeklickt werden.
Zum Beispiel: Wenn Sie eine App verwalten, mit der Sie ein Tierheim verwalten und die Nutzern die Möglichkeit bietet, das Tierheim finanziell zu unterstützen, können Sie mithilfe einer Klickmap sehen, welche Spendenoption am beliebtesten ist.
Anhand der obigen Tap-Map lässt sich erkennen, dass die $10- und „Other“-Optionen bei der Wahl des Spendenbetrags mit Abstand am beliebtesten sind.
Eine wichtige Erkenntnis daraus ist, dass wahrscheinlich ein Spendenbetrag (z. B. $1) nicht in der Liste enthalten ist und Nutzer deshalb auf „Other“ klicken, um diesen Betrag einzugeben.
Es wäre also sinnvoll, herauszufinden, welche Beträge im Bereich „Other“ eingegeben werden, die beliebtesten zu ermitteln und diese in die Liste aufzunehmen.
#2: Scroll-Maps
Wie der Name schon sagt, können Sie mit diesem Heatmap-Typ das Scroll-Verhalten Ihrer Nutzer analysieren.
Auch Scrollmaps sind mit Farben der Temperaturskala gekennzeichnet. Allerdings werden hierbei nicht einzelne Stellen auf Ihrer Oberfläche hervorgehoben, auf die geklickt wurde, sondern ganze Seitenbereiche – je nachdem, wie viele Nutzer bis dorthin gescrollt und diesen Abschnitt gesehen haben.
Wie bei anderen Heatmaps erhalten Sie warme Farben, wenn viele bis zu diesem Bereich scrollen, und kühle Farben, wenn es nur wenige sind.
Wie man eine Scroll-Map nutzt
Scrollmaps sind hervorragend geeignet, um die Position bestimmter Elemente oder Abschnitte auf Ihrer Seite zu optimieren und Nutzungs- oder Engagementprobleme mit diesen Abschnitten zu beheben.
Lassen Sie uns einen typischen Fall einer Problembehebung betrachten, indem wir die Scrollmap der Preisseite eines SaaS-Dienstes namens Nelio analysieren.
Stellen Sie sich vor, Sie haben Schwierigkeiten mit Ihrer Wettbewerbsfähigkeit. Aus irgendeinem Grund melden sich die Leute lieber bei Ihren Wettbewerbern an. Wenn Sie sie nach dem Grund fragen, sagen sie, dass das andere Tool eine Multiziel-Tracking-Funktion hatte und Ihres nicht.
Das Problem ist jedoch, dass Sie diese Funktion tatsächlich haben, also müssen Sie nun herausfinden, warum die Nutzer nicht darauf aufmerksam werden.
Wenn Sie sich die Scrollmap Ihrer Preisseite ansehen, stellen Sie fest, dass die große Mehrheit Ihrer Nutzer überhaupt nicht scrollt. Dann fällt Ihnen auf, dass die Beschreibung der Multiziel-Tracking-Funktion unterhalb des sichtbaren Bereichs und in der blauen Zone liegt. Das bedeutet, dass nur wenige Nutzer scrollen und davon lesen – was bei der Mehrheit des Scrollverhaltens von Nutzerverhalten so sein kann.
Problem erkannt! Um es zu lösen, können Sie die Features Ihres Bereichs „Alle Tarife beinhalten“ als zusätzliche Elemente zu Ihren Preisplänen hinzufügen – so stellen Sie sicher, dass sie über dem sichtbaren Bereich erscheinen und Nutzer diese ohne Scrollen sehen.
#3: Hover-Heatmaps
Auch bekannt als Move-Map, erfasst dieser Typ von Heatmap die Position der Maus – und ermöglicht so die Visualisierung des „Bewegungsverhaltens“ Ihrer Nutzer über eine Oberfläche hinweg.
In den meisten Fällen gehen wir bei der Verwendung von Hover-Heatmaps davon aus, dass Nutzer wahrscheinlich auf das Element schauen, über dem sich ihr Mauszeiger gerade befindet. Das Mausbewegungs-Tracking wird damit zur Annäherung an das, was tatsächlich betrachtet wird.
Visuell besteht sie aus hervorgehobenen Punkten (erneut mit einer temperaturbasierten Farbskala) an den Stellen Ihrer Benutzeroberfläche, auf denen sich der Mauszeiger am längsten befand. Darüber hinaus bieten manche Heatmap-Tools auch eine „Spur“ dessen, wo Ihre Nutzer typischerweise starten und wohin sie sich im Interface bewegen.
So sehen diese Spuren aus.
Dies ist die Maus-Tracking-Heatmap von vermutlich einer der besten UX-geführten Oberflächen der Welt – der Website von Apple (immerhin beherbergen sie die ersten UX-Designer der Geschichte). Diese Spuren zeigen, dass die Nutzer die MacOS Snow Leopard Landingpage zunächst mit einer Untersuchung des faszinierenden Großkatzen-Motivs beginnen, dann die Überschrift lesen und sich dann zu den weiteren Elementen der Seite vorarbeiten.
Wie Sie eine Hover-Map verwenden
Eine der interessanten Einsatzmöglichkeiten einer Bewegungs-Heatmap ist das Aufdecken von Nutzer-Ablenkungen.
Wenn Sie zum Beispiel dafür zuständig sind, die Amazon-Suchergebnisseite zu optimieren (Ihr Ziel ist, dass Nutzer auf ein von Amazon gefundenes Produkt klicken), könnten Sie anhand der Hover-Heatmap feststellen, dass der Großteil der Nutzer zunächst einen Ihrer Werbebanner ansieht (zum Beispiel eine Ankündigung), bevor sie sich den Suchergebnissen widmen.
Das ist eine große Ablenkung für Ihre Nutzer und kann die Wahrscheinlichkeit verringern, dass sie auf Suchergebnisse klicken. Also würden Sie diesen Banner entfernen oder deutlich weniger auffällig gestalten.
#4: Attention-Heatmaps
Bisher haben wir über drei Analyseinstrumente gesprochen, mit denen Sie Ihre Nutzer visuell analysieren können – über Klicks, Mausbewegungen und Scroll-Verhalten.
Obwohl jedes davon wertvolle Informationen liefert, kann die alleinige Betrachtung einer dieser Methoden irreführend sein. Wer das Nutzerverhalten isoliert und ohne den richtigen Kontext betrachtet, erhält unter Umständen kein umfassendes Bild des tatsächlichen Geschehens.
Produktteams verwenden daher meist alle genannten Typen gleichzeitig und bündeln die daraus gewonnenen Erkenntnisse, bevor sie sie analysieren und Schlüsse ziehen. Dennoch ist auch diese Lösung nicht perfekt, denn für eine vollständige Analyse werden Sie wahrscheinlich die dreifache Zeit investieren müssen.
Glücklicherweise können moderne Heatmap-Visualisierungstools dank KI-Modelle und fortschrittlicher Algorithmen die Informationen aus Nutzerklicks, Mouse-Over und Scroll-Verhalten in einer einzigen Heatmap kombinieren.
Dieser vierte Typ wird Attention-Heatmap genannt, da er im Wesentlichen zeigt, welchen Bereichen der Benutzeroberfläche die meiste Aufmerksamkeit geschenkt wird. Visuell ähnelt sie stark einer Klickkarte: Bestimmte UI-Elemente werden in unterschiedlichen Farben der Temperaturskala hervorgehoben, je nachdem, wie viel Beachtung sie erhalten.
#5: Geografische Heatmaps
Heatmaps gibt es schon lange, bevor Menschen begannen, diese Technik auf Benutzeroberflächen anzuwenden. Eine der bekanntesten traditionellen Heatmap-Formen ist die geografische Karte.
In diesem Fall heben Sie bestimmte Bereiche auf einer Karte hervor, basierend auf dem von Ihnen ausgewählten Datentyp. Wenn Sie zum Beispiel die geografische Verteilung von touristischen Standorten in Frankreich analysieren möchten, können Sie diese Geo-Heatmap verwenden.
Auf der obigen Karte ist die Anzahl der Hotelbetten (hauptsächlich für Touristen) pro Quadratkilometer dargestellt. Wie wir sehen können, sind Korsika, die französischen Alpen und die Côte d’Azur die eindeutigen Gewinner in dieser Kategorie.
Wie man eine geografische Heatmap nutzt
Daten zu französischen Touristen sind interessant, aber können diese Heatmaps mir helfen, mein digitales Produkt zu analysieren? Lassen Sie mich Ihnen ein Beispiel zeigen.
Bleiben wir beim Thema Tourismus (und Frankreich) und stellen uns vor, Sie betreiben einen Online-Service für kurzfristige Vermietungen (ähnlich wie Airbnb). Sie haben die Idee, Werbematerialien für lokale Festivals in französischen Städten zu erstellen und zu verteilen, um mehr Buchungen für Hotels über Ihren Service zu generieren.
Die erste Frage, die Ihnen in den Sinn kommen würde, ist: Mit welcher Stadt / welchem Festival sollten Sie beginnen?
Um diese Frage zu beantworten, können Sie eine geografische Heatmap erstellen, die die Verteilung von Ferienhäusern und Apartments, die Ihren Service nutzen, anzeigt.
Wenn Sie sich die Karte ansehen, erkennen Sie, dass Ihr Service vor allem im Süden Frankreichs sehr beliebt ist. Sie sollten also vielleicht damit beginnen, die Festivals der Provence und Côte d’Azur zu bewerben.
#6: Rage-Click-Heatmaps
Dies ist eine Unterform der Click-Maps, die nur die Fälle herausfiltert und anzeigt, in denen Nutzer aus Ärger oder Frustration auf ein Element klicken. Bei Heatmapping-Tools wird ein Klick in der Regel als Wut- (Rage-) oder Totklick (Dead Click) identifiziert, wenn der Benutzer wiederholt auf dasselbe Element klickt.
Wie man eine Rage-Click-Heatmap verwendet
Rage-Click-Heatmaps sind ausgezeichnete Werkzeuge, um problematische Benutzererfahrungen zu erkennen. Es könnte sich um etwas handeln, das wie ein klickbares Element aussieht, es aber nicht ist, nicht intuitiv ist oder einfach ein Button, der nicht funktioniert.
Wenn wir beispielsweise auf einer der Seiten von Iterate eine Rage-Click-Analyse durchführen würden, sollten wir definitiv an mindestens zwei Stellen Rage-Klicks feststellen – und das aus folgendem Grund:
Haben Sie die beiden in Blau hervorgehobenen Textelemente bemerkt? Sie ahnen es: Das sind keine Links. Das ist ganz gewöhnlicher Text, der lediglich blau eingefärbt ist. Viele der Besucher:innen von Iterate (mich eingeschlossen) haben versucht, auf diese Textelemente zu klicken, in der Erwartung, dass sie dadurch auf eine andere Seite weitergeleitet werden.
Natürlich passiert nach dem Klick darauf nichts, was dazu führen kann, dass die Nutzer:innen frustriert werden und anfangen, „Rage-Klicks“ auszuführen.
Die Erkenntnis aus der Betrachtung der Rage-Click-Heatmap dieser Seite wäre also: Stellen Sie sicher, dass Ihr Text zum Beispiel nicht wie ein Hyperlink aussieht. Sie könnten auch einen A/B-Test mit unterschiedlichen Farben durchführen und so feststellen, ob Ihre Annahme, dass blaue Schrift zu Rage-Klicks führt, zutrifft oder nicht.
#7: Eye-Tracking-Heatmaps
Bis jetzt haben wir Hover-Maps verwendet, um zu verstehen, wohin unsere Nutzer:innen beim Surfen auf unserer Webseite blicken. Wir nehmen an, dass die Augen der Nutzer:innen die meiste Zeit auf den Mauszeiger gerichtet sind. Die Bewegung des Cursors auf Ihrer Oberfläche kann Ihnen also Hinweise darauf geben, worauf sich der Blick der Nutzer:innen konzentriert.
Dies ist eine gängige Methode zur Analyse der Aufmerksamkeit. Allerdings sind die Heatmap-Daten daraus nicht perfekt, da Nutzer:innen nicht immer auf ihren Cursor schauen.
Wenn Sie präzise Daten über Ort und Zahlen darüber erhalten möchten, was Ihre Nutzer:innen betrachten, sollten Sie stattdessen eine Eye-Tracking-Heatmap verwenden.
Im Gegensatz zu den anderen benötigen Eye-Tracking-Heatmaps spezielle Ausrüstung, die die Augenbewegungen Ihrer Nutzer:innen nachverfolgt und ermittelt, auf welche Elemente sie gerade schauen.
Das bedeutet, dass Sie Ihre Nutzer zu speziellen Test-Sessions einladen müssen, damit sie diese Tracker tragen und Ihr Produkt verwenden. Auch wenn dies deutlich zeitaufwändiger und kostspieliger ist, ist die Qualität der Daten, die Sie daraus gewinnen, weit überlegen gegenüber allem, was Sie durch andere Arten von Website-Heatmaps erhalten können.
Wie Sie eine Eye-Tracking-Heatmap verwenden
Angesichts der Kosten für die Organisation von Eye-Tracking-Test-Sessions werden Sie Eye-Tracking vermutlich nur in Bereichen mit hohem Einfluss auf die UX-Optimierung einsetzen.
Eye-Tracking-Studien sind bei Produkten großer Tech-Unternehmen sehr verbreitet, da bereits eine Verbesserung der Nutzerfreundlichkeit um 1 % in Umsätzen und ROI in zweistelliger Millionenhöhe resultieren kann.
Stellen Sie sich nur vor, wie viel zusätzliches ARR Amazon erzielen könnte, wenn sie eine Eye-Tracking-Studie durchführen und ihre Produkt-Banner so platzieren, dass die Conversion-Rate um 1 % steigt.
#8: [Bonus] Konfetti-Maps
Konfetti-Heatmaps sind eine Unterform gewöhnlicher Klick-Maps, die einzelne Klicks anzeigen, statt den allgemeinen Bereich hervorzuheben, auf den Nutzer geklickt haben.
Der Vorteil der Analyse einzelner Klicks besteht darin, dass Sie diese anhand verschiedener, komplexer Datenpunkte filtern können.
Hier zum Beispiel haben wir die Klicks auf den Such-CTA nach dem Wochentag gruppiert, an dem das Klick-Ereignis stattfand.
Aus den Daten sehen wir, dass dienstags die meisten Klicks erfolgen, während Besucher an Montagen am abgelenktesten sind (viele Klicks über die gesamte Oberfläche verteilt).
Wie Sie eine Konfetti-Heatmap nutzen
Konfetti-Heatmaps sind besonders nützlich, wenn Sie das Nutzerverhalten auf granularer Ebene analysieren möchten. Anders als traditionelle Heatmaps, die aggregierte Daten zeigen, können Sie mit Konfetti-Maps einzelne Klicks anhand von Parametern wie Gerätetyp, Herkunftsquelle oder sogar Tageszeit filtern.
Dieser Heatmap-Typ eignet sich hervorragend, um Muster zu erkennen, die sonst unentdeckt bleiben würden. Zum Beispiel: Erhält Ihr Checkout-Button freitags mehr Klicks, aber montags deutlich weniger, könnten Ihre Nutzer spontane Käufer am Zahltag sein – und Ihr Montagspublikum erholt sich vielleicht noch vom Wochenende und starrt stattdessen nur ratlos auf Ihre Preisseite, anstatt zu kaufen.
Konfetti-Maps können auch unerwartete Ablenkungen aufdecken. Klicken Nutzer wild über die Seite verteilt, anstatt dort, wo sie sollen, sind sie möglicherweise verwirrt – oder suchen einfach verzweifelt nach einem Hinweis, dass hier noch etwas passiert. Bekommt Ihr Navigationsmenü mehr Klicks als Ihr CTA, könnte das bedeuten, die Nutzer fühlen sich verloren und suchen eher den Ausweg als das Engagement. Erkenntnisse aus Heatmaps können Sie gezielt einsetzen, um Ihre User Journey Map zu verbessern, insbesondere beim Aufdecken von Reibungspunkten. Durch Filterung nach Nutzersegmenten erkennen Sie, welche Gruppen am meisten Schwierigkeiten haben und wo Sie die Nutzererfahrung glätten sollten.
Heatmaps stärken Ihre Nutzerempathie
Jede Art von Heatmap, die wir hier gemeinsam entdeckt haben, gibt Ihnen einen Einblick darin, wie Ihre Nutzer Ihre Produkte entdecken und verwenden. Wenn Sie knapp an Ressourcen sind, bieten Heatmaps eine schnelle, unkomplizierte Möglichkeit, UX-Research durchzuführen, bevor Sie in umfangreichere Usability-Tests investieren. Mit ihrer Hilfe können Sie die Probleme, die Ihre Nutzer erleben, sichtbar machen und gezielt an der Behebung arbeiten.
In Kombination mit Produkt-Analyse-Tools geben Heatmaps ein klareres Bild davon, wie Nutzer mit Ihrem Produkt interagieren und an welchen Stellen sie abspringen. Beispielsweise liefert die Verbindung von Heatmaps und Session-Replay-Tools sowohl das ‚Was‘ als auch das ‚Warum‘ hinter dem Nutzerverhalten.
Heatmaps sind großartig, aber sie sind nur eines von vielen Werkzeugen, die Sie für mehr Empathie einsetzen können. Wenn Sie auch die anderen kennenlernen möchten, melden Sie sich bei unserem Newsletter an.