2020-12-03

Der Begriff “Above the fold”


Wenn man früher alles in den sichtbaren Bereich eines Browsers hineingepackt hat, ist das heute vielleicht nicht mehr so vorteilhaft. Aber wieso? Durch die Nutzung von Smartphones und Tablets hat sich das Verhalten des Nutzers im Web verändert. Sie scrollen mehr oder haben gelernt die Bildschirmansicht durch Wischen zu wechseln. All das hat dazu beigetragen, dass man bei der Gestaltung des Webdesigns umdenken muss. Bleibt die Frage offen, welche Rolle der sofort sichtbare Bereich einer Webseite noch spielt? Die Antwort: Der Platz "above the fold" ist immer noch wichtig. Trotzdem ist design-technisches Umdenken angesagt. Als Webmaster sollte man diesen Bereich nicht mit allen Informationen "vollstopfen", sondern vielmehr versuchen, die Aufmerksamkeit der Besucher zu gewinnen, sie zum Scrollen anzuregen und dazu zu animieren den Rest der Seite auch zu betrachten. In diesem Artikel geben wir Dir hilfreiche Tipps zur effektiven Gestaltung Deines Above-the-fold-Bereichs.


Der Begriff “Above the fold”

Der Ausdruck “above the fold” stammt aus dem Druckereiwesen. Zeitungen werden in der Mitte gefaltet und den Lesern so angeboten. Auf den ersten Blick sieht man also nur den oberen Bereich des Titelblatts. Die Knicklinie wird als “fold” oder auf Deutsch als Falz bezeichnet. Die Redakteure der Zeitungen nutzen den sofort sichtbaren Bereich oberhalb dieser Linie, um die Aufmerksamkeit mit aktuellen Storys, interessanten Überschriften und imposanten Bildern zu erregen und die Menschen zum Kaufen anzutreiben. Auf Webseiten ist der Bereich "above the fold" der Abschnitt, den die Nutzer sofort sehen können, ohne dass sie scrollen müssen. Geht man von einer 1366x768 Pixel Bildschirmauflösung aus (später mehr zu Bildschirmauflösungen), sehen Besucher Deiner Webseite normalerweise zunächst den in der nachfolgenden Abbildung rot markierten Bereich.



Abbildung 1: Webseiten und der sichtbare Bereich


Welche Bedeutung hat der Bereich?

Ende 2013 sprach Peep Laja bei der SearchLove in London über die Grundlagen von überzeugendem Web Design. Er hat beobachtet, dass der Content "above the fold" immer noch fast 80% der Aufmerksamkeit der Nutzer erntet. Daran hat sich nichts geändert, obwohl sich die Nutzer im Web an das Scrollen gewöhnt haben.



Abbildung 2: Verteilung der Aufmerksamkeit auf Webseiten

Damit ist bewiesen, dass der obere Bereich von Webseiten (sichtbarer Bereich) immer noch wichtig ist, wenn man die Aufmerksamkeit der Nutzer erregen möchte. Trotzdem hat sich etwas geändert: User haben heutzutage nicht mehr so viel Geduld wie früher. Das liegt an der Vielfalt des Content, zu dem die Suchenden mittlerweile Zugang haben. Deshalb ist es eine umso größere Herausforderung, das Interesse der Nutzer zu wecken. Fülle den Bereich "above the fold" (insbesondere für Google und SEO) deshalb nicht mit überschwänglich vielen Informationen. Dieser Bereich sollte stattdessen die Vorteile der Seite ins Licht rücken und dem User erklären, was es auf der Seite zu entdecken gibt.


Wie designt man bei so vielen verschiedenen Endgeräten für “above the fold”?

Durch die Nutzung von verschiedensten Endgeräten hat sich auch der Bereich, der über der Falz zu sehen ist, geändert. Bei jedem der Geräte und durch Responsive Design, erscheint die Falzlinie an unterschiedlichen Positionen der Webseite. Welcher Bereich der Webseite dem Nutzer dann angezeigt wird, hängt von verschiedenen Faktoren ab. (z.B von der Bildschirmauflösung, der Breite der Toolbar des Nutzers und davon, ob die Seite vergrößert ist). Wie soll man jetzt für diese Anforderungen designen? Dafür gibt es keine allgemeingültige Musterlösung. Stelle aber auf jeden Fall sicher, dass der wichtigste Content möglichst am Anfang der Seite zu finden ist und auf die Bedürfnisse der meisten Nutzer angepasst ist. Wenn Du herausfinden möchtest, welche Bildschirmauflösung die Mehrheit Deiner Kunden nutzt, führe folgende Schritte durch:



