Hero Section und Falz: was ohne Scrollen zu sehen ist
Der Hero-Bereich ist der oberste Bereich einer Seite, den Besucher ohne Scrollen sehen. Die Grenze dazu heißt Falz, englisch „fold“. Eine feste Pixelgrenze gibt es nicht: Der Falz liegt auf jedem Gerät woanders, am Handy anders als am Laptop.
Was am Falz passiert. Die Nielsen Norman Group (NN/g) hat 2015 in einer Auswertung 57.453 Blickpunkte aus Eyetracking-Studien untersucht. Die 100 Pixel direkt über dem Falz wurden 102 % mehr angesehen als die 100 Pixel direkt darunter. NN/g fasst es so zusammen: Nutzer scrollen, aber nur, wenn das, was über dem Falz steht, vielversprechend genug ist.
Oben im ersten Bildschirm. Wie sich die Betrachtungszeit auf die ersten Bildschirme verteilt, steht in unserem Artikel mit Call-to-Action-Beispielen. Für den Hero-Bereich zählt eine weitere Zahl aus derselben NN/g-Studie von 2018 (120 Teilnehmende, Desktop mit 1920 × 1080 Pixeln): Mehr als 65 % der Betrachtungszeit oberhalb des Falzes entfielen auf die obere Hälfte des Bildschirms.
NN/g rät, den oberen Seitenbereich für die wichtigsten Inhalte zu reservieren. Gemessen wurden Blicke, keine Anfragen.
Drei Aufgaben des ersten Bildschirms
Bevor jemand scrollt, muss der Hero-Bereich drei Fragen beantworten: Bin ich hier richtig? Warum sollte ich glauben, was hier steht? Was tue ich jetzt? So steht es sinngemäß auch in unseren Bauregeln: Der Hero macht Anliegen, Zielgruppe, Nutzen und nächsten Schritt schnell verständlich.
| Aufgabe | Was dazu gehört | Prüffrage |
|---|---|---|
| Angebot und Zielgruppe | eine Überschrift, die Leistung und Zielgruppe nennt, kein Slogan | Weiß jemand, der nur die Überschrift liest, was Sie anbieten? |
| Beleg | Kundenstimmen, Kundenlogos mit Freigabe oder eine Zahl mit Herkunft | Ist der Beleg echt und nachprüfbar? |
| Erster Schritt | die erste Formularfrage oder ein Button, der sagt, was danach passiert | Sehen Besucher ihn ohne Scrollen, am Handy auch? |
Überschrift statt Slogan. „Verbessern Sie Ihren Workflow“ klingt nach etwas und sagt nichts. Die Überschrift beschreibt, was Sie liefern, die Unterzeile, warum es den Besucher angeht.
Nicht alles nach oben. Siegel, fünf Vorteile, Video und Telefonnummer zugleich teilen sich die Aufmerksamkeit, die oben ohnehin am größten ist. Ablauf, Leistungen und Antworten auf Einwände haben aus unserer Sicht darunter Platz. Was eine Landingpage als Ganzes ausmacht, erklärt unser Artikel Was ist eine Landingpage?.
Formular oder Button im ersten Bildschirm?
Kommen Besucher über eine Suchanzeige, beginnt das Formular bei uns im ersten Bildschirm, auf Desktop und Handy, mit einer Auswahlfrage. Kommen sie kalt, etwa über eine Displayanzeige, steht oben ein weicherer Schritt ohne Formular.
In unserem Artikel mit Call-to-Action-Beispielen empfehlen wir einen Button im ersten Bildschirm. Auf Landingpages für Suchanzeigen wird aus diesem Button die erste Formularfrage.
Unsere Einschätzung dazu: Wer nach einer bestimmten Leistung sucht, hat sein Anliegen schon formuliert. Eine erste, leichte Frage holt ihn dort ab, wo er ist. Ein Button schickt ihn erst nach unten.
Wie hart der erste Schritt sein darf, richten wir nach der Herkunft der Besucher:
| Besucher kommen | Beispiel | Erster Schritt oben |
|---|---|---|
| kalt | Displayanzeigen, Zielgruppen nach Interessen | kein Formular, sondern Inhalt: Artikel lesen, Video ansehen |
| lauwarm | Suchanzeigen auf allgemeine Begriffe | erste Formularfrage mit leichtem Ziel: Rückruf anfordern |
| warm | Suchanzeigen auf konkrete Begriffe | erste Formularfrage: Erstgespräch oder Demo |
Formularkopf kurz halten. Steht das Formular im Hero, planen wir Text und Formularkopf so knapp, dass die erste Frage mit Auswahl und Weiter-Button sichtbar bleibt. Belege dürfen dabei nicht ganz verschwinden.
Ein Ziel. Unsere Linie: Auf einer Landingpage für Anzeigen steht genau ein Schritt, kein zweiter Weg daneben. Ratgeber wie der von Prismic lassen einen zweiten Button zu.
Was belegt ist und was offen ist. Das Formular im ersten Bildschirm ist unsere Bauregel, die Einteilung nach Herkunft stammt aus unserem Landingpage-Standard. Eine Studie, die die Wirkung auf Anfragen misst, haben wir nicht gefunden. Ein eigenes Testergebnis dazu haben wir noch nicht.
Bild, Video, Bewegung: zwei Technikfehler
Ein Hero-Bild zeigt das Angebot oder wie es genutzt wird, kein austauschbares Stockfoto. Zwei Fehler sieht man erst am fertigen Bildschirm oder im Quelltext.
Fehler 1: der falsche Boden. Ein bildschirmfüllendes Bild mit wenig Inhalt kann wirken, als sei die Seite hier zu Ende. NN/g nennt das „false floor“, einen falschen Boden: Besucher glauben, sie hätten alles gesehen, und scrollen nicht weiter. NN/g rät zu Hinweisen wie angeschnittenem Text am unteren Rand und schreibt, eine Gestaltung sollte keinen Pfeil brauchen, der zum Scrollen auffordert.
Fehler 2: das Hero-Bild lädt verzögert. Bilder lassen sich so einbinden, dass sie erst laden, wenn sie in Sichtweite kommen. Für das Hero-Bild ist das falsch.
Die Kennzahl LCP (Largest Contentful Paint) misst, wann das größte sichtbare Bild oder der größte Textblock erscheint. Ist das Hero-Bild dieses Element, gilt, was Googles Entwicklerseite web.dev schreibt: „Never lazy-load your LCP image“, also das LCP-Bild nie verzögert laden. Stattdessen bekommt es mit fetchpriority="high" Vorrang.
Wie schnell das größte Element erscheinen sollte, steht in Was ist eine Landingpage?. So prüfen Sie es selbst: Öffnen Sie den Seitenquelltext und suchen Sie das Hero-Bild. Steht dort loading="lazy", ist es der Fehler. Liegt das Bild als Hintergrund im CSS, fragen Sie Ihre Agentur.
Bewegung. Für Animationen gilt dasselbe wie für Videos. Unsere Einschätzung: Überschrift und erster Schritt sollten nie auf eine Animation warten.
Auf dem Handy prüfen
Auch auf dem kleineren Bildschirm müssen Angebot und erster Schritt ohne Scrollen sichtbar sein. Unsere Landingpages prüfen wir deshalb zusätzlich bei 390 Pixeln Breite: Steht der erste Schritt im ersten Bildschirm? Läuft etwas seitlich über den Rand?
NN/g beschreibt, dass Nutzer auf kleinen Bildschirmen mehr scrollen, weil sie müssen, nicht weil sie es gern tun. Sie erwarten weiter unten etwas, das sich für sie lohnt. Diese Erwartung weckt der erste Bildschirm.
Drei Beispiele aus unserer Designbibliothek
Die drei Hero-Bausteine stammen aus unserer eigenen Bibliothek. Das Bild zeigt sie schematisch, die Ziffern markieren die drei Aufgaben.
Suchfeld mit Kundenstimmen. Eine zentrierte Überschrift, darunter ein einziges Feld mit Button, links und rechts Kundenstimmen mit Foto. Der erste Schritt ist eine Eingabe, die sofort Nutzen verspricht. Die Karten mit den Stimmen erscheinen erst ab 1.280 Pixeln Breite, am Handy bleibt als Beleg eine Textzeile.
Website-Feld mit Produktansicht. Links Überschrift, Unterzeile und ein Feld für die Website-Adresse mit Button, rechts eine Kampagnenkarte mit Beispielwerten und ein Handy mit einer Anfrage-Meldung. Die Produktansicht zeigt, was der Kunde bekommt. Der Textlink zu den Fallstudien darunter passt auf eine Startseite, auf einer Landingpage für Anzeigen wäre er ein zweiter Weg.
Button mit Siegel und Kundenfotos. Über der Überschrift Siegel und Zielgruppe, darunter ein Button und Kundenfotos mit einer Zeile zu den Kundenstimmen. Er zeigt Angebot, Zielgruppe und als Beleg Kundenfotos, der erste Schritt ist ein Button. Für eine Landingpage zu Suchanzeigen holen wir nach unserer Regel die erste Formularfrage nach oben. Sterne gehören nur hinein, wenn es eine Bewertungsquelle gibt.
Prüfliste: Hero-Entwurf in fünf Minuten abnehmen
- Überschrift allein: Weiß man, was angeboten wird und für wen?
- Beleg: Ist einer sichtbar, echt und mit Quelle?
- Erster Schritt: Ist er ohne Scrollen zu sehen und passt er zur Herkunft der Besucher, bei Suchanzeigen als erste Formularfrage?
- Ein Ziel: Steht oben nur ein Schritt, kein zweiter Weg daneben?
- Kein falscher Boden: Schaut unter dem ersten Bildschirm sichtbar Inhalt hervor?
- Hero-Bild: Ist es ohne
loading="lazy"eingebunden? - Handy: Sind bei 390 Pixeln Breite Angebot und erster Schritt im ersten Bildschirm?
Wie wir Landingpages für Anzeigen bauen, steht auf der Seite Landingpage Agentur. Ihren Hero-Bereich gehen wir gern im kostenlosen Erstgespräch mit Ihnen durch.
Neukunden oder Mitarbeiter gewinnen?
Im Erstgespräch zeigen wir Ihnen, wie PushPartner Anfragen und Bewerbungen planbar macht. 30 Minuten, kostenlos, unverbindlich.
Transparenzhinweis
- Autor und fachliche Prüfung: Benjamin Pusch, Gründer von PushPartner.
- Interessenkonflikt: PushPartner ist eine Agentur für Performance-Marketing in Düsseldorf. Wir bauen Landingpages für Google-Ads-Kampagnen und verdienen daran. Die Beispiele stammen aus unserer eigenen Designbibliothek.
- Datenstand: 3. November 2026. Wir prüfen den Artikel spätestens im November 2027 und früher, wenn NN/g neue Daten veröffentlicht oder Google die Hinweise zu LCP ändert.
- Quellen: zwei Auswertungen der Nielsen Norman Group, Entwicklerdokumentation von Google, ein Anbieter-Ratgeber, ein Agentur-Glossar und unsere eigenen Bauregeln.
Quellen
- Nielsen Norman Group (Amy Schade): The Fold Manifesto: Why the Page Fold Still Matters, 01.02.2015
- Nielsen Norman Group (Therese Fessenden): Scrolling and Attention, 15.04.2018
- web.dev (Google): Optimize Largest Contentful Paint, abgerufen am 03.11.2026
- web.dev (Google): Largest Contentful Paint (LCP), abgerufen am 03.11.2026
- web.dev (Google): Browser-level image lazy loading for the web, abgerufen am 03.11.2026
- Prismic: Website Hero Section Best Practices, 30.10.2024
- Die Medialen: Hero-Bereich (Glossar), abgerufen am 03.11.2026
- PushPartner: eigene Bauregeln für Landingpages und Landingpage-Standard, Stand Oktober 2026 (nicht veröffentlicht)
