Erfolgreiche Websites zeichnen sich nicht nur durch kreatives Design und schnelle Ladezeiten aus. In der Regel sollen Seiten dazu führen, dass Nutzer bestimmte Handlungen ausführen oder zumindest die Informationen verinnerlichen, die Sie vermitteln wollen. Der Erfolg der Conversion Optimierung auf Ihrer Website kann daraufhin an der Anzahl von Kauf-Klicks und anderen KPIs gemessen werden.

Doch was, wenn sich die Nutzer nicht verhalten, wie wir erwarten oder möchten? Obwohl Sie die Website nach bestem Wissen erstellt haben – beispielsweise indem Sie Trust-Signale einbauen und die Botschaften emotionalisieren?

Um diese Probleme zu beheben oder am besten ganz zu vermeiden, bietet uns die Eye-Tracking Forschung ganz konkrete Erkenntnisse für die Nutzerführung.

In diesem Beitrag gehe ich deshalb etwas näher darauf ein, wie Sie Eye-Tracking für Ihre Website-Erstellung und Optimierung verwenden können. Beim Weiterlesen erfahren Sie das Wichtigste über die Methode und erhalten 5 praxisnahe Tipps.

 

Grafik zur Darstellung von Eye-Tracking als Methode zur Conversion-Optimierung

 

Kurzum: Hier erfahren Sie, wie Sie mithilfe von Eye-Tracking Ihre Conversion Optimierung auf die Spitze treiben können!

 

Was ist Eye-Tracking?

Es gibt verschiedene Methoden der Blickaufzeichnung für Websites. Zumeist wird den Versuchspersonen aber ein Brillen-ähnliches Gerät aufgesetzt. Die Eye-Tracking Brille ist mit 2 Kameras ausgestattet: Es werden dabei sowohl die Umgebung bzw. der Bildschirm als auch (mithilfe einer Infrarot-Kamera) die Augenbewegungen des Trägers aufgezeichnet. Die aufgenommenen Blickbewegungen werden daraufhin als Blickpunkte über den Bildschirm gelegt.

 

Grafik, die darstellt, wie Eye-Tracking Daten als Heatmap oder Blickpunkte ausgespielt werden können

 

Manche von Ihnen werden jetzt vielleicht die Augen verdrehen: Schon wieder so eine Spielerei der Forschung ohne klaren Nutzen für Unternehmen!

Falsch. Die Eye-Tracking Marktforschung bietet Unternehmen sehr schnelle und zielführende Handlungspotenziale. Im Gegensatz dazu benötigen beispielsweise EEG-Studien extrem viel Daten und Zeit, außerdem müssen die Ergebnisse häufig stark abstrahiert werden, um einen Nutzen fürs Marketing 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 fürs Marketing kommt die Forschung mittlerweile vor allem rund um die Werbebranche zum Einsatz.

Besonders beliebt ist die Anwendung von Eye-Tracking Analysen bei Verpackungstests im Supermarkt. Dabei wird überprüft, wie Verpackungen gestaltet sein müssen, damit Sie Kunden auffallen, oder welche Regale aus „Kundensicht“ am besten sind.

Bei der Blickaufzeichnung im Online Marketing geht es um ähnliche Fragen und mehr: Auch hier wird untersucht, welche Logos am besten funktionieren und wo wir sie am besten platzieren. Es geht aber um alle Elemente und den Website-Aufbau als komplettes Konzept: Wie gestalten wir die Seite am besten, um den Nutzer zum Kauf-Klick zu führen und ihm das Auffinden der Informationen und Funktionen zu erleichtern, die er sucht und braucht?

Neben der zunehmenden Anwendung von Eye-Tracking im Marketing wird die Blickaufzeichnung beispielsweise auch genutzt, um mehr Sicherheit für Autofahrer zu gewährleisten. Hier wird untersucht, wo im Auto Knöpfe angebracht werden müssen, damit sie von Fahrern schnell und intuitiv gefunden werden können und somit nicht zu lange von der Straße weggeschaut werden muss.

 

Grafik zur Darstellung der Anwendungsbereiche von Eye-Tracking

 

