Scroll-Heatmaps sammeln wertvolle Informationen über das Nutzerverhalten und helfen dir, das Engagement von Besuchenden zu messen. So kannst du feststellen, wo du die Aufmerksamkeit der Website-Besuchenden verlierst. Scroll-Heatmaps sammeln schnell Daten darüber, wie Besuchende durch deine Website scrollen, damit du Verbesserungsmöglichkeiten für die User Experience erkennen, Änderungen vornehmen und Conversions steigern kannst.

Am Ende dieses Artikels wirst du bestens über Scroll-Heatmaps Bescheid wissen: was sie sind, wie man sie einrichtet und wie man sie nutzt, um hilfreiche Erkenntnisse zu gewinnen, die die UX verbessern.

Was ist eine Scroll-Heatmap?

Eine Scroll-Heatmap ist eine Art von Website-Heatmap, die sichtbar macht, wie weit Nutzende auf einer Seite am Desktop, Tablet oder Smartphone nach unten scrollen. Scroll-Heatmaps verwenden einen Farbverlauf, um die am häufigsten und am wenigsten angesehenen Abschnitte einer Seite darzustellen, von „heiß“ (beliebt) bis „kalt“ (unbeliebt). Rot zeigt die Elemente einer Seite an, die von den Nutzenden am meisten gesehen werden, während Blau für geringe oder keine Interaktion steht.

Bei Scroll-Heatmaps geht es nicht nur um die Farbe: Sie zeigen auch an, wie viel Prozent der Nutzenden sich auf der Seite weiter nach unten vorgewagt hab. Es wird auch ein durchschnittlicher „Fold Score“ angezeigt, sodass du leicht erkennen kannst, welchen Teil der Seite die meisten Besuchenden sehen, bevor sie anfangen zu scrollen.

Scroll-Heatmap vs. Heatmaps

Heatmap („Wärmekarte“) ist ein breiter Begriff für verschiedene Arten von visuellen Webanalysedaten. Scroll-Heatmaps sind eine Art von Heatmap, bei denen die „heißesten“ Farben die am häufigsten angesehenen Abschnitte einer Seite anzeigen und nicht die am häufigsten angeklickten (oder angetippten) Elemente (diese Daten werden, wenig überraschend, mit einer Click-Heatmap dargestellt).

Mit anderen Worten: Scroll-Heatmaps erzeugen Wärmezonen deiner Website, App oder Produktseiten von oben nach unten, sodass sie eher wie ein vertikaler Regenbogen aussehen statt wie die „Konfetti-Muster“, die typisch für andere Arten von Heatmaps wie Click- oder Move-Heatmaps sind.

Hier findest du Heatmap-Beispiele, um Scroll-Heatmaps mit anderen Heatmap-Typen zu vergleichen.

💡Profi-Tipp: Wenn du eine Heatmap in Contentsquare einrichtest, sammelt das Heatmaps-Tool automatisch Daten für alle Heatmap-Typen – Scroll-, Click-, Wutklick-und Move-Heatmaps.

Du kannst sogar alle Heatmap-Daten in einer einzigen Ansicht mit einer Engagement-Zonen-Heatmap kombinieren. So kannst du schnell erkennen, mit welchen Seitenelementen Nutzende am meisten interagieren, sodass du die UX der Seite validieren und sicherstellen kannst, dass sie optimal performt.

5 Möglichkeiten, um Scroll-Heatmaps zu verwenden

Wenn es um das Erkennen von Datenmustern und Möglichkeiten zur UX-Optimierung geht, kannst du so kreativ sein, wie du möchtest. Im Folgenden findest du fünf der häufigsten Verwendungsmöglichkeiten für Scroll-Heatmaps.

1. Finde heraus, wo du die Aufmerksamkeit von Besuchenden verlierst

Scroll-Heatmaps zeigen dir, wie weit nach unten auf der Seite Nutzende gelangen (dabei helfen dir auch Prozentangaben): Kältere Farben (blau) bedeuten, dass weniger Leute diesen Seitenabschnitt gesehen haben.

