F-Pattern, Z-Pattern & Gutenberg-Diagramm: Wie Nutzer Websites wirklich lesen

Du gestaltest seit Jahren Websites – und trotzdem klicken Nutzer nicht da, wo dein CTA sitzt. Das liegt selten am Design. Es liegt daran, dass Nutzer Websites nicht lesen. Sie scannen. Wer das Leseverhalten auf einer Website versteht, platziert Buttons, Headlines und Trust-Signale dort, wo Augen tatsächlich ankommen – und wer es ignoriert, verbrennt jeden Tag Conversions.

Eye-Tracking-Forschung kennt drei dominante Muster: F-Pattern, Z-Pattern und das Gutenberg-Diagramm. Wir bei Storyable in Hannover bauen unsere Layouts seit Jahren entlang dieser Muster – und sehen bei Kunden Conversion-Steigerungen von 20–40 % allein durch Re-Positionierung bestehender Elemente. Hier kommt der ehrliche Praxis-Guide.

Was Eye-Tracking wirklich zeigt – und warum dein Bauchgefühl trügt

Die wegweisende Studie kam 2006 von der Nielsen Norman Group: 232 Probanden, 1.700 Seiten, präzise Heatmaps. Ergebnis: Nutzer lesen Webseiten nicht von links nach rechts, Zeile für Zeile. Sie überfliegen in zwei bis vier Sekunden und entscheiden, ob sich tieferes Lesen lohnt.

Eine spätere NNG-Studie (2017) bestätigte: Auch nach zehn Jahren Webentwicklung, Mobile-Boom und Social Media bleiben die Scan-Muster identisch. Was sich verändert hat: Nutzer sind schneller. Die Toleranz für unklare Layouts ist auf null gesunken.

Das hat konkrete Folgen für jede Website:

• Headlines, die "weiter unten" stehen, werden ignoriert
• CTAs links unten werden zu 40 % seltener geklickt als rechts unten (NNG)
• Listen werden nur in den ersten beiden Items wirklich gelesen
• Bilder mit Gesicht ziehen den Blick magnetisch – aber nur, wenn das Gesicht in Richtung Content blickt

Das ist auch der Grund, warum wir im Cluster-Artikel zur Hero-Section, die wirklich konvertiert so streng auf den oberen linken Quadranten achten. Und warum unsere psychologische Webdesign-Analyse immer mit einem Heatmap-Audit beginnt.

Das F-Pattern: Warum Nutzer auf textlastigen Seiten nur die erste Zeile vollständig lesen

Das F-Pattern entsteht überall dort, wo viel Text auf einen Nutzer trifft: Blogposts, Produktlisten, Suchergebnisse, Kategorieseiten, FAQ-Bereiche. Der Blickverlauf:

1. Horizontale Bewegung entlang der ersten Zeile (vollständig gelesen)
2. Zweite horizontale Bewegung, etwas kürzer
3. Vertikales Scannen der linken Spalte mit gelegentlichen Stichproben nach rechts

Das Ergebnis sieht in der Heatmap aus wie ein liegendes "F" – manchmal auch wie ein "E" oder umgedrehtes "L". Die Variante ist egal. Die Konsequenz ist immer dieselbe: alles rechts unten wird ignoriert.

Konkrete Design-Konsequenzen für F-Pattern-Seiten

Anti-AI-Slop-Praxis: Front-Loading

Schreibe jeden Absatz mit der Kernaussage am Anfang. Nicht: "Es ist wichtig zu beachten, dass die Ladegeschwindigkeit einen entscheidenden Einfluss auf die Conversion-Rate hat." Sondern: "Eine Sekunde mehr Ladezeit kostet 7 % Conversion." Genau dieses Prinzip wenden wir in jedem unserer Core-Web-Vitals-Audits an – nicht weil es kürzer ist, sondern weil das F-Pattern es erzwingt.

Das Z-Pattern: Warum Landing Pages anders funktionieren als Blogposts

Sobald eine Seite wenig Text und klare visuelle Hierarchie hat, springt der Blick anders. Statt zu scannen, hüpft er in einer Z-Bewegung über die Fläche:

1. Oben links – Logo, Brand-Wiedererkennung
2. Oben rechts – Navigation, optional ein Sekundär-CTA
3. Diagonal nach unten links – meist ein Bild oder visueller Anker
4. Unten rechts – primärer CTA

Das Z-Pattern dominiert auf:

• Startseiten mit Hero + drei USPs darunter
• Single-Goal-Landing-Pages (z.B. Webinar-Anmeldung, Lead-Magnet)
• Produkt-Detailseiten mit großem Hero-Bild
• About-Pages mit klarer Brand-Story – siehe unser Cluster zu interaktiven Firmen-Hubs für die B2B-Über-Uns-Seite

Z-Pattern in der Praxis: Die 4 Anker

Damit das Z-Pattern wirkt, müssen vier Elemente bewusst gesetzt werden:

[ Logo ──────────────► Nav / Telefon ]
            ╲
              ╲
                ╲
[ Visual / USPs ────────► Primary CTA ]

Anker 1 (Logo): Vertrauen herstellen, Brand verankern. Nicht zu klein. Anker 2 (Nav/CTA-light): Sekundär-Aktion oder Kontakt-Hook. Nicht ablenkend. Anker 3 (Visual): Emotionaler Anker. Person, Produkt oder Ergebnis. Idealerweise schaut die Person Richtung Anker 4. Anker 4 (Primary CTA): Die eine wichtige Aktion. Farbkontrast, Größe, Whitespace.

