Manchmal werden Designs minutiös und mit großer Sorgfalt gestaltet, andere Male wiederum willkürlich und beinahe unbewusst. Ob wir es nun absichtlich tun oder nicht, jedes Mal, wenn wir etwas designen, geben wir der Sache einen Fluss. Der Schlüssel besteht darin zu wissen, wie man den Fluss kontrolliert, um unser Ziel zu erreichen, besonders bei etwas, das so sehr im Fokus steht wie eine Landingpage. Wie macht man das? Stell dir selbst drei wichtige Fragen:

  1. Worauf wird sich das Auge des Betrachters zuerst konzentrieren?
  2. Was wird beeinflussen, wohin sich die Augen als nächstes bewegen, und worauf werden sie sich im Anschluss konzentrieren?
  3. Können wir unsere Seiten so gestalten, dass wir ihren Fokus kontrollieren, um sie zu unserem auserwählten Ziel zu führen?

Es gibt mehrere Tools und Theorien, die uns dabei helfen können, die Antworten darauf zu finden und Landingpages mit einem gewollten Fluss zu gestalten, der deine Betrachter zum CTA (Call-to-Action) führt und sie mit größerer Wahrscheinlichkeit zum Handeln bringt.

Als wichtiges Werkzeug hat Eye-Tracking verdeutlicht, wie Menschen auf etwas schauen – sowohl auf gedruckten Seiten als auch im Web. Wenn es um Landingpages geht, ist es besonders wichtig zu verstehen, wie Menschen die von uns erzeugten Seiten wahrnehmen:

An dieser Stelle kommen die Augenbewegungsmuster ins Spiel.

Eye-Tracking: Schau, wohin sie schauen

eyeball
von 3dRadiance

Eye-Tracking hat verdeutlicht, wie Menschen Dinge betrachten – sowohl auf gedruckten Seiten als auch im Web. Als Studienfach kam es in den 1980er Jahren auf, aber Beobachtungen darüber, wie sich die Augen über eine Seite bewegen, wurden bereits im frühen 18. Jahrhundert gemacht. Historiker bezeichnen Louis Émile Javal als den Ersten, der beobachtet hat, dass die Augen nicht sanft über eine Seite hinweggleiten, sondern Lesen aus einer Reihe von Fixierungen und ruckartigem Anhalten besteht – sie stoppen, um einen Punkt zu fokussieren, gefolgt von einer schnellen Bewegung zum nächsten Fokuspunkt.

Natürlich warf dies einige Fragen darüber auf, weshalb man sich auf eine bestimmte Sache fokussiert und nicht auf eine andere und wie man sich entscheidet, was man als Nächstes fokussiert. Diese Fragen bildeten die Grundlagen für die beinahe ein Jahrhundert lange Erforschung des Eye-Trackings. Während mittlerweile ein bedeutender Fortschritt erzielt wurde, diese Fragen zu beantworten, bleiben sie dennoch auch heutzutage ein faszinierender Punkt.

Das F-Muster

Die Ergebnisse der Nielsen Norman Group, zusammengefasst in verschiedenen Berichten, sind weiterhin die wahrscheinlich meist zitierten und nützlichsten Quellen zum Thema Eye-Tracking für die Design-Community. Als wichtigster unter ihren Berichten beschreibt dieser das heute bekannte F-Muster:

  1. User lesen zuerst in einer horizontalen Bewegung, normalerweise über den oberen Teil des Inhaltsbereichs. Dieses erste Element bildet den oberen Balken des F.
  2. Als Nächstes gehen User ein Stück die Seite runter und lesen in einer zweiten horizontalen Bewegung, die typischerweise einen kürzeren Abschnitt abdeckt als die vorherige Bewegung. Dieses zusätzliche Element bildet den unteren Balken des F.
  3. Zum Schluss überfliegen User die linke Seite des Inhalts in einer vertikalen Bewegung. Dieses letzte Element bildet den Stamm des F.

Die folgende Heatmap veranschaulicht das F-Muster:

heat map of eye tracking on web page
via Nielsen Norman Group

Ohne etwas absichtlich zu platzieren, das ihre Aufmerksamkeit erregt, beschreibt das F-Muster, wie die Augen eines Menschen sich über eine Seite mit viel Text bewegen, und ist so besonders für Seiten wie Blogs und Suchmaschinen zutreffend.  