Und ja: Es gibt auch noch stärker theoretisch angehauchte Forschungsfragen, für die Eye-Tracking verwendet wird. In meiner Abschluss-Arbeit 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 viele unserer Blicke sind unbewusst. Was auf keinen Fall heißt, 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 außerordentliche Erfolge im Marketing.

 

5 Tipps aus der Eye-Tracking Marktforschung für Ihre Website

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 Conversion Optimierung auf das nächste Level heben:

 

Tipp 1: Verschwenden Sie keinen zweiten Blick – oder ersten, oder dritten

Eye-Tracking Studien mit Website-Besuchern haben gezeigt: Totes Gewicht zieht Conversions runter! In anderen Worten: Kauf-Buttons, Kontakt-Daten oder wichtige Infos wie die Alleinstellungsmerkmale Ihres Unternehmens sollten der Star der Show sein (normalerweise auch in dieser Reihenfolge).

Nehmen wir den Kaufbutton: Normalerweise wird über dem CTA-Button in ein oder zwei Sätzen die Kaufbereitschaft des Kunden gesteigert, um Ihm das Klicken 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 zu Kunden machen. Sie sollten 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.

 

Grafik, die verdeutlicht, dass der Kauf-Button visuell hervorstechen sollte

 

Die Eye-Tracking Studien bestätigen auch unsere Erfahrung: Bereits das Entfernen eines zu knalligen Bildes kann die Anzahl der Kaufklicks in die Höhe treiben!

 

Tipp 2: F-Pattern & Co. – der richtige Blick für jede Website

Wenn es um nutzerfreundliche Blickführung auf Webseiten geht, wird häufig über bestimmte Blickbewegungsmuster bzw. Patterns gesprochen, die Nutzer 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. Sie sollten diese Unterschiede unbedingt beachten, bevor Sie Design-Schwerpunkte setzen. Zu häufig werden die vorhandenen Blickbewegungsmuster über einen Kamm geschoren.

Gehen wir einmal näher auf die drei wichtigsten Muster ein: das F-Pattern, das Z-Pattern und das Gutenberg-Diagramm.

 

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:

 

Foto aus einer Eye-Tracking Analyse von Jacob Nielson

 

Das F-Pattern zeigt, dass Nutzer-Blicke 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 vor allem Webseiten-Besucher 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 berührt. Die Bereiche im F-Pattern werden jedoch wiederholt sowie länger angeschaut und bleiben am besten in Erinnerung.

 

Wie Sie von diesem Wissen profitieren:

Setzen Sie wichtige Elemente und Informationen oben oder links auf Ihre Landingpage.

Sie haben 3 Alleinstellungsmerkmale nebeneinander stehen? Den wichtigsten USP sollten Sie laut Eye-Tracking Studien zuerst nennen. Das entspricht übrigens nicht nur dem Blickverhalten von Nutzern 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.

Sie haben einen Shop mit entsprechenden Produkt- und Kategorie-Seiten? Oder Leistungsseiten mit wenig Text, vielen Bildern und CTAs? Dann sollte sich bei Ihrer 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 Nutzerblick bewegt sich dabei – wie der Name auch hier schon verrät – im Zick-Zack über die Seite.

 

Grafik zur Darstellung vom Z-Pattern

 

Was Ihnen das Wissen bringt:

Die wichtigsten Produkte und längere Produktbeschreibungen sollten an den Schwerpunkten 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, dachten Sie?

Damit das Gutenberg-Diagramm zur Wirkung kommt, muss noch einmal eine Schippe Textlastigkeit draufgelegt werden – denken Sie 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 Ihre 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.

 

Grafik, die das Blickmuster nach dem Gutenberg-Diagramm darstellt

 

Was Sie jetzt mit diesem Wissen machen?

Falls Sie eine extrem textlastige Seite haben, sollten sie Ihr Logo oben links auf der Website anbringen, und Ihre Kontaktdaten und Verlinkungen am besten entlang der Diagonalen und vor allem am unteren rechten Eck – also ganz am Ende des Textes – positionieren.

 

Tipp 3: Schau mir in die Augen! Oder nicht?

