Eine Heatmap hilft dir, ein aggregiertes Verhaltensmuster auf einer bestimmten Seite zu erkennen. Eine Klick-Heatmap zeigt häufiger und seltener ausgewählte Elemente, eine Scroll-Heatmap, wie weit Besucher gelangen. Die Motivation erklärt sie jedoch nicht. Um eine gute Entscheidung zu treffen, musst du das Muster mit dem Gerät, dem Seitenlayout, Sitzungsaufzeichnungen und einer geschäftlichen Frage verbinden.
Was zeigt eine Heatmap — und was nicht?
Am einfachsten lässt sich eine Heatmap als Ansicht aus der Vogelperspektive verstehen. Statt eines einzelnen Besuchs siehst du viele Aktionen, die über dieselbe Darstellung der Seite gelegt werden. So erkennst du leichter, dass eine wichtige Schaltfläche übersehen wird, ein nicht klickbares Element Klicks anzieht oder die meisten Besucher einen späteren Abschnitt nicht erreichen.
- Klick-HeatmapHilft, häufig ausgewählte Elemente und Stellen zu finden, die interaktiv wirken, obwohl sie es nicht sind.
- Scroll-HeatmapZeigt aggregiert, welche Bereiche der Seite Besucher mit einem bestimmten Gerätetyp erreichen.
- ElementranglisteOrdnet die erfassten Klicks und erleichtert den Vergleich mehrerer CTAs oder Links.
- GeräteansichtErmöglicht die getrennte Betrachtung von Mobilgeräten und Desktop, deren Layout und Bedienung sich unterscheiden.
Eine Heatmap verrät nicht, ob ein Klick erfolgreich war, ob jemand die Antwort gefunden hat oder warum der Besuch beendet wurde. Ein warmer Bereich ist nicht automatisch gut, und ein kühler muss kein Problem bedeuten. Das Logo wird vielleicht häufig angeklickt, weil Nutzer zum Anfang zurückkehren möchten. Eine Telefonnummer kann wenige Klicks erhalten, weil Kunden sie manuell übertragen oder einen anderen Kontaktweg wählen.
Eine Heatmap zeigt, „wo und wie oft“ etwas geschieht. Eine Aufzeichnung kann zeigen, „in welcher Reihenfolge“ es geschieht. Ein Gespräch hilft zu verstehen, „worum es dem Kunden ging“.
Eine der häufigsten Anwendungen von Klick-Heatmaps besteht darin zu prüfen, ob die Navigation funktioniert — ob Nutzer die erwarteten Menüeinträge auswählen. Den vollständigen Diagnoseprozess beschreiben wir im Artikel über die Navigation auf einer Website.
Scrolle die Vorschau seitlich oder vergrößere sie, um Details zu sehen.
Notiere eine Frage, bevor du die Heatmap öffnest
Ohne Frage wird eine Heatmap schnell zu einem attraktiven Bild voller Kuriositäten. Wähle statt „Sehen wir uns an, was die Leute tun“ eine Entscheidung, die du tatsächlich treffen kannst. Zum Beispiel: „Steht die Beschreibung der Einführung auf Smartphones zu weit unten?“, „Wirkt die Karte des Growth-Tarifs klickbar?“ oder „Welcher der beiden CTAs führt zum Formular?“
Eine gute Frage benennt Seite, Gerät und Element. Sie hilft außerdem zu entscheiden, welche Besuche nicht vermischt werden sollten. Wenn sich das Seitenlayout vor Kurzem geändert hat, lege die Klicks der alten und der neuen Version nicht unreflektiert übereinander. Wenn Abschnitte auf Mobilgeräten anders angeordnet sind, analysiere diese separat. Traffic aus einer Kampagne für ein bestimmtes Angebot kann sich anders verhalten als Zugriffe über eine Suchmaschine.
Ergänze jede Ergebnisnotiz um einen kurzen Kontext: Erhebungszeitraum, Seitenadresse, Gerätetyp und Version des Layouts. So weißt du auch einen Monat später, ob du dieselbe Ansicht vergleichst. Ohne diese Notiz kann ein Unterschied auf der Heatmap auf eine neue Kampagne, die Saison oder eine Designänderung zurückgehen und nicht auf das Verhalten, das du erklären möchtest.
Eine umfassendere Methode zum Formulieren von Fragen findest du in unserem Leitfaden zur Analyse des Nutzerverhaltens. Eine Heatmap ist darin eine von mehreren Quellen und keine eigenständige Antwort.
So wertest du eine Heatmap Schritt für Schritt aus
- Wähle eine Adresse und einen Gerätetyp aus.Vermische weder die Startseite mit der Preisseite noch Smartphones mit großen Bildschirmen. Stelle zunächst eine vergleichbare Gruppe von Besuchen zusammen.
- Prüfe, ob die Darstellung zur untersuchten Version passt.Wenn Überschrift, Reihenfolge der Abschnitte oder aufklappbares Menü geändert wurden, passen ältere Punkte möglicherweise nicht mehr zur Ansicht.
- Finde die Abweichung zwischen Erwartung und Muster.Suche nicht nach der „heißesten Stelle“. Suche nach einem Verhalten, das ein konkretes Ziel der Seite behindert.
- Vergleiche den unmittelbaren Kontext.Prüfe den Text vor dem Element, die Sichtbarkeit des CTA, seine Entfernung auf Mobilgeräten und ob sich eine ähnliche Komponente anders verhält.
- Wechsle zu einigen passenden Aufzeichnungen.Wähle Sitzungen mit dem betreffenden Gerät und der betreffenden Seite aus. Prüfe die Abfolge der Aktionen, statt zufällige Besuche anzusehen.
- Notiere Hypothese und Prüfverfahren.Trenne die Tatsache „Der CTA erhält weniger Klicks“ von der Vermutung „Der Text der Schaltfläche könnte unklar sein“.
- MUSTER
Viele Klicks auf die Überschrift einer Tarifkarte
- KONTEXT
Die Karte wirkt aufklappbar, reagiert aber nicht
- HYPOTHESE
Die Gestaltung der Komponente könnte eine falsche Erwartung wecken
- TEST
Interaktionssignal ändern und erneut messen
Nach Gerät getrennte Klick- und Scroll-Heatmaps mit direktem Wechsel zu einem konkreten Besuch. So funktioniert es.
Vier Fallstricke, die zu falschen Schlüssen führen
Scrolle die Tabelle seitlich, um alle Spalten zu sehen.
| Fallstrick | Falscher Kurzschluss | Bessere Prüfung |
|---|---|---|
| Farbe als Qualitätsurteil | „Rot ist gut, kühl ist schlecht“ | Beurteile, ob das Muster das Ziel des konkreten Elements unterstützt. |
| Geräte vermischen | „Die Nutzer sehen den CTA nicht“ | Vergleiche Mobilgeräte und Desktop, denn das Element kann unterschiedlich positioniert sein. |
| Schlussfolgerung aus einem einzigen Zeitraum | „Das ist ein dauerhaftes Problem der Website“ | Prüfe, ob Layout, Kampagne oder Traffic-Quelle den Kontext verändert haben. |
| Korrelation mit Ursache verwechseln | „Sie klicken nicht, weil der Text schlecht ist“ | Sieh dir Aufzeichnungen und Fragen aus Gesprächen an und teste anschließend die Änderung. |
Es gibt auch keine magische Anzahl von Besuchen, ab der jede Schlussfolgerung sicher ist. Je geringer der Traffic und je kleinteiliger das Segment, desto vorsichtiger solltest du das Muster behandeln. Einige Sitzungen können auf einen technischen Fehler hindeuten, rechtfertigen aber keine weitreichende Aussage über alle Kunden. Grobe Richtwerte pro Seite und Gerät sowie einen Plan für wenig Traffic findest du im Leitfaden zur Heatmap-Stichprobe.
Wenn du nicht weißt, ob du für eine Frage die aggregierte Ansicht oder einen einzelnen Besuch benötigst, lies unseren Vergleich Sitzungsaufzeichnungen oder Heatmaps. Diese Werkzeuge ergänzen einander, sind aber nicht austauschbar.
Der häufigste Fallstrick betrifft Geräte: Eine Heatmap, die mobilen und Desktop-Traffic vermischt, beschreibt keine reale Nutzungssituation. Einen gesonderten Prozess für Smartphones erläutern wir im Artikel über die Conversion auf Mobilgeräten.
Prüfe außerdem gesondert, ob ein Element, das Inhalte verdeckt, die Heatmap verfälscht. Ein Pop-up kann das Klickmuster auf der gesamten Unterseite verändern — mehr dazu erfährst du im Artikel über Pop-ups auf Websites.
Eine Reihe von Klicks beweist weder Frust noch einen Fehler. Vergleiche Rage Clicks und Dead Clicks und prüfe verdächtige Muster in einer Aufzeichnung sowie durch Nachstellen der Bedienung.
Wie gelangst du von Farben zu einer nützlichen Entscheidung?
Am Ende der Analyse sollten drei kurze Sätze stehen: Was haben wir beobachtet, was ist eine mögliche Ursache und was ändern wir, um sie zu prüfen? Zum Beispiel: „Auf Mobilgeräten erreichen nur wenige Besucher die Informationen zur Einführung. Davor steht ein langer Funktionsvergleich. Wir kürzen ihn, verschieben den Link zur Einführung weiter nach oben und vergleichen anschließend Scrolltiefe und Übergänge zum Formular.“
Eine solche Notiz schützt vor einem Redesign aus dem Bauch heraus. Sie erleichtert außerdem den Aufbau eines Backlogs, in dem Beobachtungen einen Verantwortlichen, eine Priorität und ein Prüfverfahren haben. Mehr über die Verbindung verschiedener Quellen zu einem Plan erfährst du in unserem Leitfaden zum Conversion-Audit einer Website Schritt für Schritt.
Manchmal ist es richtig, nichts zu ändern. Wenn ein kühler Bereich eine unterstützende Funktion erfüllt und der wichtigere Pfad gut funktioniert, kann es der Seitenhierarchie schaden, ihn nur für mehr Klicks zu verschieben. Eine Heatmap soll das Geschäftsziel und die Nutzerfreundlichkeit unterstützen — und keinen Wettbewerb um die heißeste Komponente auslösen.
- Trenne Heatmaps nach Gerät und Layoutversion.
- Analysiere eine Seite im Kontext einer einzigen geschäftlichen Frage.
- Deute eine Farbe weder als Absicht noch als Ursache eines Verhaltens.
- Prüfe das ausgewählte Muster anhand von Aufzeichnungen und Gesprächen.
- Notiere eine Hypothese, bevor du eine Änderung vornimmst.
- Lege das Signal fest, anhand dessen du das Ergebnis später bewertest.
Eine Heatmap ersetzt weder korrekt konfigurierte Analysen noch qualitative Forschung oder Kundengespräche. Wenn du einen einzelnen Formularfehler oder die Abfolge von Aktionen nachvollziehen möchtest, beginne mit einer Aufzeichnung. Wenn du die Motivation verstehen möchtest, frag den Kunden.
Wenn die Heatmap ein Muster zeigt, dessen Ursache unklar bleibt, liefert ein Gespräch mit fünf Personen, die dieselbe Aufgabe erledigen, am schnellsten eine Antwort. Wie du es führst, erklären wir im Artikel über Usability-Tests für Websites.
Ein eigener, besonders dankbarer Anwendungsfall ist eine lange Preistabelle — eine Scroll-Heatmap zeigt schnell die Spalte, die niemand erreicht. Mehr dazu erfährst du im Artikel über die Preisseite.
