Above the Fold: Was ist das und wie gestalten Sie den Bereich?

Was ist Above the Fold?

Above the Fold ist der Teil einer Webseite, den Besucher ohne Scrollen sehen. Es ist also der erste Bildschirm nach dem Laden der Seite. Der Begriff stammt aus dem Zeitungswesen: Redakteure setzten die stärkste Schlagzeile in die obere Hälfte der gefalteten Titelseite.

Im Web ist die Falz keine feste Linie. Sie verschiebt sich zudem mit Bildschirmgröße, Browserleisten und Gerät. Deshalb gibt es keinen einzigen "richtigen" Pixelwert. Entscheidend ist daher, was Ihr Besucher in der ersten Sekunde sieht.

Unser Team beginnt jedes Projekt mit derselben Frage. Erkennt ein Besucher ohne Scrollen, wo er ist, was Sie anbieten und was er als Nächstes tun soll? Wenn ja, erfüllt Ihr erster Bildschirm somit seine Aufgabe. Wenn nein, hilft es dann nicht, die unteren Abschnitte zu verschönern.

In diesem Leitfaden behandeln wir Definition, mobiles Verhalten, Hero Inhalte und CTA Platzierung. Außerdem machen wir aus den Studien eine Tabelle und eine Checkliste. Den größeren Rahmen finden Sie in unserem Webdesign Leitfaden.

Warum ist Above the Fold noch immer wichtig?

Die Nielsen Norman Group (NN/g) zeigte 2018 in einer Eyetracking Studie, dass Desktop Nutzer rund 57 Prozent ihrer Betrachtungszeit oberhalb der Falz verbrachten. Auf die ersten beiden Bildschirmlängen entfielen zudem 74 Prozent. Quelle: NN/g, "Scrolling and Attention".

Im Jahr 2010 lag der Wert laut NN/g bei 80 Prozent. Die Menschen scrollen also heute mehr. Dennoch sah der starke Abfall der Aufmerksamkeit nach der Falz 2018 genauso aus wie 2010. Daraus folgt also nicht, dass die Falz egal wäre.

Ein weiterer NN/g Artikel, "The Fold Manifesto", beschreibt die Falz als Interaktionskosten. Sichtbare Inhalte kosten also fast nichts. Denn verborgene Inhalte verlangen eine zusätzliche Handlung, und niemand scrollt ohne Grund.

Sie sollten zudem die Grenzen dieser Daten kennen. Die Studie nutzte Desktop Eyetracking und bildet Ihre Zielgruppe nicht genau ab. Deshalb gelten die Zahlen als Testhypothese, nicht als feste Regel. Ihre eigenen Messwerte zählen daher immer mehr als eine allgemeine Statistik.

Wo beginnt die Falz auf verschiedenen Bildschirmen?

Die Falz liegt also nicht fest. Auf einem Desktop Monitor liegt der sichtbare Bereich oft zwischen 600 und 900 Pixeln. Auf einem Smartphone fällt er deutlich kürzer aus. Browserleisten, Cookie Banner und fixierte Menüs verkleinern ihn zusätzlich.

NN/g betont, dass die Falz auf jeder Bildschirmgröße existiert. Das Problem betrifft also nicht nur alte, kleine Monitore. Denn selbst auf einem breiten Bildschirm bricht der Inhalt irgendwo ab. Diesen Punkt sollten Sie daher im Design einplanen.

Konkret hilft eine praktische Methode. Zunächst holen Sie sich die drei häufigsten Gerätegrößen aus Ihren Analytics Daten. Dann öffnen Sie die Seite auf jedem Gerät ohne Scrollen und machen einen Screenshot. Was Sie dort sehen, ist somit Ihr echter Bereich oberhalb der Falz.

Zum Beispiel arbeitet unser Team oft mit drei Größen: einem Laptop mit 1366x768, einem Desktop mit 1920x1080 und einem Smartphone mit 390 Pixeln Breite. So bleibt das Nutzenversprechen auch auf dem engsten Gerät sichtbar. Die Geräteansicht in den Browser Werkzeugen reicht dafür also aus.

Wie funktioniert Above the Fold auf dem Smartphone?

