Heatmaps sind visuelle Darstellungen von Nutzerverhalten auf Websites, die Klicks, Bewegungen und Scrolltiefe farbkodiert anzeigen und Designern erlauben, Layoutentscheidungen mit realen Daten zu validieren.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Einsteiger Synonyme / Auch bekannt als: Click Map, Scroll Map, Move Map, Attention Map, Eye-Tracking-Visualisierung
Was sind Heatmaps?
Intuition und Erfahrung sind wertvolle Designwerkzeuge – aber sie sagen nicht mit Sicherheit, wie echte Nutzer eine Seite tatsächlich nutzen. Heatmaps schließen diese Lücke: Sie erfassen Nutzerverhalten im Echtbetrieb und machen es visuell sichtbar.
Der Begriff "Heatmap" stammt aus der Datenwissenschaft: Bereiche mit hoher Aktivität werden warm eingefärbt (Rot, Orange), Bereiche mit geringer Aktivität kühl (Blau, Grün). Designer können auf einen Blick sehen, welche Elemente Aufmerksamkeit bekommen und welche ignoriert werden.
Erklärung
Typen von Heatmaps
1. Click-Heatmap (Klick-Karte) Zeigt, wo Nutzer auf der Seite klicken. Heiße Punkte = viele Klicks. Kalte Flächen = keine Klicks.
Designer-Insights:
- Werden Nicht-Links als Links wahrgenommen (Klicks auf Bilder, Texte ohne Link)?
- Werden wichtige CTAs geklickt?
- Werden dezente Links oder Buttons übersehen?
- Wird eine Navigationsstruktur wie erwartet verwendet?
2. Move-Map (Mausbewegungskarte) Erfasst Mausbewegungen als Annäherung an den Blickverlauf. Studien zeigen eine Korrelation von ca. 84 % zwischen Mausbewegung und Blickrichtung (Rodden et al., 2008) – Move Maps sind also ein kostengünstiger Ersatz für echtes Eye-Tracking.
Designer-Insights:
- Wo schweift der Blick zuerst hin?
- Welche Überschriften werden überflogen?
- Werden bestimmte Bildbereiche gemieden?
3. Scroll-Map (Scrolltiefe-Karte) Zeigt, wie weit Nutzer auf der Seite scrollen. Prozentuale Angaben zeigen, wie viele Nutzer bis zu einer bestimmten Tiefe gescrollt haben.
Designer-Insights:
- Wo liegt der "Drop-off-Punkt" – ab wann verlieren viele Nutzer das Interesse?
- Werden wichtige CTAs, die tief unten liegen, von ausreichend Nutzern gesehen?
- Sollte Content nach oben verschoben werden?
- Was passiert Above the Fold: Was Besucher zuerst sehen vs. darunter?
4. Rage-Click-Map Spezielle Auswertung von Mehrfachklicks auf dasselbe Element in kurzer Zeit – ein Signal für Frustration (Nutzer klickt auf etwas, das nicht reagiert).
Designer-Insights:
- Welche Elemente sehen wie Buttons aus, sind aber keine?
- Welche Funktionen laden zu langsam und triggern Wiederholungsklicks?
Eye-Tracking vs. Heatmaps
Echtes Eye-Tracking (Blickverfolgung per Kamera) liefert präzisere Daten, ist aber aufwendig und teuer (Labor-Setting oder teure Hardware). Tools wie Microsoft Eye Control ermöglichen kostengünstigere Annäherungen.
Heatmaps aus Mausbewegungen sind im Vergleich ungenauer, aber für die meisten Designentscheidungen ausreichend und im Produktivbetrieb skalierbar.
Tools
Hotjar (hotjar.com) Marktführend für Heatmaps. Kombiniert Heatmaps, Session Recordings, Feedback-Tools und Umfragen. Free-Tier verfügbar für kleinere Sites.
Microsoft Clarity (clarity.microsoft.com) Kostenlose Alternative zu Hotjar mit ähnlichen Features. Kein Limit, keine Kosten. Gut für Projekte mit kleinem Budget.
FullStory Fokus auf Session-Recordings mit KI-Analyse. Enterprise-Produkt.
Lucky Orange Günstiger Hotjar-Konkurrent mit Chat-Integration.
Beispiele
Landingpage-Optimierung: Eine Landing Page Design: Conversion-optimierte Layouts-Analyse zeigt, dass der CTA-Button "Jetzt testen" weniger geklickt wird als erwartet. Die Click-Heatmap zeigt dagegen, dass Nutzer intensiv auf das Hero-Bild klicken – obwohl es nicht klickbar ist. Lösung: Das Bild als Link zum Produkt verknüpfen.
Navigation-Analyse: Die Move-Map zeigt, dass Nutzer die Hauptnavigation kaum berühren, sondern direkt zur internen Suche navigieren. Schlussfolgerung: Die Suche-Funktion sollte prominenter platziert werden.
Scroll-Analyse: Auf einem Blog-Artikel scrollen nur 30 % der Nutzer unter die Hälfte. Ein wichtiger Abonnement-CTA am Artikelende erreicht kaum jemanden. Lösung: Sticky CTA oder CTA nach 50 % Scrolltiefe.
Rage Clicks auf Login-Button: Nutzer klicken wiederholt auf "Einloggen", aber das Formular öffnet sich zu langsam. Page Speed und Core Web Vitals: Was Designer wissen müssen-Problem identifiziert und behoben.
In der Praxis
Heatmaps in den Design-Workflow integrieren
- Baseline messen: Vor einer Redesign-Runde Heatmaps des aktuellen Designs aufzeichnen.
- Hypothesen formulieren: "Ich glaube, der CTA wird übersehen, weil er zu weit unten ist."
- Redesign umsetzen
- Nach-Messung: Neue Heatmaps mit dem gleichen Zeitraum vergleichen.
- Iterieren
A/B-Tests und Heatmaps
Heatmaps und A/B-Tests ergänzen sich gut: Der A/B-Test zeigt, welche Variante besser konvertiert. Die Heatmap erklärt, warum. "Variante B hatte 20 % mehr Klicks auf den CTA – die Heatmap zeigt, dass die geänderte Positionierung die Klicks direkt dorthin konzentriert."
Datenschutz und DSGVO
Heatmap-Tools erfassen Nutzerverhalten. Das unterliegt der DSGVO: Nutzer müssen informiert werden (Datenschutzerklärung) und oft eine Einwilligung geben (Consent-Management). Hotjar und Clarity bieten Konfigurationsoptionen zur DSGVO-konformen Implementierung.
Vorsicht: Formulardaten (Texteingaben) dürfen nicht mitgezeichnet werden – alle seriösen Heatmap-Tools maskieren diese Felder standardmäßig.
Vergleich & Abgrenzung
| Methode | Was gemessen wird | Aufwand | Stärke |
|---|---|---|---|
| Heatmap | Aggregiertes Verhalten vieler Nutzer | Gering | Muster erkennen |
| Session Recording | Einzelne Nutzersitzungen | Gering–Mittel | Details und Kontext |
| A/B-Test | Statistischer Vergleich zweier Versionen | Mittel | Wirkung messen |
| User Testing | Qualitatives Feedback | Hoch | Verstehen, warum |
| Eye-Tracking | Präziser Blickverlauf | Sehr hoch | Akademische Genauigkeit |
Häufige Fragen (FAQ)
Wie viele Sessions brauche ich für eine aussagekräftige Heatmap? Als Faustregel: mindestens 500–1000 Sessions für eine Desktop-Heatmap. Für Mobile getrennt auswerten.
Kann ich Heatmaps für die Anfangsplanung nutzen? Nur wenn bereits eine vorherige Version der Seite existiert. Für neue Designs sind User Tests oder Guerrilla-Testing besser.
Sind Heatmaps kein Datenschutzproblem? Mit korrekter Implementierung (keine Formulardaten aufzeichnen, Einwilligung einholen) sind Heatmaps datenschutzkonform umsetzbar.
Verwandte Einträge
- Above the Fold: Was Besucher zuerst sehen – Was Nutzer zuerst sehen und klicken
- Landing Page Design: Conversion-optimierte Layouts – Conversion-Optimierung mit Heatmaps
- Scroll-Design: Parallax, Scrollytelling, Sticky Elements – Scrollverhalten und Scrollmaps
- Page Speed und Core Web Vitals: Was Designer wissen müssen – Rage Clicks oft auf langsame Elemente
- Micro-Interactions im Web: Hover, Click, Load – Interaktionsfeedback verbessern
Weiterführend
- Rodden, K. et al. (2008). Eye-Mouse Coordination Patterns on Web Search Result Pages. CHI 2008 Workshop.
- Hotjar (2024). Heatmap Guide.
- Microsoft Clarity (2024).
- Nielsen Norman Group (2019). Heatmaps: How They Work.
- Baymard Institute (2022). UX Research Methods: When to Use Which.