Abbildung 3: Die Bildschirmauflösung in Google Analytics


Seite in unterschiedlichen Auflösungen ansehen

Um herauszufinden, welche Abschnitte einer Webseite auf verschiedenen Endgeräten sofort sichtbar sind, kannst Du beispielsweise ein Browser Add-on nutzen. Hier siehst Du die Vorgehensweise mit dem Window Resizer für Google Chrome.

1. Installiere das Add-on



Abbildung 4: Window Resizer

2. Über das Symbol rechts oben im Browser, kannst Du nun die Funktion nutzen und Ihren Browser auf verschiedene Bildschirmauflösungen umstellen.

3. Dort kannst Du verschiedene Formate auswählen und so überprüfen, was Nutzer an verschiedenen Endgeräten auf den ersten Blick sehen.


Designen für den unteren Webseitenbereich

Jetzt wissen wir, dass der Platz “above the fold” immer noch unglaublich wichtig ist, um das Interesse von Webseitenbesuchern zu wecken. Aber was ist mit dem restlichen schönen Content?

Eine Studie von clicktale beweist Folgendes: Besitzt eine Webseite eine Bildlaufleiste, dann wird diese auch von 76% der Webseitenbesucher genutzt - zumindest bis zu einem gewissen Punkt. 22% scrollen sogar bis zum Ende der Seite. Also kommt dem Platz über der Falz immer noch die meiste Aufmerksamkeit zu aber die Nutzer scrollen auch, wie von Usability Experte Jacob Nielsen belegt. Gestalte die Falzlinie so, dass der Nutzer weiterschauen möchte.


Drei Möglichkeiten das Scrollen zu fördern

1. Versetzte Spalten



Abbildung 5: Unterschiedlich angeordnete Spalten bei der WELT

Content, der auf unterschiedlich angeordnete Spalten aufgeteilt ist, zeigt den Nutzern sofort, dass hier noch mehr zu entdecken ist. Denn ein Textabschnitt oder auch ein Bild ist dann so gut wie immer von der Falz unterbrochen und das führt dazu, dass User weiterscrollen, um mehr Informationen zu erhalten.Dieser Stil wird häufig auf Webseiten von Zeitungen verwendet. 2. Wege durch die Seite

Du kannst Deine Webseitenbesucher auch zum Scrollen animieren, indem Du einen vorgezeichneten Weg auf Deiner Webseite integrierest. Die Falz zerteilt diesen Weg, dem die Nutzer gerne folgen möchten. 3. Hinweise geben

Es gibt noch eine weitere Möglichkeit die User darauf aufmerksam zu machen, dass im unteren Bereich der Seite noch mehr Information auf sie wartet. Sag es ihnen einfach und füge auf der Landingpage ein entsprechendes Zeichen (Pfeil etc.) hinzu!


Fazit

Der Platz “above the fold” (sichtbarer Bereich) ist immer noch sehr wichtig. Früher haben Webmaster versucht dort alle wichtigen Elemente der Seite unterzubringen. Heute geht es eher darum in diesem Bereich die Aufmerksamkeit der Besucher zu gewinnen.

Durch die verschiedenen Arten von Bildschirmen, an denen wir im Web surfen, ist Scrollen etwas Alltägliches geworden. Stelle durch visuelle Anweisungen sicher, dass die Nutzer sofort erkennen, dass es im unteren Bereich noch mehr zu sehen gibt.

Behalte das Nutzerverhalten im Auge und finde heraus, welche Bildschirmauflösungen diese am häufigsten nutzen. So kannst Du dafür sorgen, dass der wertvollste Content über der Falz angezeigt wird.



Hinterlasse einen Kommentar