Auf dem Smartphone ist der sichtbare Bereich klein, doch Nutzer scrollen dort routinierter. NN/g weist zudem darauf hin, dass kleine Bildschirme mehr Scrollen verlangen. Trotzdem erwarten Nutzer wertvolle Inhalte, die den Aufwand rechtfertigen.

Deshalb sollten Sie mobil drei Dinge priorisieren: eine klare Überschrift, eine primäre Handlung und einen visuellen Hinweis zum Weiterscrollen. Denn ein langes Menü, ein großes Logo und ein Cookie Banner füllen schnell den ersten Bildschirm. Dann rutscht Ihr eigentlicher Inhalt unter die Falz.

• Halten Sie zunächst Logo und Menü kompakt, am besten unter einem Fünftel des ersten Bildschirms.
• Beenden Sie dann die Überschrift nach zwei bis drei Zeilen und nennen Sie den Nutzen klar.
• Platzieren Sie außerdem den primären CTA Button in Daumenreichweite.
• Verkleinern Sie daher das Cookie Banner oder setzen Sie es an den unteren Rand.
• Skalieren Sie zudem das Hero Bild so, dass es den Inhalt nicht nach unten schiebt.

Den Ansatz beschreiben wir ausführlich im Artikel Mobile First Design. Ihre eigenen Seiten testen Sie schnell mit dem Mobile Friendly Test.

Was gehört in einen guten Hero Bereich?

Der Hero Bereich ist der Hauptblock ganz oben auf der Seite und bildet den Kern Ihres ersten Bildschirms. Ein guter Hero beantwortet in Sekunden fünf Fragen. Wer sind Sie, was bieten Sie an, für wen, warum sollte man Sie wählen und was ist der nächste Schritt?

• Überschrift: Sie nennt den Nutzen und sagt Besuchern, was sie gewinnen.
• Unterzeile: Sie erklärt die Überschrift in einem Satz.
• Primärer CTA: eine klare Handlungsaufforderung.
• Vertrauenssignal: ein Kundenlogo, eine Bewertung oder ein Zertifikat, das Besucher prüfen können.
• Bildmotiv: ein Bild, das Produkt, Leistung oder Ergebnis zeigt.

Keines dieser fünf Elemente muss also riesig sein. Allerdings darf keines fehlen. Zum Beispiel wirkt ein Hero mit nur einem schönen Foto und einem Markenslogan hübsch, gibt aber keine Richtung vor.

Die Gewichtung hängt daher von der Branche ab. Dienstleister setzen auf Vertrauenssignale, Shops auf Produktbild und Preis, B2B Seiten auf eine Überschrift, die das Problem benennt. Mehr dazu lesen Sie im Artikel B2B Landing Page erstellen.

Wie schreiben Sie eine Überschrift für den ersten Bildschirm?

Die Überschrift im oberen Bereich soll Besucher denken lassen: "Hier bin ich richtig." Also schreiben Sie einen konkreten Nutzen statt eines abstrakten Slogans. "Wir gestalten die Zukunft" sagt nichts. "Eine Website, die Termine für Zahnarztpraxen bringt" sagt, für wen Sie was tun.

Eine gute Überschrift hat also meist drei Merkmale. Erstens spricht sie die Sprache des Besuchers. Zweitens verspricht sie ein Ergebnis, ohne zu übertreiben. Drittens passt sie außerdem zur Suchanfrage oder zum Anzeigentext. Trifft ein Anzeigenbesucher auf eine andere Botschaft, verlässt er die Seite also schnell.

In der Unterzeile nennen Sie Details. Die Überschrift beantwortet das "Was", die Unterzeile das "Wie" und "Für wen". Außerdem halten Sie sie kurz; zwei Zeilen sind eine gute Grenze.

Beim Texten gibt Ihnen der Ansatz von UX Writing einen klaren Rahmen. Kurz gesagt: Erleichtern Sie dem Besucher die Entscheidung, statt den Satz zu schmücken.

Wo platzieren Sie den CTA Button im ersten Bildschirm?

Platzieren Sie den primären CTA im oberen Bereich, direkt unter oder neben Überschrift und Unterzeile. NN/g empfiehlt ebenfalls, wichtige Inhalte und Haupt Handlungsaufforderungen oberhalb der Falz zu halten. Der Button muss daher auf den ersten Blick auffallen.