Falls Sie mit Neuromarketing und Verkaufspsychologie vertraut sind, haben Sie vermutlich bereits gehört, dass Personen und Gesichter immer ein „Verkaufsknüller“ sind. Egal, ob Team-Fotos oder ein Bild vom Unternehmer 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 Ihr Unternehmensziel vermutlich nicht aus möglichst langen Blickduellen zwischen Nutzern und Team-Mitgliedern besteht.

Vielmehr sollte unsere Obsession für Gesichter genutzt werden, um Kundenblicke zu gewünschten Elementen zu führen – beispielsweise zu wichtigen Texten oder CTA-Buttons.

Wie? Ganz einfach: Verwenden Sie Bilder mit Menschen, deren Blick auf die Ziel-Elemente gerichtet ist. Es liegt in unserer Natur, den Blicken anderer zu folgen.

 

Grafik zur Darstellung von den Eye-Tracking Erkenntnissen zu Gesichtern auf Websites

 

Voilà: So geht Conversion Optimierung für Profis! Sie sehen: Schon lohnt sich Ihr Wissen über Eye-Tracking für Ihre Website. Legen Sie los und finden Sie geeignete Bilder, die den Nutzerblick 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 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 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 scrollen auch ohne Zögern weiter runter, wenn der Above the Fold Bereich nicht abschreckt.

Das heißt: Ja, Sie sollten sich 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 kaum auf Banner-Werbung schauen.

 

Grafik zur Darstellung von Banner-Blindheit

 

Wenn Sie also Geld für Ads wie Banner ausgeben möchten, sollten Sie diese clever einsetzen:

Erstens: Spielen Sie Banner-Werbung an geeigneten Stellen der Customer Journey aus. Banner, die Rabatte bewerben, können Sie nach dem Klick auf den Warenkorb anzeigen lassen, wenn der Kunde schon ein Kaufinteresse gezeigt hat.

Zweitens: Gestalten Sie 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 Sie an der eigenen Website durchführen.

Damit können Sie nicht nur herausfinden, ob Ihre Nutzer das F-Patter oder das Z-Pattern verwenden, sondern Sie können 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 Nutzern auf Ihrer Website! Vielleicht tracken Sie bereits Ihre Website-Performance anhand von Conversions, Traffic etc.? Nehmen Sie doch einfach diese qualitativen Daten mit ins Reporting auf. Entsprechende Tools wie das von Hotjar spuckt Ihnen 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 Ihrer Website auszuführen.

 

Schluss für heute!

Es gibt viele Psycho-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 unsere Website im wahrsten Sinne des Wortes sehen.

Ich hoffe, der Beitrag hat Ihnen gezeigt: Eye-Tracking ist ein geniales Marketing-Tool! Indem Sie ein paar grundlegende Tipps umsetzen, können Conversions optimiert und das Nutzererlebnis auf Ihrer Seite schnell und effizient verbessert werden.

Jetzt würde ich gerne von Ihnen wissen: Sind Sie auch von der Anwendung von Eye-Tracking im Marketing begeistert? Werden Sie die Tipps verwenden, oder achten Sie bereits darauf? Oder haben Sie eine ganz andere Meinung dazu? Hinterlassen Sie einen Kommentar!

Auch über Fragen oder Anregungen zu weiteren Themen freue ich mich übrigens! 😊

 

Inspirationsquellen:

https://neilpatel.com/blog/eye-tracking-studies/

https://www.marktforschung.de/wiki-lexikon/marktforschung/Eyetracking/

https://www.tobiipro.com/de/anwendungen/markt-nutzerforschung/

https://vanseodesign.com/web-design/3-design-layouts/

https://99designs.de/blog/design-tipps/visuelle-hierarchie-auf-landingpage/

https://t3n.de/news/z-pattern-muster-psychologie-web-526096/

https://www.trendsderzukunft.de/top-20-eytracking-und-usability-tipps-fuer-webseiten/

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

 

 

Ähnliche Artikel

Beitragsbild zur Ankerheuristik

Ankerheuristik im Online Marketing

19. Juni 2021

Mehr erfahren

Beitragsbild Halo Effekt

Der Halo-Effekt

16. März 2021

Mehr erfahren