Heatmap

Eine Heatmap ist eine datenbasierte Visualisierungsmethode, die Nutzerverhalten auf einer Webseite durch Farbskalen sichtbar macht. Der Begriff "Heat" (Wärme) beschreibt die Farbkodierung: rote und orange Bereiche zeigen hohe Aktivität (viele Klicks, langes Verweilen, häufige Mausbewegungen), blaue und grüne Bereiche zeigen geringe Aktivität.

Was Zahlen in Analyse-Dashboards abstrahieren, macht die Heatmap sinnlich erfahrbar: Plötzlich ist auf einen Blick zu sehen, dass Nutzer massenhaft auf ein Bild klicken, das kein Link ist – oder dass 60 % der Besucher das Formular am Seitenende niemals sehen, weil sie vorher aufgehört haben zu scrollen.

Heatmaps sind damit ein Brückeninstrument zwischen quantitativer Analytics-Auswertung (was passiert) und qualitativer Nutzerforschung (warum es passiert). Kombiniert mit A/B-Testing bilden sie die Grundlage für evidenzbasierte UX-Optimierung.

Heatmap-Typen: Verschiedene Blickwinkel auf das Nutzerverhalten

Verschiedene Heatmap-Typen messen unterschiedliche Aspekte des Nutzerverhaltens:

Click Map (Klick-Karte)

Die häufigste und intuitivste Form. Die Click Map zeigt jeden Klick aller Nutzer auf einer Seite – aggregiert zu einer Heatmap. Jeder Klick wird als Datenpunkt erfasst, unabhängig davon, ob er auf einem klickbaren Element gelandet ist oder nicht.

Was Click Maps zeigen:

• Welche CTAs und Links tatsächlich geklickt werden
• Welche Navigation-Elemente genutzt werden
• "Dead Clicks": Klicks auf nicht-interaktive Elemente (Nutzer erwartet einen Link, der nicht da ist)
• "Rage Clicks": Mehrfaches schnelles Klicken auf ein Element (Frustrationssignal)

Typische Erkenntnisse: Ein Produktbild wird häufig geklickt – kein Link vorhanden → Verlinkung zur Produktseite hinzufügen. Die CTA "Mehr erfahren" wird kaum geklickt, die Überschrift daneben sehr häufig → Headline als Link gestalten.

Scroll Map (Scroll-Karte)

Die Scroll Map visualisiert, wie weit Nutzer auf einer Seite nach unten scrollen. Sie zeigt in Prozent, wie viele Nutzer jeden Seitenabschnitt gesehen haben.

Die Fold-Line: Der Bereich der Seite, der ohne Scrollen sichtbar ist (im "Above the Fold"). Bei Desktop typischerweise die ersten 600–800px, bei Mobile 500–700px. Inhalte oberhalb der Fold-Line werden von ~100 % der Nutzer gesehen, Inhalte weit darunter oft von weniger als 20 %.

Was Scroll Maps zeigen:

• Wo die meisten Nutzer aufhören zu scrollen (Drop-off-Punkt)
• Ob wichtige Inhalte (CTA, Preise, Key Benefits) im sichtbaren Bereich liegen
• Ob bestimmte Sektionen überproportional viel Scrollen auslösen (interessanter Content) oder Abbrüche verursachen

Typische Erkenntnisse: 70 % der Nutzer sehen das Kontaktformular nicht – es liegt zu weit unten. Lösung: Formular höher platzieren oder zusätzliche CTA im oberen Bereich einbauen.

Move Map (Mausbewegungskarte)

Die Move Map trackt, wohin Nutzer ihren Mauszeiger bewegen – auch ohne zu klicken. Forschungen zeigen: Mausbewegungen korrelieren zu ~84–88 % mit Blickbewegungen (Joachim Müller, Universität Saarland). Move Maps sind damit ein günstiger Proxy für Eye-Tracking.

Was Move Maps zeigen:

• Wohin der Fokus der Nutzer geht (visuelle Aufmerksamkeit)
• Zögerliches Hover-Verhalten (Nutzer fahren über Elemente, klicken aber nicht → mögliche Unsicherheit)
• Welche Textabschnitte gelesen werden (Maus folgt beim Lesen oft dem Text)

Attention Map (Aufmerksamkeitskarte)

Kombiniert Click- und Move-Daten zu einem synthetischen Bild der visuellen Aufmerksamkeit. Besonders nützlich für Layout-Entscheidungen: Wo befindet sich der "hot spot" der Aufmerksamkeit? Wichtige Informationen sollten dort platziert werden.

Eye-Tracking (Blickbewegungsanalyse)

Die genaueste, aber teuerste Methode. Mit spezieller Hardware (IR-Kamera) oder Software wird exakt verfolgt, wohin Nutzer schauen – in welcher Reihenfolge, wie lange.

F-Pattern: Eine der wichtigsten Eye-Tracking-Erkenntnisse von Nielsen Norman Group: Nutzer lesen Webseiten in einem F-förmigen Muster. Die erste horizontale Zeile wird gelesen, dann eine kürzere zweite Zeile, dann scrollt das Auge senkrecht nach unten links. Konsequenz: Wichtige Informationen sollten links und oben positioniert werden.

Z-Pattern: Für Seiten mit wenig Text (z. B. Landingpages) gilt häufig das Z-Pattern: Augen wandern oben links → oben rechts (diagonale Bewegung) → unten links → unten rechts.

Heatmap-Tools im Vergleich

