Skip to main content

Ein datengetriebener Product Manager zu werden, gehört zu den besten Dingen, die du tun kannst, um deine Produktkompetenz auf das nächste Level zu heben.

Im Rahmen dieser Bemühungen hast du vermutlich bereits begonnen, mit verschiedenen Analyse-Tools zu arbeiten und sogar versucht, deine Entscheidungen auf deren Daten zu stützen. Wenn du auf diesen Artikel gestoßen bist, gehe ich davon aus, dass du daran interessiert bist, deine Benutzeroberfläche mithilfe von Heatmaps zu analysieren.

Falls ja, bist du hier genau richtig. Tauchen wir gemeinsam tief in dieses heiße Tool ein!

Du willst mehr vom The CPO Club?

Registriere dich für eine kostenlose Mitgliedschaft, um diesen Artikel vollständig zu lesen:

This field is for validation purposes and should be left unchanged.
Name*
This field is hidden when viewing the form
This field is hidden when viewing the form
This field is hidden when viewing the form
By submitting, you agree to receive our newsletter and occasional emails related to The CPO Club. You can unsubscribe at any time. For details, review our Privacy Policy.

Was ist Heatmap Analytics (und wie funktionieren Heatmaps?)

Heatmap Analytics ist eine Methode, um das Verhalten deiner Nutzer zu messen, zu visualisieren und zu analysieren – und zwar mithilfe von, wie du vermutlich schon erraten hast, Heatmaps.

Heatmaps sind Screenshots deiner Benutzeroberfläche, die mit verschiedenfarbigen Overlays hervorgehoben werden – je nachdem, wie deine Nutzer mit den unterschiedlichen Bereichen der Seite interagieren. Die zum Highlighten verwendeten Farben reichen in der Regel von Rot (viel Nutzerinteraktion) bis Blau (wenig Nutzerinteraktion).

log in screenshot
Quelle: Useitbetter

Die oben abgebildete Heatmap ist ein Beispiel für eine „Click Map“, die die Klick-Hotspots der Nutzer verfolgt und visualisiert.

Wie wir sehen können, erhalten die Buttons „Login“ und „Konto erstellen“ hier viele Klicks, aber das Navigationsmenü am oberen Rand zieht kaum Aufmerksamkeit der Nutzer auf sich.

Heatmaps sind fantastische Visualisierungstools, um dein Produkt und die User Experience zu analysieren. Sie bringen eine Vielzahl von Vorteilen, aber auch einige Nachteile mit sich. Lass uns mehr über beide Seiten dieses Tools erfahren.

Welche Vorteile bieten Heatmap-Tools?

Heatmap-Software wird immer beliebter. Früher gehörten sie noch hauptsächlich ins Repertoire von Digital Marketers – bis Produktteams ihren Nutzen für die Optimierung der User Experience entdeckten. Heute sind sie ein unverzichtbares Werkzeug für Product Manager und UX-Designer.

Und das aus gutem Grund – Heatmap-Tools sind einfach so gut darin, das Nutzungsverhalten deiner User zu verdeutlichen. Falls du noch keine Heatmap in deinen Product Stack integriert hast, solltest du das dringend nachholen – und hier sind einige Vorteile von Heatmaps, die hoffentlich auch dein Produktteam überzeugen werden.

Heatmaps sind großartig bei der Visualisierung komplexer Daten

Kannst du dir vorstellen, wie Nutzerdaten zu Klicks in einem nicht-visuellen Format aussehen würden? Wahrscheinlich etwa so:

heatmap data and visualization

Au, meine Augen!

Versuche jetzt, das Nutzerverhalten anhand dieser Datenpunkte zu beurteilen. Kannst du mir sagen, auf welche Buttons die Nutzer am liebsten klicken? Wahrscheinlich nicht.

Probieren wir jetzt eine visuelle Darstellung derselben Daten.

hotjar screenshot
Ahhh, was für eine Erleichterung. Quelle: UserPilot

Es ist viel einfacher zu erkennen, welche Buttons besser performen, wenn man sich diese Visualisierung anschaut, oder?

Die Stärke von Heatmaps liegt darin, komplexe Informationen extrem anschaulich und leicht verständlich darzustellen.

Wir haben die wichtigsten Ressourcen gesammelt – KI-Prompts, exklusive Angebote und eine Bibliothek mit Materialien für Produktverantwortliche. Schalte dein Konto frei für den Zugriff.

