So nutzen Sie Heatmap-Analysen, um die Nutzerbindung zu steigern

By Suren Karapetyan

Werden Ihre Nutzer von Ihrer UX angezogen wie Motten vom Licht, oder neigen sie dazu, sie einfach fallen zu lassen? So können Produktteams, die nach der perfekten Nutzererfahrung suchen, Heatmap-Analysen nutzen, um der Lösung ein Stück näher zu kommen.

Ein produktorientierter Manager zu werden, der datenbasiert arbeitet, gehört zu den besten Dingen, die du tun kannst, um deine Produktarbeit auf die nächste Stufe zu heben.

Als Teil dieser Bemühungen hast du vielleicht bereits angefangen, mit verschiedenen Analysetools zu arbeiten, und sogar versucht, deine Entscheidungen auf deren Daten zu stützen. Wenn du auf diesem Artikel gelandet bist, gehe ich davon aus, dass du auch daran interessiert bist, deine Benutzeroberfläche mithilfe von Heatmaps zu analysieren.

Wenn das so ist, bist du hier genau richtig. Tauchen wir tief in dieses heiße Tool ein!

Was ist Heatmap-Analyse (und wie funktionieren Heatmaps)?

Heatmap-Analyse ist eine Methode zur Messung, Visualisierung und Analyse des Verhaltens deiner Benutzer mithilfe von – du hast es erraten! – Heatmaps.

Heatmaps sind Screenshots deiner Benutzeroberfläche, die abhängig davon, wie deine Benutzer mit den verschiedenen Bereichen der Seite interagieren, mit unterschiedlich farbigen Ebenen versehen werden. Die zur Hervorhebung verwendeten Farben reichen normalerweise von Rot (viel Benutzerinteraktion) bis Blau (wenig Benutzerinteraktion).

Screenshot der Anmeldung
Quelle: Useitbetter

Die obige Heatmap ist ein Beispiel für eine „Klickkarte“, die die Klick-Hotspots der Benutzer erfasst und visualisiert.

Wie wir sehen können, werden die Schaltflächen „Anmelden“ und „Konto erstellen“ hier häufig angeklickt, während das Navigationsmenü oben von den Benutzern kaum oder gar nicht beachtet wird.

Heatmaps sind hervorragende Visualisierungstools zur Analyse deines Produkts und der Benutzererfahrung. Sie bieten eine Vielzahl von Vorteilen, haben aber auch Nachteile. Sehen wir uns nun beide Seiten dieses Tools etwas genauer an.

Welche Vorteile bietet die Verwendung von Heatmap-Tools?

Heatmap-Software wird immer beliebter. Während sie im vergangenen Jahrzehnt noch zum Bereich der digitalen Vermarkter gehörte, erkannten schließlich auch Produktteams ihren Nutzen für die Feinabstimmung der Benutzererfahrung. Heute sind sie für PMs und UX-Designer zu einem unverzichtbaren Tool geworden.

Und es gibt einen guten Grund dafür, dass Heatmap-Tools so beliebt geworden sind – sie sind einfach so gut darin, die Verhaltensdaten deiner Benutzer zu vermitteln. Wenn du noch kein Heatmap-Tool in deinen Produkt-Stack integriert hast, solltest du das unbedingt tun – und hier sind einige Vorteile von Heatmaps, die dein Produktteam hoffentlich von der Einführung dieses Tools überzeugen werden.

Heatmaps eignen sich hervorragend für die Visualisierung komplexer Daten

Kannst du dir vorstellen, wie Klickdaten von Benutzern in einem nicht visuellen Format aussehen würden? Wahrscheinlich etwa so:

Heatmap-Daten und Visualisierung

Au, meine Augen!

Versuche nun, das Benutzerverhalten anhand dieser Datenpunkte zu verstehen. Kannst du mir sagen, welche Schaltflächen die Benutzer am liebsten anklicken? Wahrscheinlich nicht.

Versuchen wir nun, dieselben Daten visuell darzustellen.

Hotjar-Screenshot
Ahhh, eine wohltuende Erleichterung. Quelle: UserPilot

Es ist viel einfacher zu erkennen, welche Schaltflächen besser funktionieren, wenn man sich diese Visualisierung ansieht, nicht wahr?

