Glossar

Jeder Heatmap-Typ einer Website, und was er jeweils misst

Taras Shynkarenko
Taras Shynkarenko
•Aktualisiert: •7 Min. Lesezeit
Jeder Heatmap-Typ einer Website, und was er jeweils misstJeder Heatmap-Typ einer Website, und was er jeweils misst

TL;DR, Kurzantwort

7 Min. Lesezeit

Eine Website-Heatmap ist ein farbcodiertes Overlay, das Verhalten aus vielen Besuchen auf einem einzigen Seitenbild zusammenfasst, wobei warme Farben starke Interaktion markieren und kühle Farben Bereiche, die Besucher ignoriert haben. Das Wort benennt sowohl die gesamte Kategorie als auch eine Karte darin, und daher kommt die meiste Verwirrung: Click, Scroll, Move, Confetti und Attention Maps beantworten jeweils eine andere Frage.

Was ist eine Heatmap-Website?

Wer nach einer Heatmap-Website sucht, meint eine Website-Heatmap, ein farbcodiertes Overlay, das Verhalten aus vielen Besuchen auf einem einzigen Seitenbild zusammenfasst, wobei warme Farben starke Interaktion markieren und kühle Farben Bereiche markieren, die Besucher ignoriert haben. Das Tracking-Skript speichert für jeden Klick, jede Scrollposition und jede Zeigerbewegung eine Koordinate und einen Zeitstempel, dann sortiert das Tool diese Koordinaten in ein Raster über einem Screenshot und färbt jede Zelle nach Dichte. Lesen Sie das Ergebnis als Verteilung von Aufmerksamkeit über eine Population, niemals als Protokoll dessen, was eine einzelne Person getan hat.

Warum bedeutet "Heatmap" zwei verschiedene Dinge?

Das Wort "Heatmap" benennt sowohl die Kategorie der aggregierten Overlays als auch eine bestimmte Karte innerhalb dieser Kategorie, und deshalb können zwei Menschen über Heatmaps streiten und dabei völlig unterschiedliche Bilder vor Augen haben. Im weiten Sinn ist eine Heatmap jedes Verhaltens-Overlay, das auf einen Seiten-Screenshot gezeichnet wird. Im engen Sinn ist sie die dichtegefärbte Karte, die ein Raster nach Interaktionszahl einfärbt und neben vier Geschwistern steht, die Punkte, Bänder oder Zeitmessung statt eines Dichteverlaufs verwenden. Benennen Sie die konkrete Karte, bevor Sie Ergebnisse mit jemandem vergleichen, denn "die Heatmap sagt, dass Leute die Preistabelle ignorieren" bedeutet nichts, solange Sie nicht wissen, ob diese Aussage aus Klicks, Scrolltiefe oder Viewport-Zeit stammt.

Eine Person klickt auf ein Laptop-Trackpad, die Art von Interaktion, die eine Click Map als warmen Punkt erfasst.

Welche fünf Typen von Website-Heatmaps gibt es?

Fünf Overlays teilen sich das Label Heatmap, und jedes zeichnet ein anderes Signal auf:

KartentypWas sie aufzeichnetFrage, die sie beantwortetWo sie in die Irre führt
Click MapKlick- und Tap-Koordinaten, sortiert in ein DichterasterWelche Elemente ziehen Interaktion an?Zählt Klicks auf nicht klickbaren Text als Engagement
Scroll MapDen tiefsten Pixel, den jede Session erreicht hatWo hört das Publikum auf?Der Fold verschiebt sich mit der Viewport-Größe und verwischt die Grenze
Move MapZeigerpfad und die Stelle, an der der Cursor ruhtWelche Regionen halten den Cursor?Cursorposition ist ein schwacher Ersatz für den Blick, und Touch-Geräte liefern keine
Confetti MapJeden Klick als eigenen Punkt mit Quelle, Gerät und KampagneWer hat wo geklickt, aufgeteilt nach Segment?Punkte überlagern sich bei hohem Volumen zu Rauschen, wenn Sie nicht filtern
Attention MapZeit, die jede Region im Viewport verbracht hatWelche Abschnitte wurden angesehen statt überscrollt?Ein verlassener Tab zählt als anhaltende Aufmerksamkeit