Wir haben die wichtigsten Ressourcen gesammelt – KI-Prompts, exklusive Angebote und eine Bibliothek mit Materialien für Produktverantwortliche. Schalte dein Konto frei für den Zugriff.

This field is for validation purposes and should be left unchanged.
Name*
This field is hidden when viewing the form
This field is hidden when viewing the form
This field is hidden when viewing the form
By submitting, you agree to receive our newsletter and occasional emails related to The CPO Club. You can unsubscribe at any time. For details, review our Privacy Policy.

Heatmaps helfen dabei, Nutzerabsichten zu erkennen

Moderne Web-Analytics-Tools (z. B. Google Analytics oder Amplitude) sind hervorragend darin, das Verhalten und die demografischen Daten deiner Besucher zu tracken und zu visualisieren (ich rede hier zwar oft vom Web, aber Heatmaps sind auch für mobile Geräte und Apps äußerst nützlich). Das Hauptproblem dieser Tools ist allerdings, dass die erfassten Daten meist sehr „quantitativ“ sind und ihnen die „qualitative“ Perspektive fehlt: Warum verhalten sich Nutzer auf eine bestimmte Weise?

Wenn sich täglich 2.000 Personen für dein Produkt registrieren, aber nur 100 deine App herunterladen und installieren, kannst du mit Sicherheit sagen, dass bei der Aktivierung etwas nicht stimmt. Aber du kannst damit nicht den genauen Auslöser erkennen oder herausfinden, warum die Leute die App nicht installieren.

Mit einem Heatmap-Tool hingegen könntest du beispielsweise über eine Rage-Click-Map feststellen, dass der Download-Button in bestimmten Browsern nicht funktioniert und die Nutzer daher frustriert mehrfach darauf klicken.

Und genau das ist einer der größten Vorteile von Heatmaps – sie ergänzen quantitative Daten um qualitative Einblicke.

Heatmaps sind kosteneffiziente Alternativen zu Usability-Tests

Lassen Sie mich das klarstellen. Heatmaps können und sollten Usability-Tests nicht ersetzen. Usability-Tests sind äußerst wertvoll für Ihr Produkt und Ihre Designarbeit, und Sie sollten niemals in Erwägung ziehen, darauf zu verzichten.

Heatmaps sparen Ihnen jedoch Zeit und Aufwand, wenn es um Usability-Tests für grundlegende Seitenelemente und Nutzerpfade geht. Wenn Sie beispielsweise etwas so Einfaches wie eine Anmeldeseite testen, müssen Sie dafür nicht wirklich eine Usability-Test-Session organisieren.

Screenshot der Anmeldeseite

Alles, was Ihre Nutzer auf einer Login-Seite tun, ist, ihre Zugangsdaten einzugeben und auf einen der verfügbaren Login-Buttons zu klicken. Durch die Auswertung der Heatmap-Daten können Sie leicht nachvollziehen, wie Nutzer mit Ihren E-Mail-/Passwortfeldern und Buttons interagieren. Für so einen Anwendungsfall wäre ein Usability-Test mit anschließender Sessionsichtung reine Verschwendung.

Was sind die Grenzen von Website-Heatmaps?

Heatmaps wirken wie fantastische Werkzeuge, um Nutzerverhalten und -absichten kosteneffizient zu visualisieren. Aber wie jedes andere Tool sind auch sie nicht fehlerlos und bringen ein paar Einschränkungen mit sich, die Sie bei der Nutzung von Heatmaps berücksichtigen sollten.

Hier stoßen Heatmaps an ihre Grenzen:

Qualitative Erkenntnisse sind bei Heatmaps begrenzt

Ich habe die qualitativen Erkenntnisse bereits als großen Vorteil von Heatmaps erwähnt. Aber ich muss auch fair bleiben und sagen, dass diese Einsichten begrenzt sind.

Ja, Sie können ganz einfach Rage-Clicks auf einer Seite erkennen und anhand der Bewegungs-Heatmap sehen, wie sich der Mauszeiger der Nutzer über Ihre Oberfläche bewegt. Und ja, diese Daten helfen Ihnen, die grundsätzlichen Absichten und Gefühle Ihrer Nutzer nachzuvollziehen.

Aber weiter als diese „grundsätzlichen Absichten“ geht es mit Heatmaps nicht.