Die Stärke von Heatmaps liegt darin, dass sie komplexe Informationen sehr leicht verständlich vermitteln können.

Schalte den Produkt-Tresor frei
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.
Get Free Access

Have an account? Log In

Heatmaps helfen dir, die Absichten der Benutzer zu erkennen

Moderne Webanalysetools (z. B. Google Analytics oder Amplitude) eignen sich hervorragend dazu, das Besucherverhalten und demografische Daten deiner Website zu erfassen und zu visualisieren (ich erwähne zwar ständig das Web, aber Heatmaps sind ebenso für mobile Geräte und mobile Apps nützlich). Ihr Hauptproblem besteht jedoch darin, dass die von ihnen erfassten Daten zu „quantitativ“ sind und die „qualitative“ Perspektive darauf fehlt, warum sich Benutzer auf eine bestimmte Weise verhalten.

Wenn sich jeden Tag 2.000 Benutzer für dein Produkt registrieren, aber nur 100 deine App herunterladen und installieren, kannst du mit ziemlicher Sicherheit sagen, dass etwas mit deiner Aktivierung nicht stimmt. Du wirst jedoch nicht in der Lage sein, das genaue Problem zu bestimmen oder herauszufinden, warum die Benutzer deine App nicht installieren.

Wenn du jedoch ein Heatmap-Tool verwenden würdest, könntest du deine Wutklick-Karte überprüfen und feststellen, dass deine Download-Schaltfläche in bestimmten Browsern nicht funktioniert und die Benutzer deshalb wütend immer wieder darauf klicken.

Dies ist eine weitere der besten Eigenschaften von Heatmaps – sie können deine quantitativen Daten durch qualitative Erkenntnisse ergänzen.

Heatmaps sind kostengünstige Alternativen zu Usability-Tests

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

Heatmaps sparen Ihnen jedoch Zeit und Aufwand bei Usability-Tests grundlegender Seitenelemente und Nutzerabläufe. Wenn Sie beispielsweise etwas so Einfaches wie eine Anmeldeseite testen, müssen Sie nicht wirklich eine Usability-Testsitzung organisieren.

Screenshot einer Anmeldeseite

Alles, was Ihre Nutzer auf einer Anmeldeseite tun, ist, ihre Zugangsdaten einzugeben und auf eine der verfügbaren Anmelde-CTA-Schaltflächen auf der Seite zu klicken. Anhand der Heatmap-Daten können Sie leicht erkennen, wie Nutzer mit Ihren E-Mail-/Passwortfeldern und Schaltflächen interagieren. Usability-Tests durchzuführen und die Sitzungsaufzeichnung für etwas derart Einfaches zu überprüfen, wäre verschwenderisch.

Welche Einschränkungen haben Website-Heatmaps?

Heatmaps wirken wie fantastische Werkzeuge, um Nutzerverhalten und -absichten kostengünstig zu visualisieren. Aber wie jedes andere verfügbare Werkzeug sind sie nicht fehlerlos und bringen einige Einschränkungen mit sich, die Sie bei der Verwendung eines Heatmap-Tools berücksichtigen müssen.

Hier zeigen Heatmaps einige Schwächen:

Qualitative Erkenntnisse sind bei Heatmaps begrenzt

Ich habe das Vorhandensein qualitativer Erkenntnisse als einen großen Vorteil von Heatmaps erwähnt. Ich muss jedoch fairerweise darauf hinweisen, dass diese Erkenntnisse begrenzt sind.

Ja, Sie können Wutklicks auf einer Seite leicht erkennen und die Bewegungsmap verwenden, um zu sehen, wie sich die Cursor Ihrer Nutzer über Ihre Benutzeroberfläche bewegen. Ja, diese Daten helfen Ihnen, die grundlegenden Absichten und Gefühle Ihrer Nutzer zu verstehen.

Mit Heatmaps können Sie jedoch nicht mehr als die erwähnte „grundlegende Absicht“ ermitteln.

Wenn Sie beispielsweise eine Heatmap Ihrer Anmeldeseite überprüfen, stellen Sie möglicherweise fest, dass sich die Mehrheit der Nutzer registriert, indem sie das E-Mail-Adressfeld manuell ausfüllt, und nur sehr wenige die Option „Mit Google anmelden“ verwenden.

