Blickmuster in der Conversion Rate Optimierung
Erfolgreiche Webseiten sind mehr als nur schön und schnell: Sie motivieren Nutzer:innen zum Handeln und vermitteln klar deine Botschaften. Aber was, wenn sich Nutzer:innen nicht verhalten, wie wir erwarten oder nicht das tun, was wir möchten, obwohl alles richtig gemacht wurde – beispielsweise, indem Trust-Signale eingebaut und Botschaften emotionalisiert wurden? Um diese Probleme zu beheben oder am besten ganz zu vermeiden, liefert Eye-Tracking-Forschung wertvolle Einblicke, wie Nutzer:innen Webseiten anschauen.
In diesem Artikel zeige ich dir deshalb, wie du mithilfe von Blickmustern aus der Eye-Tracking-Forschung deine Webseite optimieren kannst. Du erfährst das Wichtigste über die theoretischen Grundlagen der drei wichtigsten Blickmuster und erhältst 5 praxisnahe Tipps für die Optimierung deiner Webseite.
Was ist Eye-Tracking?
Es gibt verschiedene Methoden der Blickaufzeichnung für Webseiten. In den allermeisten Fällen wird den Versuchspersonen ein brillenähnliches Gerät aufgesetzt, welches vereinfacht ausgedrückt die Bewegungen der Augen aufzeichnet. Genauer gesagt: Die Eye-Tracking Brille ist mit 2 Kameras ausgestattet, die sowohl die Umgebung bzw. den Bildschirm als auch (mithilfe einer Infrarot-Kamera) die Augenbewegungen der Versuchsperson aufzeichnet. Die aufgenommenen Blickbewegungen werden dann als Blickpunkte über den Bildschirm gelegt.
Manche werden jetzt vielleicht die Augen verdrehen: Schon wieder so eine Wissenschaftsspielerei ohne klaren Nutzen für Unternehmen!
Falsch gedacht, denn Eye-Tracking Forschung bietet Unternehmen sehr schnelle und genaue Ergebnisse, aus denen sich sehr konkrete und zielführende Handlungsmaßnahmen ableiten lassen. Im Gegensatz dazu benötigen andere Methoden wie beispielsweise EEG-Studien extrem viel Daten und Zeit. Außerdem müssen die Ergebnisse solcher Untersuchungen häufig stark abstrahiert werden, um einen Nutzen für die Praxis zu haben.
„Eyetracking ist mehr als nur ein weiteres Forschungswerkzeug – wir konnten mehr Einsichten zu Werbung erhalten, als mit jeder anderen traditionellen Methode“ – Catalina Mejia (CEO von Yan Haas SA)
Anwendungsfelder
Aufgrund der klaren Vorteile von Eye-Tracking wird es mittlerweile vor allem in der Werbebranche genutzt.
Besonders beliebt ist die Anwendung von Eye-Tracking-Analysen bei Verpackungstests im Supermarkt. Dabei wird überprüft, wie Verpackungen gestaltet sein müssen, damit diese den Kund:innen auffallen, oder welche Regale aus „Kund:innensicht“ am besten sind.
Bei der Blickaufzeichnung im Online-Marketing geht es um ähnliche Fragen: Auch hier wird untersucht, welche Logos am besten funktionieren und wo diese am besten platziert werden sollten. Trotzdem und vor allem geht es aber um das große Ganze. Wie gestalten wir Webseiten am besten, um die Nutzer:innen zum Kauf-Klick zu führen und ihnen das Auffinden der Informationen und Funktionen zu erleichtern, die sie suchen und brauchen?
Schon gewusst?
Neben der zunehmenden Anwendung von Eye-Tracking im Marketing wird die Blickaufzeichnung beispielsweise auch genutzt, um mehr Sicherheit für Autofahrer:innen zu gewährleisten. Hier wird untersucht, wo im Auto Knöpfe angebracht werden müssen, damit sie von Fahrer:innen schnell und intuitiv gefunden werden können und somit nicht zu lange von der Straße weggeschaut werden muss.
Und ja: Es gibt auch noch stärker theoretisch angehauchte Forschungsfragen, für die Eye-Tracking verwendet wird. In meiner Abschlussarbeit an der Uni habe ich zum Beispiel untersucht, welche Rolle Blicke in Gesprächen zwischen Menschen spielen. Und ich finde, auch das war keine vergeudete Zeit 😉
Aber wieder zurück zum Eye-Tracking fürs Marketing:
Warum nicht einfach fragen?
Wäre es nicht einfacher, eine Fokusgruppe auf die Website loszulassen und deren Eindrücke mittels Fragebögen zu sammeln, statt mit teurem Eye-Tracking die Website optimieren zu wollen?
Leider ist das nicht so einfach, denn den größten Teil des Tages steuern wir unsere Blicke nicht bewusst. Das bedeutet nicht, dass sie keinen Einfluss auf unser Kaufverhalten haben. Gerade das macht ja den Erfolg von Neuromarketing aus! Das Wissen über unsere unbewusste Wahrnehmung erlaubt uns gezielte Optimierung und langfristige Erfolge im Marketing.
5 Tipps für deine Webseite
Wir haben geklärt, was Eye-Tracking ist und warum sich diese Methode im Marketing steigender Beliebtheit erfreut. Jetzt geht es ans Eingemachte: Hier sind die versprochenen 5 Tipps für Websites, die deine Conversion Rate Optimierung auf das nächste Level heben.
Tipp 1 Verschwende keinen zweiten Blick – oder ersten, oder dritten
Eye-Tracking Studien mit Website-Besuchern haben gezeigt: unnötiges Gewicht zieht Conversions runter! In anderen Worten: Conversion-Buttons, Kontaktdaten oder andere wichtige Informationen wie die Alleinstellungsmerkmale deines Unternehmens sollten im Mittelpunkt stehen (normalerweise auch in dieser Reihenfolge).
Nehmen wir den Conversion-Button: Normalerweise wird über den CTA(Call to Action)-Button in ein oder zwei Sätzen die Kaufbereitschaft der Kund:innen gesteigert, um ihnen den Klick wirklich schmackhaft zu machen: „Sie haben keine Lust mehr auf stagnierende Umsätze? Melden Sie sich: Wir machen Sie zur Nummer 1!“
Diese Teaser haben ihre Berechtigung und können unentschiedene Nutzer:innen zu Kund:innen machen. Du solltest dem CTA-Button jedoch auf keinen Fall die Show stehlen. Schrift und (Hintergrund-)Farbe dieser Sätze sollte deshalb beispielsweise dezenter gehalten werden als das Design des Buttons.
Tipp 2 F-Pattern & Co. – der richtige Blick für jede Website
Wenn es um nutzendenfreundliche Blickführung auf Webseiten geht, wird häufig über bestimmte Blickbewegungsmuster bzw. Patterns gesprochen, die Nutzende beim Anschauen der Website typischerweise verwenden. Wichtig: Welches Pattern verwendet wird, hängt davon ab, um welche Art von Seite (Blog, Produktseiten oder News-Artikel) es sich handelt. Du solltest diese Unterschiede unbedingt beachten, bevor du Design-Schwerpunkte festlegst. Zu häufig werden die vorhandenen Blickbewegungsmuster vermischt und damit nicht sinnvoll genutzt.
Gehen wir einmal näher auf die drei wichtigsten Muster ein. Das wichtigste in Kürze:
F-Pattern
-
erstmals von UX-Experten der Nielsen Norman Group erwähnt
-
Nutzende fixieren besonders den oberen Bereich einer Seite
-
Die restliche Seite wird weniger intensiv und vor allem linksseitig betrachtet
-
vor allem bei Suchergebnisseiten von Google & Co. und textlastigeren Landingpages nachgewiesen
Z-Pattern
-
Anwendung bei Shop-Seiten & Seiten mit wenig Text und vielen Bildern/CTAs
-
sowohl die linken als auch die rechten Eckpunkte sind relevant
-
platziere die wichtigsten Produkte & Texte an den Eckpunkten des Z-Patterns
Gutenberg-Diagramm
-
Anwendung bei sehr textlastigen Seiten (daher niedrige Relevanz fürs Marketing)
-
Augen wandern diagonal von oben links nach unten rechts auf der Seite
-
Folge für die Praxis: die wichtigsten Inhalte sollten oben links & unten rechts angebracht werden
Ausführlicher für besonders Interessierte:
F-Pattern
Das F-Pattern ist vermutlich das bekannteste Blickmuster im Online Marketing. Dieses Pattern, das wenig überraschend wie ein F aussieht, wurde erstmals von den Experten für UX (User Experience) der NN/g (Nielson Norman Group) erwähnt. Hier ein Bild aus einer Eye-Tracking Analyse, das Jacob Nielson der NNG in seinem Artikel „F-shaped Pattern for Reading Web Content“ teilt:
Das F-Pattern zeigt, dass Nutzende besonders den oberen Bereich einer Seite (Above-the-Fold) fixieren, bevor sich der Blick weniger intensiv und sehr links-lastig über den Rest der Seite bewegt.
Falls ich mit diesen Mustern etwas Verwirrung gestiftet habe: Wie mit Eye-Tracking Analysen nachgewiesen wurde, lesen insbesondere die Besucher:innen von Webseiten selten jedes Wort, sondern „scannen“ Seiten nach den wichtigsten Inhalten ab. Und selbst wenn sie den Text lesen (wie Sie das bestimmt bei meinem Text tun 😉) werden Wörter außerhalb des F-Patterns nur kurz mit dem Blick gestreift. Die Bereiche im F-Pattern werden jedoch wiederholt sowie länger angeschaut und bleiben am besten in Erinnerung.
Wie du von diesem Wissen profitierst:
Platziere die wichtigen Elemente und Informationen oben oder links auf deiner Landingpage.
Du hast 3 Alleinstellungsmerkmale nebeneinander platziert? Den wichtigsten USP solltest du laut Eye-Tracking Studien zuerst nennen. Das entspricht übrigens nicht nur dem Blickverhalten von Nutzer:innen am besten, sondern ist auch aus anderen Gründen wichtig, wie der Primacy-Recency-Effekt zeigt.
Z-Pattern
Wie bereits angedeutet, gibt es verschiedene Blickmuster. Das F-Pattern ist also nicht für alle Landingpages gleichermaßen relevant. Dieses Blickmuster wurde vor allem bei Suchergebnisseiten von Google & Co. und textlastigeren Landingpages nachgewiesen.
Du hast einen Shop mit Produkt- und Kategorie-Seiten? Oder Leistungsseiten mit wenig Text, vielen Bildern und CTAs? Dann sollte sich bei deiner Landingpage alles um das Z-Pattern drehen.
Im Gegensatz zum F-Pattern sind beim Z-Pattern sowohl die linken als auch die rechten Eckpunkte wichtig. Alle Bereiche dazwischen werden nur kurz überflogen. Der Blick der Benutzer:innen bewegt sich dabei – wie der Name auch hier schon verrät – im Zick-Zack über die Seite.
Was dir das Wissen bringt:
Die wichtigsten Produkte und längere Produktbeschreibungen sollten an den Eckpunkten des Z-Patterns positioniert werden, denn hier verweilt der Blick am längsten und Texte werden mit höherer Wahrscheinlichkeit gelesen.
Das heißt allerdings nicht, dass der Platz zwischen diesen Fokuspunkten komplett leer sein soll. Bilder und Grafiken sind für diese „Scan“-Bereiche sehr gut geeignet, denn wir diese bereits beim Überfliegen schnell verarbeiten können.
Das Gutenberg-Diagramm
Dieses Blickmuster wurde mithilfe von Eye-Tracking Analysen bei sehr textlastigen Seiten nachgewiesen. Da gilt doch das F-Pattern, dachtest du? Damit das Gutenberg-Diagramm zur Wirkung kommt, muss noch einmal eine Schippe Textlastigkeit draufgelegt werden – denk beispielsweise an Romane!
In der Regel sind selbst textlastigere Landingpages wie diese hier mithilfe von Absätzen und Bilder aufgelockert. Deshalb ist das Gutenberg-Diagramm von den 3 Blickmustern fürs Marketing am wenigsten relevant. Dennoch will ich es kurz aufzeigen, weil es immer wieder vorkommen kann, dass deine Website längere und Roman-ähnliche Seiten (beispielsweise in der News/Presse-Sektion) beinhaltet: Bei entsprechend unformatierten Texten konnte mithilfe vom Eye-Tracking gezeigt werden, dass unsere Augen diagonal von oben links nach unten rechts auf der Seite wandern.
Was du jetzt mit diesem Wissen machst?
Falls du eine extrem textlastige Seite hast, solltest du dein Logo oben links auf der Webseite positionieren, und deine Kontaktdaten und Verlinkungen am besten entlang der Diagonalen und vor allem am unteren rechten Eck – also ganz am Ende des Textes – anordnen.
Tipp 3 Schau mir in die Augen! Oder nicht?
Falls du mit Neuromarketing und Verkaufspsychologie vertraut bist, hast du vermutlich bereits gehört, dass Personen und Gesichter immer ein „Verkaufsknüller“ sind. Egal, ob Team-Fotos oder ein Bild der Geschäftsführung neben dem Text zur Unternehmensgeschichte – Gesichter ziehen unsere Aufmerksamkeit auf sich.
Und zwar unsere volle Aufmerksamkeit! Auch mit Eye-Tracking für Websites konnte dies bestätigt werden. Aber: Durch die Blickaufzeichnung für Marketing-Zwecke konnte auch gezeigt werden, dass Fotos mit direkten Blicken in die Kamera nicht unbedingt förderlich sind. Warum? Weil dein Unternehmensziel vermutlich nicht aus möglichst langen Blickduellen zwischen Nutzern und Team-Mitgliedern besteht.
Vielmehr sollte unsere Obsession für Gesichter genutzt werden, um Kund:innenblicke zu gewünschten Elementen zu führen – beispielsweise zu wichtigen Texten oder CTA-Buttons. Wie? Ganz einfach: Verwende Bilder mit Menschen, deren Blick auf die Ziel-Elemente gerichtet ist. Es liegt in unserer Natur, den Blicken anderer zu folgen.
Voilà: So geht Conversion Optimierung für Profis! Du siehst: Schon lohnt sich dein Wissen über Eye-Tracking für deine Website. Leg los und finde geeignete Bilder, die den Blick deiner Benutzer:innen zum Kaufbutton führen!
Tipp 4 Alles Above the Fold?
Wie das nachgewiesene F-Pattern der Eye-Tracking Analysen von Websites zeigt, ist der Above the Fold Bereich – das heißt der Bereich der Seite, der sichtbar ist, bevor weitergescrollt wird – von besonderer Bedeutung für Nutzer:innen und wird intensiver als der Rest der Seite „beäugt“. Bei der Erstellung von Webseiten wird deshalb viel Energie in das Design dieses Seitenbereichs gelegt. Und zurecht.
Besonders wenn auf der Suchergebnisseite viele ähnliche Snippets auf vergleichbare Leistungen verweisen, verschwenden Nutzer:innen nicht viel Zeit. Enttäuscht der erste Eindruck durch verpixelte Header-Bilder oder einen langweiligen Titel, wird zur nächsten Website gesprungen. Dennoch muss die gesamte Website überzeugen. Schließlich heißt es F-Pattern, nicht Strich-Pattern. In anderen Worten: Nutzer:innen scrollen auch ohne Zögern weiter runter, wenn der Above the Fold Bereich nicht abschreckt.
Das heißt: Ja, du solltest dir besonders viel Mühe beim Above the Fold Bereich geben, dafür aber nicht den Rest der Seite vernachlässigen!
Tipp 5 Banner-Blindheit
Ist Banner-Blindheit der nächste evolutionäre Schritt unserer Sehfähigkeit? Ok, vielleicht nicht ganz. Dennoch zeigen Eye-Tracking Analysen von Websites, dass wir als Nutzer:innen kaum auf Banner-Werbung schauen.
Wenn du also Geld für Ads wie Banner ausgeben möchten, solltest du diese clever einsetzen:
- Erstens: Spiele Banner-Werbung an geeigneten Stellen der Customer Journey aus. Banner, die Rabatte bewerben, kannst du nach dem Klick auf den Warenkorb anzeigen lassen, wenn die Kund:innen schon ein Kaufinteresse gezeigt haben.
- Zweitens: Gestalte die Banner so, dass sie mit dem Design der restlichen Website verschmelzen. So vermeiden wir, dass unser Hirn direkt „Banner-Werbung“ schreit und vermeiden das Aufsetzen von Scheuklappen bzw. das Einsetzen der berühmt-berüchtigten Banner-Blindheit.
Lohnt sich eine eigene Blickaufzeichnung fürs Marketing?
Beim Eye-Tracking ist es wie mit allem: Die besten Ergebnisse bekommen Sie von Nachforschungen, die du an der eigenen Website durchführst.
Damit kannst du nicht nur herausfinden, ob deine Nutzer:innen das F- oder das Z-Pattern verwenden, sondern du kannst den Nutzen jedes einzelnen Elements überprüfen.
Aber lassen wir uns ganz ehrlich sein: Nicht jedes Unternehmen hat die Ressourcen, eine eigene Eye-Tracking-Studie durchzuführen. Darüber hinaus ist fraglich, ob sich die Kosten für wenige individuelle Erkenntnisse wirklich lohnt. Gerade weil Eye-Tracking die Marketing-Welt im Sturm erobert, stehen uns bereits eine Unmenge an Wissen zur Verfügung, das von Instituten und großen Unternehmen mit den nötigen Kapazitäten geteilt wurde.
Eine großartige Alternative ist jedoch das Tracken der Maus-Aktivität von Nutzer:innen auf deiner Website! Vielleicht trakst du bereits deine Website-Performance anhand von Conversions, Traffic etc.? Nimm diese qualitativen Daten mit ins Reporting auf. Entsprechende Tools wie das von Hotjar spuckt dir Heatmaps aus, die ganz ähnlich aussehen wie Eye-Tracking Daten. Nur statt dem Blick wird hier eben die Mausbewegung verfolgt.
Natürlich ist das nicht das gleiche wie das Tracken der Augenbewegung, aber die Ergebnisse sind erstaunlich ähnlich – und viel kostengünstiger als eine Eye-Tracking Studie an deiner Website auszuführen.
Schluss für heute
Es gibt viele psychologische Effekte aus dem Neuromarketing, um Conversions zu optimieren und Leads zu generieren. Doch Eye-Tracking ist ein geniales, zusätzliches Tool mit direktem Handlungspotenzial: Hier geht es wirklich darum, zu verstehen, wie Nutzer:innen unsere Website im wahrsten Sinne des Wortes sehen.
Inspirationsquellen:
7 Marketing-Lektionen aus Eye-Tracking-Studien, neilpatel.com
Eyetracking, marktforschung.de
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern, vanseodesign.com
Psychologie des Webdesigns: Das Z-Pattern verstehen, t3n.de
Top 20 Eyetracking und Usability Tipps für Webseiten, trendsderzukunft.de