Wenn Sie zum Beispiel eine Heatmap Ihrer Login-Seite betrachten, sehen Sie vielleicht, dass die Mehrheit der Nutzer sich manuell mit Eingabe der E-Mail-Adresse anmeldet und nur sehr wenige die Option „Login mit Google“ benutzen.

Ihre Heatmap kann Ihnen jedoch nicht erklären, warum dieses Verhalten auftritt. Um diesem Verhalten auf den Grund zu gehen, müssen Sie Nutzerinterviews führen, Umfragen veranstalten oder auf andere Weise relevantes Nutzerfeedback einholen.

In diesem konkreten Fall könnten Sie beispielsweise mit einigen Ihrer Nutzer sprechen und feststellen, dass sie überwiegend im Unternehmensbereich tätig sind und die meisten Outlook-E-Mails anstelle von Googles G-Suite nutzen. Da es keine „Login mit Microsoft“-Option gibt, geben diese Nutzer ihre E-Mail-Adresse stattdessen manuell ein.

Zu viel Fokus auf einfache Interaktionen

Ein weiterer Nachteil von Heatmaps ist, dass sie nur Scroll-, Mausbewegungs- und Klickverhalten erfassen. Das bedeutet, wenn Sie sich ausschließlich auf Heatmaps zur Analyse des Nutzerverhaltens verlassen, können Sie in die Irre geführt werden – denn gut aussehende Heatmap-Daten (z.B. viele Klicks) bedeuten nicht automatisch auch „gute“ Interaktion.

Ich betone es noch einmal:

Gut aussehende Heatmap-Daten bedeuten nicht immer auch gute Nutzerinteraktion.

Stellen Sie sich vor, Sie sehen die Heatmap des Dokumenteneditors von Google Docs und bemerken, dass viele Nutzer auf den Teilen-Button klicken. Begeistert schließen Sie (vielleicht voreilig), dass Ihre Teilen-Funktion hervorragend funktioniert.

Doch wenn Sie Ihre anderen Website-Analyse-Tools prüfen, stellen Sie fest, dass, obwohl Nutzer auf den Teilen-Button klicken und das Sharing-Popup öffnen, nur sehr wenige tatsächlich ihre Dokumente mit anderen teilen. Die Mehrheit der Nutzer schließt das Sharing-Popup direkt wieder.

Datenschutz-Bedenken

Heatmap-Tools sind berüchtigt dafür, dass sie aktiv sensible Nutzerdaten tracken und speichern. Daran führt kein Weg vorbei: Sie müssen die Mausbewegungen und Klicks Ihrer Nutzer erfassen, um eine Heatmap erstellen zu können.

Wenn Sie also eine Heatmap-Lösung integrieren (vor allem, wenn sie Echtzeit-Analysen, Session-Replays und Pageviews bietet), müssen Sie sich darüber bewusst sein und sicherstellen, dass Ihre Nutzer nicht genervt darüber sind, dass ihr Surfverhalten getrackt wird.

Ein weiterer Punkt, den Sie beachten müssen, ist die rechtliche Compliance. Sie sollten eng mit Ihren Rechts- und Security-Teams zusammenarbeiten, um die richtigen rechtlichen Unterlagen zu erstellen und sicherzustellen, dass Ihre Tracking-Maßnahmen niemandes Rechte verletzen oder rechtliche Risiken für Ihr Unternehmen erzeugen.

Das ist besonders wichtig, wenn Sie angeben, große Datenschutzgesetze wie DSGVO, CalOPPA usw. einzuhalten.

Das ist im Wesentlichen die Analyse von Heatmaps mit Stärken und Schwächen. Schauen wir uns nun an, wie Sie dieses Tool zur Analyse des Kundenverhaltens nutzen und daraus wertvolle Erkenntnisse gewinnen können.

3 Praxisbeispiele für Heatmap-Analysen

Nach meiner Erfahrung haben sich Heatmaps als äußerst nützliche Werkzeuge erwiesen, um zu verstehen, was mit Ihrem Produkt wirklich passiert.

Unter Berücksichtigung der Vorteile und Einschränkungen dieses Tools betrachte ich Heatmap-Daten fast nie isoliert. Stattdessen kombinieren mein Team und ich sie in der Regel mit den Daten anderer Analyse-Tools, um einen umfassenderen Überblick über unser Produkt und unsere Nutzer zu erhalten.

Um dir bei der praktischen Anwendung von Heatmaps zu helfen, möchte ich dir ein paar echte Anwendungsfälle vorstellen.