Ihre Heatmap kann Ihnen nicht sagen, was der Grund für dieses Verhalten ist. Um einer solchen Sache auf den Grund zu gehen, müssen Sie Nutzerinterviews durchführen, Umfragen durchführen oder einen anderen Weg finden, um aussagekräftiges Nutzerfeedback zu sammeln.

In diesem konkreten Fall könnten Sie beispielsweise mit einigen Ihrer Nutzer sprechen und herausfinden, dass Ihre Nutzer hauptsächlich aus dem Unternehmensbereich kommen und die meisten von ihnen Outlook-E-Mail statt Googles G-Suite verwenden. Da Sie keine Option „Mit Microsoft anmelden“ anbieten, neigen diese Nutzer dazu, ihre E-Mail-Adressen stattdessen manuell einzugeben.

Zu starke Betonung grundlegender Arten von Interaktionen

Ein weiterer Nachteil von Heatmaps besteht darin, dass sie nur Ihr Scroll-, Cursorbewegungs- und Klickverhalten erfassen. Das bedeutet, dass Sie irreführende Informationen erhalten könnten, wenn Sie sich ausschließlich auf Ihre Heatmaps verlassen, um das Verhalten Ihrer Nutzer zu analysieren, weil gut aussehende Heatmap-Daten (z. B. viele Klicks) nicht immer „gute“ Interaktion bedeuten.

Lassen Sie mich das noch einmal sagen.

Gut aussehende Heatmap-Daten bedeuten nicht immer gute Interaktion.

Stellen Sie sich vor, Sie betrachten eine Heatmap der Dokumenteditorseite von Google Docs und sehen, dass viele Personen auf die Teilen-Schaltfläche klicken. Begeistert kommen Sie (naiverweise) zu dem Schluss, dass Ihre Freigabefunktion gut funktioniert.

Angenommen, Sie überprüfen jedoch Ihre anderen Website-Analysetools und stellen fest, dass Nutzer zwar auf die Teilen-Schaltfläche klicken, um das Freigabe-Popup zu öffnen, nur sehr wenige ihre Dokumente tatsächlich mit jemandem teilen. Die Mehrheit der Nutzer schließt das Freigabe-Popup direkt nach dem Öffnen einfach wieder.

Datenschutzbedenken

Heatmap-Tools sind dafür berüchtigt, sensible Nutzerdaten aktiv zu erfassen und zu speichern. Es führt kein Weg daran 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 (insbesondere wenn sie Echtzeitanalysen, Sitzungswiederholungen und Seitenaufrufe bietet), müssen Sie dies berücksichtigen und sicherstellen, dass Ihre Nutzer nicht verärgert darüber sind, dass Sie ihr Surfverhalten verfolgen.

Ein weiterer Punkt, den Sie berücksichtigen müssen, ist Ihre rechtliche Compliance. Sie müssen eng mit Ihren Rechts- und Sicherheitsteams zusammenarbeiten, um die richtigen rechtlichen Dokumente zu erstellen und sicherzustellen, dass Ihre Tracking-Methoden keine Rechte verletzen oder rechtliche Risiken für Ihr Unternehmen schaffen.

Dies ist besonders wichtig, wenn Sie behaupten, wichtige Datenschutzbestimmungen wie GDPR, CalOPPA usw. einzuhalten.

Das ist das Wesentliche der Analyse mit Heatmaps, einschließlich ihrer Vorteile und Nachteile. Sehen wir uns nun an, wie Sie dieses Tool verwenden können, um das Verhalten Ihrer Kunden zu analysieren und einige wertvolle Schlussfolgerungen zu ziehen.

3 Anwendungsfälle für Heatmap-Analysen aus der Praxis

Meiner Erfahrung nach haben sich Heatmaps als äußerst wertvolle Werkzeuge erwiesen, um zu verstehen, was mit Ihrem Produkt geschieht.

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

Damit Sie praktische Anwendungen von Heatmaps besser umsetzen können, möchte ich Ihnen einige Anwendungsfälle aus dem echten Leben vorstellen.

1. Wütende Klicks entschlüsseln: A/B-Tests mit Wütende-Klick-Karten von Fullstory und Google Optimize

