Was ist eine Heatmap?

Eine Heatmap ist eine visuelle Ebene, die über eine Webseite gelegt wird und zeigt, wo Nutzer ihre Aktivität konzentrieren, egal ob auf einer Landingpage, einer Produktseite oder einem Kontaktformular. Statt einer Zahlentabelle entsteht ein Bild mit Farbverlauf: Rote oder orange Bereiche markieren viel Aktivität, blaue oder grüne Bereiche wenig, und farblose Flächen registrierten gar keine Interaktion.

Das Werkzeug fasst das Verhalten vieler Sitzungen auf derselben Seite zusammen, unabhängig davon, ob die Besucher über Desktop, Tablet oder Smartphone kommen. Ein einzelner Besuch ergibt keine lesbare Heatmap, dafür braucht es Hunderte oder Tausende Sitzungen, bis sich ein verlässliches Muster zeigt.

Anders als die Zahlen aus Web Analytics sagt eine Heatmap nichts über die Anzahl der Sitzungen oder Conversions. Sie zeigt etwas anderes, das die Zahlen ergänzt: in welchem Bereich des Bildschirms sich die Aufmerksamkeit dieser Sitzungen sammelte, welche Bereiche des Layouts komplett übersehen wurden, und wie ungleich die Aufmerksamkeit über die Seite verteilt war.

Nicht jede Heatmap misst dasselbe. Vor der Auswertung lohnt sich ein Blick darauf, welche Art von Interaktion sie tatsächlich erfasst.

Die Move-Map ist am günstigsten zu erstellen und wird am häufigsten fälschlich mit einer direkten Aufzeichnung des Blicks verwechselt; die Attention-Map ist, sofern sie auf echtem Eye-Tracking beruht, am zuverlässigsten und zugleich am teuersten in der Erstellung.

Ein Skript wird in die Seite eingebunden, ähnlich wie ein Tracking-Pixel arbeitet: Es löst beim Laden der Seite aus und erfasst im Hintergrund jeden Klick, jede erreichte Scrolltiefe und, wenn das Tool es unterstützt, die Cursorposition in regelmäßigen Abständen. Jedes Ereignis wird der Sitzung zugeordnet, die es ausgelöst hat.

Bei Tausenden gesammelten Sitzungen gruppiert das System die Koordinaten aller Ereignisse desselben Typs und berechnet eine Dichte pro Bildschirmbereich, meist normalisiert auf eine einheitliche Bildschirmbreite, damit Daten von unterschiedlichen Geräten vergleichbar bleiben. Diese Dichte wird in Farbe übersetzt: mehr Ereignisse an einem Punkt bedeuten wärmere Farben, weniger Ereignisse kühlere. Das Ergebnis liegt als durchscheinende Ebene über einem Screenshot der Seite.

Ein Punkt, der wichtig ist: Mausbewegung ist nicht dasselbe wie Blickrichtung. Zwischen beidem besteht eine Korrelation, dokumentiert etwa in der auf der CHI-Konferenz vorgestellten Studie von Huang, White und Buscher, doch diese Korrelation ist unvollständig und schwächt sich ab, sobald der Cursor stillsteht, während der Nutzer weiterliest. Eine Move-Map ist eine nützliche Annäherung, keine direkte Messung des Blicks.

Da diese Skripte reales Besucherverhalten erfassen, gelten dieselben rechtlichen Voraussetzungen wie bei jeder anderen Tracking-Technologie: eine Cookie oder ein ähnlicher Identifikator, und die vorherige Einwilligung des Nutzers, bevor das Skript aktiv wird und mit der Erfassung beginnt.

Eine Heatmap zeigt, ob die wirklich wichtigen Elemente, ein Call-to-Action-Button, eine Preisangabe, ein Formular, tatsächlich im Bereich liegen, den Nutzer ansehen oder anklicken, unabhängig davon, wo das Designteam sie ursprünglich platziert hat. Eine niedrige CTR auf einem Button sagt, dass etwas nicht funktioniert; die Heatmap zeigt meist, warum: Der Button lag außerhalb des Aufmerksamkeitsbereichs, oder unterhalb eines Elements, das wie das Seitenende wirkte.

Dieser zweite Fall hat einen eigenen Namen: der "false bottom"-Effekt, ein Layout, das optisch den Eindruck erweckt, hier ende der Inhalt, obwohl darunter noch mehr folgt. Eine Scroll-Map deckt das klar auf, weil sie genau an dieser Stelle einen scharfen Abfall zeigt, obwohl der Inhalt weitergeht.

Sie eignet sich außerdem, um nach dem Launch zu prüfen, ob Entscheidungen aus der Wireframe-Phase aufgehen: ob die damals geplante visuelle Hierarchie tatsächlich zur echten Aufmerksamkeit der Nutzer passt, welche Bereiche mehr Beachtung bekommen als geplant, oder ob die Seite umgestellt werden muss.

• Lies die Heatmap immer zusammen mit den Web-Analytics-Daten; keine der beiden Quellen erzählt allein die ganze Geschichte.
• Segmentiere die Scroll-Map nach Gerät: Der Absprungpunkt auf dem Smartphone unterscheidet sich meist deutlich vom Desktop.
• Lass das Tool lange genug laufen, bis eine repräsentative Zahl an Sitzungen zusammenkommt, bevor du Schlüsse ziehst.
• Prüfe die Heatmap nach jeder größeren Layout-Änderung erneut; ein Redesign kann das Aufmerksamkeitsmuster komplett verschieben.
• Behandle eine Move-Map nicht wie eine exakte Aufzeichnung des Nutzerblicks.
• Kombiniere die Click-Map mit einzelnen Session-Recordings, wenn ein Bereich ein Verhalten zeigt, das sich nicht erklären lässt.

• Die Mausbewegung einer Move-Map mit einer echten Aufzeichnung der Blickrichtung verwechseln.
• Aus einer Heatmap mit viel zu wenigen gesammelten Sitzungen Schlüsse ziehen.
• Eine aggregierte Heatmap ohne Segmentierung nach Gerät auswerten, obwohl sich das Layout zwischen Smartphone und Desktop stark unterscheidet.
• Das Heatmap-Tool aktivieren, ohne vorher die Einwilligung des Nutzers eingeholt zu haben.
• Den "false bottom"-Effekt ignorieren, wenn die Scroll-Map direkt unterhalb des ersten Viewports einen verdächtigen Abfall zeigt.