1. Rage-Clicks entschlüsseln: A/B-Tests mit Fullstory Rage-Click-Maps und Google Optimize

Lass mich mit einem Analyse-Anwendungsfall beginnen, der meine Lieblingsart von Heatmaps einbezieht—Rage-Click-Maps.

Man kann einen Klick eines Nutzers auf dein UI als "Rage Click" bezeichnen, wenn er mehrmals kontinuierlich auf dasselbe Element klickt. Es wird allgemein angenommen, dass dieses Verhalten auf Nutzerfrustration und Ärger hinweist (daher der Name).

Es gibt viele Gründe, warum Nutzer zu Rage-Clicks neigen könnten. Am häufigsten werden sie ausgelöst durch:

  • Ein Element sieht klickbar aus, ist es aber nicht. Dein Nutzer klickt darauf, denkt, es funktioniert nicht, und wird wütend.
  • Deine Buttons funktionieren einfach nicht. Selbsterklärend.
  • Die Buttons funktionieren, aber ein Designproblem erschwert das gezielte Anklicken eines oder mehrerer Buttons.

Mithilfe von Rage-Click-Maps kannst du die Elemente in deinem UI identifizieren, auf denen Rage Clicks auftreten, versuchen, die Ursache zu verstehen, und das Problem beheben. So kann das beispielsweise bei einer E-Commerce-Seite, die Obst und Gemüse verkauft, aussehen.

screenshot of e-commerce site selling fruits and veggies
Quelle: Fullstory

Das Problem beim Finden und Beheben fehlerhafter Bereiche ist, dass dein Fix möglicherweise nicht wirkt und Nutzer weiterhin Rage-Clicken. Zur Überprüfung kannst du ein beliebiges A/B-Testing-Tool (z. B. Google Optimize) verwenden, um die Wirksamkeit deiner Korrektur zu testen.

So geht's: Lege einen A/B-Test an, bei dem Variante A die von dir eingebrachte Korrektur ist und Variante B der Ursprungszustand. Nachdem du den A/B-Test aktiviert hast, beobachte die Rage-Click-Maps beider Varianten und zähle die Rage-Clicks pro Variante.

Hat deine Variante A weniger Rage-Clicks erhalten, hat dein Fix funktioniert und du kannst ihn mit gutem Gewissen ausrollen.

2. Konversionsraten entschlüsseln: Conversion-Rate-Optimierung mit Hotjar Move Maps und Google Analytics

Das nächste Beispiel ist wahrscheinlich der beliebteste Anwendungsfall für Heatmaps—die Analyse von Konversionen (oder ähnlichen Metriken).

Wie schon erwähnt, liefert dir die Kombination von Daten aus Heatmaps und Analyse-Tools das beste Ergebnis, um präzise Informationen zu bekommen und Fehlschlüsse zu vermeiden. In diesem konkreten Fall siehst du, wie du Google Analytics und Hotjar Move Maps kombinieren kannst.

Suren Karapetyan

Hinweis

Move Maps zeigen, wo sich der Cursor deiner Nutzer während der Sitzung auf der Seite bewegt und verweilt hat.

Stell dir vor, du leitest einen Online-Shop, der zwei Versandoptionen für die Lieferung an Kunden anbietet. Die Preise für diese beiden Optionen sind 2 $ für den "Standard"- (auch "langsamen") Versand und 10 $ für den "Express"-Versand.

Dein Ziel in diesem hypothetischen Beispiel ist es, die Konversionsrate der günstigen und der teuren Versandoption zu analysieren.

So geht's: Sieh dir zuerst die Konversionsrate für die teure Option in Google Analytics an. Angenommen, diese liegt bei 5 % (bzw. nur 1 von 20 Nutzern wählt die teurere Option). Das sind wirklich schlechte Nachrichten, daher musst du jetzt die Ursache für diese geringe Quote verstehen.

Dafür solltest du dir die Move Map deiner Checkout-Seite (auf der die Versandoption gewählt wird) anschauen. Stell dir vor, die Move Map zeigt, dass Nutzer ihren Cursor über die teure Versandoption bewegen, dann auf den Text "Express-Versand" klicken (statt auf den darunterliegenden "Auswählen"-Button), aufgeben und letztlich mit der günstigeren Option (die standardmäßig ausgewählt ist) fortfahren.

