Above the Fold - Webseiten nutzerfreundlich aufbauen

Noch vor wenigen Jahren wurden so viele Informationen wie möglich in den sichtbaren Bereich eines Browsers hineingepackt. Das ist heute nicht mehr so vorteilhaft. Aber wieso? Durch die Nutzung von Smartphones und Tablets hat sich das Nutzerverhalten enorm verändert. Sie scrollen mehr oder haben gelernt, die Bildschirmansicht durch Wischen zu wechseln. All das hat zu einem Umdenken beim Webdesign geführt. Bleibt noch offen, welche Rolle der sofort sichtbare Bereich einer Webseite noch spielt.

Die Antwort: „above the fold“ ist für Content 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.

Was bedeutet “Above the fold”?

Der Ausdruck “above the fold” stammt aus dem Druckereiwesen. Zeitungen werden in der Mitte gefaltet und stecken so in den Verkaufsständern bzw. liegen so aus. Auf den ersten Blick sieht man also nur den oberen Bereich des Titelblatts. Die Knicklinie wird als “fold” bezeichnet (dt. Falz). 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 Websites 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 1366×768 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: Der ohne zu scrollen sichtbare Bereich auf de.ryte.com

Welche Bedeutung hat der sichtbare 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 nur wenig Geduld. 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 unnötig 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.

„Above the fold“ responsive gestalten

Durch die Nutzung von verschiedensten Endgeräten hat sich auch der Bereich, der über dem Falz zu sehen ist, geändert. 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.

Da mittlerweile die Mehrheit der Internetuser mobil surft, sollte dein Ansatz hier „mobile first“ lauten und dein Bereich „above the fold“ auf Smartphones optimiert sein.

Drei Möglichkeiten das Scrollen zu fördern

1. Versetzte Spalten

Abbildung 3: Unterschiedlich angeordnete Spalten auf faz.net.

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 News-Websites 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. Der 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!

Wie relevant ist Content „above the fold” für Google?

In einem Hangout hat Googles John Mueller die Frage nach der Wichtigkeit des Inhalts im sichtbaren Bereich so beantwortet:

“So the main thing is that we want to see some content above the fold. Which means… a part of your page should be visible when a user goes there. So for example if a user goes to your website and they just see a big holiday photo and they have to scroll down a little bit to actually get content about a hotel, then that would be problematic for us. But if they go to your home page and they see a hall of fame photo on top and also a little bit of information about the hotel, for example for a hotel site, that would be fine. So it’s not purely that the content has to be above the fold. But… some of the content has to be.”

Google bewertet also vor allem, dass überhaupt Content im sichtbaren Bereich zu finden sein sollte, um Nutzern (Anm. der Red. Nicht Suchmaschinen ☺) einen Hinweis auf das zu geben, was sie auf der Seite finden werden.

Fazit

Der Platz “above the fold” (sichtbarer Bereich) ist immer noch 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 den Falz angezeigt wird.