Allerdings hat der CTA nicht auf jeder Seite dasselbe Gewicht. Auf einer Produktseite mit hoher Kaufabsicht gehört "In den Warenkorb" nach oben. In einem informativen Blogartikel stört dann ein aufdringlicher Button den Lesefluss.

• Wählen Sie zunächst einen primären CTA und gestalten Sie sekundäre CTAs ruhiger.
• Verbinden Sie Handlung und Nutzen im Text, zum Beispiel "Kostenloses Angebot anfordern".
• Sorgen Sie für hohen Kontrast, denn ein Button, der im Hintergrund verschwindet, ist unsichtbar.
• Machen Sie den Button mobil also so breit, dass man ihn leicht antippt.

Formulierung und Gestaltung finden Sie in unseren CTA Button Beispielen. Für die Farbwahl hilft der Kontrastrechner.

Wie unterscheiden sich Inhalte oberhalb und unterhalb der Falz?

Sie sollten Inhalte also bewusst verteilen. Oben stehen Elemente, die bei der Entscheidung helfen. Unten stehen Elemente, die überzeugen und Details liefern. Die Tabelle fasst die Aufteilung zusammen.

Die Aufteilung ist allerdings keine starre Regel. Auf einer kurzen Landing Page passt alles nach oben. Auf einer langen Unternehmensseite ergibt es dagegen Sinn, Vertrauensbelege weiter unten zu wiederholen.

Wie bewegen Sie Besucher zum Weiterscrollen?

Die größte Falle, vor der NN/g warnt, ist der "false floor". Sieht das Seitenende wie ein Abschluss aus, vermuten Nutzer darunter nichts mehr und scrollen nicht. Ein Bild in voller Breite mit einem großen Leerraum darunter erzeugt genau diesen Effekt.

Die Lösung sind also einfache Hinweise. Lassen Sie zunächst die Oberkante des nächsten Abschnitts über die Falz ragen. Ergänzen Sie dann einen kleinen Pfeil oder einen Hinweis wie "So funktioniert es". Außerdem hilft ein Farbwechsel zwischen den Abschnitten, damit der Fluss weitergeht.

Das Scrollverhalten ist ein eigenes Thema. Details finden Sie im Artikel Scrolling im Webdesign, der auch Fortschrittsanzeigen und Abschnittsübergänge behandelt.

Kurz gesagt: Der erste Bildschirm verkauft nicht die Seite, sondern den Schritt in die Seite. Ihr Ziel ist, den Besucher zum zweiten Bildschirm zu tragen. Gelingt das, übernimmt somit der restliche Inhalt.

Wie beeinflusst Above the Fold die Ladezeit und den LCP?

Das größte Element im oberen Bereich ist oft das LCP Element (Largest Contentful Paint). Meist übernimmt also ein Hero Bild oder ein Überschriftenblock diese Rolle. Die Richtlinien von Google auf web.dev empfehlen für ein gutes Nutzererlebnis einen LCP von 2,5 Sekunden oder weniger.

Deshalb sollten Sie das Hero Bild sorgfältig vorbereiten. Komprimieren Sie es zunächst, wählen Sie die richtige Größe und nutzen Sie ein modernes Format. Laden Sie das Bild im oberen Bereich daher nicht per Lazy Loading. Bilder weiter unten laden Sie dagegen verzögert.

• Skalieren Sie das Hero Bild passend zur Bildschirmgröße.
• Bevorzugen Sie zudem leichte Formate wie WebP oder AVIF.
• Laden Sie das kritische CSS für den Seitenanfang außerdem früh.
• Verzichten Sie schließlich auf Slider und schwere Videohintergründe.

Zu den Kennzahlen lesen Sie unseren Artikel Core Web Vitals erklärt, zur Wirkung auf die Suche den Beitrag Ladezeit und SEO. Quelle: web.dev, Largest Contentful Paint.

Sollte der Hero Bereich ein Video, einen Slider oder ein großes Bild nutzen?

Kurze Antwort: Nutzen Sie ein Element nur, wenn es Besuchern bei der Entscheidung hilft. Denn ein dekoratives Bild braucht Platz und bremst das Laden. Ein Produktfoto, das das Nutzenversprechen zeigt, oder eine kurze Demo kann dagegen ein starker Hero sein.