Beginnen wir mit einem Analyse-Anwendungsfall, bei dem meine bevorzugte Heatmap-Art zum Einsatz kommt – Wütende-Klick-Karten.

Sie können den Klick eines Nutzers auf Ihre Benutzeroberfläche als „wütenden Klick“ bezeichnen, wenn er wiederholt und fortlaufend mehrfach auf dasselbe Element klickt. Allgemein wird davon ausgegangen, dass dieses Verhalten auf Frustration und Ärger des Nutzers hindeutet (daher der Name).

Es gibt viele Gründe, warum Sie Nutzer haben könnten, die wütend klicken. Am häufigsten werden sie ausgelöst durch:

  • Ein Element, das anklickbar aussieht, es aber nicht ist. Ihr Nutzer klickt darauf, glaubt, dass es nicht funktioniert, und wird wütend.
  • Ihre Schaltflächen funktionieren einfach nicht. Das erklärt sich von selbst.
  • Die Schaltflächen funktionieren, aber ein Designproblem erschwert es, eine oder mehrere der Schaltflächen gezielt anzuklicken.

Mithilfe von Wütende-Klick-Karten können Sie die Elemente Ihrer Benutzeroberfläche identifizieren, bei denen wütende Klicks auftreten, den Grund dafür herausfinden und das Problem beheben. So sieht das bei einer E-Commerce-Website aus, die Obst und Gemüse verkauft.

Screenshot einer E-Commerce-Website, die Obst und Gemüse verkauft
Quelle: Fullstory

Das Problem beim Auffinden problematischer Bereiche und deren Behebung besteht darin, dass Ihre Lösung möglicherweise nicht funktioniert und die Nutzer weiterhin wütend klicken. Um dies zu überprüfen, können Sie A/B-Test-Tools verwenden, um die Wirksamkeit Ihrer Lösung zu testen.

So geht’s: Erstellen Sie einen A/B-Test, bei dem Variante A Ihre Lösung und Variante B den ursprünglichen Zustand darstellt. Nachdem Sie den A/B-Test aktiviert haben, betrachten Sie die Wütende-Klick-Karten beider Varianten und berechnen Sie, wie viele wütende Klicks jeweils auftreten.

Wenn Ihre Variante A weniger Klicks erhalten hat, war Ihre Lösung erfolgreich und Sie können sie guten Gewissens einsetzen.

2. Konversionsraten verständlich machen: Optimierung der Konversionsrate mit Bewegungs-Heatmaps von Hotjar und Google Analytics

Der nächste Fall, den wir betrachten, ist wahrscheinlich der mit Abstand häufigste Anwendungsfall für Heatmaps – die Analyse von Konversionen (oder ähnlichen Kennzahlen).

Wie bereits erwähnt, liefert eine Kombination aus Heatmap-Daten und Daten aus Analysewerkzeugen die besten Ergebnisse, wenn es darum geht, genaue Daten zu erhalten und irreführende Erkenntnisse zu vermeiden. In diesem konkreten Beispiel sehen wir, wie Sie Google Analytics mit Bewegungs-Heatmaps von Hotjar kombinieren können.

Suren Karapetyan

Hinweis

Bewegungs-Heatmaps zeigen, wohin sich der Cursor Ihrer Nutzer während der Sitzung auf der Seite bewegt hat und wo er verweilt ist.

Stellen Sie sich vor, Sie sind für einen E-Commerce-Shop verantwortlich, der zwei Versandoptionen für die Lieferung von Einkäufen an Kunden anbietet. Die Preise für diese beiden Optionen betragen 2 $ für den „Standardversand“ (auch „langsam“ genannt) und 10 $ für den „Expressversand“.

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

So geht’s: Beginnen Sie damit, in Google Analytics Ihre Konversionsrate für die teure Option zu betrachten. Nehmen wir an, die Rate beträgt 5 % (oder nur 1 von 20 Nutzern wählt die teurere Option). Das sind wirklich schlechte Nachrichten für Sie. Nun müssen Sie den Grund für diese niedrige Rate verstehen.

Öffnen Sie dazu die Bewegungs-Heatmap Ihrer Checkout-Seite, auf der der Nutzer die Versandoption auswählt. Stellen Sie sich vor, die Bewegungs-Heatmap zeigt, dass Nutzer den Cursor über die teure Versandoption bewegen, auf den Text „Expressversand“ klicken (statt auf die direkt darunter befindliche Schaltfläche „Auswählen“), aufgeben und einfach mit der günstigeren Option fortfahren, die standardmäßig ausgewählt ist.