Besonders zu beachten ist, dass die Augen in der linken oberen Ecke anfangen, bevor sie die Seite nach unten hin abtasten, auf der Suche nach etwas Interessantem oder Relevanten. Wenn du etwas hast, auf das jemand seine Aufmerksamkeit legen soll (z. B. ein Leistungsversprechen) – und deine Seite ist sehr textlastig, ist es eine gute Idee, es in Richtung der oberen linken Ecke zu platzieren, um sicherzustellen, dass es die Aufmerksamkeit bekommt, die es verdient.

Es ist ebenfalls erwähnenswert, dass F-Muster nicht immer dem traditionellen F mit zwei horizontalen Balken folgen müssen. Um das zu veranschaulichen, zeigt die Landingpage von Fleetmatic drei Balken (Logo, Überschrift, CTA), aber das F-Muster ist immer noch klar sichtbar:

F pattern on Fleetmatic landing page

Das Z-Muster

Seiten mit weniger informationeller Dichte oder wie Jerry Cao schreibt „planvolle Verlierer“ tendieren dazu, eine Augenbewegung hervorzurufen, die dem Buchstaben Z ähneln. Dieses sogenannte Z-Muster hat viel mit dem F-Muster gemein, aber wie Cao betont: „Wo Einfachheit eine Priorität ist und Call-to-Action die wichtigste Folgerung, entsteht anstelle des F-Musters das Z-Muster.

Dieser Fokus auf Einfachheit macht das Z-Muster perfekt für Landingpage Design, bei dem du den Fokus der Leute auf einen bestimmten Punkt lenken und sie zum Handeln animieren möchtest. Um einen Vorteil aus dem Z-Muster zu ziehen, platziere deine Call-to-Action entlang des Z-Pfades, um dafür zu sorgen, dass der Betrachter es sieht. Dies wird zu mehr Conversions führen.

Sieh dir Offerpops Landingpage an und wie sie das Z-Muster anwenden und somit mehr Aufmerksamkeit auf Eingabemaske und CTA lenken:

z patter on offerpop landing page

Die oberen Beispiele verwenden Landingpages – Seiten, auf denen ein einziges Ziel im Mittelpunkt steht – um die effektive Nutzung von F- und Z-Mustern zu demonstrieren. Beachte, wie der Hauptbestandteil jeder Seite, der CTA im ersten Beispiel und die Eingabemaske im zweiten Beispiel, genau entlang des Pfades platziert sind, den ein Auge natürlicherweise geht, wenn es eine Seite betrachtet. Deine wichtigsten Bestandteile auf diese Weise entlang dieses Pfades zu platzieren und die Landingpage ein wenig zu optimieren, wird dafür sorgen, mehr Konversionen zu erreichen. Manchmal passt dieser Pfad exakt zum F- oder Z-Muster, aber im Kern geht es darum, visuelle Hierarchie zu nutzen, um die Menschen zu leiten.

Visuelle Hierarchie: Der Schlüssel zu gutem Design

Sowohl das F- als auch das Z-Muster sind sehr gut dokumentiert und wurden von Designern äußerst wirkungsvoll quer durchs Netz angewendet. Ohne einen anderen, absichtlich geschaffenen Fluss sind dies die Muster, denen die Augen folgen. Und dies ist extrem nützliches Wissen, wenn man eine Seite erstellt.

Letztendlich allerdings geht es bei Design darum, Menschen zu deinem erwünschten Ziel zu führen. F- und Z-Muster sind zweifelsohne wirkungsvolle Werkzeuge, aber noch wirkungsvoller ist das Konzept, eine visuelle Hierarchie zu erzeugen, um Menschen durch eine Seite zu leiten.

In Kontrast zu den Seiten mit F- und Z-Muster oben, lass uns einen Blick auf ein anderes Beispiel werfen:

Searchberg page has bad visual hirearchy

Wenn du diese Seite das erste Mal ansiehst, wohin bewegen sich deine Augen?

  • Das Gesicht der Frau?
  • Das gelbe Preisschild?
  • Geld-Zurück-Garantie?
  • Die Eingabemaske?
  • Die Grafik unten rechts?

