Beyond the fold: Designansätze für ein anhaltendes User Engagement

Robert Goesch • 01.05.2024
Robert Goesch

Die Art und Weise, wie Nutzer:innen eine Webseite wahrnehmen und mit ihr interagieren, gibt uns Aufschluss darüber, wie wir die Seite strukturieren müssen, um sie optimal zu gestalten.

A striking image featuring two mountain peaks in grayscale against a vibrant strawberry red and light grey background, symbolizing the idea of information below the fold.
Keywords
  • Scrolling
  • »Above the Fold«
  • Visual Design
  • Design Process
  • Usability

Das durchschnittliche Fenster, das auf einer Webseite ohne Scrollen angezeigt werden kann – in der Designsprache auch »Above the Fold« genannt – entspricht 1.000 x 600 Pixel, etwa so groß wie ein A5-Blatt Papier.

Und der Platz ist heiß umkämpft.

Natürlich bedeutet dies, dass wir oft in einer Denkweise gefangen sind, in der wir alle Funktionen, Angebote und neuesten Updates sofort klar kommunizieren wollen, um sicherzustellen, dass keiner etwas verpasst. Wir gehen davon aus, dass jeder User alles »Above the Fold« sehen muss.

Das hat jedoch Folgen, die von erhöhtem kognitiven Aufwand bei der Orientierung bis hin zu abnehmender Aufmerksamkeit reichen. Unsere Befürchtung, dass Nutzer:innen etwas übersehen könnten, wenn wir es ihnen nicht sofort zeigen, ist oft unbegründet.

Statistiken zeigen: Menschen scrollen

Menschen scrollen, und das nicht nur auf Instagram und TikTok. Sie scrollen, wenn wir ihnen einen Anreiz geben, ein Versprechen oder eine klare Aufforderung.

Sie scrollen, wenn wir ihnen eine Stimulation, ein Versprechen oder eine klare Aufforderung geben. Sie scrollen, weil sie mehr erwarten. Mehr von dem, was sie als wertvoll erachten.

2018 veröffentlichte die Nielsen Norman Group ihren letzten großen Report zum Thema Scrolling. Spannend, oder? Die Studie analysierte mit Eye-Tracking-Daten das Verhalten von 120 Proband:innen. Dabei wurde insbesondere gemessen, wie lange die Nutzer:innen auf welcher Scrolltiefe verweilten. Interessanterweise verbrachten sie im Durchschnitt mehr als 42 % der Betrachtungszeit auf die oberen 20 % einer Seite, und mehr als 65 % der Zeit in den oberen 40 % einer Seite, unabhängig von der Seitenlänge. Darüber hinaus stellte die Nielsen Norman Group fest, dass heute mehr Menschen scrollen, als sie in ihrer Studie von 2010 festgestellt hatten.

A bar graph on a gray background with red and white bars, representing the percentage of viewing time allocated to different segments of a web page. The red bars indicate the time spent on SERP (Search Engine Result Page) sections, while the white bars represent the general web. Labels from '20% der Seite' to '100% der Seite' denote the segments of the page being viewed, with corresponding percentages displayed on the right, indicating how user attention decreases as they scroll down the page.

Die meisten Interaktionen finden »Below the Fold« statt

Auch das Content-Analytics-Unternehmen Chartbeat konzentrierte sich in seinem Report von 2013 auf die Korrelation von Scrolltiefe und Verweildauer. Sie fanden heraus, dass diejenigen, die scrollen, die meiste Zeit »Below the Fold« verbringen! Tatsache ist, dass 50 % der Nutzer:innen Inhalte bis zu einer Scrolltiefe von 1.500 Pixeln sehen.

Menschen sind bereit zum Scrollen. Zwar sinkt die Anzahl der Nutzer:innen nach unten hin, nicht aber das Engagement derer, die scrollen. Da wir nun wissen, dass das Engagement für Inhalte in den oberen 40% einer Seite am stärksten ist und nach unten hin abnimmt, stellt sich die Frage, wie wir dieses Wissen effektiv nutzen können, um Seiten zu strukturieren.

Definiere das Nutzerversprechen

Die größte Aufmerksamkeit haben wir in den ersten Sekunden. Wenn die Nutzer:innen die Webseite aufrufen, versuchen sie sich zu orientieren und zu entscheiden, ob sie sich für das Angebot der Seite interessieren oder nicht. Chartbeat hatte 2013 das Zeitfenster bis zum ersten Scrollen mit 4 bis 9 Sekunden bemessen. Seien wir ehrlich, die Aufmerksamkeitsspanne ist nicht länger geworden. Wir können davon ausgehen, dass sich die Aufmerksamkeitsspanne weiter verkürzt hat. Wenn wir bei DUMBO eine Seite strukturieren, geben wir uns als Richtwert 3 Sekunden. 3 Sekunden, um klar zu machen, worum es geht.

Um das zu schaffen, müssen wir uns darüber im Klaren sein, was die Seite dem Nutzer verspricht. Es gilt, sich mit aller Kraft auf eine wesentliche Aussage zu fokussieren. Ganz kontraproduktiv: In 3 Sekunden alles reinpacken, was wir im Angebot haben. Das geht schief. 