Slider machen also meist Probleme. Jede Folie nach der ersten fällt kaum auf, und der automatische Wechsel unterbricht Besucher. Deshalb funktioniert eine einzelne starke Botschaft oft besser. Prüfen Sie das daher mit einem A/B Test auf Ihrer eigenen Seite.

Setzen Sie ein Video ein, starten Sie es zunächst stumm, halten Sie es kurz und laden Sie es verzögert. Ein Video kann die Conversion stützen, auch wenn der Effekt je nach Seite schwankt. Mehr dazu lesen Sie im Artikel Video auf der Website und Conversion Rate.

Wie gestalten Sie die Falz je nach Seitentyp?

Die erste Frage des Besuchers unterscheidet sich also je nach Seitentyp. Darum ändert sich der Inhalt des ersten Bildschirms mit der Aufgabe der Seite. Unten sehen Sie vier typische Fälle und unsere Prioritäten.

• Landing Page: ein Angebot, ein CTA, ein reduziertes Menü. Sie entfernen daher ablenkende Links.
• Unternehmensstartseite: was Sie tun, für wen und wie man Sie erreicht. Vertrauenssignale zeigen Sie somit früh.
• Produktseite im Shop: Produktbild, Preis, Lagerstatus und Warenkorb Button.
• Blogartikel: Titel, kurze Zusammenfassung und Inhaltsverzeichnis. Werbung und Pop ups sollten das Lesen außerdem nicht stören.

Zwischen Startseite und Landing Page liegt allerdings ein großer Unterschied. Eine Startseite bedient viele Besuchertypen, eine Landing Page zielt auf eine Zielgruppe und ein Ziel. Mehr zum Thema Conversion finden Sie im Artikel Conversionorientiertes Webdesign.

Im Onlinehandel zählt die Falz allerdings besonders stark. Verstecken Sie Preis und Lieferinfos weiter unten, verlassen Käufer die Seite womöglich ohne Antwort. Zeigen Sie daher alle kaufentscheidenden Fakten auf dem ersten Bildschirm.

Welche Fehler machen Teams oberhalb der Falz am häufigsten?

Die meisten Fehler liegen in zwei Extremen: zu viel zeigen oder nichts zeigen. Eine überfüllte Seite erschwert die Entscheidung, eine leere weckt keine Neugier. Die Balance entsteht also durch Priorisierung.

• Abstrakter Slogan: Besucher erkennen nicht, was Sie anbieten.
• Mehrere gleichwertige CTAs: Sie wissen nicht, welchen sie drücken sollen.
• Riesiges Menü und Cookie Banner: Der Inhalt rutscht unter die Falz.
• Text mit niedrigem Kontrast: Er verschwindet über dem Bild.
• False Floor: Der erste Bildschirm wirkt abgeschlossen, also scrollt niemand.
• Schweres Hero Bild: Die LCP Zeit steigt, und Besucher warten nicht.

Ein UX Audit deckt zudem viele dieser Fehler schnell auf. Den Ablauf beschreiben wir im Leitfaden UX Audit durchführen. Außerdem haben wir Oberflächenfehler, die Umsatz kosten, im Artikel UX Fehler, die Umsatz kosten gesammelt.

Wie hängt die Falz mit der Absprungrate zusammen?

Im oberen Bereich entscheiden Besucher binnen Sekunden, ob sie bleiben. Ist der erste Bildschirm unklar, drücken sie die Zurück Taste. In den Analytics Daten zeigt sich das dann als hohe Absprungrate. Die Zahl allein zu lesen, kann allerdings in die Irre führen.

Zum Beispiel findet jemand, der eine schnelle Antwort sucht, sie in einem Blogartikel und geht wieder. Das ist also keine schlechte Erfahrung. Erreichen Besucher auf einer Leistungsseite dagegen nie den CTA oder den zweiten Abschnitt, liegt das Problem wahrscheinlich im ersten Bildschirm.

Deshalb bewerten Sie die Absprungrate immer im Verhältnis zum Seitenziel. Kombinieren Sie sie zudem mit Scrolltiefe, CTA Klicks und Sitzungsdauer. So erkennen Sie, ob die Ursache in der Botschaft, in der Geschwindigkeit oder im falschen Traffic liegt.

