Heatmaps sind farbcodierte Visualisierungen, die zeigen, wo Nutzer auf einer Website klicken, scrollen oder mit dem Mauszeiger verweilen – ein zentrales Werkzeug der UX-Research.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX-Research · Niveau: Einsteiger Synonyme / Auch bekannt als: Wärmekarte, Click-Map, Scroll-Map, Attention-Map, Heatmap-Analyse
Was sind Heatmaps?
Heatmaps sind grafische Auswertungen von Nutzerverhalten, die das Verhalten vieler Sessions zu einem Bild aggregieren. Rote, „heiße" Bereiche markieren hohe Aktivität – also Stellen, an denen viele Nutzer klicken, hovern oder scrollen. Blaue, „kalte" Bereiche zeigen das Gegenteil. Heatmaps machen so auf einen Blick sichtbar, welche Elemente einer Seite Aufmerksamkeit bekommen und welche ignoriert werden.
Erklärung
Im UX-Research dienen Heatmaps als quantitatives Ergänzungswerkzeug zu qualitativen Methoden wie Interviews oder Usability-Tests. Während ein User-Interview erklärt, warum jemand etwas tut, zeigt eine Heatmap, wo und wie oft es passiert – idealerweise über hunderte oder tausende Sessions hinweg, sodass statistische Aussagen möglich werden.
Üblich sind vier Arten von Heatmaps:
- Click-Maps zeigen, wo Nutzer mit der Maus geklickt oder mit dem Finger getippt haben. Auf Mobile spricht man auch von Touch-Maps.
- Scroll-Maps zeigen, bis zu welcher Höhe einer Seite Nutzer scrollen. Eine Scroll-Map mit starkem Abfall nach 30 % deutet darauf hin, dass Inhalte „below the fold" kaum gesehen werden.
- Move-Maps (auch Hover-Maps) verfolgen Maus-Bewegungen. Studien zeigen eine moderate Korrelation zwischen Maus-Position und Blickrichtung – ein günstiger Proxy für echtes Eye-Tracking.
- Attention-Maps / Engagement-Maps kombinieren Scroll-Verhalten und Verweildauer, um zu zeigen, in welchen Bereichen Nutzer wirklich lesen.
Heatmaps werden von Tools wie Hotjar, Microsoft Clarity (kostenlos), Mouseflow, Crazy Egg oder FullStory generiert. Sie erfordern ein kleines Tracking-Skript auf der Webseite und benötigen je nach Komplexität der Seite einige tausend Sessions, um aussagekräftig zu werden. Datenschutzrechtlich sind Heatmaps in der EU kritisch zu betrachten – Session-Recording-Komponenten erfordern in der Regel eine Einwilligung nach DSGVO.
Beispiele
- Beispiel 1: Eine E-Commerce-Site stellt per Click-Map fest, dass Nutzer auf ein nicht-klickbares Produktbild tippen – die Lösung: das Bild verlinken oder ein deutliches CTA daneben platzieren.
- Beispiel 2: Eine SaaS-Landingpage zeigt in der Scroll-Map einen scharfen Abfall direkt nach dem Hero – das wichtige Pricing-Element wird kaum gesehen. Reihenfolge umstellen löst das Problem.
- Beispiel 3: Ein Blog-Layout: die Move-Map zeigt, dass viele Nutzer am rechten Rand verweilen, wo der „Verwandte Artikel"-Block sitzt – Indiz, dass dort weitere Engagement-Hooks lohnen.
- Beispiel 4: Eine Online-Bank entdeckt per Heatmap, dass der Login-Button am Smartphone in der Daumenzone zu weit oben sitzt – Klick-Frustration im unteren Bildbereich wird sichtbar.
- Beispiel 5: Eine Nonprofit-Spendenseite findet heraus, dass Nutzer das Spendenformular sehen, aber bei der Eingabe der Adresse abbrechen – kombiniert mit Session-Recordings lässt sich das Formular vereinfachen.
In der Praxis
Heatmaps sind selten alleinstehend aussagekräftig. Best Practice ist, sie als Diagnose-Werkzeug in einen Conversion-Optimierungs-Zyklus einzubetten: Hypothese formulieren → Heatmap betrachten → mit Analytics-Zahlen abgleichen → A/B-Test daraus ableiten. Wichtig ist Segmentierung: separate Heatmaps für Desktop, Tablet und Mobile, weil Nutzungsmuster stark differieren. Auch nach Traffic-Quelle (Paid vs. Organic) oder neue vs. wiederkehrende Besucher zu segmentieren, bringt fast immer überraschende Insights.
Vergleich & Abgrenzung
Heatmaps werden oft mit Eye-Tracking oder klassischer Web-Analytics verwechselt. Sie ergänzen beides, ersetzen aber keines.
| Merkmal | Heatmap | Eye-Tracking | Google Analytics |
|---|---|---|---|
| Datenquelle | Maus/Touch-Verhalten | echte Blickrichtung | Seitenaufrufe, Events |
| Aufwand | gering, Tag einbinden | hoch, Labor nötig | gering |
| Aussage | Verhalten auf einer Seite | echte Aufmerksamkeit | Aggregierte Trichter-Zahlen |
| Stichprobe | hunderte/tausende Sessions | 5–30 Probanden | Millionen |
Häufige Fragen (FAQ)
Wie viele Sessions brauche ich für eine aussagekräftige Heatmap? Faustregel: mindestens 1.000–2.000 Sessions pro Seite, besser 5.000+. Bei sehr ungleicher Traffic-Verteilung kann es länger dauern, bis seltene Unterseiten genug Daten sammeln.
Sind Heatmaps DSGVO-konform? Reine aggregierte Heatmaps gelten als weniger problematisch, Session-Recordings hingegen erfordern in der EU explizite Einwilligung. Anonymisierte Erfassung, IP-Maskierung und ein klarer Cookie-Banner sind Pflicht.
Ersetzen Heatmaps Usability-Tests? Nein. Heatmaps zeigen was passiert, nicht warum. Sie funktionieren am besten in Kombination mit moderierten Usability-Tests, in denen man die beobachteten Muster im Gespräch validiert.
Verwandte Einträge
- A/B Testing
Weiterführend
- Krug, Steve (2014): Don't Make Me Think, Revisited. New Riders
- Nielsen Norman Group (2023): Heatmaps in User Research.
- Hotjar Knowledge Base (2024): Heatmaps: types, use cases and limits.