Wenn dein Ziel darin besteht, die Aufmerksamkeit von Nutzenden zu erhöhen und zu halten, damit sie weiter nach unten scrollen (z. B. wenn du eine lange Landing Page hast und sicherstellen möchtest, dass sie alle Informationen auf der Seite sehen), geben dir Scroll-Heatmap-Daten praktische Insights darüber, wie du das UX-Design oder die Texte optimieren kannst, um Abbrüche zu reduzieren und die Conversion-Rate zu erhöhen.

💡Profi-Tipp: Kombiniere Scroll-Heatmaps mit individuellen Session-Aufnahmen, um zu beobachten, wie Nutzende tatsächlich mit der Seite interagieren.

Mit Contentsquare kannst du einfach aus einer einzelnen Aufnahme herauszoomen, um allgemeine Trends mit Heatmaps zu beobachten, oder bei einer Heatmap hineinzoomen, um mit Session-Aufnahmen zu sehen, wie Menschen mit einer Seite interagieren. So kannst du sowohl die individuelle als auch die übergreifende User Experience besser verstehen.

2. „False bottoms“ erkennen

Manchmal bemerken deine Besuchenden nicht, dass es weiter unten auf der Seite noch mehr Inhalte gibt. Das wird als „false bottom“ („falscher Boden“) bezeichnet und kann durch Leerraum, Zeilenumbrüche oder Blöcke verursacht werden, die Benutzende verwirren und frustrieren. Mithilfe von prozentualen Scroll-Heatmaps kannst du deine Seiten überprüfen und feststellen, wie viele Besuchende an einem bestimmten Element vorbeiscrollen.

💡Profi-Tipp: Contentsquare Wutklick-Heatmap trackt, wenn eine Person wiederholt auf ein Element klickt, weil sie eine Interaktion erwartet, die nie stattfindet, was letztendlich zu Frustration und einem schnellen Ausstieg aus deiner Website führt. Diese Heatmaps eignen sich hervorragend zur Identifizierung potenzieller Website-Fehler und anderer Frustrationsbereiche, die zu einer hohen Absprungrateauf einer Seite führen könnten.

3. Finde heraus, ob Nutzende den Inhalt oberhalb der durchschnittlichen „Fold-Linie“ sehen

Der Teil einer Webseite, der als „above the fold“ bezeichnet wird, ist der Bereich, den die meisten Nutzenden beim Seitenaufruf sehen. „Fold“ („Knicklinie“) ist einfach der Punkt am unteren Rand des Bildschirms, bevor Nutzende scrollen müssen.

Eine Scroll-Heatmap berechnet automatisch den durchschnittlichen Fold auf deiner Seite, sowohl für Desktop- als auch für mobile Nutzende. Anhand dieser Daten kannst du wichtige Elemente (wie CTAs) „above the fold“ platzieren, und zwar so, dass sie über mehrere Geräte hinweg funktionieren, um das Nutzer-Engagement zu steigern, sobald sie auf der Seite landen.

4. Überprüfe, ob Nutzende finden können, was sie brauchen

Man könnte meinen, das Ziel der Optimierung einer Seite mit einer Scroll-Heatmap sei es, dass möglichst viele Menschen bis zum Ende scrollen. Aber da liegst du falsch. In manchen Fällen scrollen die Nutzenden, weil sie sich auf deiner Seite nicht zurechtfinden, um die nützlichen Inhalte zu finden, die sie brauchen.

Die britische Digital-Agentur Epiphany verbesserte die E-Commerce-Website ihres Kunden, indem sie die Kategorieseiten mit Filtern versah. Denn die Scroll-Heatmap-Daten hatten gezeigt, dass die Nutzenden zu viel scrollen mussten, um zu finden, was sie suchten (hier findest du die vollständige Heatmap-Fallstudie).

Manchmal ist beim Design weniger wirklich mehr.

