Visuelle Conversion-Optimierung: Wie du den Blick der User lenkst, um mehr Umsatz zu machen

Eine hübsche Landing Page ist schön und gut. Online-Marketing ist aber kein Beauty-Contest, sondern soll dir helfen, mehr Umsatz zu machen. Das Design spielt eine gewaltige Rolle dabei, ob dein Angebot floppt oder dich reich macht. Visuelle Conversion-Optimierung ist die hohe Kunst, Webdesign und CRO miteinander zu verbinden. Es gibt viele nützliche Hacks, die dich dabei unterstützen. Wir stellen dir das F-Muster und das Z-Muster vor und erklären dir, wie du damit den Blick der Nutzer geschickt auf deine besten Angebote leitest.

Auf die äußeren Werte kommt es an: Visuelle Conversion-Optimierung im Fokus

Bei der Conversion-Optimierung geht es nur ums Äußere. Klingt etwas oberflächlich und herzlos, entspricht aber der Wahrheit. Niemand liest Deine grandiose Werbebotschaft, wenn du sie mitten im Text versteckst. Und da spielt es keine Rolle, wie gut der Text geschrieben ist oder wie gut du dein Angebot erklärst.

Deine Landing Page hat ein Ziel: Dem Kunden dein Angebot so klar und effektiv wie möglich zu verkaufen.

Wenn du die wichtigsten Elemente der Webseite auf dem natürlichen Blickpfad der Nutzer positionierst, musst du dich gar nicht groß anstrengen. Die Aufmerksamkeit ist dir sicher. Aber woher sollst du wissen, worauf der Blick zuerst fällt? Ganz einfach: du schaust es dir an. Spezielle Kameras nehmen selbst die winzigsten Bewegungen des Augapfels wahr. Auf einer Heatmap zeigt sich dann, wo der Blick hängenbleibt. Mehr Fokus = mehr Aufmerksamkeit. Um Deine Webseite zu analysieren, brauchst du also eine teure Eyetracking-Kamera, die passende Software, Experten, die diese Daten auswerten, willige Testpersonen und jede Menge Zeit. Oder du greifst einfach auf die Erkenntnisse von unzähligen anderen Studien zurück: Tatsächlich folgt das Auge nämlich immer denselben Mustern. Es gibt grob gesagt zwei visuelle Pfade: Das F-Muster und das Z-Muster.

F-Muster für Webcontent: So lesen Nutzer Texte im Netz

Schon den Klostermönchen im 18. Jahrhundert ist aufgefallen, dass Menschen nicht ruhig und fließend jeden einzelnen Buchstaben lesen. Das Auge springt vielmehr von Punkt zu Punkt und fixiert bestimmte Textstellen stärker als andere. Und in einem Großteil der Fälle folgt es dabei einem klaren Muster. Schaut man sich Heatmaps von Eyetracking-Studien an, folgen die meisten Menschen einem F-Muster, wenn sie eine Seite in einem Buch oder auf einer Webseite betrachten.

Okay, ein bisschen Fantasie brauchst du schon, um das große F zu erkennen. Rote Textstellen bekommen besonders viel Aufmerksamkeit, während die blauen Bereiche nur für wenige Millisekunden überflogen werden.  (Bild: NN Group)

Der Blick des (deutsch- und englischsprachigen) Nutzers beginnt immer oben links beim größten Element. Das Auge wandert zuerst nach rechts und dann nach unten. Bilder haben eine höhere Priorität als Text. Je größer und auffälliger eine Textstelle ist, desto eher fällt der Blick darauf. Whitespace durch Absätze oder Zwischenüberschriften startet ein kleines „F“ innerhalb des F-Musters. Soviel zur Theorie – wie kannst du diese Erkenntnisse in der Praxis nutzen?

Wie kannst du das F-Pattern zur Conversion-Optimierung nutzen?

• Die Überschrift muss knallen! Egal, wie schnell jemand Deine Seite wegklickt – die Hauptüberschrift ist fast allen Nutzern wenigstens einen kurzen Blick wert.
• Keine Experimente! Es gibt gute Gründe, warum die Überschrift immer linksbündig ist und auf der rechten Bildseite weniger wichtige Informationen stehen.
• Wenn etwas wichtig ist, dann sollte es sich auch optisch abheben, zum Beispiel durch Fettungen, Farben oder Icons.
• Whitespace beruhigt die Szene und gibt dem Auge die Möglichkeit, sich zu entspannen – nutze also freie Fläche, Aufzählungen und Absätze, um den Blick zu führen.

Mit dem Z-Muster für Landing Pages steigerst du Deinen Umsatz