Empfehlung für KMU: Microsoft Clarity ist kostenlos, DSGVO-konform und überraschend leistungsfähig. Für UX-Teams mit mehr Budget ist Hotjar wegen seiner Survey-Funktionen und besseren Segmentierungsmöglichkeiten die stärkere Wahl.

Heatmaps interpretieren: Was bedeuten die Farben wirklich?

Ein häufiger Fehler ist, Heatmaps unkritisch zu lesen. Kontext ist entscheidend:

Click Maps richtig lesen

Viele Klicks auf einen Link = gut? Nicht unbedingt. Wenn alle Nutzer auf "Mehr erfahren" klicken, anschließend aber sofort zurückgehen (hohes Bounce), stimmt etwas mit der verlinkten Seite nicht.

Dead Clicks = Problem? Immer. Dead Clicks signalisieren, dass Nutzer Elemente für klickbar halten, die es nicht sind – eine klare UX-Fehlfunktion.

Rage Clicks = dringend? Ja. Rage Clicks entstehen, wenn etwas nicht funktioniert (langsames Element, JavaScript-Fehler) oder wenn die erwartete Reaktion ausbleibt. Sofortiger Handlungsbedarf.

Scroll Maps richtig lesen

50 % Drop-off an einer bestimmten Stelle = Problem? Nur wenn an dieser Stelle eine wichtige Information steht. Ein Drop-off am Ende einer langen Seite ist normal. Ein Drop-off direkt unter dem Hero-Bereich deutet auf ein Attraktivitätsproblem des Inhalts hin.

Verschiedene Geräte separat analysieren: Mobile Nutzer scrollen anders als Desktop-Nutzer. Eine Scroll Map für alle Geräte aggregiert kann täuschen. Analysieren Sie Mobile und Desktop immer getrennt.

Heatmaps für spezifische Anwendungsfälle

Heatmaps für Landingpages

Landingpages haben ein klares Ziel: Conversion. Heatmaps helfen, die kritischen Fragen zu beantworten:

• Sehen genug Nutzer den CTA-Button? (Scroll Map)
• Wird der CTA geklickt? (Click Map)
• Was wird stattdessen geklickt? (Click Map – Ablenkungspotenzial erkennen)
• Lesen Nutzer die Benefits, bevor sie auf den CTA stoßen? (Scroll Map)

Typische Optimierungen: CTA höher positionieren, ablenkende Links entfernen, Value Proposition in den sichtbaren Bereich verschieben.

Heatmaps für E-Commerce

Im Online-Shop zeigen Heatmaps, welche Produktelemente entscheidend für die Kaufentscheidung sind:

• Produktbilder: Werden Detailansichten geklickt? Werden Produkte gezoomt?
• Preis: Wird der Preis lange betrachtet? (Move Map)
• Add-to-Cart-Button: Wo und wie oft geklickt?
• Produktbeschreibung: Wie weit wird sie gelesen?

Typische Erkenntnisse: Kunden klicken massenhaft auf das Hauptbild in der Hoffnung, es zu vergrößern → Zoom-Funktion fehlt oder ist nicht offensichtlich genug.

Heatmaps für Navigation und Header

Werden alle Navigations-Elemente genutzt? Oder ignoriert die Mehrheit der Nutzer bestimmte Menüpunkte? Eine Click Map auf dem Header zeigt schnell, welche Navigation-Elemente nützlich sind und welche Ballast.

Session Recordings: Der ergänzende Blickwinkel

Heatmaps sind aggregierte Ansichten. Session Recordings zeigen die individuelle Nutzerreise als Video-Playback: Mausbewegungen, Klicks, Scrolling und Formular-Interaktionen eines einzelnen Nutzers in Echtzeit.

Session Recordings ergänzen Heatmaps perfekt:

• Heatmap zeigt wo viele Nutzer Probleme haben
• Session Recording zeigt wie ein einzelner Nutzer auf das Problem reagiert

Kombination: Heatmap identifiziert einen Dead-Click-Hot-Spot → Session Recordings von Nutzern, die dort geklickt haben, zeigen den Kontext und helfen, die Root Cause zu verstehen.

Datenschutz bei Heatmaps

Da Heatmap-Tools Nutzerverhalten aufzeichnen, sind datenschutzrechtliche Anforderungen zu beachten:

• Datenschutzerklärung: Nennen, welche Tools verwendet werden und warum
• Cookie-Consent: Nutzer müssen dem Tracking zustimmen (Consent Management Platform)
• Datenmaskierung: Sicherstellen, dass keine Passwörter, Kreditkarteninformationen oder persönliche Eingaben aufgezeichnet werden (alle seriösen Tools masken solche Felder automatisch)
• IP-Anonymisierung: In den Tool-Einstellungen aktivieren
• Aufbewahrungsdauer: DSGVO-konform begrenzen (z. B. 90 Tage)

Heatmaps in Kombination mit A/B-Testing

Heatmaps und A/B-Testing bilden einen leistungsstarken Optimierungskreislauf:

1. Heatmap analysieren → Identifikation eines UX-Problems (z. B. CTA-Button wird wenig geklickt)
2. Hypothese formulieren → "Ein roter CTA-Button wird mehr geklickt als ein grauer"
3. A/B-Test aufsetzen → Variante A (grau) vs. Variante B (rot)
4. Test auswerten → Welche Variante erzielt mehr CTA-Klicks und Conversions?
5. Heatmap der Gewinnervariante → Bestätigt die Verbesserung visuell

Dieser Zyklus – Analyse → Hypothese → Test → Validierung – ist der Kern datengetriebener Conversion Rate-Optimierung (CRO).