Die Click Map beantwortet Fragen zur Absicht und die Scroll Map beantwortet Fragen zur Reichweite, also liefert die eine ohne die andere nur ein halbes Argument. Eine Seite kann Aufmerksamkeit bis nach unten halten und trotzdem null Klicks auf ihren Call to Action sammeln. Eine andere Seite kann im ersten Bildschirm viele Klicks sammeln und neunzig Prozent der Besucher verlieren, bevor der Abschnitt rendert, der Sie interessiert. Die Confetti Map teilt genau diese Klicks nach Segment auf, und das macht aus "der Button bekommt Klicks" ein "der Button bekommt Klicks von bezahltem Traffic auf Desktop und nichts von mobilem organischem Traffic".

Wie viele Sessions braucht eine Website-Heatmap?

Eine Heatmap braucht genug Sessions, damit ihre Farbunterschiede das Sampling-Rauschen überstehen, und die grobe Schwelle ergibt sich aus einer einzigen Formel. Für einen Anteil nähert sich die konservative 95%-Fehlermarge an als:

margin of error = 1 / √n

Bei 400 Sessions ergibt das 1 / √400 = 0,05, also 5 Prozentpunkte. Ein Element, das 12% aller Klicks auf der Seite bekommen hat, liegt irgendwo zwischen 7% und 17% des wahren Klickanteils. Diese Marge auf 2,5 Punkte zu halbieren erfordert die vierfache Datenmenge, also 1.600 Sessions. Jeder Filter, den Sie anwenden, teilt die Stichprobe erneut: 1.600 Sessions auf Mobil und Desktop aufzuteilen und dann auf zwei Kampagnenquellen hinterlässt vier Buckets zu je 400 und drückt die Marge wieder auf jeweils 5 Punkte. Entscheiden Sie über Ihre Segmente, bevor Sie entscheiden, dass die Stichprobe groß genug ist.

Was kann eine Website-Heatmap nicht zeigen?

Eine Heatmap kann Ihnen keine einzelne kaputte Journey zeigen, denn die Mittelung ist der gesamte Mechanismus, der das Bild lesbar macht. Zehntausend Sessions fallen zu einem Bild zusammen, also erscheinen die vierzig Leute, die ein Gutscheinfeld angetippt haben, einen stillen Validierungsfehler bekamen und den Checkout abbrachen, als leicht wärmerer Fleck, nicht unterscheidbar von gewöhnlichem Interesse. Die Karte kennt außerdem kein Scheitern: ein Dead Click, der keine Reaktion liefert, brennt in exakt derselben Farbe wie ein Klick, der das richtige Modal geöffnet hat, und wiederholtes wütendes Klicken auf einen eingefrorenen Button liest sich als heißester Punkt der Seite.

Das ist der Punkt, an dem Aggregation an die individuelle Wiedergabe übergeben muss. Die aufgezeichneten Sessions hinter einem Hotspot anzusehen trennt einen gut gestalteten Button von einem kaputten. Flowsery erkennt Rage Clicks, Dead Clicks, JavaScript-Fehler und Abbrüche automatisch, gruppiert die passenden Sessions zu einem Issue und sortiert Issues danach, wie viele Nutzer davon betroffen sind, sodass die Anomalie, die Sie als warmen Fleck bemerkt haben, als gezähltes Problem ankommt statt als Ahnung. Sein AI Session Replay hängt außerdem Schritte zur Reproduktion an das Issue, und das ist der Teil, den eine Heatmap nie liefern kann.

Wie brechen dynamische und personalisierte Seiten Heatmaps?

Jede Seite, die für verschiedene Besucher unterschiedlich rendert, bricht die Ein-Bild-Annahme, auf der eine Heatmap aufgebaut ist. Das Overlay braucht einen Screenshot zum Zeichnen, also erzeugt eine Seite mit einem A/B-Test, einem personalisierten Hero, einem eingeloggten Zustand, einem Akkordeon, das geschlossen startet, einem Cookie-Banner, das alles nach unten schiebt, oder mit Infinite Scroll Koordinaten aus Layouts, die der Screenshot nie gezeigt hat. Klicks, die gegen Variante B aufgezeichnet wurden, landen auf dem Screenshot von Variante A, und die entstehende Karte ist ein Komposit aus Seiten, die es nie gab.

