Above the Fold: Was im ersten Bildschirm wirklich zählt

Above the Fold ist der Teil einer Seite, den Besucher ohne Scrollen sehen. Er bleibt wichtig, weil dort laut Eyetracking der größte Teil der Aufmerksamkeit liegt: Die Nielsen Norman Group maß 2018, dass 57 % der Betrachtungszeit auf den ersten Bildschirm entfielen. Er entscheidet aber nicht in „3 Sekunden“ über deinen Umsatz, und genau diese Vereinfachung solltest du nicht übernehmen.

Was bedeutet „Above the Fold“ im Web?

Above the Fold bezeichnet den sichtbaren Bereich einer Webseite beim Laden, bevor jemand scrollt; der Begriff stammt von der oberen Hälfte einer gefalteten Zeitung.

Anders als bei der Zeitung gibt es im Web keine feste Faltkante. Sie hängt vom Gerät, der Fenstergröße und der Browserleiste ab. Die Nielsen Norman Group schreibt dazu, dass responsive Designs mehrere „Folds“ haben, einen für jedes Zielgerät (Quelle). Plane deshalb nicht für eine Pixelhöhe, sondern prüfe deine Seite auf typischen Smartphones, Laptops und großen Monitoren.

Wie wichtig ist der erste Bildschirm laut Studien?

Der erste Bildschirm bekommt weiterhin den größten Anteil der Aufmerksamkeit, aber Nutzer scrollen heute mehr als früher.

In einer Eyetracking-Studie mit 120 Teilnehmern und über 130.000 Blickpunkten fiel die Betrachtungszeit über dem Fold von 80 % (Studie 2010) auf 57 % (2018). 74 % entfielen auf die ersten beiden Bildschirmlängen und 81 % auf die ersten drei. Der starke Abfall der Aufmerksamkeit nach der Faltkante blieb in beiden Studien bestehen (Quelle). Schon 2015 hatte die Nielsen Norman Group gezeigt, dass die 100 Pixel direkt über dem Fold 102 % häufiger betrachtet wurden als die 100 Pixel direkt darunter (Quelle).

Daraus folgt: Wichtiges gehört nach oben, aber unter dem Fold darf es weitergehen. Nutzer scrollen laut der Nielsen Norman Group dann, wenn der sichtbare Bereich Wert verspricht. Lass außerdem keine „falsche Kante“ entstehen, etwa einen vollflächigen Hintergrund, der wie das Seitenende wirkt.

Stimmt es, dass Nutzer in 3 Sekunden entscheiden?

Die oft zitierte Regel „in 3 Sekunden entscheiden Besucher über Bleiben oder Gehen“ ist in dieser Form nicht belegt, belegt ist ein kritisches Zeitfenster von etwa 10 Sekunden.

Die Nielsen Norman Group wertete Daten aus der Studie von Liu, White und Dumais (2010) aus: Mehr als 205.000 Seiten, über zwei Milliarden Verweildauern. Ergebnis: Die ersten 10 Sekunden sind entscheidend, in den folgenden 20 Sekunden bleibt die Abbruchwahrscheinlichkeit hoch, nach etwa 30 Sekunden flacht die Kurve ab, und wer so lange bleibt, bleibt häufig zwei Minuten oder länger (Quelle). Das 10-Sekunden-Fenster sei eine Orientierung und keine feste Grenze. Für dich heißt das: Dein erster Bildschirm muss schnell klären, worum es geht, aber es geht um Sekunden im zweistelligen Bereich, nicht um eine magische Dreier-Grenze. Auch „Heatmap-Analysen zeigen, dass Nutzer in 3 Sekunden entscheiden“ ist missverständlich: Heatmaps zeigen Klicks und Scrolltiefe, keine Entscheidungszeit.

Welche Elemente braucht ein überzeugender erster Bildschirm?

Ein starker erster Bildschirm beantwortet drei Fragen: Was ist das, für wen ist es, und was soll ich als Nächstes tun?

1. Überschrift: Sie nennt den konkreten Nutzen oder das Angebot. „Websites für Handwerksbetriebe im Allgäu“ sagt mehr als „Willkommen bei uns“.
2. Unterzeile: Ein Satz, der Zielgruppe und Versprechen konkretisiert, ohne Floskeln.
3. Visual: Ein Bild oder Video, das Produkt, Ergebnis oder Team zeigt und Information trägt.
4. Primärer Call-to-Action: Eine Haupthandlung, aktiv formuliert und optisch klar abgehoben, zum Beispiel „Angebot anfragen“.
5. Vertrauenssignal: Ein knapper Beleg wie Bewertungen, Kundenlogos mit Erlaubnis, Zertifikate oder die Region, in der du aktiv bist.
6. Orientierung: Navigation, die zeigt, wo es weitergeht, und ein sichtbarer Hinweis auf weiteren Inhalt.

Weitere Bausteine einer Seite, die zum Abschluss führen, findest du im Beitrag Aufbau einer Landingpage.

Was gehört nicht in den ersten Bildschirm?

Verzichte auf Elemente, die vom Nutzen ablenken oder Besucher verdecken: Karussells mit mehreren Botschaften, dekorative Stockfotos und mehrere gleichwertige Buttons.

Karussells und Slider

Die Nielsen Norman Group schreibt, dass Menschen große Bilder oft sofort überscrollen und weitere Folien häufig übersehen. Wer nur eine Folie sieht, bekommt womöglich ein falsches Bild vom Unternehmen. Als Alternative nennt sie ein statisches Hero-Bild und rät, wichtige Informationen zusätzlich an anderer Stelle der Seite zu zeigen (Quelle). Beachte: Das ist eine Einschätzung aus Usability-Beobachtungen, kein pauschales Verbot. Wenn du ein Karussell einsetzt, dann mit wenigen Folien und ohne automatisches Weiterschalten auf dem Smartphone.