Unser Team folgt außerdem meist einer festen Reihenfolge. Zunächst prüfen wir die Trafficquelle, dann die Botschaft des ersten Bildschirms und zuletzt Tempo und Geräteverteilung. Diese Reihenfolge verhindert unnötige Designänderungen.

Wie passen Sie die Falz für Besucher aus Anzeigen an?

Ein Besucher aus einer Anzeige will die Antwort auf den angeklickten Anzeigentext sehen. Verspricht die Anzeige eine kostenlose Beratung und die Seite zeigt eine allgemeine Firmenvorstellung, sinkt das Vertrauen. Deshalb müssen Überschrift und Anzeigentext dieselbe Sprache sprechen.

In der Praxis gestalten Sie für jede Anzeigengruppe einen eigenen ersten Bildschirm. Sie passen die Überschrift an die Suchanfrage an und gleichen den CTA Text mit dem Anzeigenversprechen ab. Zudem entfernen Sie überflüssige Menüpunkte, um Ablenkung zu senken.

Anzeigenverwaltung und Seitengestaltung wirken wie getrennte Aufgaben, doch das Ergebnis hängt von ihrem Zusammenspiel ab. Darum sehen wir die Landing Page in unserer Google Ads Verwaltung als Teil der Kampagne.

Ohne Conversion Tracking bleibt diese Arbeit daher unvollständig. Legen Sie Ihre Ziele deshalb vorab fest, damit Sie sehen, welche Variante gewinnt. Wie das geht, erklären wir im Artikel Conversion Ziele festlegen.

Wie stören Cookie Banner, Pop ups und fixierte Header die Falz?

Diese drei Elemente fressen den wertvollsten Teil des ersten Bildschirms. Ein Cookie Banner nimmt den unteren Rand, ein fixierter Header den oberen, und ein Pop up deckt alles ab. Mobil bleibt bei allen dreien kaum Platz für echten Inhalt.

Fragen Sie zunächst, ob jedes Element wirklich nötig ist. Ein Cookie Hinweis kann rechtlich erforderlich sein, doch Sie können ihn verkleinern. Den fixierten Header lassen Sie zudem beim Scrollen schrumpfen. Außerdem wirkt ein Pop up besser, wenn es erst nach ersten Interaktionen erscheint.

• Gestalten Sie das Cookie Banner zunächst als schmalen Streifen.
• Begrenzen Sie außerdem die Höhe des fixierten Menüs mobil.
• Vermeiden Sie dann Pop ups im Vollbild direkt beim Laden.
• Machen Sie den Schließen Button deutlich und leicht antippbar.

Kurz gesagt: Geben Sie den ersten Bildschirm dem Inhalt und schieben Sie Hilfselemente an den Rand. Besucher sollten nicht drei Hürden nehmen müssen, bevor sie sehen, was die Seite bietet.

Wie prägt die Falz den ersten Eindruck?

Ein erster Eindruck entsteht aus Typografie, Farbe, Abstand und Bildsprache zusammen. Besucher spüren, ob eine Seite ordentlich und vertrauenswürdig wirkt, bevor sie ein Wort lesen. Gestaltungsdetails sind also eine Frage des Vertrauens, nicht nur der Optik.

Hier spielt also die Farbwahl eine Rolle. Nutzen Sie Ihre Markenfarbe, ohne den Kontrast zwischen CTA und Hintergrund zu schwächen. Die emotionale Wirkung von Farben behandeln wir im Artikel Farbpsychologie im Webdesign.

Bei der Schrift gilt somit dieselbe Logik. Die Überschrift sollte groß genug sein, der Fließtext angenehm lesbar. Zudem entlasten kurze Zeilen das Auge. Weißraum wirkt dann wie ein unsichtbares Werkzeug, das die Aufmerksamkeit lenkt.

Schließlich prüfen Sie die Konsistenz. Tragen Logo, Farben und Tonalität auf der ganzen Seite dieselbe Persönlichkeit, merken sich Besucher die Marke leichter. Darum sollten Sie den Hero Bereich nicht losgelöst von Ihrer Markenidentität entwerfen.

