Menschen lesen online anders als offline. Das hat un­ter­schied­li­che Gründe: Zum einen wird online langsamer gelesen – bis zu 25 Prozent. Gleich­zei­tig sieht sich der Nutzer im Netz mit einer un­glaub­li­chen Menge an In­for­ma­tio­nen kon­fron­tiert. Beides führt dazu, dass On­linen­ut­zer bzw. -leser un­ge­dul­dig werden. Zeile für Zeile, wie durch einen guten Roman, bewegt sich kaum jemand durch einen On­line­text, sei es ein News-Artikel oder eine Pro­dukt­be­schrei­bung. Im Internet wird gescannt, über­flo­gen, durch­kämmt und durch­fors­tet. Dies gilt es bei der Ge­stal­tung von Web­pro­jek­ten und Content-Kampagnen zu be­rück­sich­ti­gen. Wir erklären, was es genau mit dem so­ge­nann­ten F-Pattern auf sich hat und welche Kon­se­quen­zen sich daraus für die Zu­sam­men­ar­beit von Kreation und Redaktion sowie für die Such­ma­schi­nen­op­ti­mie­rung ergeben.

Das F-Pattern bzw. F-Muster

Mit Blick auf das Le­se­ver­hal­ten im Netz haben sich im Laufe der Zeit ver­schie­de­ne Muster her­aus­kris­tal­li­siert. Das so­ge­nann­te F-Muster oder F-Pattern spiegelt das gängige Be­trach­tungs­mus­ter der meisten In­ter­net­nut­zer wider. Denn ein durch­schnitt­li­cher User fährt in Form eines „F“ über den Text:

  • Der Nutzer scannt zunächst die Ho­ri­zon­ta­le am Sei­ten­an­fang, dem ersten Absatz wird noch gleich­mä­ßi­ge Auf­merk­sam­keit zuteil. So entsteht der erste Balken des F-Musters.
  • Später geht der Blick dann vertikal am linken Rand des Textes entlang. Der User liest die ersten Wörter eines Absatzes und springt dann in die nächste Zeile – er scannt zunächst den Text. Die Elemente im rechten Bereich des Bild­schirms werden zunächst nicht bewusst wahr­ge­nom­men.
  • Nach dem ersten Scan sucht der Nutzer nach für ihn re­le­van­ten In­for­ma­tio­nen. Iden­ti­fi­ziert er relevante Schlag­wor­te, geht der Blick ein zweites Mal ho­ri­zon­tal nach rechts, es entsteht der zweite Balken des F-Musters.
  • Im weiteren Verlauf bleiben die Blicke weiter am linken Rand und wandern vertikal nach unten ans Sei­ten­en­de.

Das so­ge­nann­te F-Pattern hat seinen Ursprung in der Ver­hal­tens­psy­cho­lo­gie und geht auf ein lange an­trai­nier­tes Muster aus der Off­line­welt zurück. Denn auch Fließ­tex­te auf Papier liest man in der Regel von links nach rechts und von oben nach unten (Ausnahme: Sprachen, in denen von rechts nach links gelesen wird, z. B. Arabisch). Der Un­ter­schied im Web: Es wird nicht mehr Wort für Wort gelesen, der Leser springt von Zeile zu Zeile, den Fokus auf die An­fangs­wor­te. Bewiesen haben das zahl­rei­che Studien der Usability-Forschung, den Ausdruck „F-Pattern“ hat der Usability-Experte Jacob Nielsen geprägt. Mithilfe von Eye-Tracking hat seine Studie schon 2006 beweisen, dass das F-Muster dem Blick­ver­lauf von Nutzern auf Websites am ehesten ent­spricht. Dafür hat er die Blick­be­we­gung von Menschen beim Be­trach­ten von Webseiten ana­ly­siert.

Exkurs: Eye-Tracking

Eye-Tracking ist eine Methode, um den Be­trach­tungs­ver­lauf bzw. die Blick­be­we­gun­gen von Menschen zu iden­ti­fi­zie­ren. Mit so­ge­nann­ten Eye-Trackern zeichnet man die Blick­be­we­gun­gen auf und ana­ly­siert diese später. Als wis­sen­schaft­li­che Methode wird das Eye-Tracking der Neu­ro­wis­sen­schaft zu­ge­ord­net, kommt aber vor allem in der Wahr­neh­mungs-, Ko­gni­ti­ons- und Wer­be­psy­cho­lo­gie zum Einsatz. Auch Pro­dukt­de­sign und Le­se­for­schung machen von der Methode Gebrauch. Und so dient es auch dazu, die Le­se­ge­wohn­hei­ten im Internet zu er­for­schen.