Zwei Mechaniken begrenzen den Schaden. Erfassen Sie Heatmaps für jeden responsiven Breakpoint getrennt, statt einen Desktop-Screenshot zu skalieren, um Verhalten auf dem Handy zu erklären, und begrenzen Sie jede Karte auf eine Variante, einen Authentifizierungszustand und einen Ausklappzustand. Tools, die Interaktionen an DOM-Selektoren statt an rohe Pixelkoordinaten binden, überstehen Reflow besser, weil der Selektor den Button auch dann noch identifiziert, wenn das Layout ihn verschiebt.

Ein Analyst prüft Diagramme auf einem Monitor und macht aus einem Heatmap-Fund eine konkrete Korrektur.

Wie machen Sie aus einem Heatmap-Fund eine Korrektur?

Eine Heatmap produziert eine Hypothese, und alles danach ist anderes Werkzeug. Die Karte sagt Ihnen, dass der zweite Call to Action den ersten schlägt, dass 60% der Sessions die Preistabelle nie erreichen, oder dass eine statische Überschrift Klicks sammelt. Keine dieser Beobachtungen nennt eine Ursache. Kombinieren Sie jeden Fund mit den Frustrationssignalen, die auf denselben Sessions aufgezeichnet wurden, und mit individueller Wiedergabe, dann schreiben Sie die Änderung als testbare Aussage: Verschieben Sie die Preistabelle über den Punkt, an dem die Scroll Map abfällt, und erwarten Sie, dass die Scrolltiefen-Reichweite an diesem Abschnitt steigt.

Liefern Sie eine Änderung pro Hypothese aus. Eine Heatmap nach drei gleichzeitigen Edits erneut laufen zu lassen gibt Ihnen ein neues Bild und keine Möglichkeit, den Unterschied einem davon zuzuordnen.

Flowsery
Flowsery

Jetzt 14 Tage kostenlos testen

Echtzeit-Dashboard

Zielverfolgung

Cookie-freies Tracking

Vom Heatmap-Fund zur Korrektur
1
Hypothese erkennen. Die Karte zeigt, dass der zweite Call-to-Action besser abschneidet als der erste, oder dass 60 % der Sitzungen die Preistabelle nie erreichen.
2
Mit anderen Signalen abgleichen. Prüfen Sie Frustrationssignale und Session Replay für dieselben Sitzungen, bevor Sie eine Ursache annehmen.
3
Eine testbare Aussage formulieren. Verschieben Sie die Preistabelle über den Punkt, an dem die Scroll Map abbricht, und erwarten Sie einen Anstieg der Reichweite an dieser Stelle.
4
Eine Änderung auf einmal ausliefern. Wer drei Dinge gleichzeitig ändert, kann das Ergebnis keiner davon zuordnen.
Ein Heatmap-Fund wird erst zur Korrektur, wenn er diesen Weg übersteht.

Häufig gestellte Fragen

Ist eine Heatmap dasselbe wie eine Click Map?

Eine Click Map ist ein Typ von Heatmap, kein Synonym dafür. Die Kategorie Heatmap umfasst außerdem Scroll Maps, Move Maps, Confetti Maps und Attention Maps, die jeweils ein anderes Signal aufzeichnen. Die Verwechslung zwischen der Kategorie und der Click Map darin verursacht die meisten Meinungsverschiedenheiten darüber, was eine Heatmap zeigt.

Funktionieren Heatmaps auf Mobilgeräten?

Click Maps, Scroll Maps, Confetti Maps und Attention Maps funktionieren alle auf Mobilgeräten, da Taps, Scrolltiefe und Viewport-Zeit auf Touch-Geräten aufzeichenbar sind. Move Maps funktionieren nicht, weil Touchscreens keinen dauerhaften Zeiger haben, den man verfolgen könnte. Erfassen Sie mobile Heatmaps gegen einen mobilen Screenshot am passenden Breakpoint, denn ein herunterskaliertes Desktop-Layout verschiebt jede Koordinate.

Wie viele Besucher brauche ich, bevor eine Heatmap verlässlich ist?

Rund 400 Sessions pro Karte ergeben eine Fehlermarge nahe 5 Prozentpunkten, nach der Näherung 1 / √n. Für 2,5 Punkte braucht es 1.600 Sessions. Jeder Segmentfilter, den Sie anwenden, teilt die Stichprobe, planen Sie also die Zahl der Segmente, bevor Sie die Stichprobengröße für ausreichend erklären.

Besucher klicken auf Bilder, Überschriften, fetten Text und Icons, die sie für interaktiv halten. Diese Klicks erscheinen mit vollem Gewicht auf der Karte, obwohl nichts passiert ist, und das ist ein Dead Click. Diese Stellen als Engagement zu lesen dreht den Befund um: die Hitze markiert eine fehlende Affordanz, keine gelungene Interaktion.

