Heatmap: Was ist das und wie liest man sie?
Eine Heatmap ist eine Grafik, die in Farben zeigt, wohin Besucher auf einer Seite klicken, wie weit sie scrollen oder wo sie den Mauszeiger bewegen. Warme Farben bedeuten viel Interaktion, kalte wenig. Die Heatmap zeigt, was passiert, aber nicht, warum. Den Grund finden Sie mit Sitzungsaufzeichnungen und Nutzertests.
· Aktualisiert am
Kurz gesagt
Eine Heatmap stapelt Tausende Besuche auf einem einzigen Screenshot. Sie sehen nicht einzelne Nutzer, sondern die Summe. Deshalb ist sie für einen schnellen ersten Blick sehr nützlich.
Aber Farbe ist keine Deutung. Ein roter Bereich kann zeigen, dass Menschen dort erfolgreich sind, oder auch, dass sie hängen bleiben. Auf dieser Seite beschreibe ich, wie Sie beides unterscheiden.
Arten von Heatmaps
Der NN/g-Kurs zu visueller Analytics nennt vier Arten: Klick-, Scroll-, Bewegungs- und Umsatz-Heatmaps. Unten beschreibe ich die ersten drei. Danach geht es um die Eyetracking-Heatmap aus dem Labor.
Klick-Heatmap
Sie zeigt, wohin Besucher auf der Seite klicken oder tippen. Laut der Dokumentation von Microsoft Clarity fasst das Tool Klicks nicht nach der Mausposition auf dem Bildschirm zusammen, sondern nach dem angeklickten Element. Der Dokumentation nach liefert diese Methode auch bei unterschiedlichen Bildschirmgrößen und responsivem Design korrekte Ergebnisse.
Die Klick-Heatmap hat auch Unterarten. In der Clarity-Dokumentation sind alle Klicks, tote Klicks, Rage-Klicks, Fehlerklicks sowie erste und letzte Klicks einzeln aufgeführt.
Scroll-Map
Sie zeigt, wie weit Besucher auf der Seite nach unten scrollen. Oben ist es warm, unten kalt. Clarity zeigt hier auch eine durchschnittliche Bildschirmgrenze (Average Fold). Laut Dokumentation markiert diese Linie, was Nutzer im Schnitt sehen, bevor sie zu scrollen beginnen.
Die Scroll-Map beantwortet eine einzige Frage: Wird wichtiger Inhalt gesehen? Dass ein Button, den niemand sieht, nicht geklickt wird, heißt nicht, dass der Button schlecht ist.
Bewegungs-Heatmap
Sie zeigt, wo sich der Mauszeiger auf der Seite bewegt. Weil es auf Touchscreens keinen Zeiger gibt, ist diese Heatmap meiner Meinung nach vor allem am Desktop aussagekräftig.
Ich halte die Bewegungs-Heatmap für den schwächsten Beleg. Wo der Zeiger steht, muss die Person nicht hinsehen. Viele Menschen parken den Zeiger beim Lesen am Rand.
Eyetracking-Heatmap
Dann gibt es noch die Heatmap aus dem Labor. Das NN/g-Glossar definiert eine Heatmap als quantitative Grafik, die Zahl und Dauer von Blickfixationen auf einer Oberfläche zusammenfasst. In der Farbcodierung aus Kate Morans NN/g-Artikel sind rote Bereiche die Stellen, die am häufigsten und längsten angesehen wurden. Wo keine Farbe ist, hat keine teilnehmende Person hingesehen.
Eine Eyetracking-Heatmap braucht ein spezielles Gerät und eine Testsitzung. Der Rest dieses Ratgebers behandelt Klick- und Scroll-Heatmaps, die auf der Live-Website gesammelt werden.
Welche Heatmap für welche Frage?
| Ihre Frage | Die passende Heatmap |
|---|---|
| Wird der Haupt-Button gesehen? | Scroll-Map, getrennt nach Gerät |
| Klicken Besucher auf etwas, das nicht klickbar ist? | Klick-Heatmap mit Filter für tote Klicks |
| Welcher Link im Menü wird genutzt? | Klick-Heatmap, erste Klicks |
| Wird eine lange Beschreibung gelesen? | Scroll-Map, danach einige Sitzungsaufzeichnungen |
| Wohin schaut die Person? | Keine gibt eine volle Antwort. Dafür braucht es einen Eyetracking- oder Usability-Test. |
Auf einer Produktseite ausprobieren
Unten sehen Sie die Produktseite eines fiktiven Kaffeeshops. Wechseln Sie mit den Buttons oben zwischen Klick- und Scroll-Ebene. Beantworten Sie danach drei Fragen zur selben Heatmap.
Ebene
Handmühle mit Keramikmahlwerk
89,00 €
In den Warenkorb22 %Durchschnittliche Bildschirmgrenze (Fold)
Produktbeschreibung
Das Keramikmahlwerk lässt sich in 18 Stufen einstellen. Es mahlt vom Espresso bis zum Filterkaffee.
Die Klick-Heatmap ist an. Der heißeste Bereich ist das Produktfoto mit 38 % der Klicks. Die Versandzeile ist kein Link, bekommt aber 19 % der Klicks.
Ein fiktiver Shop mit fiktiven Daten. Die Prozente in den Etiketten sind der Anteil der Klicks auf der Seite, die übrigen 15 % verteilen sich auf andere Stellen. Die Prozente der Scroll-Ebene sind der Anteil der Besucher, die bis zu diesem Abschnitt scrollen.
Dieses Bild begegnet mir in Audits oft. Foto und Versandzeile werden viel geklickt, aber beide tun beim Klick nichts. Die Bewertungen dagegen sind ein guter Link und werden trotzdem kaum gesehen.
Die Fragen beziehen sich auf die fiktive Heatmap oben. Sobald Sie eine Option wählen, erscheint die Erklärung direkt darunter. Die Antworten sind meine Lesart.
Welche Teile einer Produktseite oben stehen sollten, beschreibe ich im Muster Produktseite.
Wie man eine Heatmap liest
Schreiben Sie vor dem Öffnen einer Heatmap in einem Satz auf, was Sie suchen. „Wird der Button In den Warenkorb gesehen?“ ist eine gute Frage. Eine Heatmap, die Sie mit „Mal sehen, was da ist“ öffnen, zeigt Ihnen immer irgendetwas.
Ich lese eine Heatmap in dieser Reihenfolge:
- Gerät wählen. Öffnen Sie Desktop- und Mobil-Heatmap getrennt. In der Scroll-Map von Clarity gibt es dafür die Auswahl PC, Tablet und Mobil.
- Zeitraum festlegen. Fassen Sie eine Aktionswoche und eine normale Woche nicht in einer Heatmap zusammen. Hat sich die Seite in der Zwischenzeit geändert, vermischen sich altes und neues Design.
- Auf die Zahl achten. Notieren Sie, aus wie vielen Seitenaufrufen die Heatmap stammt. Eine Heatmap mit wenig Daten zeigt das Verhalten weniger Personen größer, als es ist.
- Erst Scrollen, dann Klicks. Dass ein Element selten geklickt wird, bedeutet nur etwas, wenn es gesehen wurde.
- Mit der Erwartung vergleichen. Ist der heißeste Bereich der, den Sie für den wichtigsten halten? Wenn nicht, notieren Sie es.
- In die Aufzeichnungen gehen. Sehen Sie sich für jeden überraschenden Bereich einige Sitzungsaufzeichnungen an. Stellen Sie neben das „Was“ der Heatmap das „Warum“.
Häufige Fehldeutungen
Farbintensität ist kein Erfolg
Ein roter Bereich heißt nicht „Hier funktioniert es“. Auch jemand, der immer wieder auf einen nicht klickbaren Text klickt, färbt den Bereich rot. Sieht ein Element klickbar aus, ist es aber nicht, kann die Heatmap ein Signifier-Problem wie einen Erfolg aussehen lassen.
Umgekehrt gilt es auch. Ein wenig geklickter Bereich auf der Bezahlseite muss kein Problem sein. Füllt die Person das Formular zügig aus, wirkt die Heatmap ruhig, und das ist gut so.
Bei kleiner Stichprobe ist die Heatmap Rauschen
Laut Kate Morans Artikel von 2017 braucht eine verlässliche Eyetracking-Heatmap etwa 30 Teilnehmende. Mehr dazu im Ratgeber Wie viele Nutzer testen.
Analytics-Tools setzen dagegen womöglich keine Untergrenze. Laut der Clarity-Dokumentation gibt es für Heatmaps keine Mindestmenge an Traffic, auch eine Heatmap aus 40 Besuchen sieht also bunt aus. Liegen die Seitenaufrufe unter einigen Hundert, treffe ich aus der Heatmap keine Entscheidung.
Geräte mischen
Dieselbe Seite hat auf dem Desktop zwei Spalten, auf dem Smartphone eine. Ein Button kann mobil viel weiter unten stehen als am Desktop. Eine Heatmap, die beide Geräte zusammenführt, zeigt eine Seite, die es so gar nicht gibt.
Die Aufgabe vergessen
Laut Kara Pernices NN/g-Artikel verändert die Aufgabe der Nutzer das Ergebnis von Eyetracking-Heatmaps grundlegend. Sie schreibt auch klar, dass eine Heatmap aus einer unrealistischen Aufgabe in die Irre führt.
Auf der Live-Website gibt es keine Aufgabe, aber eine Absicht. Wer aus einem Newsletter kommt, sieht die Seite anders als jemand aus der Suche. Trennen Sie die Heatmap wenn möglich auch nach Traffic-Quelle.
Den oberen Bildschirmbereich über- oder unterschätzen
In Therese Fessendens NN/g-Artikel von 2018 verbrachten Nutzer etwa 57 % ihrer Betrachtungszeit im ersten Bildschirm. Die ersten zwei Bildschirme bekamen 74 % der Zeit. Die Studie stützt sich auf mehr als 130.000 Blickfixationen von 120 Teilnehmenden.
Der untere Teil wird also gesehen, aber viel weniger. Zeigt Ihre Scroll-Map einen ähnlichen Abfall, ist das normal. Die eigentliche Frage ist, ob etwas Wichtiges unter diesem Abfall liegt.
Zusammen mit Sitzungsaufzeichnungen nutzen
Eine Sitzungsaufzeichnung ist die Wiedergabe der Bewegungen eines einzelnen Besuchers auf der Seite, etwa in einem Tool wie Microsoft Clarity. Die Heatmap sagt Ihnen, wohin Sie schauen sollen, die Aufzeichnung zeigt, was dort passiert. Auch der NN/g-Kurs behandelt Heatmaps zusammen mit Sitzungsaufzeichnungen, Funnels und Formularanalyse.
Meine Methode ist einfach. Ich finde in der Heatmap einen überraschenden Bereich, filtere die Sitzungen mit Klicks genau dort und sehe mir fünf bis zehn davon an. Meist zeigt sich der Grund nach wenigen Aufzeichnungen.
Rage-Klick und toter Klick
Diese beiden Signale beschleunigen das Sichten sehr. Mit den Definitionen von Clarity:
- Rage-Klick: Die Person klickt in sehr kurzer Zeit mehrmals auf denselben kleinen Bereich. Laut Dokumentation kann das zeigen, dass sie dort ein interaktives Element erwartet und frustriert ist.
- Toter Klick (Dead Click): Ein Element wird angeklickt, aber in angemessener Zeit kommt keine Rückmeldung. Der Bildschirm ändert sich nicht, und es öffnet sich auch keine andere Seite. Das kann auf ein defektes Element, eine langsame Anfrage oder ein irreführendes Design hindeuten.
Clarity markiert außerdem übermäßiges Scrollen. Liegt das vertikale Scrollen einer Sitzung über dem erwarteten Durchschnitt, bekommt die Sitzung diese Kennzeichnung. Laut Dokumentation kann das auf eine mühsame Erfahrung, irrelevante Inhalte oder nicht gefundene Informationen hinweisen.
In der Demo oben ist die Versandzeile ein typischer toter Klick. Der Text mit gepunkteter Unterstreichung sieht wie ein Link aus, und Besucher klicken, um Details zum Versand zu sehen. Solche kleinen Hürden tauchen auch unter den Gründen für Kaufabbrüche oft auf.
Personenbezogene Daten maskieren
Ein Aufzeichnungstool zeichnet auf, was nicht maskiert ist. Laut Clarity-Dokumentation maskiert das Tool sensible Inhalte standardmäßig. Inhalte von Eingabefeldern und Auswahlmenüs werden in jedem Modus maskiert. Dieselbe Dokumentation schreibt aber auch, dass Änderungen an der Maskierung nicht rückwirkend für alte Aufzeichnungen gelten.
Meine Sicht: Prüfen Sie die Maskierung, bevor die Aufzeichnung startet. Öffnen Sie Konto-, Bezahl- und Profilseiten selbst und gehen Sie sie durch. Maskieren Sie auch personenbezogene Daten, die als normaler Text auf dem Bildschirm stehen. Klären Sie die datenschutzrechtliche Lage mit einer Fachperson; dieser Hinweis ist keine Rechtsberatung.
Meine Notiz
Der häufigste Fehler, den ich in Audits sehe: Die Heatmap ersetzt eine Entscheidung. Das Team sieht den roten Bereich und platziert dort etwas. Dabei erzeugt die Heatmap nur eine Frage.
Ich nutze die Heatmap als Quelle für Hypothesen. „Die Versandzeile wird geklickt, also wollen Nutzer die Lieferzeit wissen“ ist eine Hypothese. Prüfen lässt sie sich, indem man etwas ändert und misst. Wie viele Besucher ein solcher Test braucht, zeigt der A/B-Test-Rechner.
Was Sie am Ende messen, sollte die Conversion-Rate sein, nicht die Farbe der Heatmap. Ein wärmerer Button heißt nicht mehr Umsatz.
Überraschende Bereiche mit Nutzern zu testen, ist ebenfalls ein guter nächster Schritt. Ein Usability-Test mit wenigen Personen kann an einem Nachmittag zeigen, was Tausende Klicks nicht erklären.
Wollen Sie die Heatmaps und Aufzeichnungen Ihres Produkts von außen lesen lassen, macht das UX Audit genau das. Ich ordne die Befunde nach Wichtigkeit und schreibe zu jedem einen Vorschlag zur Korrektur.
Häufige Fragen
Was ist eine Heatmap?
Eine Heatmap ist eine Grafik, die Klicks, Scrollen oder Mausbewegungen der Besucher auf einer Seite in Farben zeigt. Warme Farben stehen für viel, kalte für wenig Interaktion.
Wie macht man eine Heatmap-Analyse?
Schreiben Sie zuerst eine einzige Frage auf, dann trennen Sie die Heatmap nach Gerät und Zeitraum. Lesen Sie Scroll-Map und Klick-Heatmap zusammen. Sehen Sie sich für jeden überraschenden Bereich einige Sitzungsaufzeichnungen an.
Bedeutet ein roter Bereich etwas Gutes?
Nein. Rot heißt nur viel Interaktion. Auch wiederholte Klicks auf ein nicht klickbares Element färben den Bereich rot. Den Grund finden Sie in Aufzeichnungen oder im Nutzertest.
Funktionieren Heatmaps auf dem Smartphone?
Ja. Laut Clarity-Dokumentation erfasst das Tool Klicks und Scrollen auf Smartphone, Desktop und Tablet. Die Bewegungs-Heatmap beruht auf dem Mauszeiger und ist deshalb meiner Meinung nach vor allem am Desktop aussagekräftig. Lesen Sie Mobil- und Desktop-Heatmap immer getrennt.
Quellen (9)
- Nielsen Norman Group, Heatmaps and Visual Analytics for Website Optimization (Kursseite). Klick-, Scroll-, Bewegungs- und Umsatz-Heatmaps, Sitzungsaufzeichnungen, Funnels, Formularanalyse
- Huei-Hsin Wang und Hayat Sheikh, Nielsen Norman Group, UX Maps: Glossary. 16. Oktober 2026; Definition der Heatmap
- Kate Moran, Nielsen Norman Group, Heatmap Visualizations from Signifier Eyetracking Experiment. 3. September 2017; Bedeutung der Farben, etwa 30 Teilnehmende
- Kara Pernice, Nielsen Norman Group, Scanning Patterns on the Web Are Optimized for the Current Task. 19. März 2017; Einfluss der Aufgabe auf die Heatmap, unrealistische Aufgabe
- Therese Fessenden, Nielsen Norman Group, Scrolling and Attention. 15. April 2018; 57 % der Betrachtungszeit im ersten, 74 % in den ersten zwei Bildschirmen, 120 Teilnehmende
- Microsoft Learn, Clarity: Heatmaps overview. Klicks nach Element, Unterarten der Klick-Heatmap, keine Traffic-Untergrenze
- Microsoft Learn, Clarity: Scroll maps. Geräteauswahl, durchschnittliche Bildschirmgrenze
- Microsoft Learn, Clarity: Semantic metrics. Definitionen von Rage-Klick, totem Klick und übermäßigem Scrollen
- Microsoft Learn, Clarity: Masking content. Standardmaskierung, Eingabefelder, keine rückwirkende Anwendung