Im On­line­mar­ke­ting und Webdesign spricht man heute meist von so­ge­nann­tem He­at­map­ping. Heatmaps sind ana­ly­ti­sche Dar­stel­lungs­for­men zur Vi­sua­li­sie­rung von Daten – in diesem Zu­sam­men­hang zeigen sie das Nut­zer­ver­hal­ten bzw. Le­se­ver­hal­ten im Netz und helfen, den Aufbau von Websites zu ana­ly­sie­ren und zu op­ti­mie­ren. Ein Heatmap arbeitet mit Farb­ab­stu­fun­gen, in der Regel von Rot (für ganz heiß) bis Blau (kalt). Überträgt man die Eye-Tracking-Analyse auf die Heatmap, bedeuten dun­kel­ro­te Felder, dass ein Nutzer an dieser Stelle sehr lange mit seinem Blick verweilt hat. Dun­kel­blaue Bereiche hat er hingegen gar nicht wahr­ge­nom­men. Zur besseren Analyse und Usability-Op­ti­mie­rung werden beim He­at­map­ping im On­line­mar­ke­ting auch weitere Parameter wie Klicks und Maus­be­we­gun­gen hin­zu­ge­zo­gen.

Das F-Pattern bei On­line­tex­ten

Nicht nur Texte, auch Über­sichts­sei­ten, Landing­pa­ges oder News­let­ter sollten nach dem F-Pattern gestaltet sein. Das heißt ver­ein­facht aus­ge­drückt: Man sollte wichtige Elemente nicht am rechten Sei­ten­rand oder im unteren Teil der Ansicht plat­zie­ren. Die wich­tigs­te Aussagen, In­for­ma­tio­nen, Keywords und Schlag­wör­ter sollten dagegen immer zu Beginn der Absätze bzw. Über­schrif­ten zu finden sein. Zentrale In­for­ma­tio­nen und Bot­schaf­ten sind möglichst weit oben auf der Seite und früh in den ersten Absätzen un­ter­zu­brin­gen.

Das F-Muster in der Praxis: 3 Tipps für op­ti­mier­te Texte

  1. Auf den Punkt kommen: Versuchen Sie möglichst, we­sent­li­che Bot­schaf­ten im ersten Text­ab­schnitt un­ter­brin­gen. Fassen Sie sich kurz, kommen sie schnell auf den Punkt. Vermeiden Sie besonders Aus­schmü­ckun­gen oder unnötige In­for­ma­tio­nen innerhalb des F-Patterns. Es gilt: Das Wich­tigs­te zuerst. Wichtige In­for­ma­tio­nen sollte man nicht zu spät bringen, auch wenn es der dra­ma­tur­gi­sche Aufbau des Textes anders vorsieht.
  1. Struktur schaffen: Bei Online-Content sollte man auf struk­tu­rie­ren­de Stil­ele­men­te setzen: Auf­zäh­lun­gen, Absätze und (Zwischen-)Über­schrif­ten sind gefragt. Die vor­ge­ge­be­ne Struktur er­mög­licht dem Nutzer das ein­fa­che­re Scannen des Textes.
  1. Fokus auf Über­schrif­ten: Haupt- und Zwi­schen­über­schrif­ten sind mehr als nur Struk­tu­rie­rungs­ele­men­te eines Textes. Griffige Über­schrif­ten mit re­le­van­ten Schlag­wör­tern dienen als zentrales An­ker­ele­ment für den Leser. Bei der Tex­terstel­lung sollte man deshalb aus­rei­chend Zeit für die Er­stel­lung von Über­schrif­ten einplanen.

F-Muster im Webdesign

Das F-Pattern ist als eines der be­kann­tes­ten und grund­le­gen­den Konzepte auch wichtig zur Er­stel­lung von Layouts und damit relevant für die Arbeit von Web­de­si­gnern wie Re­dak­teu­ren.