Stockfotos

Dekorative Bilder werden laut Eyetracking der Nielsen Norman Group häufig übersprungen, informative Bilder dagegen betrachtet. Echte Teamfotos hielten dort mehr Aufmerksamkeit als generische Modelle (Quelle). Zeig deshalb lieber echte Menschen, echte Projekte und echte Produkte. Als Agentur mit eigenen Videografen produzieren wir dafür auf Wunsch Foto- und Videomaterial, das zu deinem Betrieb passt, mehr dazu unter Video & Content.

Zu viele gleichwertige Optionen

Wenn drei Buttons gleich laut sind, muss der Besucher erst entscheiden, was er will. Das ist eine Designregel aus der Praxis; ob sie auf deiner Seite zutrifft, kannst du mit einem A/B-Test prüfen.

Wie formulierst du Überschrift und Button konkret?

Eine gute Überschrift nennt, was du anbietest und für wen, und ein guter Button nennt die Handlung, die danach passiert.

Die folgende Tabelle zeigt erfundene Beispiele zur Veranschaulichung, keine Messergebnisse. Ob eine Variante bei dir besser funktioniert, zeigt erst ein Test.

Wichtig ist, dass die Aussagen stimmen und du sie halten kannst. Versprechen wie „Angebot in 48 Stunden“ solltest du nur machen, wenn dein Betrieb sie einhält.

Worauf achtest du auf dem Smartphone?

Auf dem Smartphone ist der erste Bildschirm klein, deshalb muss alles Nebensächliche weichen und der Haupt-Button erreichbar bleiben.

Ein hohes Hero-Bild kann auf kleinen Displays Überschrift und Button nach unten schieben. Prüfe deshalb, ob beides im ersten Bildschirm landet. Die Nielsen Norman Group rät bei Karussells auf Mobilgeräten vom automatischen Weiterschalten ab (Quelle). Bedienelemente sollten laut WCAG 2.2 mindestens 24 mal 24 CSS-Pixel groß sein (Stufe AA); die erweiterte Stufe AAA fordert 44 mal 44 CSS-Pixel (Quelle). Vermeide außerdem Overlays, die den Inhalt direkt nach dem Laden verdecken. Googles Dokumentation zu aufdringlichen Interstitials empfiehlt stattdessen Banner, die nur einen kleinen Teil des Bildschirms einnehmen (Quelle). Rechtlich notwendige Hinweise wie die Einwilligungsabfrage sind ein eigenes Thema; das ist keine Rechtsberatung, sprich die Umsetzung mit deinem Datenschutzbeauftragten ab.

Wie beeinflusst der erste Bildschirm die Ladezeit?

Das größte sichtbare Element im ersten Bildschirm, oft das Hero-Bild, bestimmt den Core-Web-Vitals-Wert Largest Contentful Paint (LCP), und Google bewertet einen LCP von 2,5 Sekunden oder weniger als gut.

web.dev nennt die Schwellen für gute Werte: LCP 2,5 Sekunden oder weniger, INP 200 Millisekunden oder weniger, CLS 0,1 oder weniger, gemessen am 75. Perzentil der Seitenaufrufe, getrennt nach Mobil und Desktop (Quelle). Für das Hero-Bild empfiehlt web.dev: nie das LCP-Bild per Lazy Loading laden, die Bildquelle direkt im HTML angeben und bei Bedarf fetchpriority=“high“ setzen (Quelle). Ein schweres Hero-Video oder ein Bild im Hintergrund-CSS, das der Browser spät entdeckt, verschlechtert den Wert. Mehr Details findest du im Beitrag zu Core Web Vitals.

Wie prüfst du deinen ersten Bildschirm?

Du prüfst ihn mit einer einfachen Checkliste und mit echten Menschen, nicht mit Bauchgefühl.

• Öffne die Seite auf einem Smartphone und auf einem Laptop. Siehst du ohne Scrollen, was angeboten wird und was du tun sollst?
• Zeig die Seite fünf Personen für zehn Sekunden und frag danach: Was bietet das Unternehmen an? Was würdest du als Nächstes tun?
• Prüfe, ob der Haupt-Button auf kleinen Bildschirmen sichtbar ist und nicht von Cookie-Banner oder Chat-Widget verdeckt wird.
• Miss LCP in den Felddaten (Search Console oder PageSpeed Insights) für Mobil und Desktop getrennt.
• Schau in der Scrolltiefen- und Klick-Auswertung, ob Besucher den Haupt-Button erreichen.
• Teste Überschrift und Button-Text nacheinander, wenn dein Traffic dafür reicht.

Wiederhole die Prüfung nach jedem größeren Umbau und nach jeder neuen Kampagne. Landet Traffic aus Anzeigen auf einer Seite, sollte die Überschrift zur Anzeige passen, sonst fragen sich Besucher, ob sie richtig sind. Notiere Beobachtungen und Entscheidungen, damit du später nachvollziehen kannst, warum der erste Bildschirm so aussieht, wie er aussieht.

Wie setzt Weblabs das um?

Bei neuen Websites bauen wir den ersten Bildschirm so, dass Nutzen, Zielgruppe und Handlung ohne Scrollen klar sind, und prüfen die Ladezeit des Hero-Elements mit.

Wir arbeiten mit Festpreis-Angebot, zeigen dir einen Entwurf vor dem Auftrag, und alles gehört am Ende dir. Wenn du wissen willst, ob dein aktueller erster Bildschirm den Anforderungen entspricht, schau auf unsere Webdesign-Leistungen oder schreib uns über die Kontaktseite.