Lerne / Leitfäden / Heatmaps-Leitfaden
Scroll-Heatmaps: 5 Wege, um deine UX zu optimieren und Conversions zu steigern
Scroll-Heatmaps, die das Nutzerverhalten beim Scrollen auf einer Website oder in einer App aufzeichnen, sind ein leistungsstarkes visuelles Analysetool. Sie helfen dir zu verstehen, wie Nutzende mit deinen Webseiten und Seitenelementen interagieren. So kannst du sicherstellen, dass deine Website Conversions erzielt und ein hervorragendes Nutzererlebnis (User Experience, UX) bietet.
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.
Richte noch heute eine Scroll-Heatmap ein 🔥
Sammle mit Hotjar kostenlose Scroll-Heatmap-Daten: Finde heraus, wie Nutzende deine wichtigsten Webseiten wahrnehmen, damit du die UX verbessern und Conversions steigern kannst.
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 haben. 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 Hotjar 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 Hotjar 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.
Mit Hotjar kannst du aus Session-Aufnahmen auf Heatmaps herauszoomen, um größere UX-Trends zu erkennen
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: Hotjars 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.
Hotjar-Wutklick-Heatmaps zeigen Punkte an, wo Nutzende frustriert sind
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.
Richte noch heute eine Scroll-Heatmap ein 🔥
Sammle mit Hotjar kostenlose Scroll-Heatmap-Daten: Finde heraus, wie Nutzende deine wichtigsten Webseiten wahrnehmen, damit du die UX verbessern und Conversions steigern kannst.
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 Hotjar 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.
Wie du Scroll-Heatmaps mit Hotjar einrichtest
Das Einrichten einer neuen Scroll-Heatmap ist ganz einfach. Wenn du noch nicht bei Hotjar angemeldet bist, hol dir eine kostenlose Testversion und starte mit unserem Heatmaps-Tool.
Wenn du eine neue Heatmap in Hotjar erstellst, werden automatisch alle Heatmap-Typen (Click, Wutklick, Move, Scroll und Engagement-Zonen) generiert, sodass du gar nichts Besonderes tun musst, um eine Scroll-Heatmap einzurichten.
Schritt 1: Füge den Hotjar-Tracking-Code zu deiner Website hinzu
Du kannst den Hotjar-Tracking-Code auf verschiedene Weise installieren, unter anderem über den Google Tag Manager und das WordPress-Plugin.
Schritt 2: Aktiviere „Session-Erfassung“.
Es werden fortlaufend Heatmaps aus Sessions generiert. Wenn die „Session-Erfassung“ aktiviert ist, sind Heatmaps automatisch verfügbar und beginnen mit der Datenerfassung des Nutzerverhaltens. Du solltest also zunächst überprüfen, ob die Session-Erfassung aktiviert ist, indem du auf das Widget für die Traffic-Erfassung oben rechts auf der Seite klickst.
Wenn die Session-Erfassung nicht aktiviert ist, siehst du oben auf der Seite einen orangefarbenen Button „Session-Erfassung deaktiviert“, über den du zur Konfigurationsseite für die Session-Erfassung gelangst.
Schritt 3: Beginne mit kontinuierlichen Heatmaps und wähle deine „Datengruppierung“ aus
Klicke auf Heatmaps im Navigationsmenü auf der linken Seite.
Klicke dann auf „Neue Heatmap“.
Heatmaps können die Daten einer einzelnen URL oder einer Gruppe von URLs anzeigen, die deinen Zielkriterien entsprechen. Wenn du Daten von einer Gruppe von URLs auswählst, siehst du nur einen Screenshot für deine Heatmap, aber die Messdaten, die über dem Screenshot erscheinen, werden von allen URLs aggregiert, die deinen Zielkriterien entsprechen.
Schritt 4: Gib eine URL deiner Website ein und wähle einen Heatmap-Typ
Gib die URL der Seite ein, die du tracken möchtest, und wähle dann den Heatmap-Typ aus, den du einrichten möchtest (denk daran, dass Hotjar Daten für alle Heatmap-Typen sammelt, du kannst also nach dem Erstellen einer Heatmap zu einem anderen Typ wechseln).
Deine Auswahl führt dich zurück zum Hotjar-Dashboard, wo du die Heatmap bearbeiten und die gesammelten Daten filtern kannst. Weitere Informationen zum Einrichten einer Heatmap in Hotjar findest du hier.
Schritt 5: Wähle Filterkriterien für deine Heatmap aus
Aktualisiere den Datumsbereich und füge beliebige Heatmap-Filter hinzu, um nur die Sessions anzuzeigen, die deinen Kriterien entsprechen, wie Sitzungsdauer, Verhalten und Benutzerattribute, zum Beispiel Berufsbezeichnung, Land oder Sprache.
Weitere Infos zu allen Heatmap-Filtern von Hotjar und Anwendungsbeispiele findest du in diesem Artikel: Anwendungsfälle für das Filtern von Heatmaps.
Schon fertig, deine erste Scroll-Heatmap ist live! So sieht sie im Hotjar-Dashboard aus:
Bei deiner Heatmap kannst du zwischen Desktop-, Tablet- oder mobilen Sessions umschalten. Um die Scroll-Heatmap-Daten anzuzeigen, klicke einfach auf „Scroll“ in den Heatmap-Typ-Optionen. Du kannst alle Rohdaten auch anzeigen und herunterladen/exportieren. Viel Spaß!
Richte noch heute eine Scroll-Heatmap ein 🔥
Sammle mit Hotjar kostenlose Scroll-Heatmap-Daten: Finde heraus, wie Nutzende deine wichtigsten Webseiten wahrnehmen, damit du die UX verbessern und Conversions steigern kannst.
