Above the fold
In der heutigen Ausführung widmen wir uns einem ganz speziellen Bereich: Above the fold
Dieser ist sehr wichtig bei der Gestaltung von Websites und für die sogenannte Usability. Diese beschreibt die Benutzerfreundlichkeit einer Website.
Der sogenannte Above the fold Bereich fällt dem Besucher sofort ins Auge, wenn er die Website betritt. Er bildet das Eingangstor zu den weiteren Inhalten und ist ein wesentliches Kriterium dafür, dass der User weiter durch die Seite scrollt.
Above the fold ist der Bereich, der sichtbar ist, ohne dass der User scrollen muss. Im direkten Blickfeld sind die wichtigsten Elemente und die Alleinstellungsmerkmale des Unternehmens platziert. Dazu gehören zum Beispiel das Logo, die Kontaktangaben, eine Navigation, optisch ansprechende Bilder und ein erster aussagekräftiger Inhalt.
Bei der Ausgestaltung solltest Du Dich an den Vorgaben aus dem Webdesignbereich orientieren. Das Logo befindet sich zum Beispiel auf der linken Seite, dann folgen die Navigation, die Suche und die Kontaktmöglichkeiten.
Du solltest diesen Bereich übersichtlich und klar darstellen und Dich an die Grundformen wie zum Beispiel zweispaltiges oder dreispaltiges Layout halten.
die Visualisierung
Zur besseren Visualisierung zeigen wir Dir ein paar Beispiele, wie der Above-the-Fold-Bereich ausgestaltet werden kann.
Abbildung 1 zeigt den Bereich auf der Website von Otto. Hier steht die klassische Darstellung im Vordergrund. Auf der rechten Seite findest Du das Logo. Daneben sind die Suche und die Kontaktmöglichkeiten, der Warenkorb und der Login-Bereich angeordnet.
Darunter folgt die Navigation. Otto hat die besonderen Rabattaktionen gleich in den Above-the-Fold-Bereich gestellt. Dies ist beabsichtigt, denn das Ziel besteht schließlich darin, den User auf der Website zu halten.
Rabatte und Sonderangebote sind eine gute Möglichkeit, um dies sicherzustellen. Der weitere Above-the-Fold-Bereich ist durch ein ansprechendes Bild gekennzeichnet, das dem Betrachter gleich ins Auge fällt.
Ein kurzer Teaser beschreibt das Produkt und soll die weitere Aufmerksamkeit wecken. Dazu gehört auch eine Call-To-Action, die direkt auf die jeweilige Seite führt.
Alles ist eindeutig und übersichtlich dargestellt und soll zum Kauf der angebotenen Produkte anregen.
Eine ähnliche Gestaltungsweise findest Du bei ebay (Abbildung 2). Das Logo ist auf der linken Seite angeordnet. Etwas anders verhält es sich aber mit der Anordnung der Hilfsfunktionen.
Sie sind oberhalb des Logos angesiedelt. Neben dem Logo findest Du dann die Suchmaske. Von Prinzip her sind es die gleichen Elemente wie bei Otto. Ein Eyecatcher weist auf besondere Rabatte und Aktionen hin und eine Call-to-Action ist mit eingebaut.
Abbildung 3 zeigt, auf welche Weise zalando den Above-the-Fold-Bereich gestaltet hat. Die wichtigsten Kernelemente sind wieder enthalten, aber etwas anders angeordnet. Das Logo befindet sich in der Mitte.
Die Navigation ist auf der linken Seite und unterhalb vom Logo angeordnet. Rechts vom Logo findest Du die Suchleiste und die Kontaktmöglichkeiten. Der Eyecatcher ist hier ein ansprechendes Bild, auf dem eine Navigation mit den drei wichtigsten Kategorien abgebildet ist.
Beim Vergleich der drei Beispiele fällt auf, dass der Above-the-Fold-Bereich immer etwas unterschiedlich gestaltet ist. Du bist also nicht so stark an die Designvorgaben gebunden. Wichtig ist nur, dass die Kernelemente enthalten sind.
Du solltest außerdem darauf achten, dass dieser Bereich übersichtlich gestaltet ist. Hier musst Du die Balance zwischen dem Design, den Inhalten und den Kernelementen finden. Den wichtigsten Bereich bilden die Hauptgrafik bzw. die Inhalte im direkten Sichtfeld. In diesen solltest Du alle Elemente einbinden, die für Deine Zielgruppe wichtig sind.
Aus Marketingsicht macht es Sinn, so viele Inhalte wie möglich in diesen oberen Bereich zu stecken. Das Ziel besteht schließlich darin, dass der User dazu animiert werden soll, weiter auf der Site zu bleiben. Ist der Above-the-Fold-Bereich zu viel mit Inhalt gefüllt, kann dies aber auch eine abschreckende Wirkung haben.
Abschließendes Fazit
Der Above-the-Fold-Bereich ist ein wichtiges Kriterium bei der Gestaltung einer Website. Es ist der erste Inhalt, den ein Besucher sieht und entscheidend für die weitere Verweildauer. Wesentliche Kernelemente müssen enthalten sein, die dem User einen ersten Überblick über das Angebot verschaffen.
Dieser Bereich sollte gut durchdacht sein und nicht mit Inhalten beladen werden. Platziere dort auch wirklich nur das, was Du für Deine Zielgruppe als wichtig erachtest.
Die Gestaltung des Above-the-Fold-Bereichs wird von den meisten Unternehmen richtig umgesetzt. Leider gibt es aber auch noch Websitebetreiber, die sich nicht an diese Kriterien halten. Sie stellen in den oberen Bereich Werbung von anderen Anbietern, die nichts mit den eigenen Dienstleistungen zu tun hat.
Der Above-the-Fold-Bereich sollte nicht nur auf diese Weise genutzt werden. Er wird dafür verschwendet und seine eigentliche Aufgabe, den User zum Weiterscrollen zu animieren, schlägt an dieser Stelle fehl. Werbung kann dort eingespielt werden, aber in sinnvollem Maße.
Orientiere Dich bei der Ausgestaltung an den vorgestellten Beispielen oder hole Dir Inspiration von anderen Beispielen aus dem Internet. Je mehr Aufmerksamkeit Du diesem Thema schenkst, umso besser kannst Du diesen Bereich ausgestalten. Nicht nur Deine Besucher werden sich darüber freuen, sondern auch Google belohnt diese Umsetzung mit einer positiven Wertung.
Wir freuen uns darauf, Dein Projekt voranzubringen.
Vielleicht hast Du ja sogar die Möglichkeit, bei uns in Augsburg auf einen Kaffee vorbeizukommen. Der ist zwar nicht ganz so gut, wie unsere Software, aber ehrlich. Eben so, wie wir es mögen.
Anfrage senden 08 21/ 99 95 910 info@mpunkt.com