Können Heatmaps Session Replay ersetzen?

Nein. Eine Heatmap fasst viele Besuche zu einem Bild zusammen, und genau das nimmt die einzelne Journey aus dem Blick. Session Replay hält jeden Besuch intakt, sodass ein kaputter Checkout, der 40 Leute betraf, sichtbar bleibt, statt sich in einem warmen Fleck aufzulösen. Beide beantworten unterschiedliche Fragen und arbeiten zusammen.

Sammeln Heatmaps personenbezogene Daten?

Eine Heatmap speichert Koordinaten, Scrollpositionen und Zeitstempel, nicht die Identität der Person, die sie erzeugt. Risiko entsteht durch das, was der Screenshot erfasst, und durch Formulareingaben, die neben den Koordinaten aufgezeichnet werden, maskieren Sie also Eingabefelder und jede Region, die Kontodaten rendert, bevor Sie eine Seite hinter einem Login erfassen.

Was bietet eine Confetti Map, das eine Click Map nicht bietet?

Eine Confetti Map zeichnet jeden Klick als einzelnen Punkt statt ihn in ein Dichteraster einzuschmelzen, und jeder Punkt trägt die Traffic-Quelle, das Gerät und die Kampagne des Besuchers. So wird aus "der Button bekommt Klicks" eine Aufschlüsselung nach Segment, etwa "der Button bekommt Klicks von bezahltem Traffic auf Desktop und keine von mobilem organischem Traffic". Bei hohem Volumen überlagern sich die Punkte zu Rauschen, filtern Sie also nach Segment, bevor Sie die Karte lesen.

Warum sieht meine Heatmap nach einem A/B-Test kaputt aus?

Das Heatmap-Tool braucht einen einzigen Screenshot zum Zeichnen, ein A/B-Test rendert aber mehr als ein Layout für dieselbe URL. Klicks, die für Variante B aufgezeichnet wurden, landen trotzdem auf dem Screenshot von Variante A, sodass die entstehende Karte eine Zusammensetzung aus Seiten ist, die es nie gab. Beschränken Sie jede Heatmap auf eine Variante, einen Anmeldestatus und einen Ausklappzustand, damit die Koordinaten stimmen.

Sollte ich dieselbe Heatmap für Desktop und Mobilgeräte verwenden?

Desktop und Mobilgeräte brauchen getrennte Aufnahmen, weil sich der Umbruch mit der Viewport-Größe verschiebt und ein herunterskalierter Desktop-Screenshot jede Koordinate eines mobilen Besuchers falsch platziert. Erfassen Sie Heatmaps getrennt für jeden responsiven Breakpoint, statt einen Screenshot zu strecken, um einen anderen Bildschirm zu erklären. Move Maps sind die Ausnahme, da Touchscreens keinen dauerhaften Zeiger zum Verfolgen haben, sodass Mobilgeräte nie eine erzeugen.

Was ist ein Rage Click, und taucht er auf einer Heatmap auf?

Ein Rage Click ist wiederholtes wütendes Klicken auf ein Element, das nicht reagiert, oft ein eingefrorener Button. Auf einer Heatmap erscheint er als der heißeste Punkt der Seite, nicht zu unterscheiden von einem Klick, der funktioniert hat, weil die Karte kein Konzept von Fehlschlag kennt. Flowsery erkennt Rage Clicks automatisch und gruppiert die betroffenen Sessions zu einem eingestuften Issue, statt sie als unbenannten warmen Fleck stehen zu lassen.

War dieser Artikel hilfreich?

Teilen Sie uns Ihre Meinung mit!

Sehen Sie uns öfter bei Google

Ein Klick macht Flowsery zu einer bevorzugten Quelle. Unsere Artikel stehen dann weiter oben in Ihren Top-Meldungen, im KI-Modus und in den KI-Übersichten.

Bevor Sie gehen...

Flowsery

Flowsery

Umsatzorientierte Analysen für Ihre Website

Verfolgen Sie jeden Besucher, jede Quelle und jede Conversion in Echtzeit. Einfach, leistungsstark und komplett ohne Cookies.

Echtzeit-Dashboard

Zielverfolgung

Cookie-freies Tracking

Verwandte Glossarbegriffe

Verwandte Artikel