← Zurück zu Grundlagen Gestaltung
Blickverlauf bezeichnet die zeitliche Abfolge, in der das Auge verschiedene Bereiche eines visuellen Layouts fixiert, und die charakteristischen Muster, die dabei entstehen.

Rubrik: Grundlagen der Gestaltung · Unterrubrik: Visuelle Wahrnehmung · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Eye-Tracking-Muster, Gaze Path, Scanpath, Blickpfad

Was ist Blickverlauf?

Das menschliche Auge bewegt sich nicht kontinuierlich über eine Seite, sondern springt in schnellen Bewegungen (Sakkaden) von Fixationspunkt zu Fixationspunkt. Nur während der Fixationspausen (ca. 200–400 ms) nimmt das Auge Information auf; während der Sakkaden selbst (20–200 ms) ist die visuelle Verarbeitung weitgehend unterdrückt (sakkadische Suppression). Eye-Tracking-Technologie macht diese natürlichen Blickmuster sichtbar und hat in den letzten 30 Jahren umfangreiche Erkenntnisse über typische Lesemuster geliefert, die direkte Konsequenzen für Layout, Typografie und Interfacedesign haben.

Erklärung

Sakkaden und Fixationen: Die Mechanik des Blicks

Sakkaden sind schnelle, ballistische Augenbewegungen. Sie sind die schnellsten Bewegungen des menschlichen Körpers (bis 900°/s). Während einer Sakkade kann die Blickrichtung nicht korrigiert werden – das Gehirn plant den nächsten Fixationspunkt und führt die Sakkade aus. Die Länge von Sakkaden korreliert mit der visuellen Komplexität: In einfachen, gut strukturierten Layouts sind Sakkaden länger (größere Sprünge, schnellere Exploration); in komplexen, informatich dichten Layouts kürzer (engere Abtastung).

Fixationen dauern 200–400 ms bei normalem Lesen, länger bei schwieriger Verarbeitung. Die Fixationsdauer ist ein guter Indikator für kognitive Belastung (→ Kognitive Belastung): Längere Fixationen signalisieren Verarbeitungsschwierigkeiten. Heatmaps aggregieren Fixationsdauern über viele Probanden und machen „heiße" (lange/häufige Fixation) und „kalte" (kurz/selten fixierte) Bereiche sichtbar.

F-Pattern (Nielsen, 2006)

Jakob Nielsen und seine Kollegen bei Nielsen Norman Group analysierten in einer Studie von 2006 Eye-Tracking-Daten von 232 Benutzern beim Lesen von Webseiten und identifizierten das F-Pattern:

  1. Erste horizontale Bewegung: Die Nutzer beginnen am oberen linken Rand und scannen horizontal nach rechts – die erste Zeile wird ausführlich gelesen
  2. Zweite horizontale Bewegung: Etwas weiter unten folgt eine zweite horizontale Sakkade, oft kürzer als die erste
  3. Vertikale Bewegung: Schließlich scannen die Augen vertikal auf der linken Seite hinunter

Das entstehende Muster ähnelt dem Buchstaben F. Die Implikation: Inhalte auf der rechten Seite und im unteren Bereich erhalten wenig Aufmerksamkeit. Schlüsselaussagen gehören in die erste Hälfte der ersten Zeile.

Grenzen des F-Patterns: Das F-Pattern gilt primär für textlastige, unstrukturierte Seiten. Gut strukturierte Layouts mit klaren visuellen Hierarchien, Bildunterschriften, Subheadlines und Bullet Points durchbrechen das F-Pattern positiv – Nutzer fixieren die hervorgehobenen Strukturelemente und scannen effizienter.

Z-Pattern

Das Z-Pattern beschreibt das Scanmuster auf Seiten mit wenig Text und starken visuellen Elementen (Landing Pages, Werbeanzeigen, Poster). Der Blick folgt einer Z-förmigen Linie:

  1. Oben links → oben rechts (horizontale Linie)
  2. Diagonal nach unten links (diagonale Linie)
  3. Unten links → unten rechts (horizontale Abschlusslinie)

Designende nutzen das Z-Pattern, um wichtige Elemente (Logo, Headline, Call-to-Action) entlang dieser Linie zu positionieren.

Kulturelle Abhängigkeit: Z- und F-Pattern gelten für links-nach-rechts-lesende Kulturen. In arabischen und hebräischen Schriftsystemen (rechts nach links) sind die Muster gespiegelt. In asiatischen Schriften mit vertikalen Textrichtungen entstehen wiederum andere Muster.

Layer-Cake-Muster und Chunk-Scanning

Gut strukturierte Seiten erzeugen ein Layer-Cake-Muster: Überschriften und Unterüberschriften erzeugen horizontale Fixationszeilen, dazwischen werden Textbereiche nur angetippt oder übersprungen. Leser nutzen den Text als "Chunks" und entscheiden an Überschriften, ob ein Abschnitt für ihre aktuelle Aufgabe relevant ist.

Eye-Tracking-Methoden

Moderne Eye-Tracker verwenden Infrarotlicht-Reflexion auf der Hornhaut (Purkinje-Reflex) und Pupillenverfolgung, um Blickpositionen mit <1° Genauigkeit bei 60–1200 Hz Samplerate zu messen.

