Heatmap Erstellen: Anleitung und Tools
Heatmaps gehoeren zu den wirkungsvollsten Werkzeugen der Web-Analyse. Sie zeigen auf einen Blick, wo Nutzer klicken, wie weit sie scrollen und welche Bereiche ignoriert werden. Diese Anleitung zeigt Ihnen, wie Sie Heatmaps erstellen, welche Tools sich eignen und wie Sie die Ergebnisse richtig interpretieren.
Was ist eine Heatmap?
Eine Heatmap (Waermekarte) ist eine visuelle Darstellung von Daten, bei der Werte durch Farben dargestellt werden. Im Kontext der Web-Analyse zeigt eine Heatmap, wie Nutzer mit einer Webseite interagieren: Rote und gelbe Bereiche markieren hohe Aktivitaet, blaue und gruene Bereiche niedrige Aktivitaet.
Heatmaps verwandeln abstrakte Zahlen in ein intuitiv verstaendliches Bild. Waehrend eine Tabelle mit Klickzahlen schwer zu interpretieren ist, zeigt eine Heatmap sofort, wo die Aufmerksamkeit der Nutzer liegt.
Arten von Website-Heatmaps
1. Click Maps (Klick-Heatmaps)
Click Maps zeigen, wohin Nutzer auf einer Seite klicken. Jeder Klick wird als Punkt erfasst und die Dichte der Klicks wird farblich dargestellt. Click Maps sind ideal, um zu erkennen:
- Welche Buttons und Links am meisten geklickt werden
- Ob Nutzer auf nicht-klickbare Elemente klicken (Dead Clicks)
- Ob wichtige CTAs uebersehen werden
- Ob die Navigation intuitiv funktioniert
2. Scroll Maps (Scroll-Heatmaps)
Scroll Maps zeigen, wie weit Nutzer auf einer Seite nach unten scrollen. Der obere Bereich ist typischerweise rot (100 % der Nutzer sehen ihn), und die Farbe kuehlt ab, je weiter unten man kommt. Scroll Maps helfen bei Fragen wie:
- Sehen Nutzer meinen CTA-Button? (Liegt er "above the fold"?)
- Wie viel Prozent der Nutzer erreichen den Footer?
- Wo genau brechen die meisten Nutzer ab?
- Ist die Seite zu lang oder zu kurz?
3. Area Maps (Bereichs-Heatmaps)
Area Maps gruppieren Klicks nach definierten Seitenbereichen — z.B. Header, Navigation, Hauptinhalt, Sidebar, Footer. Statt einzelne Pixel zu analysieren, sehen Sie den prozentualen Anteil der Klicks pro Bereich. Das ist besonders nuetzlich fuer:
- Vergleich der Aufmerksamkeit zwischen Seitenbereichen
- Bewertung der Navigation (wie viel % klicken auf die Nav?)
- Footer-Analyse (wird der Footer genutzt oder ignoriert?)
4. Move Maps (Mausbewegungen)
Move Maps zeigen, wohin Nutzer die Maus bewegen. Studien zeigen eine Korrelation zwischen Mausbewegung und Blickrichtung — allerdings ist diese Korrelation nicht perfekt. Move Maps sind weniger zuverlaessig als Click und Scroll Maps und sollten nur als Ergaenzung genutzt werden.
Heatmap erstellen: Schritt-fuer-Schritt Anleitung
Schritt 1: Tool auswaehlen
Waehlen Sie ein Heatmap-Tool, das zu Ihren Anforderungen und Ihrem Budget passt:
| Tool | Heatmap-Typen | Preis | Besonderheit |
|---|---|---|---|
| Microsoft Clarity | Click, Scroll, Area | Kostenlos | Unbegrenzte Seiten und Sessions |
| Hotjar | Click, Scroll, Move | Ab 39 EUR/Monat | Integrierte Surveys |
| Crazy Egg | Click, Scroll, Confetti | Ab 29 $/Monat | Confetti-View nach Quellen |
| Mouseflow | Click, Scroll, Move, Geo | Ab 31 EUR/Monat | Geo-Heatmaps |
| Lucky Orange | Click, Scroll, Move | Ab 32 $/Monat | Echtzeit-Heatmaps |
Schritt 2: Tracking-Code installieren
Am Beispiel von Microsoft Clarity:
- Erstellen Sie ein Konto auf clarity.microsoft.com
- Erstellen Sie ein Projekt und geben Sie Ihre Website-URL ein
- Kopieren Sie den Tracking-Code
- Fuegen Sie den Code in den
<head>-Bereich Ihrer Website ein (oder nutzen Sie Google Tag Manager)
Wichtig: Vergessen Sie nicht, Clarity erst nach Cookie-Consent zu laden, um die DSGVO einzuhalten.
Schritt 3: Daten sammeln lassen
Lassen Sie das Tool mindestens 7-14 Tage Daten sammeln, bevor Sie die Heatmaps analysieren. Fuer statistisch aussagekraeftige Ergebnisse benoetigen Sie mindestens:
- Startseite: Mindestens 1.000 Sessions
- Produktseiten: Mindestens 500 Sessions
- Landing Pages: Mindestens 300 Sessions
Bei weniger Traffic sind die Ergebnisse nicht repraesentativ. Warten Sie in diesem Fall laenger oder konzentrieren Sie sich auf die meistbesuchten Seiten.
Schritt 4: Heatmaps analysieren
Oeffnen Sie die Heatmap-Ansicht in Ihrem Tool und beginnen Sie mit der Analyse. Schauen Sie sich zuerst die wichtigsten Seiten an: Startseite, Produktseiten, Landing Pages und Checkout-Seiten.
Schritt 5: Erkenntnisse umsetzen
Heatmaps sind nur wertvoll, wenn Sie aus den Erkenntnissen Massnahmen ableiten. Dokumentieren Sie Ihre Beobachtungen, priorisieren Sie nach Impact und setzen Sie Aenderungen um.
Heatmaps richtig interpretieren
Typische Erkenntnisse und die richtigen Schlussfolgerungen:
CTA wird nicht geklickt
Wenn Ihr wichtigster Call-to-Action kaum Klicks erhaelt, pruefen Sie:
- Liegt der CTA im sichtbaren Bereich (Scroll Map pruefen)?
- Hebt sich der CTA farblich vom Rest ab?
- Ist der CTA-Text klar und handlungsorientiert?
- Gibt es zu viele konkurrierende Elemente?
Nutzer klicken auf nicht-klickbare Elemente
Dead Clicks auf Bilder, Ueberschriften oder Texte zeigen, dass Nutzer dort Interaktivitaet erwarten. Loesungen: Elemente verlinken, visuell als nicht-klickbar kennzeichnen, oder interaktive Alternativen anbieten.
Starker Scroll-Abfall
Wenn die Scroll Map einen abrupten Farbwechsel zeigt, brechen an dieser Stelle viele Nutzer ab. Moegliche Ursachen: Langweiliger oder irrelevanter Inhalt, zu grosse Bilder, oder ein Element, das wie das Seitenende aussieht ("false floor").
Navigation wird ignoriert
Wenn die Hauptnavigation kaum Klicks erhaelt, finden Nutzer andere Wege (Suche, interne Links, Browser-Zurueck). Pruefen Sie, ob die Navigation klar beschriftet und sichtbar positioniert ist.
Heatmaps und A/B-Testing kombinieren
Heatmaps zeigen Probleme, A/B-Tests liefern Beweise fuer Loesungen. Der ideale Workflow:
- Phase 1: Heatmap-Analyse — Problem identifizieren (z.B. CTA wird uebersehen)
- Phase 2: Hypothese formulieren (z.B. "Ein groesserer CTA-Button erhoet die Klickrate")
- Phase 3: A/B-Test durchfuehren — Original vs. Variante
- Phase 4: Heatmap der Gewinner-Variante pruefen — hat sich das Klickmuster veraendert?
Fazit
Eine Heatmap zu erstellen ist dank kostenloser Tools wie Microsoft Clarity einfacher denn je. Die eigentliche Kunst liegt in der Interpretation: Welche Muster deuten auf Probleme hin, und welche Massnahmen verbessern die User Experience? Beginnen Sie mit den wichtigsten Seiten, sammeln Sie ausreichend Daten und leiten Sie konkrete Optimierungen ab. Heatmaps sind kein einmaliges Projekt, sondern ein kontinuierlicher Prozess der Website-Verbesserung.
Automatische Clarity-Berichte gewuenscht?
ClarityInsights analysiert Ihre Daten und sendet woechentliche AI-Berichte mit UX-Empfehlungen.
Zur Warteliste