8 Heatmap-Beispiele für datengesteuertes Produktmanagement
Wahrscheinlich ist die wichtigste Eigenschaft eines guten Product Managers die Fähigkeit, sich in die Nutzer hineinzuversetzen. Um dieses Gespür zu trainieren, investieren Produktmanager viele Stunden in Nutzerinterviews und analysieren die Daten zum Nutzerverhalten.
Es gibt jedoch noch eine andere Möglichkeit, deine Nutzerintuition zu schärfen – indem du analysierst, wie Nutzer über Heatmaps mit deinem Produkt interagieren.
Heatmaps sind nur eines von vielen User Research-Tools, die Reibungspunkte, Intentionen und Chancen entlang der User Journey aufdecken. Sie gehören auch zum Bereich Produkt-Analytics und helfen dir, über Vanity Metrics hinauszugehen und zu sehen, was die 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 du hier gelandet bist, bist du wahrscheinlich schon neugierig auf die Vorteile von Heatmaps – oder du suchst nach Praxisbeispielen, mit denen du die Investition rechtfertigen kannst.
Wie auch immer: Du bist hier richtig. Schauen wir uns die verschiedenen Arten von Heatmaps an und wie du sie nutzen kannst, um deine Produktziele zu erreichen.
#1: Click Maps und Tap Maps
Wir beginnen mit der beliebtesten aller Heatmaps – der Karte der Klicks (für Desktop-UIs) oder Taps (für Mobile-UIs).
Clickmaps sind eine visuelle Darstellung davon, wie Nutzer auf Elemente deiner Benutzeroberfläche klicken. Es handelt sich dabei im Grunde um einen Screenshot deiner UI, auf dem Bereiche je nach Häufigkeit in unterschiedlichen Farben hervorgehoben werden.
Wenn dein Heatmap-Tool ein bestimmtes Element deiner UI hervorhebt, bedeutet das, dass ein Nutzer (oder viele) darauf geklickt hat bzw. haben. Die jeweilige Farbe zeigt dir, wie viele Klicks dieses Element erhalten hat.
Heatmap-Tools nutzen in der Regel Farben aus der Temperaturskala.
In den stark frequentierten Bereichen siehst du wärmere Farben dieses Gradienten, während die weniger beachteten Bereiche kühler dargestellt werden.
So sieht die Datenvisualisierung einer Tap Map in einer mobilen App zur Finanzverwaltung aus.
Wir sehen, dass die Bereiche, die die Ausgaben für einzelne Transaktionen anzeigen, in Rot hervorgehoben sind. Das bedeutet, dass viele Nutzer dort drauf tippen (vermutlich, um die jeweilige Transaktion zu erweitern und Details anzuschauen).
Der Kontostand ganz oben ist dagegen grün markiert – was darauf hinweist, dass nur wenige Nutzer darauf tippen.
Wie du eine Click Map nutzt
Click Maps bergen viele unmittelbar verwertbare Erkenntnisse. Du kannst eine Menge über das Verhalten deiner Nutzer lernen, indem du analysierst, auf welche Bereiche sie klicken.
Wenn du z. B. für eine Hundeschutz-App mit einer Spendenseite verantwortlich bist, die es Nutzern ermöglicht, dein Tierheim finanziell zu unterstützen, kannst du über die Click Map sehen, welche Spendenoption am meisten genutzt wird.
Wenn man sich die obenstehende Tap Map ansieht, wird klar, dass die $10-Option sowie „Other“ mit Abstand die beliebtesten Spendenbeträge sind.
Ein wichtiger Rückschluss daraus ist, dass es vermutlich einen Spendenbetrag gibt, der in der Liste fehlt (z. B. $1), sodass viele Nutzer „Other“ anklicken, um diesen Betrag eingeben zu können.
Daher wäre es vermutlich sinnvoll, zu überprüfen, welche Beträge im „Other“-Feld eingegeben werden, die populärsten herauszufinden und diese in die Liste aufzunehmen.
#2: Scroll Maps
Wie der Name schon sagt, kannst du mit dieser Art von Heatmap das Scrollverhalten deiner Nutzer analysieren.
Scroll Maps werden ebenfalls anhand der Temperaturskala farbcodiert. Anstatt aber einzelne Interaktionspunkte hervorzuheben, werden Abschnitte deiner Seite anhand der Anzahl der Besucher, die bis dorthin gescrollt und diese Bereiche gesehen haben, eingefärbt.
Genau wie bei anderen Heatmaps erhältst du warme Farbtöne für Abschnitte, die viele Nutzer scrollen und ansehen, und kalte Farben für die weniger gesehenen Bereiche.
Wie du eine Scroll Map nutzt
Scroll-Maps sind hervorragend geeignet, um die Position bestimmter Elemente oder Abschnitte auf Ihrer Seite zu optimieren und Nutzungs- bzw. Engagement-Probleme mit diesen Bereichen zu beheben.
Schauen wir uns einen typischen Fall der Problemlösung an, indem wir die Scroll-Map der Preisübersichtsseite eines SaaS-Dienstes namens Nelio betrachten.
Stellen Sie sich vor, Sie haben Probleme mit der Wettbewerbsfähigkeit. Aus irgendeinem Grund melden sich die Leute lieber bei Ihren Konkurrenten an. Wenn Sie sie fragen, warum, sagen sie, dass das andere Tool eine Multi-Goal-Tracking-Funktion hatte und Ihres nicht.
Das Problem ist jedoch, dass Sie diese Funktion tatsächlich besitzen – Sie müssen jetzt also verstehen, warum die Leute diese nicht entdecken.
Wenn Sie sich die Scroll-Map Ihrer Preisübersichtsseite ansehen, stellen Sie fest, dass die große Mehrheit Ihrer Nutzer die Seite überhaupt nicht scrollt. Dann bemerken Sie, dass die Beschreibung Ihrer Multi-Goal-Tracking-Funktion unterhalb des sichtbaren Bereichs, in der blauen Zone, liegt. Das bedeutet, dass nur wenige Ihrer Nutzer nach unten scrollen und diese Beschreibung lesen – was auf das Verhalten der meisten scrollenden Nutzer zutreffen kann.
Problem erkannt! Um das zu lösen, könnten Sie in Erwägung ziehen, die Features im Abschnitt „Alle Pläne beinhalten“ als zusätzliche Elemente in Ihren Preislisten aufzuführen – damit sie von Anfang an sichtbar und ohne Scrollen auffindbar sind.
#3: Hover-Heatmaps
Auch bekannt als Move-Map, verfolgt diese Art von Heatmap die Position der Maus – Sie können damit das „Bewegungs“-Verhalten Ihrer Nutzer über eine Oberfläche hinweg visualisieren.
In den meisten Fällen gehen wir bei Hover-Heatmaps davon aus, dass Nutzer wahrscheinlich das Element mit den Augen betrachten, über dem sich ihr Cursor befindet. Indem wir also die Mausbewegung tracken, korrelieren wir das mit dem, was die Nutzer gerade anschauen, während sie unsere Oberfläche bedienen.
Visuell besteht eine Hover-Heatmap aus markierten Punkten (wieder mit einer Farbskala von Temperaturfarben) für die Bereiche Ihrer Benutzeroberfläche, auf denen sich der Mauszeiger Ihrer Nutzer am längsten aufgehalten hat. Darüber hinaus bieten manche Heatmap-Tools auch eine „Spur“ an, die zeigt, wo Ihre Nutzer typischerweise beginnen und wie sie sich über Ihre Oberfläche bewegen.
So sehen diese Spuren aus.
Dies ist die Maus-Tracking-Heatmap von wahrscheinlich einer der besten UX-Interfaces der Welt – Apples Website (immerhin ist dort die Heimat der ersten UX-Designer der Geschichte). Diese Spuren zeigen, dass sich Besuchende der MacOS Snow Leopard Landingpage zunächst die faszinierende Raubkatze ansehen, bevor sie die Überschrift lesen und mit den anderen Elementen der Seite fortfahren.
Wie Sie eine Hover-Map verwenden
Eine der interessanten Möglichkeiten, wie Sie eine Bewegungs-Map einsetzen können, ist das Erkennen von Nutzer-Ablenkungen.
Angenommen, Sie sind verantwortlich für die Optimierung der Amazon-Suchergebnisseite (Ihr Ziel ist es, dass Nutzer auf ein von Amazon gefundenes Produkt klicken), könnten Sie sich die Hover-Heatmap anschauen und feststellen, dass der Großteil der Nutzer zunächst auf einen Ihrer Banner blickt (z. B. eine Ankündigung), bevor sie die Suchergebnisse betrachten.
Das ist eine große Ablenkung für Ihre Nutzer und kann die Wahrscheinlichkeit verringern, dass sie auf Suchergebnisse klicken. Sie würden also diesen Banner entfernen oder optisch weniger hervorheben.
#4: Attention-Heatmaps
Bis jetzt haben wir über drei Analyse-Tools gesprochen, mit denen Sie Ihre Nutzer visuell analysieren können – über Klicks, Mausbewegungen und Seiten-Scrolling.
Auch wenn jedes davon wertvolle Informationen liefern kann, könnte das ausschließliche Verlassen auf nur eines davon irreführend sein. Nutzungsverhalten isoliert zu betrachten, ohne den entsprechenden Kontext, verschafft uns möglicherweise keinen ausreichenden Überblick darüber, was tatsächlich geschieht.
Daher verwenden Produktteams in der Regel alle diese Varianten gleichzeitig und kombinieren die Erkenntnisse aus allen drei, bevor sie diese analysieren und Schlussfolgerungen ziehen. Dennoch ist diese Methode ebenfalls nicht perfekt, denn Sie müssen wahrscheinlich dreimal so viel Zeit für die vollständige Analyse aufwenden.
Zum Glück können moderne Heatmap-Visualisierungstools, dank fortschrittlicher Algorithmen und KI-Modelle, die gewonnenen Informationen aus Nutzerklicks, Mausbewegungen und Scroll-Verhalten in einer einzigen Heatmap vereinen.
Dieser vierte Typ nennt sich Attention-Heatmap, da Sie im Wesentlichen erkennen können, welchen Teilen des UI Ihre Nutzer am meisten Aufmerksamkeit schenken. Optisch sieht sie einer Klick-Map sehr ähnlich: Bestimmte Elemente Ihrer Benutzeroberfläche sind jeweils abhängig von der Menge an Nutzeraufmerksamkeit in unterschiedlichen Farben der Temperaturskala hervorgehoben.
#5: Geografische Heatmaps
Heatmaps gibt es schon viel länger, als dass Menschen diese Technik auf Benutzeroberflächen angewendet hätten. Eine der bekanntesten traditionellen Arten von Heatmaps ist die geografische Karte.
In diesem Fall hebt man bestimmte Bereiche auf einer Karte hervor, je nach Art des ausgewählten Datenpunkts. Wenn Sie beispielsweise die geografische Verteilung von Touristenattraktionen in Frankreich analysieren möchten, können Sie diese geografische Heatmap nutzen.
Auf der obenstehenden Karte wird 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 verwendet
Sich die Tourismusdaten Frankreichs anzusehen ist cool, aber können diese Heatmaps mir helfen, mein digitales Produkt zu analysieren? Ich zeige Ihnen ein Beispiel.
Bleiben wir beim Thema Tourismus (und Frankreich) und stellen Sie sich 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 verbreiten, um mehr Nutzer dazu zu bringen, Hotels über Ihren Service zu buchen.
Die erste Frage, die Ihnen in den Sinn kommt, lautet: Mit welcher Stadt/Fest sollen Sie beginnen?
Um darauf eine Antwort zu finden, können Sie eine geografische Heatmap erstellen, die die Verteilung der Mietwohnungen und Apartments zeigt, die Ihren Service nutzen.
Wenn Sie sich die Karte ansehen, wird deutlich, dass Ihr Service im Süden Frankreichs besonders beliebt ist. Vielleicht sollten Sie also mit der Werbung für die Festivals in der Provence und an der Côte d’Azur beginnen.
#6: Rage-Click-Maps
Dies ist ein Untertyp der Click-Maps, der Ihnen nur die Fälle anzeigt, in denen Ihre Nutzer mit Frust auf ein Element geklickt haben. Heatmapping-Tools erkennen meist dann einen Rage-Click (oder Dead-Click), wenn ein Nutzer wiederholt auf dasselbe Element klickt.
Wie man eine Rage-Click-Map verwendet
Rage-Click-Maps sind hervorragende Werkzeuge, um problematische Nutzererfahrungen zu erkennen. Es kann sich dabei um ein Element handeln, das wie ein Link aussieht, aber keiner ist, wenig intuitiv ist oder einfach ein Button, der nicht funktioniert.
Wenn wir beispielsweise eine Rage-Click-Datenanalyse auf einer der Iterate-Seiten durchführen würden, würden wir mit Sicherheit an mindestens zwei Stellen Rage-Clicks erhalten – aus folgendem Grund:
Haben Sie die beiden blau markierten Textelemente bemerkt? Sie sind keine Links, sondern ganz gewöhnlicher Text, der blau eingefärbt wurde. Viele Iterate-Besucher (mich eingeschlossen) haben versucht, auf diese Textelemente zu klicken, in der Erwartung, auf eine andere Seite weitergeleitet zu werden.
Natürlich passiert nach dem Klicken nichts, was dazu führen kann, dass Nutzer frustriert werden und anfangen, im Frust wiederholt zu klicken („rage-klicken“).
Die aus der Analyse der Rage-Click-Map dieser Seite gezogene Lehre wäre, darauf zu achten, dass Ihr Text zum Beispiel nicht wie ein Hyperlink aussieht. Vielleicht könnten Sie einmal einen A/B-Test mit unterschiedlichen Farben durchführen, um herauszufinden, ob Ihre Annahme, dass blaue Texte zu Rage-Clicks führen, richtig oder falsch ist.
#7: Eye-Tracking-Heatmaps
Bisher haben wir Hover-Maps verwendet, um zu verstehen, wohin unsere Nutzer beim Surfen auf unserer Webseite schauen. Wir gehen davon aus, dass die Augen der Nutzer dem Mauszeiger meist folgen. Daher kann die Bewegung des Cursors über die Oberfläche Auskunft darüber geben, worauf sich der Blick der Nutzer konzentriert.
Dies ist eine gängige Methode zur Analyse von Aufmerksamkeit. Allerdings liefert die dadurch entstehende Heatmap keine perfekten Daten, weil die Nutzer ihren Cursor nicht immer anschauen.
Wenn Sie genaue standortbezogene und numerische Informationen darüber erhalten möchten, worauf Ihre Nutzer schauen, sollten Sie eine Eye-Tracking-Heatmap einsetzen.
Im Gegensatz zu den anderen Arten benötigen Eye-Tracking-Heatmaps spezielle Ausrüstung, die Nutzer tragen müssen. So wird ihre Augenbewegung erfasst und festgestellt, welche Elemente sie betrachten.
Das bedeutet, dass Sie Ihre Nutzer zu speziellen Testsitzungen einladen müssen, ihnen diese Tracker anlegen und sie Ihr Produkt benutzen lassen. Auch wenn dies wesentlich zeitaufwändiger und teurer ist, ist die Qualität der gewonnenen Daten weitaus höher als alles, was Sie von anderen Arten von Website-Heatmaps erhalten können.
So nutzen Sie eine Eye-Tracking-Heatmap
Angesichts der Kosten für die Organisation von Eye-Tracking-Test-Sessions werden Sie Eye-Tracking wahrscheinlich nur in besonders wirksamen Bereichen der UX-Optimierung einsetzen.
Eye-Tracking-Studien sind sehr verbreitet bei Produkten großer Tech-Unternehmen, da eine Verbesserung der Benutzerfreundlichkeit um nur 1% bereits zu einem Umsatzplus und Return on Investment in zweistelliger Millionenhöhe führen kann.
Stellen Sie sich nur vor, wie viel zusätzliches ARR Amazon erhalten würde, wenn sie eine Eye-Tracking-Studie durchführen und ihre hervorgehobenen Produkt-Banner so platzieren, dass die Conversion-Rate um 1% steigt.
#8: [Bonus] Konfetti-Maps
Konfetti-Heatmaps sind eine Unterart gewöhnlicher Klickmaps, die einzelne Klicks anstelle von Bereichen hervorheben, in denen die Nutzer geklickt haben.
Der Vorteil der Analyse einzelner Klicks liegt darin, dass Sie diese anhand verschiedener komplexer Datenpunkte filtern können.
Hier haben wir zum Beispiel die Klicks auf den Such-CTA nach dem Wochentag gruppiert, an dem das Klick-Ereignis stattfand.
Auf Basis der Daten sehen wir, dass die meisten Klicks dienstags erfolgen, während die Besucher am Montag am abgelenktsten sind (viele Klicks überall auf der Oberfläche).
So nutzen Sie eine Konfetti-Heatmap
Konfetti-Heatmaps sind besonders nützlich, wenn Sie das Nutzerverhalten auf granularer Ebene analysieren möchten. Im Gegensatz zu herkömmlichen Heatmaps, die aggregierte Daten anzeigen, ermöglichen Konfetti-Maps das Filtern einzelner Klicks nach Parametern wie Gerätetyp, Herkunftsquelle oder auch Tageszeit.
Dieser Heatmap-Typ eignet sich hervorragend, um Muster zu erkennen, die sonst unbemerkt bleiben würden. Wenn zum Beispiel Ihr Checkout-Button am Freitag mehr Klicks erhält, aber am Montag deutlich weniger, könnten Ihre Nutzer impulsive Einkäufer sein, die am Zahltag zuschlagen – und Ihre Montagskundschaft erholt sich vielleicht noch vom Wochenende und starrt statt zu konvertieren nur auf Ihre Preisseite.
Konfetti-Maps können auch unerwartete Ablenkungen aufzeigen. Wenn Nutzer überall auf der Seite klicken, statt dort, wo Sie es möchten, könnten sie verwirrt sein – oder einfach verzweifelt nach einem "Lebenszeichen" suchen. Wenn Ihr Navigationsmenü mehr Klicks bekommt als Ihr CTA, kann das bedeuten, dass Nutzer sich verirrt fühlen und eher einen Ausweg suchen, als sich zu engagieren. Erkenntnisse aus Heatmaps können Ihnen helfen, Ihre User Journey Map gezielt zu verfeinern, insbesondere, um Reibungspunkte zu identifizieren. Durch das Filtern nach Nutzersegmenten sehen Sie, welche Gruppen am meisten Schwierigkeiten haben und wo Sie das Nutzungserlebnis optimieren sollten.
Heatmaps stärken Ihr Nutzerverständnis
Jede Heatmap-Art, die wir hier gemeinsam entdeckt haben, gibt Ihnen Einblicke darin, wie Nutzer sich durch Ihr Produkt bewegen und es nutzen. Wenn Sie mit begrenzten Ressourcen arbeiten, bieten Heatmaps eine schnelle und schlanke Möglichkeit, UX-Research durchzuführen, bevor Sie in ausführlichere Usability-Tests investieren. Mit ihrer Hilfe können Sie die Schwierigkeiten Ihrer Nutzer sehen und nachvollziehen und gezielt an deren Behebung arbeiten.
Kombiniert mit Produkt-Analyse-Tools ermöglichen Heatmaps ein klareres Bild davon, wie Nutzer mit Ihrem Produkt interagieren und wo sie abspringen. Zum Beispiel gibt Ihnen die Verbindung von Heatmaps mit Session-Replay-Tools sowohl das „Was“ als auch das „Warum“ des Nutzerverhaltens.
Heatmaps sind großartig, aber sie sind nur eines von vielen Werkzeugen, das Ihnen hilft, Nutzerempfinden zu entwickeln. Um mehr über den Rest zu erfahren, melden Sie sich unbedingt für unseren Newsletter an.