Web­de­si­gner nutzen das F-Layout, um dem Nutzer in seinem na­tür­li­chen Le­se­ver­hal­ten im Netz ent­ge­gen­zu­kom­men. Für den Nutzer fühlt sich das Layout in der Kon­se­quenz gewohnt an. Die wich­tigs­ten In­for­ma­tio­nen kann er in der gewohnten Richtung von links nach rechts und von unten nach oben aufnehmen.

Was auf Websites in der Regel als erstes wahr­ge­nom­men wird, ist das Branding mit Logo und Name – was man meist am Kopf der Seite oder zumindest im oberen linken Bereich findet. Es folgt der In­halts­teil. Dabei sollte man sich bewusst machen, dass Bilder die meiste Beachtung finden, dicht gefolgt von Über­schrif­ten. Der Fließtext bekommt kaum Auf­merk­sam­keit, er wird nach Schlag­wor­ten gescannt und kurz über­fol­gen. Fettungen und Un­ter­über­schrif­ten dienen dem Leser als Anker oder Fixpunkt. Soviel zur Theorie.

Die Her­aus­for­de­rung für die Zu­sam­men­ar­beit von Kreation und Redaktion ist nun, das Gleich­ge­wicht zu finden: Die visuellen An­ker­punk­te geschickt zu nutzen und gleich­zei­tig Text und Inhalte nicht zu ver­nach­läs­si­gen. Denn Bilder und Headlines stechen als erstes heraus. Der Fließtext verliert an Beachtung. Wich­tigs­te Aussagen sollte man deshalb möglichst früh im Text un­ter­brin­gen, damit Inhalte nicht ver­nach­läs­sigt werden. Damit die Designer nicht an ge­stal­te­ri­scher Freiheit einbüßen müssen, bedarf es kreativer Ideen für eine Umsetzung mit guter Ty­po­gra­fie und in­no­va­ti­ven Sei­ten­kom­po­nen­ten. Grafiker müssen sich dafür in­ten­si­ver mit Texten be­schäf­ti­gen, Texter sich um grafische Ge­stal­tung Gedanken machen.

So entstehen neue Konzepte, z. B. ein so­ge­nann­tes Z-Pattern. Das Z-Muster ist eine weitere empirisch be­ob­acht­ba­re Le­se­ge­wohn­heit im Internet: Das Auge folgt beim Scannen einer Website einem Z, d. h. der Lesefluss beginnt in der linken oberen Ecke, bewegt sich ho­ri­zon­tal nach rechts, um dann diagonal nach unten links und an­schlie­ßend wieder ho­ri­zon­tal nach rechts zu wandern.

Bedeutung des F-Patterns in der Such­ma­schi­nen­op­ti­mie­rung

Das Le­se­ver­hal­ten im Netz gilt auch als wichtiger Aspekt bei der Such­ma­schi­nen­op­ti­mie­rung. Das F-Muster hilft Website-Be­trei­bern, ihr Angebot so zu gestalten, dass das In­for­ma­ti­ons­be­dürf­nis des einzelnen Nutzers best­mög­lich gestillt wird. Die Op­ti­mie­rung der Usability zielt darauf ab, dass der Nutzer möglichst schnell und einfach an den Kern seiner Such­in­ten­ti­on finden und die für ihn relevante(n) In­for­ma­ti­on(en) erfassen kann – ein wichtiges, wenn nicht das Haupt­kri­te­ri­um für Google bei der Bewertung von Web­an­ge­bo­ten.

Und auch ein anderer Aspekt ist sehr bedeutsam für das Thema Such­ma­schi­nen­op­ti­mie­rung: Auch bei den SERPs, den Such­ergeb­nis­lis­ten von Google, gehen Nutzer nach dem klas­si­schen F-Muster vor. Mitt­ler­wei­le gibt es zahl­rei­che Eye-Tracking-Studien, die Einblick in die Sicht­wei­se des Nutzers auf die Google-SERPs gewähren. Wenn man weiß, wo ein Nutzer besonders lange hinschaut, kann man als SEO-Ver­ant­wort­li­cher auch besser steuern, was man ihm prä­sen­tiert. Das spielt dann bei der Ge­stal­tung von Meta-Title und De­scrip­ti­on eine wichtige Rolle. Mittels richtiger Plat­zie­rung von Si­gnal­wör­tern und Keywords kann man einen Vorteil her­aus­ho­len. Auch Eye-Catcher wie Icons und Caps werden immer wichtiger.

Zum Hauptmenü