Wo das Auge hinfällt: Warum Du das F-Pattern auf Deiner Webseite berücksichtigen solltest

Da User im Internet wenig Zeit und Lust haben, lange nach Informationen zu suchen, werden Texte häufig nur überflogen. Wir sind daran gewöhnt, Texte von oben nach unten und von links nach rechts zu lesen. Dieses intuitive Verhalten nutzen wir unbewusst auch bei der Betrachtung von Webseiten, um sie effizient nach Infos abzuscannen.

Schon 2006 wurde In einer Eyetracking-Studie der Nielsen Group gemessen, wie User eine Webseite wahrnehmen und in welcher Reihenfolge einzelne Elemente auf der Seite angesehen werden. Das häufigste Muster ist das sogenannte F-Pattern, bei dem die Augen zuerst in die oberste linke Ecke des Bildschirms schauen, dann die erste Zeile (im Idealfall die Überschrift) gelesen wird, bevor der Blick wieder nach links und die Seite weiter nach unten wandert. So entsteht vage die Form des Buchstaben F, der dem Pattern seinen Namen gibt.

Abbildung 1: Ein Beispiel für das F-Pattern in der Praxis auf der Seite History.com. Hier wurde der Blickverlauf der User mittels Eyetracking gemessen.

Das hat die Folge, dass ein paar wenige Wörter auf der linken Seite verstärkt wahrgenommen werden, während Informationen, die auf Deiner Webseite rechts oder weiter unten stehen schlicht übersehen werden. Auch heute noch gilt dieses Blickmuster – sowohl am Desktop aus auch auf mobilen Geräten. Die Art, wie Menschen online lesen, hat sich nicht verändert, das Design von Websites jedoch schon.

Werfen wir daher einen Blick darauf, was das F-Pattern für unser Webdesign und den Aufbau von Landingpages bedeutet.

F-Pattern als Herausforderung für Webdesigner und Online Marketer

Missachtet man bei der Gestaltung einer Webseite das typische Leseverhalten der User, entsteht eine Landingpage ohne erkennbare rote Linie. Webseiten ohne optischen Wegweiser wirken oft überladen und unübersichtlich, da der User nicht weiß, wo er zuerst hinschauen soll. Wichtige Informationen werden nicht wahrgenommen, einfach dadurch, dass sie unglücklich positioniert sind.

Diese Landingpage von Pest Exterminator beachtet das F-Pattern in ihrem Aufbau nicht und gibt dem Auge keine richtungsweisende Linie vor. Folglich weiß der User nicht, wo er hier zuerst hinschauen soll. Auf die Informationen oben? Die Bilder in der Mitte? Oder auf die drei Angebote ganz unten?

Abbildung 2: Wirkt völlig überladen und missachtet das F-Pattern: Die Landingpage von PestExterminator.com.

Bedenken solltest Du als Webdesigner oder Online-Marketer auch, dass Inhalte durch die responsive Darstellung auf dem Tablet oder Smartphone an eine ganz andere Stelle rücken, als in der Desktop-Ansicht. Da das F-Pattern auch für kleine Displays von mobilen Geräten gilt, sollten auch in der mobilen Ansicht wichtige Inhalte nicht zu weit unten platziert sein. In unserem Artikel zum Thema Mobile Usability geben wir Dir Tipps für das Layout einer guten mobilen Webseite.

Abbildung 3: Ein Paradebeispiel, wie das Layout im F-Pattern das Auge des Besuchers führt, zeigt die Beispielmontage von t3n. (Quelle: Templatemonster/t3n)

Das Auge fällt hier zuerst auf das Logo der Firma sowie auf den Slogan oben links, scannt dann die Navigationspunkte in der Menüleiste ab, um zum Gesicht des Mannes zu springen. Dann wandert der Blick wieder nach links, wo die Headlines mit der wichtigsten Hauptnachricht wahrgenommen werden. Zuletzt sieht sich der User dann die drei Angebote unten in den farbigen Kreisen an.

Ist es also zwingend notwendig, die Webseite F-Pattern freundlich zu gestalten? Jain. Viel besser wäre es, dem Nutzer die generelle Orientierung auf Deiner Webseite zu erleichtern, so dass er gar nicht erst in dieses Pattern verfällt.

Das F-Pattern aufbrechen: Aufmerksamkeit durch visuelle Highlights