💡Profi-Tipp: Wenn du noch mehr Informationen über das Nutzerverhalten erhalten möchtest, kannst du eine On-Site-Umfrage mit Contentsquare Surveys erstellen und zum Beispiel fragen: „Hast du heute gefunden, wonach du gesucht hast?“ Diese qualitativen Daten liefern dir zusätzlichen Kontext, wenn du die quantitativen Heatmap-Daten analysierst.

5. Finde heraus, ob deine Seite ein gutes geräteübergreifendes Erlebnis bietet

Nutzende verhalten sich auf dem Desktop und auf dem Handy nicht unbedingt gleich. Wenn du eine responsive Website optimieren möchtest (d. h. eine Website, bei der die Größe der Seite für jedes Gerät angepasst wird), zeigt dir eine Scroll-Heatmap, wo Nutzende auf dem Handy und dem Desktop aufhören zu scrollen, damit du ein geräteübergreifendes Erlebnis für alle schaffen kannst.

Scroll-Daten helfen dir dabei, eine pixelgenaue User Experience zu erschaffen. Du kannst dich auf die Heatmap-Daten beziehen, um herauszufinden, wo genau du einen CTA platzieren solltest, um die Aufmerksamkeit der Nutzenden auf Desktop und Mobilgeräten zu gewinnen.

💡Profi-Tipp: Meist sind für Mobilgeräte optimierte Seiten kürzer, aber folge nicht blind irgendwelchen Best Practices. Sammle deine eigenen Scroll-Heatmap-Daten und finde heraus, wie sich deine Nutzenden auf mobilen Geräten verhalten. So kannst du die für deine Zielgruppe am besten geeignete Seitenlänge und -gestaltung herausfinden.

So richten Sie Scrollmaps mit Contentsquare ein

Sie können Scrollmaps in 3 einfachen Schritten einrichten:

Schritt 1: Contentsquare-Tracking-Code auf Ihrer Website hinzufügen

Melden Sie sich bei Contentsquare an, um einen einzigartigen Tracking-Code zu erhalten.

Installieren Sie anschließend den Contentsquare-Tracking-Code auf Ihrer Website. Unsere detaillierten Anleitungen (hier) helfen Ihnen, den Code auf verschiedene Arten zu implementieren.

Schritt 2: Seiten-URLs eingeben

Fügen Sie als Nächstes die URLs der Seiten hinzu, für die Sie Scrollmaps erstellen möchten. Die Anweisungen unterscheiden sich je nach Plan:

👉 Heatmap-Anleitungen für die Free- und Growth-Pläne 👉 Heatmap-Anleitungen für die Enterprise- und Pro-Pläne

Wenn Sie den Enterprise- oder Pro-Plan nutzen, gehen Sie zu “Zoning Analysis” und klicken Sie auf “Select a page or page group”.

Geben Sie dann die Seiten-URLs ein, für die Sie Scrollmaps erstellen möchten, und klicken Sie auf “Apply”.

Schritt 3: Scrollmaps überprüfen

Ihre Scrollmap füllt sich, während Contentsquare die Daten Ihrer Website sammelt.

Um Ihre Scrollmaps anzusehen, gehen Sie auf die gewünschte Seite und wählen Sie aus den Dropdown-Menüs “Heatmaps” und “Scroll map”.

Sie können Ihre Heatmap auch so umschalten, dass Desktop-, Tablet- oder Mobile-Sessions angezeigt werden.

Erstellen Sie eine Scrollmap, um Ihre Nutzer besser zu verstehen

Scrollmaps zeigen, welche Bereiche Ihrer Seite Nutzer überspringen und, noch wichtiger, welchen Inhalt sie überhaupt nicht sehen.

Wenn Sie verstehen, wie Besucher mit Ihrer Website interagieren, können Sie Tools wie Session Replay nutzen, um warum sie sich so verhalten zu analysieren und so Nutzererlebnisse zu gestalten, die wirklich begeistern.