Die Nielsen Norman Group fand heraus, dass Nutzer 57 % ihrer Zeit auf einer Webseite „Above the Fold“ verbringen, wobei die Aufmerksamkeit nach dem ersten sichtbaren Bereich drastisch abnimmt. Bei Landing Pages ist dieser Wert noch extremer – Besucher entscheiden innerhalb von 2-3 Sekunden, ob sie bleiben oder die Seite verlassen.
Das bedeutet, dass Ihr Design im Bereich „Above the Fold“ buchstäblich Ihre einzige Chance ist, einen Besucher zu halten.
Was Eye-Tracking-Studien offenbaren
Eye-Tracking-Studien von Djamasbi et al. (2010) identifizierten die Elemente, die oberhalb der Falz die meiste Aufmerksamkeit erregen:
| Element | Durchschn. Fixationszeit | Erste Fixation |
|---|---|---|
| Hero-Image / Visual | 1,2s | 67 % schauen zuerst hierhin |
| Hauptüberschrift | 0,8s | 22 % schauen zuerst hierhin |
| CTA-Button | 0,4s | 3 % schauen zuerst hierhin |
| Navigation | 0,3s | 8 % schauen zuerst hierhin |
Das Hero-Visual zieht die meiste Aufmerksamkeit auf sich, aber die Conversion findet beim CTA statt. Die Herausforderung besteht darin, einen visuellen Pfad von Hero → Überschrift → CTA zu gestalten.
Die 5 Elemente eines hochkonvertierenden Fold-Bereichs
1. Ein Hero-Visual, das Verlangen weckt
Das Hero-Image sollte das Ergebnis zeigen, nicht das Produkt. Adaval & Wyer (1998) zeigten, dass Bilder, die Endzustände darstellen (ein glücklicher Kunde, der das Produkt nutzt), eine doppelt so hohe Kaufabsicht erzeugen wie reine Produktfotos.
2. Die Überschrift als einzigartiges Werteversprechen
Laut der Conversion-Copywriting-Forschung von Copyhackers übertreffen Überschriften, die den internen Dialog des Besuchers widerspiegeln, generische Wertversprechen um das 3- bis 5-fache. Die Überschrift sollte den Satz vervollständigen: „Ich brauche etwas, das...“
3. Visuelle Hierarchie, die das Auge leitet
Untersuchungen von Faraday (2000) zur visuellen Hierarchie im Webdesign zeigen, dass Größe, Kontrast und Position eine „Lesereihenfolge“ schaffen, die gemessen und optimiert werden kann. Der Fluss sollte sein: Visueller Anker → Problem/Lösung → CTA.
4. CTA mit maximalem Kontrast
Ling & van Schaik (2006) fanden heraus, dass CTA-Buttons mit dem höchsten Farbkontrast zum Hintergrund 21 % mehr Klicks erhielten, unabhängig von den verwendeten Farben. Es geht um den Kontrast, nicht um die Farbe.
5. Social Proof „Above the Fold“
Das Platzieren eines Vertrauenssignals (Kundenzahl, Bewertung, Logo-Leiste) oberhalb der Falz reduziert die Risikobewertung im präfrontalen Kortex, wie in Klucharev et al. (2009) gezeigt wurde. Eine einzige Zeile wie „Über 10.000 Marketer vertrauen uns“ kann die Conversion um 15-20 % steigern.
Testen Sie Ihre Landing Page
Fügen Sie die URL Ihrer Landing Page bei FlowDx ein, um genau zu sehen, wohin die Augen Ihrer Besucher wandern. Die Attention-Heatmap zeigt, ob sich Ihr CTA in der „Hot Zone“ befindet oder im Rauschen untergeht.
Referenzen
- Nielsen Norman Group. Scrolling and Attention.
- Djamasbi, S. et al. (2010). Generation Y, web design, and eye tracking. Int. Journal of Human-Computer Studies.
- Klucharev, V. et al. (2009). Reinforcement learning signal predicts social conformity. Neuron.