Fokussieren

Webseiten und Interfaces sind vollgepackt mit Informationen. Designer gehen davon aus, dass Nutzer alles sehen, was auf dem Bildschirm angezeigt wird – schließlich ist es ja da. Doch Nutzer berichten, dass sie wichtige Buttons übersehen, Hinweise nicht wahrnehmen, selbst große Banner ignorieren. Die Frage ist: Wie funktioniert das menschliche Sehen technisch, welche Bereiche werden scharf wahrgenommen und welche nicht – und welche Evidenz ist dazu bekannt?

Studien

Blickbewegungen bei Bildbetrachtung

Alfred Yarbus führte 1967 am Institut für Informationsübertragung in Moskau wegweisende Eye-Tracking-Experimente durch. Er zeigte Versuchspersonen das berühmte Gemälde 'Die unerwarteten Besucher' von Ilja Repin – einmal ohne Aufgabe, einmal mit spezifischen Fragen wie 'Schätze das Alter der Personen' oder 'Was haben die Personen gemacht, bevor der Besucher kam'. Das verblüffende Ergebnis: Die Blickbewegungen unterschieden sich radikal je nach Aufgabe. Bei der Altersschätzung fixierten Probanden fast ausschließlich Gesichter. Bei der Frage nach vorherigen Aktivitäten wanderten die Augen zu Objekten und Kleidung. Ohne Aufgabe waren die Blickmuster diffuser. Die Erkenntnis: Menschen sehen nicht einfach 'alles' – sie schauen gezielt dort hin, wo sie relevante Informationen erwarten. Nur diese 2-3° pro Fixation werden bewusst verarbeitet.

F-Pattern beim Website-Scanning

Jakob Nielsen und Kara Pernice führten 2006 bei Nielsen Norman Group eine umfassende Eye-Tracking-Studie mit 232 Nutzern durch, die verschiedene Webseiten betrachteten. Die Heatmaps zeigten ein konsistentes F-förmiges Muster: Nutzer lasen die ersten Zeilen horizontal, dann vertikal entlang der linken Seite nach unten, gelegentlich mit horizontalen Ausschlägen. Durchschnittlich wurden nur 20-28% des Textes tatsächlich fixiert. Der entscheidende Befund: Informationen außerhalb dieses F-Musters wurden praktisch nicht wahrgenommen, selbst wenn sie farblich hervorgehoben waren. Ein Button rechts oben wurde von 82% der Nutzer nicht gesehen, obwohl er auf dem Bildschirm war. Die Implikation: Die foveale Beschränkung kombiniert mit gelernten Scanmustern bedeutet, dass Designer nicht platzieren können, wo sie wollen – sie müssen platzieren, wo Nutzer hinschauen.

Prinzip

Welches Prinzip für Customer Experience Design lässt sich daraus ableiten? Das Prinzip des fovealen Sehens macht deutlich, dass entscheidungsrelevante Informationen strategisch im zentralen Sichtfeld platziert werden müssen, da Nutzer nur wahrnehmen, wohin sie aktiv schauen. In der Customer Experience bedeutet dies, dass wichtige Elemente wie Call-to-Action-Buttons, Preise oder Produktvorteile dort positioniert werden sollten, wo der natürliche Blickverlauf sie erfasst – nicht in der visuellen Peripherie, wo sie unbemerkt bleiben. Besonders kritisch wird dies bei komplexen Interfaces oder informationsreichen Seiten, wo Nutzer schnell überfordert sind und wichtige Details übersehen können. Das Prinzip funktioniert jedoch nur dann optimal, wenn Designer die natürlichen Blickpfade ihrer Zielgruppe verstehen und entsprechend gestalten. Die folgenden Guidelines zeigen, wie sich dieses Prinzip konkret umsetzen lässt.

Guidelines

CTAs im natürlichen Blickpfad platzieren

Platziere wichtige Call-to-Actions und Entscheidungselemente dort, wo Nutzer ohnehin hinschauen – nicht dort, wo es designtechnisch passt. Eye-Tracking-Studien zeigen: Bei westlichen Sprachen ist das typischerweise oben links beginnend, dann in F-Form. Bei Produktseiten fixieren Nutzer zuerst das Produktbild, dann den Preis, dann die Headline. Der 'Kaufen'-Button sollte im unmittelbaren Anschluss an diese natürliche Sequenz folgen, nicht isoliert rechts oben. Teste mit 5-Sekunden-Tests: Wenn Nutzer den Button nach 5 Sekunden nicht nennen können, liegt er außerhalb des typischen Blickpfads.

Kritische Informationen in ersten zwei Zeilen

Die wichtigste Information muss in den ersten 1-2 Textzeilen stehen, da diese am wahrscheinlichsten fixiert werden. Nutzer lesen nicht linear – sie scannen. Die ersten Wörter jedes Absatzes bekommen mehr foveale Aufmerksamkeit als der Rest. Formuliere daher frontloaded: Erst die Kernaussage, dann Details. NICHT: 'Unter Berücksichtigung aller Faktoren und nach Prüfung der Alternativen haben wir festgestellt, dass...' SONDERN: 'Ergebnis: Sie sparen 30%. Details: Nach Prüfung aller...' Bei wichtigen Warnhinweisen oder Konditionen: Niemals am Ende eines langen Textes verstecken. Das fällt juristisch unter 'überraschende Klauseln', weil die Fovea sie dort faktisch nicht erreicht.

Räumliche Nähe nach kognitiver Abhängigkeit

Platziere zusammengehörige Informationen in unmittelbarer räumlicher Nähe – maximal 5° Sehwinkel auseinander. Jede größere Distanz erfordert eine Sakkade (Blicksprung), und mit jeder Sakkade steigt die Wahrscheinlichkeit, dass die Information nicht verarbeitet wird. Beispiel Produktseite: Preis, Verfügbarkeit und Kaufbutton müssen so nah sein, dass sie mit maximal 2 Fixationen erfasst werden. Wenn der Preis oben, die Verfügbarkeit in der Mitte und der Button unten steht, muss der Nutzer drei separate Entscheidungen treffen: Wohin schauen, was bedeutet es, wo war nochmal der Button? Diese kognitive Last führt zu Abbruch. Faustregel: Was gedanklich zusammengehört, muss visuell in einem 'Blick' erfassbar sein.

Hoher Kontrast für periphere Orientierung

Während die Fovea Details erkennt, dient die Peripherie der Orientierung und der Erkennung, wo als nächstes zu fixieren lohnt. Nutze starken Kontrast (mindestens 4.5:1, besser 7:1) für wichtige Elemente, damit sie peripher 'auffallen', bevor die Fovea dort ankommt. Ein Button in zartem Grau auf weißem Hintergrund wird peripher nicht erkannt – die Augen wissen nicht, dass es sich lohnt, dorthin zu springen. Ein Button in kräftigem Blau oder Orange aktiviert periphere Bewegungssensoren und zieht die Sakkade an. Das ist besonders kritisch für Fehlerhinweise und Warnungen: Sie müssen peripher als 'wichtig' signalisiert werden, sonst richtet sich die Fovea nie auf sie. Rot funktioniert dafür evolutionär – es wird auch bei 20° peripherer Distanz noch als 'Alarm' registriert.