Warum sind Lesbarkeit und Barrierefreiheit im ersten Bildschirm wichtig?

Ein unlesbarer Hero bringt dasselbe Ergebnis wie gar kein Hero. Heller Text über einem Bild kann auf einem hellen Display oder bei eingeschränktem Sehen verschwinden. Deshalb verdienen Kontrast und Schriftgröße im ersten Bildschirm Vorrang.

Eine praktische Regel: Legen Sie Überschriften nicht auf den unruhigsten Teil des Bildes. Bei Bedarf hilft dann eine halbtransparente Ebene. Prüfen Sie außerdem, ob die Beschriftung des Buttons genug Kontrast zum Hintergrund hat.

• Sorgen Sie zunächst für ausreichenden Kontrast zwischen Text und Hintergrund.
• Halten Sie den Fließtext außerdem mobil in einer angenehmen Größe.
• Vermitteln Sie Informationen nie allein über Farbe.
• Machen Sie Tippflächen breit genug für einen Finger.

Diese Einstellungen helfen allen, nicht nur Nutzern mit Einschränkungen. Auch wer in der Sonne aufs Smartphone schaut, braucht denselben Kontrast. Schnell messen Sie ihn mit dem Kontrastrechner.

Worin unterscheiden sich Above the Fold und Scrollverhalten?

Above the Fold meint den Inhalt des ersten Bildschirms, das Scrollverhalten dagegen, was Nutzer danach tun. Beides bedingt sich also. Weckt der erste Bildschirm Interesse, scrollen Nutzer, und dann übernehmen die unteren Abschnitte.

Es reicht daher nicht, beides getrennt zu optimieren. Zum Beispiel: Bauen Sie einen perfekten ersten Bildschirm, lassen aber den zweiten Abschnitt leer, scrollen Besucher neugierig und werden enttäuscht. Umgekehrt rettet ein starker zweiter Abschnitt keinen schwachen Hero.

Gestalten Sie deshalb die Übergänge zwischen den Abschnitten. Bauen Sie also am Ende jedes Abschnitts eine kleine Brücke. Legen Sie die Seitenlänge außerdem nach dem Bedarf des Inhalts fest; NN/g selbst rät, die ideale Länge mit echten Nutzern zu testen.

Anders gesagt: Es geht nicht darum, Scrollen zu erzwingen, sondern es lohnend zu machen. Bietet jeder Bildschirm neuen Nutzen, machen Besucher von selbst weiter.

Welche Kennzahlen sollten Sie für den ersten Bildschirm beobachten?

Die Kennzahlen hängen vom Seitenziel ab, doch ein Kernset passt fast überall. Zunächst messen Sie das Tempo des ersten Bildschirms, dann die Reaktion der Nutzer. Danach verbinden Sie das Ergebnis mit der Conversion.

Lesen Sie die Kennzahlen gemeinsam, nicht einzeln. Zum Beispiel: Ist der LCP gut, aber die CTA Klickrate niedrig, liegt das Problem in der Botschaft, nicht im Tempo. Sind die Klicks hoch, die Conversion aber niedrig, kann das Formular oder das Angebot schuld sein.

Halten Sie außerdem das Messfenster lang genug. Wochentage und Wochenenden unterscheiden sich im Verhalten. Bewerten Sie Kampagnenzeiträume separat, denn die Trafficqualität verändert die Raten.

Wie testen Sie den Bereich oberhalb der Falz?

Erst messen, dann ändern. Es gibt vier Kernwege, den Seitenanfang zu testen: Scrolltiefe, Heatmaps, Nutzertests und A/B Tests. Jeder beantwortet also eine andere Frage.

• Scrolltiefe: zeigt, welcher Anteil der Nutzer den zweiten Bildschirm erreicht.
• Heatmap: visualisiert Klicks und Aufmerksamkeit.
• Nutzertest: Ein Fünf Sekunden Test misst den ersten Eindruck.
• A/B Test: vergleicht eine Überschrift oder CTA Variante mit echtem Traffic.

Der Fünf Sekunden Test ist einfach, aber stark. Zeigen Sie dann einigen Personen die Seite fünf Sekunden lang und fragen Sie: "Was bietet diese Seite an?" Weichen die Antworten von Ihrer Überschrift ab, ist Ihre Botschaft noch nicht klar.