Die Nielsen Group fand heraus, dass das F-Pattern die default-Methode darstellt, mit der wir eine Webseite mit viel Text, wie etwa einen Blogpost betrachten. Dies jedoch nur, wenn es keine anderen visuellen Ankerpunkte gibt, die das Auge leiten.

Visuelle Ankerpunkte sind zum Beispiel Fettungen, Überschriften und Subheadlines, Bilder, Zitate oder Nutzer-Bewertungen. Kurzum alles, was den starren Textblock aufbricht und die Aufmerksamkeit auf sich zieht. Geschickt eingesetzt, kannst Du so das Auge gezielt auf Deine Keyfacts lenken und das F-Pattern auflösen.

Tipps zur Optimierung von Landingpages durch optische Highlights:

1. Benutze Headlines und Subheadlines, die auffallen und sich deutlich vom übrigen Text abheben.

2. Idealerweise sollten die Headlines mit den wichtigsten Begriffen beginnen.

3. Content optisch in kleine Gruppen einteilen, zum Beispiel durch Trennlinien, unterschiedliche Hintergrundfarben etc.

4. Wichtige Begriffe fetten.

5. Aussagekräftige Ankerlinks verwenden. Links fallen optisch auf, daher sollten sie auch aussagekräftig benannt werden. Verzichte auf “hier klicken”, “mehr” und ähnliche Bezeichnungen.

6. Benutze Listen.

7. Unnötigen Content kürzen, kürzen, kürzen.

In unserem gesonderten Artikel zum Thema UX Writing bekommst Du zusätzlich eine Menge Tipps, wie Du Webseitentexte leserfreundlich gestaltest.

Wie Du Dir als Online Marketer Eye-Pattern zunutze machst

Wenn Du weißt, wie User eine Webseite ohne Formatierung normalerweise betrachten, kannst du durch visuelle Highlights ihren Blick gezielt führen und so eine Hierarchie der Aufmerksamkeit erzeugen – die den User im Idealfall am Ende direkt auf den CTA lenkt.

Beachte dies vor allem bei Deiner Landingpage – so lässt sich Deine Conversion gezielt steigern.

Auch wenn Du genug Gestaltungselemente auf Deiner Webseite verwendest, ist es ratsam, die wichtigsten Infos an den Anfang und tendenziell nach links zu stellen. Kurze und einfache Sätze mit gezielter Fettung spielen Dir dabei in die Hand.

Neben dem F-Shape ist ein weiteres häufiges Betrachtungsmuster das sogenannte Zick-Zack-Pattern. Vor allem in der mobilen Ansicht und bei Webseiten, die vertikal aufgebaut sind und den User weit nach unten scrollen lassen, kommt das Zick-Zack-Pattern zum Tragen. Bei diesem Muster springen die Augen von einem visuellen Highlight zum nächsten, von links nach rechts und gleichzeitig nach unten. Diese Art von Seitenaufbau wirkt dynamisch und erzeugt Spannung. Wichtig: auch hier ist die gezielte Führung durch eine klare (vertikale) Linie essenziell.

Ausblick Eye-Pattern: Das Pinball-Pattern auf dem Vormarsch in den Google SERPS

Durch die immer detaillierteren Search Snippets in den SERPS bei Google hat sich dort ein neues Eyetracking-Muster entwickelt, das Pinball-Muster. Nichtlinear springt das Auge vom klassischen Suchergebnis links zum optisch auffälligen Snippet-Feature und weiter zur Infobox auf der rechten Seite – um von dort wieder zurück zu den gelisteten Suchergebnissen zu kehren.

Abbildung 4: Das Pinnball-Pattern nach der NNGroup. (Quelle: NNGroup)

Die visuellen SERP-Features wie die Infobox, die einen Textauszug der Seite zeigt, eine Karte mit der Standortanzeige des Unternehmens sowie das Vorschaubild ziehen das Auge an und dienen als Wegweiser. So bekommt der User direkt Feedback, ob die Ergebnisse relevant zu seiner Suche sind. Durch die relativ neuen „Nutzer fragen auch“-Einblendungen präsentiert Google dem Nutzer weitere Varianten seiner Fragestellung und lässt ihn so tiefer ins Thema vordringen. Der positive Nebeneffekt für Google: Der User bleibt auf der Seite und erhält Informationen direkt, ohne dass er das Ergebnis anklicken muss.