Das Z-Pattern ist eine Weiterentwicklung des F-Musters. Es folgt derselben Grundlogik (der Blick wandert von links nach rechts und von oben nach unten), gilt aber speziell für Landing-Pages. Denn hier brauchst du keine visuellen Ankerpunkte im Text, sondern möchtest den Blick auf den Call-to-Action lenken.

Nicht das schönste Z aller Zeiten, aber dafür effektiv: Unsere Startseite folgt der Logik des Eyetrackings: Wir starten in der linken, oberen Ecke und gehen dann nach rechts und diagonal nach unten. Das große Hero-Picture im Hintergrund ist genau auf dem Weg der ersten Diagonalen. Visuelle Conversion-Optimierung leicht gemacht!

Wie du siehst, muss das Z nicht so perfekt wie aus der Grundschul-Fibel aussehen. Du solltest dir merken, dass der Blick der Nutzer auch hier oben links in der Ecke startet und dann in einer (halbwegs) horizontalen Linie zum nächsten, interessanten Objekt gleitet. Dann geht es diagonal zurück auf die linke Seite. Du kannst dieses Muster nutzen, um die Customer Journey im Miniformat abzubilden: du beginnst mit einem Logo, um dem User erst einmal zu sagen, wo er sich befindet. Dann kommen weitere Informationen, dann die Überschrift. Und ehe er sich versieht, ist das Kundenauge auf dem Call-to-Action gelandet. Dann gibt es eine logische Konsequenz: Der Link wird geklickt, die Conversion getätigt, und alle sind glücklich. Visuelle Conversion-Optimierung hilft dir, Deine Ziele zu erreichen.

Wie kannst du das Z-Muster zur Conversion-Optimierung nutzen?

• Die obere, horizontale Linie sollte die wichtigsten Informationen bereitstellen: Die Überschrift entscheidet, ob es Liebe auf den ersten Blick wird!
• Die diagonale Blicklinie verläuft entgegen der Leserichtung. Hier kannst du also keinen Text unterbringen, sondern solltest lieber mit Bildern oder Icons arbeiten.
• Der Blick sollte am Ende auf den CTA-Button fallen. Du positionierst die Handlungsaufforderung idealerweise und relativ mittig.
• Der Flow muss stimmen! Wenn Deine Logik ungefähr mit der natürlichen Blickfolge übereinstimmt, erreichst du mehr Menschen.

Webdesign und Conversion-Optimierung: So kommt zusammen, was zusammen gehört

Webdesign ist viel mehr als die künstlerische Arbeit am Layout. Gerade im Online-Marketing und im B2B-Bereich kommt es nicht darauf an, ob eine Webseite schön aussieht, sondern dass sie ihren Zweck erfüllt. Manche Puristen sehen den Webdesigner sogar nur als Handwerker an, der sich dem Urteil des letzten A/B-Tests zu unterwerfen hat. Künstlerischer Anspruch? Ästhetik? Braucht kein Mensch! Ganz so einfach sollte man es sich aber nicht machen. Wir finden, dass schon bei der Planung Programmierer, Designer und Marketing-Spezialisten an einem Tisch sitzen sollten. Erst das Zusammenspiel aller Disziplinen macht eine Seite wirklich erfolgreich.

Die visuelle Conversion-Optimierung ist außerdem nicht plötzlich vorbei, nur weil das Projekt an den Start geht. Klar, du kannst nicht alle zwei Wochen das Design komplett über den Haufen werfen. Kleine Verbesserungen können allerdings einen großen Einfluss auf Deine Conversionrate haben – besonders, wenn du dich und Deine Page immer wieder auf den Prüfstand stellst und mit regelmäßigen Performance-Checks überprüfst, ob alle Parameter Deinen Vorstellungen entsprechen.

Zusammenfassung

• Mit visuellen Tricks und gestalterischen Kniffen kannst du den Blick der Nutzer gezielt auf das lenken, was wichtig ist.
• Deine Landing Page sollte grob dem Z-Muster entsprechen, um maximal wirksam zu sein.
• Webseiten mit viel Text profitieren vom F-Pattern mit einer klaren Bildsprache.
• Du solltest das Auge der Nutzer gezielt auf den Call-to-Action lenken, um die Conversionrate zu optimieren.
• Visuelle Conversion-Optimierung ist ein andauernder Prozess, der nie zu 100 Prozent perfekt abgeschlossen ist. 

Was sollten wir unbedingt noch zum Thema Webdesign und Conversion-Optimierung sagen? Lass uns Deine Anregungen in den Kommentaren wissen!