Eine UX-Heatmap ist eine visuelle Darstellung aggregierter Nutzerinteraktionen auf einer digitalen Oberfläche, bei der Farbgradienten von Rot (hohe Aktivität) bis Blau (geringe Aktivität) zeigen, wo Nutzer klicken, scrollen, den Mauszeiger bewegen oder Zeit verbringen.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX Research · Niveau: Einsteiger Synonyme / Auch bekannt als: Klick-Heatmap, Scroll Map, Attention Map, Maus-Tracking-Heatmap
Was ist eine Heatmap im UX-Kontext?
Heatmaps übersetzen große Mengen quantitativer Nutzerdaten in ein intuitiv lesbares visuelles Format. Anstatt Tabellen mit Klickzahlen zu analysieren, kann ein Designteam mit einem Blick erkennen, ob ein Call-to-Action-Button die erwünschte Aufmerksamkeit erhält, wie weit Nutzer auf einer langen Seite scrollen oder welche Navigationselemente völlig ignoriert werden. Heatmaps sind damit eine der zugänglichsten Methoden im quantitativen UX Research.
Erklärung
Es gibt drei grundlegende Typen von UX-Heatmaps:
Klick-Heatmap (Click Map): Zeigt, wo Nutzer auf einer Seite klicken – unabhängig davon, ob diese Elemente klickbar sind. Besonders aufschlussreich für Designteams: Wenn Nutzer auf nicht-klickbare Elemente klicken, signalisiert das unerfüllte Erwartungen (sogenannte „rage clicks" oder verwirrende visuelle Signale).
Scroll-Heatmap (Scroll Map): Visualisiert, wie weit Nutzer auf einer Seite scrollen. Typischerweise sehen die ersten 20–30 % der Seite die meiste Aufmerksamkeit. Wenn wichtige Call-to-Actions unterhalb der Scroll-Grenze von 50 % liegen, erreichen sie weniger als die Hälfte der Besucher.
Move-Heatmap (Hover Map): Zeichnet Mauszeigerpositionierungen auf. Die Korrelation von Mausbewegungen mit Blickbewegungen liegt laut Studien bei etwa 60–88 % (Guo & Agichtein, 2010) – ein nützlicher, aber imperfekter Proxy für Eye Tracking.
Heatmaps werden typischerweise mit Tools wie Hotjar, Crazy Egg, Microsoft Clarity (kostenlos) oder FullStory erfasst. Diese Tools injizieren einen JavaScript-Tracker in die Website, der alle Interaktionen aufzeichnet.
Für aussagekräftige Heatmaps werden mindestens 2.000–3.000 Sitzungen empfohlen. Bei weniger Daten dominieren zufällige Ausreißer die Visualisierung. Heatmaps sollten immer nach Gerät segmentiert werden – das Klickverhalten auf Desktop und Smartphone unterscheidet sich erheblich, da Finger und Mauscursor ganz unterschiedliche Interaktionspräzision und -muster erzeugen.
Heatmaps sind quantitativ und deskriptiv: Sie zeigen was passiert, aber nicht warum. Die Kombination mit Session Recordings (Videoaufnahmen einzelner Nutzersitzungen) und qualitativen Methoden wie Usability Tests liefert ein vollständiges Bild.
Beispiele
- App-Entwicklung: Eine News-App analysiert per Heatmap, dass Nutzer auf Bildbeschriftungen klicken, obwohl diese nicht verlinkt sind – ein Hinweis, dass Nutzer eine Verlinkung erwarten, die dann ergänzt wird.
- E-Commerce: Ein Onlineshop für Haushaltsgeräte erkennt durch Scroll-Heatmaps, dass Produktbewertungen (am Ende der Seite) von 80 % der Besucher nie gesehen werden – und verlegt sie deshalb weiter nach oben.
- Öffentlicher Sektor / NGO: Eine gemeinnützige Organisation analysiert Heatmaps ihrer Spendenseite und stellt fest, dass der Spendenbutton unterhalb der typischen Scroll-Grenze liegt und von der Mehrheit nie gesehen wurde.
- Startup: Ein SaaS-Anbieter für Buchhaltungssoftware entdeckt über Klick-Heatmaps, dass Nutzer regelmäßig auf das Unternehmenslogo klicken und zur Startseite navigieren – ein Hinweis, dass der In-App-Navigationspfad zurück zum Dashboard unklar ist.
- Agentur-Perspektive: Eine Performance-Marketing-Agentur nutzt Heatmaps auf Landingpages, um vor A/B-Tests zu verstehen, welche Elemente bereits gut performen und welche Hypothesen für Varianten entwickelt werden sollen.
In der Praxis
Typischer Ablauf:
- Setup: Heatmap-Tool installieren (Hotjar, Microsoft Clarity etc.), Seiten und Segmente definieren.
- Datensamplung: Mindestens 2.000–3.000 Sessions pro Seitentyp abwarten; nach Gerät (Desktop, Mobile, Tablet) segmentieren.
- Analyse: Klick-, Scroll- und Move-Maps auswerten; „rage clicks", ungenutzte CTAs und Scroll-Abbruchpunkte identifizieren.
- Ergänzung: Session Recordings für auffällige Muster ansehen; Hypothesen für Usability Tests oder A/B-Tests ableiten.
- Iteration: Designänderungen umsetzen, neue Heatmap-Periode starten, Verbesserungen messen.
Tools: Hotjar (Freemium), Microsoft Clarity (kostenlos), Crazy Egg, FullStory, ContentSquare (Enterprise).
Vergleich & Abgrenzung
Heatmaps aus Maus-Tracking sind von Eye-Tracking-Heatmaps zu unterscheiden: Erstere sind ein Proxy, Letztere messen Blickbewegungen direkt und präzise. Maus-Heatmaps sind günstiger und skalierbar; Eye-Tracking-Heatmaps sind genauer, aber aufwendig und teuer. Analytics-Dashboards (Google Analytics, Matomo) liefern ähnliche Daten in Tabellenform – Heatmaps machen diese Daten visuell zugänglich und kommunizierbar für Design-Stakeholder.
Häufige Fragen (FAQ)
Wie viele Sitzungen brauche ich für eine aussagekräftige Heatmap? Hotjar empfiehlt mindestens 2.000 Sitzungen für verlässliche Klick-Heatmaps, für Scroll-Heatmaps reichen oft 500–1.000. Wichtiger als die Gesamtzahl ist die Segmentierung: Eine Heatmap mit 5.000 gemischten Desktop- und Mobile-Sessions ist weniger aussagekräftig als zwei separate Heatmaps mit je 2.000 Sessions.
Sind Heatmaps DSGVO-konform? Heatmap-Tools verarbeiten Nutzungsdaten und müssen DSGVO-konform konfiguriert werden. Das bedeutet: IP-Adressen anonymisieren, Cookie-Einwilligung einholen (Opt-in für Tracking), Datenschutzerklärung anpassen und Datenverarbeitungsverträge mit dem Tool-Anbieter abschließen. Microsoft Clarity bietet von Haus aus eine stärkere Datenschutzkonfiguration als viele andere Tools.
Verwandte Einträge
Weiterführend
- Guo, Q. / Agichtein, E. (2010): Towards predicting web searcher gaze position from mouse movements. ACM CHI Extended Abstracts.
- Nielsen, J. / Pernice, K. (2010): Eyetracking Web Usability. New Riders.
- Ash, T. / Ginty, M. / Page, R. (2012): Landing Page Optimization. 2. Aufl. Sybex.
- Online: Hotjar Blog – „Heatmaps: What They Are and How to Use Them" (hotjar.com)
- Online: Nielsen Norman Group – „Interaction Design vs. Visual Design" (nngroup.com)