Haben wir das eine Versprechen einmal ausgesprochen, zahlen wir im weiteren Verlauf der Seite darauf ein. Die Aufmerksamkeit und Dichte der Nutzer:innen nimmt nach den oberen 40 % der Webseite signifikant ab. Dann sollten wir uns bei der Strukturierung der Webseite in diesem Bereich auf die wichtigsten Aspekte konzentrieren – und nur diese. Wir haben nicht allzu viele Anläufe, um die Punkte zu adressieren. 

User lesen nicht, sie scannen

Nutzer:innen scannen Inhalte. Sie lesen sie nicht. Das kann einem schon eine kleine Analyse der eigenen Webseite zeigen. Wie navigieren die User? Wie orientieren sie sich beim Scrollen? Das Scannen des gesamten Textes auf einer beliebigen Webseite  – oder auch nur des Großteils davon – ist extrem selten. Das zeigen auch kürzlich erschienene Ergebnisse einer weiteren Eye-Tracking-Studie der Nielsen Norman Group. Selbst wenn Nutzer:innen den Inhalt in ihrer Gesamtheit scannen, scannen sie ihn nie vollkommen linear.

Um diesem Verhalten zu begegnen, adressieren wir grundsätzlich nur ein Thema pro Zeile. Wir wollen den Nutzer:innen so schnell wie möglich klar machen, was sie von dem Inhalt erwarten können. Dabei bietet es sich an, gewohnte Muster oder mentale Modelle zu bedienen. Alle visuellen Impulse beeinflussen dabei das Scrollverhalten. Auf unserer eigenen Webseite stellen wir fest, dass der Teamslider den Scroll in 90% der Fälle unterbricht und zur Interaktion einlädt. Das Pattern adressiert den richtigen Nerv im Kontext der Seite. 

Am Ende zählt nicht, dass die Nutzer:innen unsere Inhalte gelesen haben. Wichtig ist, dass sie die Informationen gefunden haben, die ihnen fehlten, um ihren Job zu erledigen. Wenn sie jedoch nicht mehr antizipieren können, was auf sie zukommt, werden sie abgelenkt oder verfallen in ein Suchmuster. In beiden Fällen steigt die Wahrscheinlichkeit zum Abbruch und das wollen wir um jeden Preis verhindern.

Den Flow halten und lenken

Wir können uns also sicher sein, dass unsere Nutzer:innen gewillt sind zu scrollen, aber wir sollten ihre Bereitschaft nicht überstrapazieren. Als Designer ist es unsere Aufgabe, das Verhalten zu lenken und ihnen zu helfen. Haben sie das Ende der Seite tatsächlich erreicht, sollten wir dafür sorgen, dass sie nicht den ganzen Weg zurück nach oben scrollen müssen, um ihre weitere Reise fortzusetzen.

Das können wir auch. Denn in diesem Moment wissen wir schon sehr viel. Wir kennen die Intention der Nutzer:innen. Denn wir haben unser Versprechen kommuniziert und Anreize geschaffen, die sie dazu verleitet haben, das Thema zu vertiefen. Das ist unsere Chance, um mögliche Angebote zu antizipieren, die auf das Bedürfnis der Nutzer:innen einzahlen.

Der Moment der Inspiration ist gekommen. Wir können die weitere User Journey aktiv gestalten. Wann immer wir das können, sind wir Herr der Lage und haben Einfluss auf die Dramaturgie, mit welcher der User die Marke oder das Produkt im Weiteren erlebt. Wir wollen den User aktiv halten, ihn nicht verlieren. Dafür schaffen wir weitere Anreize, die ihn im Flow halten.

Fazit

»Scrolling is a continuation; clicking is a decision.« (Josh Porter) 

Wenn uns »Above the Fold« nur der Platz einer Visitenkarte bleibt, sollten wir ihn dafür nutzen, dem Wesen der Seite Ausdruck zu verleihen. Je besser uns das gelingt, desto schneller kann sich der User orientieren. Er wird selbst entscheiden, ob er mehr braucht oder nicht. Wenn wir Seiten strukturieren, sollte unser Ziel sein, dass das Ende der Seite niemals gesehen wird. Vorher sollte der Job erledigt sein. 

Scrollen ist keine Metrik, nach der man die Performance einer Webseite allgemeingültig bewerten kann. Sie ist lediglich ein Indikator für Engagement und Informationsbedarf. Ein echter Indikator kann nur aus dem konkreten Ziel abgeleitet werden, das Nutzer:innen auf der Seite verfolgen können. Je klarer das Ziel ist, desto besser können wir die entsprechende KPI (Key Performance Indicator) dafür bestimmen. Also lasst uns uns darauf konzentrieren, das Versprechen an den User zu definieren. 

Wir selbst nutzen ein einfaches Framework, um Inhalte für digitale Produkte und Services zu strukturieren. Es heißt Interaction Archetypes. Im Wesentlichen definieren wir damit Entscheidungskriterien für die Priorisierung von Inhalten.

Unsere Insights direkt in dein Postfach