Dieses Verhalten lässt einige mögliche Hypothesen zu:

  1. Ihre Nutzer möchten tatsächlich mehr über die teure Option lesen, bevor sie sie auswählen, da sie den zusätzlichen Wert bzw. Vorteil, den sie dadurch erhalten, nicht wirklich verstehen.
  2. Die Schaltfläche „Auswählen“ ist nicht ausreichend sichtbar – möglicherweise befindet sie sich für die Mehrheit der Nutzer unterhalb des sichtbaren Bereichs.

Anschließend können wir 1–2 kurze Interviews mit Nutzern führen und überprüfen, ob unsere Hypothesen zutreffen oder ob das Problem ganz woanders liegt.

3. Wettlauf nach unten: Optimierung der Leistung des FAQ-Bereichs mit Scroll-Heatmaps

FAQ-Bereiche werden in der Welt des Produktmanagements stark unterschätzt.

FAQs sind hervorragende Werkzeuge für Produktmanager. Einer der großen Anwendungsfälle für das Hinzufügen eines FAQ-Bereichs zu Ihrem Produkt oder Ihrer Website besteht darin, Interessenten zu überzeugen, die bereit sind, Ihr Produkt zu kaufen, aber zunächst Antworten auf einige Fragen benötigen, die sie vor dem Kauf beschäftigen.

Angesichts des Werts, den Sie aus Ihrem FAQ-Bereich ziehen, ist es ziemlich wichtig, seine Leistung zu verfolgen und ihn zu optimieren.

So geht's: Normalerweise würden wir die FAQs am unteren Ende einer Webseite platzieren – aber es besteht eine erhebliche Wahrscheinlichkeit, dass Ihre Nutzer nicht so weit scrollen und den Bereich übersehen. Um dies zu messen, können Sie Scroll-Heatmaps verwenden, die zeigen, wie viel Zeit Nutzer in den einzelnen Bereichen der Seite verbracht haben und wie weit sie auf der Seite nach unten gescrollt haben.

So sieht das aus:

Hotjar-Screenshot von 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 % weit genug gescrollt haben, um den FAQ-Bereich zu sehen (er ist blau und mit einer Prozentangabe versehen).

Ehrlich gesagt sind 44 % ein gutes Ergebnis. Wenn Sie jedoch der Meinung sind, dass mehr Menschen Ihre FAQs ansehen sollten, würde ich vorschlagen, nach einer UX-Lösung zu suchen, die es ihnen ermöglicht, direkt zum FAQ-Bereich zu „springen“.

Möchten Sie weitere Heatmap-Beispiele aus der Praxis in Aktion sehen? Dieser Artikel zeigt, wie Marken visuelle Verhaltensdaten nutzen, um bessere UX-Entscheidungen zu treffen.

Visualisierte Daten sind großartig, aber sie mit Ihrer Produktintuition zu verbinden, ist noch besser.

Heatmaps werden zusammen mit anderen Analysetools die Qualität Ihrer Entscheidungen deutlich verbessern – genau das macht Sie zu einem datengetriebenen Produktmanager!

Wenn ich Ihnen jedoch einen Ratschlag mitgeben darf, dann diesen:

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

Als Produktmanager verfügen wir über diese Superkraft namens Produktintuition, die uns hilft, kluge Entscheidungen zu treffen, selbst wenn uns nur begrenzte Analysedaten zur Verfügung stehen. Wenn Sie also Ihre Intuition mit den Erkenntnissen aus Ihren Heatmaps verbinden, können Sie Ihre Fähigkeiten zur Entscheidungsfindung auf ein völlig neues Niveau heben.

Eine weitere Superkraft von Produktmanagern ist der ständige Hunger, etwas Neues zu lernen – und dabei können wir helfen! Melden Sie sich für unseren Newsletter an, um alle zwei Wochen eine Zusammenstellung von Erkenntnissen aus dem Produktmanagement, Ressourcen und weiteren nützlichen Inhalten direkt in Ihrem Posteingang zu erhalten.

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.

Follow the author: