Sichtbarer Bereich

Stand: 04.07.2022

Noch vor einigen Jahren haben Webdesigner dem sichtbaren Bereich die größte Bedeutung zugemessen. Alle wichtigen Inhalte und Informationen sollten hier ihren Platz finden, ohne dass der User scrollen muss, um das zu finden, was er bei einem Besuch auf einer Webseite benötigt. Die Meinung hat sich in den letzten Jahren stark gewandelt. Die Gestaltung von responsiven – also auf Smartphones und Tablets optimiert – hat den sichtbaren Bereich wandelbarer werden lassen.

Auch das Nutzerverhalten hat sich daran angepasst. Besonders mit dem Smartphone scrollt der Nutzer häufiger und der sichtbare Bereich ist eigentlich die gesamte Webseite geworden. Wir haben Ihnen alles Wissenswerte zu dem aufmerksamkeitswirksamen Platz einer Webseite zusammengefasst.

Was ist der sichtbare Bereich einer Webseite?

Der sichtbare Bereich – oder im Webdesigner-Sprech above-the-fold – zeigt alles das, an, was auf den ersten Blick und ohne scrollen ersichtlich ist. Doch durch die Nutzung von Smartphones sind die Nutzer wesentlich scroll- und wischfreundlicher geworden, sodass nicht länger alle Informationen in dem kleinen sichtbaren Bereich veröffentlicht werden.

Seinen Ursprung hat der Begriff „above the fold“ aus dem Zeitungswesen. Die Gazetten wurden in der Mitte gefaltet. Bei Tageszeitungen lag die gesamte Aufmerksamkeit auf diesem Bereich, da mit einer gekonnt inszenierten Aufmacher-Story auch der Abverkauf anstieg. Erinnern wir uns an die Titelbilder des 12. September 2001: Wirklich alle Tageszeitungen hatten das Bild der zusammenstürzenden Türme des World Trade Centers. Ein Emotionen weckendes Foto, eine knackige Headline und ausverkaufte Regale waren den Zeitungshändlern an diesem Tag sicher. Abhängig zu welchem Genre die Tageszeitung gehört, ist der Aufmacher reißerisch oder investigativ gestaltet.

Diesen Duktus haben die Webdesigner mittlerweile übernommen und versuchen den User, der über die Startseite kommt, dazu zu animieren, den sichtbaren Bereich zu verlassen und sich durch das gesamte Webangebot zu klicken und zu scrollen. Für den E-Commerce bedeutet der sichtbare Bereich, eine echte Chance, Aufmerksamkeit auf das Produktsortiment zu legen und dem Kaufwilligen zu einer Conversion zu überreden.

Bedeutung und Herausforderungen des sichtbaren Bereiches

Je nachdem, welches Endgerät der Nutzer verwendet, erscheint der above-the-fold-Bereich in unterschiedlichen Größen und Darstellungen. Jedoch wird das Interesse bei etwa 80 % der User geweckt, wenn der sichtbare Bereich dementsprechend ausgestaltet wurde. Stationäre Computer verlieren zunehmend an Attraktivität, dementsprechend handeln Webdesigner nach dem mobile first-Prinzip. Auch wenn das Scrollen mittlerweile zu einer ganz automatisierten Handlung im Umgang mit dem Smartphone oder Tablet geworden ist, muss der sichtbare Bereich einer Webseite motivierend wirken. Dabei liegt die größte Schwierigkeit in der Programmierung auf den unterschiedlichen Auflösungen. Zu große sichtbare Bereiche können Verschiebungen auf verschiedenen Endgeräten verursachen.

Der sichtbare Bereich soll sich also an einem Aufmacher einer Tageszeitung anlehnen. Die Informationen dürfen nicht überladen wirken, eher sollen sie neugierig machen, sich die Webseite näher anzusehen. Trotzdem dürfen einige harte Fakten nicht fehlen.

Nehmen wir das Beispiel eines Online-Shop. Ein potenzieller Käufer sucht nach einem bestimmten Produkt, welches mehrere Mitbewerber führen.

• Konkurrent 1: Ein einladender Einstieg mit einem emotionalen Bild und den wichtigsten Informationen über Händler und Angebot in die Seite mit einer übersichtlichen Kategorisierung aller Sortimentsbestandteile lädt dazu ein, länger zu verweilen und neben dem Wunschprodukt noch Zusatzkäufe zu tätigen.
• Konkurrent 2: Auch hier ist die Einstiegsseite nach dem Prinzip „Weniger ist mehr“ gestaltet, der Nutzer wird animiert, sich durch zu scrollen. Allerdings ist der Online-Shop nicht in einem responsiven Design, sodass die Darstellung auf dem Smartphone verschoben wirkt. Der User kann nicht genau erkennen, wie er sich durch die Webseite navigieren soll.
• Konkurrent 3: Er hat zwar ein emotionales Bild gewählt, möchte aber alle notwendigen Fakten direkt im sichtbaren Bereich unterbringen. Die Seite überfordert den User zunehmend, er bricht den Kaufvorgang an dieser Stelle bereits ab.

Versetzen Sie sich nun in die Lage Ihres neuen Kunden. Welches Angebot wirkt auf Sie professioneller und durchdachter? Richtig, der Konkurrent 1 hat es geschafft, Aufmerksamkeit zu erzielen und zudem den gesamten Kaufprozess optimiert.

Aufbau eines sichtbaren Bereiches

Eine optimal aufgebaute Webseite ist in drei Bereiche unterteilt:

• Header
• Body
• Footer

Während früher die Anforderungen besonders streng waren und die wichtigsten Informationen gleich zu Beginn im sichtbaren Bereich – also im Header – sein sollten, wird heute nicht ganz so starr programmiert.

Ein schlankes Design einer Webseite wirkt im ersten Moment minimalistisch, animiert jedoch den Nutzer. Analog zu einer News-Seite lässt sich der above-the-fold-Bereich am besten in zwei Spalten aufteilen. Dabei wird das Interesse geweckt, dass es hier noch Vieles zu entdecken gibt. Ein großes Aufmacherbild, eine spannende Headline mit einem kurzen Teaser macht neugierig. Obligatorisch lässt sich mit einem Klick auf das Bild und die Überschrift der ganze Beitrag öffnen. In die kleinere zweite Spalte kann ebenfalls ein weiterer Artikel oder eine additive Produktvorstellung verbaut werden.

Mit diesem Design erzeugen Sie ebenso den typischen Falz-Effekt. Dem User wird vermittelt, dass es unterhalb dieser Falz noch weiteren interessanten Content zu entdecken gibt.

Der sichtbare Bereich soll dennoch wie eine Visitenkarte wirken. Einige formelle Anforderungen müssen dabei zwingend umgesetzt werden:

• Der User muss sich abgeholt fühlen.
• Im sichtbaren Bereich sollen Emotionen erzeugt werden.
• Die Neugierde muss geweckt werden.
• Der Nutzer klickt sich mit einer einfachen und übersichtlichen Navigation durch das gesamte Angebot.

Above-the-fold: So gelingt der optimale Einstieg

Bevor Sie sich an die Programmierung und das Re-Design Ihrer Webseite machen, müssen Sie sich über die Ziele im Klaren werden. Bestenfalls haben Sie bereits mit Google Analytics oder einem anderen User-Tracking-Programm Ihre Nutzergruppe nach folgenden Gesichtspunkten analysiert:

• Wie viel Nutzer kommen über welche Einstiegsseite?
• Welche Endgeräte werden verwendet?
• Mit welchem Browser surfen Ihre User?
• Welche Bildschirmauflösungen werden präferiert?

Gibt es einen speziellen Nutzerkreis, bei denen sich die technischen Einstellungen doppeln, sollten Sie hier zu erst Ihre Optimierungen vornehmen. Ein kostenfreies Browser-Plug-In wie der Windows Resizer kann dabei hilfreich sein. Chrome Console oder das Chrome Webdeveloper Plug-In sind mit vielen Funktionen ausgestattet, allerdings nur als kostenpflichtige Software erhältlich.

Mit den Tools lassen sich unterschiedliche Auflösungen und Ansichten individuell definieren und in einem Vorschau-Modus ansehen.

Contentlastige Webseiten

Internetauftritte, die über viele Informationen verfügen, müssen besonders strukturiert aufgebaut werden, um einen schlanken sichtbaren Bereich zu generieren.

Ein Farbkonzept hebt die wichtigsten Fakten hervor und erleichtert dem User das Zurechtfinden. Gleichzeitig muss die Seitennavigation so gestaltet werden, dass im besten Fall die Hauptkategorien erkennbar bleiben, die Unterkategorien sich erst beim Scrollen eröffnen.

SEO, Google und der sichtbare Bereich

Sie sind im Internet aktiv und suchen nach einem bestimmten Keyword über die Suchmaschine. Google zeigt Ihnen zuerst vier Suchergebnisse, die sich sofort in Ihrem Blickfeld befinden. Genau weil Sie diese sofort erkennen, erregen Sie besondere Aufmerksamkeit bei Ihnen. Aus diesem Grund erreichen diese Webseiten die höheren Klickzahlen.

Mit einer suchmaschinenoptimierten Webseite und einem gut angepassten sichtbaren Bereich, können Sie bei Google einige Sympathien gewinnen. So wurde bereits vor vielen Jahren der Google-Algorithmus so angepasst, dass Google die Webseiten belohnt, die auf Werbung im sichtbaren Bereich verzichten. Sicherlich ist das ein schwieriges Unterfangen, denn sichtbare Werbung heißt mehr Userinteraktion und daraus folgen höhere Werbeeinnahmen. Allerdings straft Google aufgrund dieses Page-Layout-Updates auch Webseiten ab, die unverhältnismäßig viele Werbeanzeigen im sichtbaren Bereich schalten. Es sollte eine gesunde Mischung erzeugt werden, der wirkliche Content immer noch überwiegen. Auch Google AdSense Kunden sind betroffen – hier gilt die Faustregel, dass es nicht mehr als drei Werbeblöcke sein sollen.

Online Marketing-Agentur Löwenstark optimiert Ihren sichtbaren Bereich

Unsere langjährige Erfahrung in der Webentwicklung und der Suchmaschinenoptimierung möchten wir gern an Sie weitergeben. Haben Sie das Gefühl, dass Ihre Webseite nicht ausreichend performt und Ihnen User zu früh abspringen? Lassen Sie sich von unseren Experten umfassend beraten, wie wir Ihren Internetauftritt stärken können.

Steffen Pfeiffer

Senior SEO Manager, SEO Scientist

Sie interessieren sich für das Thema "Sichtbarer Bereich"

Löwenstark bietet als Full-Service-Marketing-Agentur umfassende Beratung und professionelle Leistungen. Lassen Sie sich von Steffen Pfeiffer kostenfrei beraten.

Jetzt Kontakt aufnehmen