UX-Glossar · engl. Heatmap
Heatmap
Eine Heatmap zeigt mit Farben, wo auf einer Website besonders viel geklickt, gescrollt oder mit der Maus bewegt wird. Sie macht sichtbar, was Besuchende tun, aber nicht, warum.
Stell dir vor, die Startseite eures Online-Shops hat einen großen Button „Jetzt entdecken“. Die Klickzahlen darauf sind mager. Ist der Button schlecht platziert? Oder sieht ihn niemand, weil kaum jemand so weit nach unten scrollt? Aus einer reinen Zahl in der Statistik lässt sich das nicht ablesen.
Eine Heatmap macht solche Fragen sichtbar, und zwar direkt auf der Seite selbst.
Einfach erklärt
Eine Heatmap ist eine farbige Darstellung, die zeigt, wo auf einer Seite besonders viel oder wenig passiert. Warme Farben wie Rot und Orange stehen für viel Aktivität, kalte Farben wie Blau für wenig. Die Farben liegen wie eine Folie über einem Screenshot deiner Seite.
Ein Vergleich aus dem Alltag: Denk an einen Rasen in einem Park. Dort, wo viele Menschen langlaufen, entstehen Trampelpfade. Eine Heatmap zeigt dir diese Trampelpfade auf deiner Website, nur eben aus tausenden Besuchen zusammengefasst.
Der Begriff kommt aus der Datenvisualisierung, wo Heatmaps Werte in einer Fläche oder Tabelle farbig abstufen. Im UX-Bereich sind meist Heatmaps gemeint, die Tools wie Hotjar aus dem Verhalten echter Besuchender auf einer Website erzeugen.
Die wichtigsten Arten
- Klick-Maps: Sie zeigen, wo geklickt oder auf dem Smartphone getippt wird. Besonders aufschlussreich sind Klicks auf Elemente, die gar nicht klickbar sind, etwa Bilder oder Überschriften.
- Scroll-Maps: Sie zeigen, welcher Anteil der Besuchenden welchen Bereich der Seite überhaupt erreicht. So erkennst du, ob wichtige Inhalte zu weit unten stehen.
- Move-Maps: Sie zeigen, wo sich der Mauszeiger bewegt. Die Mausposition hängt zwar mit dem Blick zusammen, ist aber nur ein grober Hinweis darauf, wohin Menschen schauen, und auf Touch-Geräten gibt es keinen Mauszeiger.
Manche Tools markieren zusätzlich sogenannte Rage Clicks, also schnelle Mehrfachklicks auf dieselbe Stelle. Sie deuten oft auf Frust hin, zum Beispiel bei einem Link, der nicht reagiert.
Wo Heatmaps an Grenzen stoßen
Heatmaps zeigen, was passiert, aber nicht, warum. Ein heißer Bereich kann bedeuten, dass etwas gut funktioniert, oder dass Menschen verzweifelt etwas suchen. Erst ein Usability-Test oder ein Gespräch klärt die Ursache.
Außerdem brauchst du genug Besuche, damit das Bild aussagekräftig ist, und du solltest Desktop und Mobil getrennt betrachten, weil Layouts und Verhalten sich unterscheiden.
Auch der Datenschutz spielt eine Rolle. Tools, die Informationen auf dem Endgerät speichern oder auslesen, brauchen in Deutschland nach § 25 TDDDG in der Regel eine Einwilligung. Kläre den Einsatz deshalb vorher mit der verantwortlichen Stelle für Datenschutz und binde das Tool über deine Einwilligungsverwaltung ein.
Ein Beispiel
Ein Beispiel: Bei dem Shop von oben zeigt die Scroll-Map, dass nur ein kleiner Teil der Besuchenden den Button überhaupt sieht. Die Klick-Map zeigt dagegen viele Klicks auf ein Produktfoto weiter oben, das nicht verlinkt ist.
Das Team verlinkt das Foto und zieht den Button in den sichtbaren Bereich. Ob das wirkt, prüft es anschließend mit einem A/B-Test. Warum Menschen überhaupt zu Kundschaft werden, beleuchtet der Artikel Warum konvertieren Besucher zu Käufern?.
In der Praxis
- Starte mit einer Frage. Leg vorher fest, was du herausfinden willst, etwa ob ein bestimmter Abschnitt gesehen wird. Sonst verlierst du dich in bunten Bildern.
- Kombiniere mit anderen Methoden. Nutze Heatmaps, um Auffälligkeiten zu finden, und Tests oder Interviews, um sie zu verstehen.
- Trenne nach Geräten und Seitenversionen. Eine gemischte Heatmap aus Desktop und Smartphone oder aus alter und neuer Seite führt leicht zu falschen Schlüssen.
Verwandte Begriffe
A/B-Test, Usability-Test, Eye Tracking, Conversion