Das Gutenberg-Diagramm: Warum CTAs unten rechts oft besser konvertieren

Der amerikanische Typograf Edmund Arnold prägte das Gutenberg-Diagramm für lesedichte, ausgewogene Layouts – etwa ganzseitige Magazine, Print-Anzeigen oder textbasierte Web-Seiten ohne starke visuelle Hierarchie. Es teilt jede Seite in vier Quadranten:

Der Blick folgt einer diagonalen Gravitationslinie von oben links nach unten rechts – dem sogenannten Reading Gravity Path. Alles, was außerhalb dieser Linie sitzt, hat eine Bringschuld an Aufmerksamkeit (durch Farbe, Größe, Bewegung).

Gutenberg vs. F vs. Z – wann welches Modell?

• F-Pattern: Wenn Text dominiert (Blog, FAQ, Listen, Suchergebnis)
• Z-Pattern: Wenn Visual dominiert (Hero, Landing, Single-Goal-Page)
• Gutenberg: Wenn Inhalt gleichmäßig verteilt ist (Newsletter-Layout, Print-ähnliche Sections, klassische Über-Uns-Seite)

In der Realität kombiniert eine moderne Website alle drei: Z above the fold, F im Content, Gutenberg in den Section-Blocks. Genau diesen Mix bauen wir in jedem unserer psychologisch fundierten Webdesign-Projekte aus Hannover systematisch auf.

Welches Muster für welchen Seitentyp – das Cheat-Sheet

Wer einen kompletten Onlineshop nach diesen Mustern aufbaut, sieht messbar weniger Drop-Outs im Funnel – mehr dazu in unserem Leitfaden zu Onlineshops aus Hannover.

Die toten Zonen: Wo Inhalte verschwinden – und wie du sie rettest

Drei Bereiche sind statistisch fast unsichtbar und kosten dich täglich Conversions:

1. Unten links (Weak Fallow Area) – wird als "Wegwerf-Quadrant" angesehen
2. Mitte unter dem Fold im F-Pattern – Blick rauscht vertikal links daran vorbei
3. Rechte Sidebar auf textlastigen Seiten – wird als Werbung erkannt und ausgeblendet ("Banner Blindness")

Rettungs-Taktiken (in dieser Reihenfolge)

1. Verschieben statt verschönern. Wichtige Inhalte aus toten Zonen herausziehen, nicht aufhübschen.
2. Visuellen Anker setzen. Bild, Icon oder Farbblock auf der Diagonalen, der den Blick abholt.
3. Sticky-CTAs nutzen. Auf Long-Form-Seiten ein klebriger CTA, der mit dem Blickverlauf wandert.
4. F-zu-Z brechen. Bei Listen ab Item 4 visuell unterbrechen (Zwischenüberschrift, InfoBox, Bild) – sonst hört das Scannen auf.
5. Mobile separat denken. Auf Mobile kollabiert das Z – die vertikale Reihenfolge entscheidet alles. Siehe Cluster zu Mobile-First-Design mit Thumb-Zones und Touch-Targets.

7-Punkte-Checkliste für scan-optimierte Layouts

Vor jedem Launch durchgehen:

• Above the fold: Z-Pattern eingehalten, primärer CTA unten rechts oder oben rechts
• Content-Sektionen: Erste 3 Wörter jedes Absatzes verraten das Thema (F-Pattern-tauglich)
• Listen: Wichtigste Punkte in den ersten zwei Items, nicht hinten
• Bilder mit Personen: Blickrichtung führt Richtung CTA oder Headline
• Tote Zonen: Kein wichtiger Inhalt im unteren linken Quadranten
• Sticky-CTA: Auf jeder Long-Form-Seite verfügbar
• Mobile-Reihenfolge: Vertikal getestet – Z- und Gutenberg-Logik bewusst aufgelöst, F-Logik beibehalten

Diese Checkliste verbinden wir in der Praxis mit den Mustern aus Verkaufspsychologie im Webdesign – Scan-Pattern liefern das Wo, Psychologie das Was.

Fazit: Layout folgt Auge – nicht Geschmack

Das Leseverhalten auf einer Website ist kein Geschmacksthema. F-Pattern, Z-Pattern und Gutenberg-Diagramm sind seit zwei Jahrzehnten durch Eye-Tracking belegt – und sie bestimmen, ob dein CTA gesehen wird oder im Nirvana versickert. Wer Layouts ohne dieses Wissen baut, verschiebt seine Conversions ins Glücksspiel.

Der ehrliche Schritt: Geh durch deine wichtigsten Seiten und frag bei jedem Element: Steht es da, wo das Auge hinkommt – oder da, wo Platz war? Diese eine Frage hat in unseren Hannoveraner Projekten Conversion-Sprünge im zweistelligen Prozentbereich ausgelöst. Tiefere strategische Einordnung findest du in unserem Webdesign-Guide.

Cagri Ersöz

Sieht dein Layout aus, wie deine Nutzer schauen?

Wir mappen deine wichtigsten Seiten auf F-, Z- und Gutenberg-Muster, identifizieren tote Zonen und liefern konkrete Re-Positionierungen – ohne Redesign. Pragmatisch, aus Hannover, in 30 Minuten.

Jetzt Layout-Audit anfragen