Jedes Element dieser Seite wurde so gestaltet, dass es so viel Aufmerksamkeit wie möglich auf sich zieht, was dazu führt, dass keines damit erfolgreich ist. Es ist, als würde man mit jemandem eine Unterhaltung in einem Raum voller Leute, die dich anschreien, führen wollen. Mit so vielen Ablenkungen verfehlt die Seite es, deine Aufmerksamkeit auf das eigentliche Ziel, einen „kostenlosen SEO-Audit-Report“ zu lenken.

Beachte das Fehlen von visueller Hierarchie – sie folgt weder einem F- noch Z-Muster – und macht es so schwieriger, Conversions zu generieren. Weißt du überhaupt, was das Angebot ist und fällt es dir sofort auf? Was würdest du tun, um die Hierarchie und das gesamte Layout zu ändern?

Weißraum

In diesem Post auf WordStream erklärt Fahad Muhammad wie Weißraum der Schlüssel zu einer effektiven visuellen Hierarchie werden kann:

„Alle Elemente verdienen einen wahrnehmbaren Platz auf deiner Seite, denn es ist die Balance zwischen diesen Elementen, die dabei hilft, den Besucher davon zu überzeugen, zu einem Kunden zu werden … Mithilfe des Weißraums kannst du für Besucher eine visuelle Hierarchie erzeugen, indem du vorgibst, welches Element sie als Erstes sehen und welches Element folgt.“

Die Verwendung von Weißraum, um deine Besucher durch deine Seite zu leiten, macht den Unterschied zwischen einer effektiven visuellen Hierarchie und einer Seite ohne klare Struktur oder Hinweis darauf, was zu tun ist, aus.

lyft landing page

Lyfts Landingpage mit dem Ziel, dass sich Fahrer anmelden, gibt jedem Wertversprechen einen großen Weißraum und ermöglicht es uns, unseren Blick darauf zu richten. Eine Seite mit einer klaren visuellen Hierarchie wird zu wesentlich mehr Konvertierungen führen, denn die Besucher deiner Seite werden genau wissen, wo sie hinschauen sollen. Somit schaffst du es, sowohl dein Ziel zu erreichen, als auch dem Besucher zu geben, wofür er gekommen ist.

Die Kontrolle über dein Design übernehmen

Design ist eine Kombination aus Kunst und Wissenschaft. Schauen wir uns ein letztes Beispiel an, welches veranschaulicht, wie Eye-Tracking, visuelle Hierarchie und menschliche Psychologie Besucher dazu leiten kann, sich auf die Dinge zu konzentrieren, auf die sie sich konzentrieren sollen.

heat map landing page baby face
via kissmetrics

Du wirst feststellen, dass die Heatmaps oben für die gleiche Seite sind. Der einzige Unterschied ist die Blickrichtung des Babys. Auf der linken Seite schaut dich das Baby direkt an und der heißeste Teil der Heatmap liegt auf dem Gesicht. Auf der rechten Seite schaut das Baby in Richtung der Überschrift, was deine Augen von seinem Gesicht zur Überschrift  und zum Text führt. Diese Veränderung würde wahrscheinlich besser bei einem A/B-Test funktionieren, da die Aufmerksamkeit der Besucher auf den wichtigsten Seitenelementen liegen würde. Indem man die Blickrichtung des Babys verändert, haben wir anschließend die Kontrolle darüber übernommen, in welche Richtung der Besucher schaut und den Blick Richtung Wertversprechen gelenkt.  

Es ist nicht nur wichtig die strukturellen Regeln zu verstehen, sondern auch feinfühlig unserem Textinhalt und unseren Bildern gegenüber zu sein. Während das F- und Z-Muster nützlich sind, um unsere Seite zu strukturieren, wirst du wesentlich erfolgreicher sein (und mehr Spaß haben), wenn du die wahre Stärke des Designs nutzt und eine visuelle Hierarchie erzeugst, um Menschen durch die wichtigsten Teile deiner Seite zu leiten. Übernimm die Kontrolle über dein Design und nutze sie, um deine Ziele zu erreichen – du wirst froh sein, es getan zu haben.  

Über den Autor: Nicolai Doreng-Stearns ist ein UX-Designer bei Instapage. Wenn er gerade nicht nach intuitiven Lesererfahrungen forscht und designt, trainiert er brasilianisches Jiu Jitsu, fährt Fahrrad durch San Francisco und macht Musik.