Dieses Verhalten liefert uns einige mögliche Hypothesen:

  1. Deine Nutzer möchten eigentlich mehr über die teure Option erfahren, bevor sie sie auswählen, da sie den zusätzlichen Wert/Vorteil nicht wirklich verstehen.
  2. Der "Auswählen"-Button ist nicht ausreichend sichtbar—vielleicht ist er für die meisten Nutzer außerhalb des sichtbaren Bereichs.

Wir können dann ein bis zwei kurze Interviews mit Nutzern führen und überprüfen, ob unsere Hypothesen stimmen, oder ob das Problem ganz woanders liegt.

3. Rennen nach unten: Leistungsoptimierung für FAQ-Abschnitte mit Scroll Maps

FAQ-Bereiche sind stark unterschätzte Werkzeuge in der Welt des Produktmanagements.

FAQs sind hervorragende Werkzeuge für Product Manager. Eine der besten Einsatzmöglichkeiten für die Integration eines FAQ-Bereichs in Ihr Produkt oder Ihre Website besteht darin, potenzielle Käufer zu überzeugen, die bereits kurz vor dem Kauf stehen, aber vor der Entscheidung noch Antworten auf einige Fragen benötigen, die sie beschäftigen.

Angesichts des Mehrwerts, den Sie aus Ihrem FAQ-Bereich ziehen, ist es ziemlich wichtig, dessen Leistung zu überwachen und zu optimieren.

So geht's: Normalerweise platzieren wir die FAQs am Ende einer Webseite – aber es besteht eine erhebliche Wahrscheinlichkeit, dass Ihre Nutzer nicht so weit nach unten scrollen und den Bereich verpassen. Um dies zu messen, können Sie Scroll-Heatmaps nutzen. Diese zeigen an, wie viel Zeit die Nutzer auf jedem Abschnitt der Seite verbringen und wie weit sie tatsächlich heruntergescrollt haben.

So sieht das aus:

hotjar screenshot of FAQs
Quelle: Hotjar

In diesem konkreten Beispiel sehen wir, dass die Mehrheit der Nutzer den oberen Teil der Seite gesehen hat (er ist rot), aber nur 44 % haben so weit nach unten gescrollt, dass sie den FAQ-Bereich sehen konnten (er ist blau und mit einer Prozentangabe markiert).

44 % ist ehrlich gesagt ein gutes Ergebnis. Wenn Sie jedoch denken, dass mehr Besucher Ihre FAQ sehen sollten, würde ich empfehlen, nach einer UX-Lösung zu suchen, die es den Nutzern ermöglicht, direkt zum FAQ-Bereich zu "springen".

Möchten Sie mehr Heatmap-Beispiele aus der Praxis sehen? Dieser Artikel zeigt, wie Marken visuelle Verhaltensdaten nutzen, um klügere UX-Entscheidungen zu treffen.

Visualisierte Daten sind großartig, aber in Kombination mit Ihrer Produktintuition noch besser.

Heatmaps und andere Analysetools verbessern die Qualität Ihrer Entscheidungen erheblich – genau das macht Sie zu einem datengetriebenen PM!

Aber wenn ich Ihnen einen Rat geben darf, dann diesen:

Verlassen Sie sich nicht ausschließlich auf Analysedaten – hören Sie auch auf Ihr Herz.

Als Product Manager verfügen wir über diese Superkraft namens Produktintuition, die uns hilft, kluge Entscheidungen zu treffen – auch wenn uns nur wenige Analysedaten zur Verfügung stehen. Wenn Sie also Ihre Intuition mit den Erkenntnissen aus Ihren Heatmaps verbinden, können Sie Ihre Entscheidungsfähigkeit auf ein ganz neues Level heben.

Eine weitere Superkraft von Product Managern ist der ständige Wissensdurst – und dabei können wir helfen! Abonnieren Sie unseren Newsletter und erhalten Sie alle zwei Wochen Produktmanagement-Insights, Ressourcen und weitere Goodies direkt in Ihr Postfach.

Suren Karapetyan

Suren Karapetyan, MBA, ist leitender Produktmanager mit Schwerpunkt auf KI-gesteuerten SaaS-Lösungen. Er fühlt sich in der schnelllebigen Welt von Start-ups in der Frühphase zu Hause und findet für sie die passende Produkt-Markt-Kombination. Sein Portfolio ist vielfältig und reicht von Software zur Geräuschunterdrückung für Homeoffice-Mitarbeiter bis hin zu Zollabfertigungsprogrammen für Regierungsbehörden.