Beachten Sie beim Auswerten, dass eine kleine Stichprobe täuschen kann. Testen Sie zudem immer nur eine Variable. Die Veränderung der Conversion berechnen Sie mit dem Conversion Rate Rechner.

Wie lesen Sie die Wirkung einer Optimierung an einer Beispielrechnung?

Die folgenden Zahlen gehören keinem echten Kunden. Sie bilden eine Beispielrechnung, die nur die Logik zeigt. Angenommen, eine Leistungsseite hat 10.000 Besucher im Monat und eine Conversion Rate von 2 Prozent. Das ergibt also 200 Anfragen pro Monat.

Nun überarbeiten Sie den Hero Bereich und heben die Rate auf 2,4 Prozent. Bleibt der Traffic gleich, erhalten Sie somit 240 Anfragen. Sie gewinnen also 40 Anfragen im Monat ohne zusätzliches Werbebudget. Allerdings ist dieses Ergebnis eine Annahme und keine Garantie.

Bedenken Sie, dass Sie das echte Ergebnis nur mit eigenen Daten sehen. Nach unserer Felderfahrung verbessern ein klares Nutzenversprechen und ein sichtbarer CTA die Ergebnisse auf vielen Seiten. Dennoch hängt die Größe des Effekts von Branche, Trafficquelle und Angebot ab.

Schreiben Sie deshalb einen Testplan, statt das Ergebnis vorherzusagen. Legen Sie vorab fest, welche Kennzahl Sie wie lange mit welcher Stichprobe beobachten. So lesen Sie die Wirkung aus Daten statt aus Meinungen.

Was prüfen Sie vor dem Start? Die Checkliste für Above the Fold

Gehen Sie vor der Veröffentlichung die folgende Liste auf Desktop, Tablet und Smartphone getrennt durch. Jeder Punkt sollte also ein Ja bekommen. Bekommt ein Punkt ein Nein, korrigieren Sie ihn zuerst und wenden sich dann anderen Verbesserungen zu.

1. Nennt die Überschrift in einem Satz, was der Besucher gewinnt?
2. Erklärt die Unterzeile, wem Sie wie helfen?
3. Ist der primäre CTA ohne Scrollen auf dem ersten Bildschirm sichtbar?
4. Steht ein Vertrauenssignal im oberen Bereich?
5. Lassen Menü und Cookie Banner mobil den Inhalt an seinem Platz?
6. Lädt das Hero Bild schnell, mit einem LCP unter 2,5 Sekunden?
7. Entsteht an der Falz kein False Floor?
8. Passt die Überschrift zur Anzeige oder zur Suchanfrage?

Gehen Sie die Liste daher nicht nur einmal durch. Wiederholen Sie sie bei jeder Änderung an Design, Inhalt oder Kampagne. Schon ein kleines Banner kann den CTA unter die Falz schieben.

Wie gehen wir bei der Arbeit am ersten Bildschirm als Team vor?

Wir teilen den Prozess konkret in vier Schritte. Zunächst schreiben wir die eine Aufgabe der Zielseite auf. Dann prüfen wir die Geräteverteilung Ihrer Zielgruppe und wählen die kritischen Bildschirmgrößen. Danach skizzieren wir den Hero mobil zuerst und testen ihn zum Schluss.

In diesem Ablauf sitzen Design, Inhalt und Performance am selben Tisch. Wer die Überschrift schreibt und wer das Bild vorbereitet, denkt den LCP also gemeinsam mit. Somit müssen Sie nicht zwischen einem hübschen, aber langsamen und einem schnellen, aber sinnlosen Hero wählen.

Verliert Ihr erster Bildschirm Conversions, kann eine professionelle Prüfung helfen. In unserem Webdesign Angebot kümmern wir uns gemeinsam um Hero Bereich, CTA Platzierung und mobile Erfahrung. Unser Ziel ist ein erster Eindruck, der funktioniert, nicht nur hübsch aussieht.

Auch unsere Checkliste für Webdesign Angebote liefert Ihnen Kriterien für die Entscheidung. Wir empfehlen außerdem die NN/g Quellen: Scrolling and Attention und The Fold Manifesto.