Methoden der Datenvisualisierung:

  • Heatmaps: Überlagern Fixationsdichte auf das Stimulus-Bild. Rot = hohe Fixationsdichte, blau/grün = niedrige Dichte. Einfach verständlich, aber verlieren zeitliche Information.
  • Scanpaths (Blickpfade): Zeigen die zeitliche Abfolge der Fixationen als numerierte Punkte mit verbindenden Linien. Schwerer zu lesen bei vielen Probanden, aber zeigt Strategien und Reihenfolge.
  • Focus Maps: Wie Heatmaps, aber zeigen Bereiche klar vs. unscharf (Aufmerksamkeitsfokus).
  • Gaze Replay: Videoaufzeichnung des Blickverlaufs in Echtzeit, ermöglicht tiefe Einzelfallanalyse.

Implizite Blicklenkung: Bildkomposition

Bilder lenken Blicke durch inhaltliche und formale Mittel:

  • Gesichter und insbesondere Blickrichtungen von Personen im Bild lenken Betrachterblicke: Ein Gesicht, das nach rechts schaut, führt Betrachter nach rechts.
  • Linien und Vektoren (Straßen, Zeiger, Pfeile) lenken den Blick entlang ihrer Richtung.
  • Kontrast und Helligkeit erzeugen exogene Aufmerksamkeitstrigger (→ Aufmerksamkeit im Design).

Beispiele

  • News-Webseiten: F-Pattern-konformes Layout: Wichtigste Nachricht oben links, Schlagzeilen als klar erkennbare Blocks, breite erste Spalte für Primärinhalt.
  • E-Commerce: Z-Pattern auf Produktseiten: Logo oben links, Vertrauen-Siegel oben rechts, Produktbild im Zentrum, CTA-Button unten rechts.
  • Printanzeige: Blickverlauf von oben rechts (Bild mit Model, das nach links schaut) → Headline links → Produktname → Preis unten.

In der Praxis

A/B-Testing mit Eye-Tracking: Häufig kombiniert, um zu messen, ob eine Layout-Variante den intendierten Blickpfad erzeugt. Fixationsdauer auf CTA-Button vor und nach Redesign ist ein direkter Wirksamkeitsindikator.

Above-the-fold-Optimierung: Inhalte, die ohne Scrollen sichtbar sind, erhalten nachweislich mehr Fixationen. Schlüsselbotschaften und CTAs sollten daher „above the fold" positioniert sein.

Lesbarkeit optimieren: Kurze Paragraphen, häufige Subheadlines, Bullet Points – alles unterstützt effizientes Chunk-Scanning und durchbricht monotone F-Pattern-Degeneration.

Vergleich & Abgrenzung

Eye-Tracking vs. Klickdaten (Analytics): Eye-Tracking misst, was angesehen wird; Klickdaten messen, was angeklickt wird. Ein Element kann viele Fixationen, aber wenige Klicks haben (interessant aber nicht handlungsauslösend) – beide Datenschichten sind für vollständiges Verständnis nötig.

Häufige Fragen (FAQ)

Stimmt das F-Pattern immer? Nein. Es beschreibt eine Tendenz bei textschweren, wenig strukturierten Seiten. Gutes Design mit klarer visueller Hierarchie verändert den Blickpfad signifikant. Nielsen selbst betont, dass F-Pattern ein Versagen des Designs anzeigt, nicht ein anzustrebendes Muster.

Wie lange dauert ein Eye-Tracking-Test? Für valide Ergebnisse werden mindestens 30–40 Probanden empfohlen. Ein Session pro Proband dauert typisch 30–60 Minuten. Günstige Remote-Eye-Tracking-Werkzeuge (z. B. Hotjar, Tobii) erlauben skalierbare Untersuchungen.

Verwandte Einträge

Weiterführend

  • Nielsen, J., & Pernice, K. (2010). Eyetracking Web Usability. New Riders.
  • Rayner, K. (1998). Eye movements in reading and information processing: 20 years of research. Psychological Bulletin, 124(3), 372–422.
  • Wedel, M., & Pieters, R. (Hrsg.) (2008). Visual Marketing: From Attention to Action. Lawrence Erlbaum.
  • Duchowski, A. T. (2007). Eye Tracking Methodology: Theory and Practice (2. Aufl.). Springer.
← Zurück zu Grundlagen Gestaltung
Infotag · 13. Mai · 15:00 Uhr · Vor Ort

Sei am Mittwoch dabei.
Bring Eltern oder Freunde mit.

Ein halber Nachmittag, der dir drei Jahre Klarheit bringen kann. Kostenlos, unverbindlich, ehrlich.

  • Rundgang durch Studios, Schnitträume und Tonstudio
  • Echte Absolventenfilme sehen
  • 1:1-Beratung zu Bewerbung & BAföG
  • Studierende direkt fragen
  • Kaffee, kein Sales-Pitch
  • Auch online möglich

Platz beim Infotag reservieren

Dauert 30 Sekunden. Bestätigung per E-Mail.
100 % kostenlos · keine Verpflichtung · jederzeit absagbar