Landingpage-Optimierung – Tipp #3 – Schau mir in die Augen

Eine Person auf einem großem Visual schaut Sie an. Sie können Ihre Blicke kaum davon lösen, so stark ist das Bedürfnis den Blick zu erwiedern. Kennen Sie das? Ich denke, dass ist jedem von uns schon einmal passiert. Im dritten Teil meiner Serie über Landing-Page-Optimierung versuche ich den Beweis anzutreten, wie man dieses Verhalten ausnutzen kann um Landing-Pages zu optimieren

Die These: Primäre-Elemente im Blickfeld konvertieren besser

Durch das Verschieben der primär Elemente, wie z.B. die Call-to-Action,  in das direkte Blickfeld werden die Elemente besser wahrgenommen.

Der Versuchsaufbau

Mit einem kleinen Lab in unserem Eyetracker versuche ich herauszufinden, ob diese These tragbar ist oder nicht. Es wurde ein A/B-Test mit zehn Probanden durchgeführt. Jeder Proband hat nur eine Version der Landing-Page gesehen um ein klares Ergebnis zu erhalten. Es wurden jeweils zwei Messungen mit 5 Sekunden Blickzeit aufgenommen. Unterbrochen wurde die Anzeige der Landing-Page mit jeweils 5 Sekunden Rauschen um die letzte Blickposition der Nutzer wieder zu “neutralisieren”.

Die Altersstruktur von 20 bis über 60 Jahre und genau 50% Männer / Frauen. Keiner der Probanden kannte die Website, die Designvorschläge oder die Intension des Tests.

Der Test: Primäre-Elemente ins Blickfeld verschieben

Hier dient mir die Startseite der Central Versicherung als Testkandidat. Zusätzlich geht eine optimierte Version ins Rennen, bei der die primäre Call-to-Action in den Fokus rücken soll. Hier erstmal die beiden Testkandidaten zum Vergleich:

Original der Seite:

Landing-Page-Test 1 - Original

Optimierte Version:

Landing-Page-Test 1 - Optimierte Version

Der Versuch im Eyetracker soll zeigen, dass die Buttons in der optimierten Version besser wahrgenommen werden. Dies soll alleine durch den direkten Blickkontakt des Motivs hervorgerufen werden. Doch sehen wir uns die Ergebnisse der Screens als Heatmap an:

Heatmap des Originals:

Landing-Page-Test 1 - Heatmap Original

Neben dem direkten Blickkontakt zum Primär-Motiv, wird hier als zweiter visueller Aufhänger die sekundäre Call-to-Action (der gelbe Button) wahr genommen. Die primäre Call-to-Action ist nur dritt stärkstes Element.

Heatmap der optimierten Version:

Landing-Page-Test 1 - Heatmap optimierte Version

Hier sieht man schon deutlich, wie viel stärker die primären Buttons durch die Verschiebung wahrgenommen werden. Visual und Buttons "verschmelzen" nahezu zu einem großen Blickfang. Die sekundäre Call-to-Action ist in diesem Beispiel deutlich weniger gewichtet.

Fazit

Wählen Sie in Zukunft Ihre Visuals nicht mehr nur nach dem Gefallen, oder dem CI aus, sondern suchen Sie Bilder, die Ihre Kunden durch Blicke fesseln und platzieren Sie im Umfeld des Blickpunktes Ihre gewünschte primäre Call-to-Action. Sie wird dort besser wahrgenommen.

Konversionskraft ad-on Landing-Page-Test

Das ganze Thema der Blicke hat mich so fasziniert, dass ich unbedingt noch einen weiteren Test durchführen musste. Einige Zeit habe ich nach dem richtigen Testkanditaten gesucht und bin ebenfalls im Versicherungsektor fündig geworden:

Original der Seite:

Landing-Page-Optimeriung - Test 2 Original

Diesmal dient mir die Startseite der Deutscher Ring Website als Testkandidat. Der Testaufbau und die Probanten sind exakt wie im ersten Test.

These 2: Visuals können Blicke lenken

Ich glaube, dass es möglich ist durch entsprechend starke Bilder die Wahrnehmung auf Call-to-Action zu lenken, ohne das direkter Blickkontakt nötig ist. Stattdessen versetzen sich die Betrachter in die Person auf dem Bild und schauen dort hin, wo die Person hinsieht.

Optimierte Seite:

Landing-Page-Optimeriung - Test 2 optimierte Version

In der optimierten Version wurden die Buttons in die Blickrichtung der Person auf dem Visual verschoben.

Der ad-on Landing-Page-Test

Heatmap Original:

Landing-Page-Optimeriung - Test 2 Original Heatmap

In der Heatmap fällt auf, dass der Blick sehr unruhig ist, und dass das Auge keinen richten Ruhepunkt findet. Besonder interessant finde ich, dass im rechten Teil des Bildes auf den Seifenblasen eine deutliche Einfärbung in der Heatmap zu sehen ist, obwohl dort eigentlich keinerlei relevante Informationen stehen.

Heatmap optimierte Version:

Landing-Page-Optimeriung - Test 2 - Heatmap optimierte Version

WOW! Was ein klarer Unterschied zur ersten Heatmap. Die Blicke zentrieren sich auf den neu positionierten Buttons und brennen sich förmlich in die Heatmap. Durch diesen extremen Fokus beruhigt sich der Rest der Heatmap natürlich deutlich. Ein so klares Ergebnis des Tests hätte ich nicht erwartet.

Noch deutlicher wird das Ergebnis, wenn man sich die Tunnelgrafiken der beiden Versionen der Seite ansieht. In Tunnelgrafiken werden die Bereich mit besonders intensiven Blickkontakt angezeigt, der Rest des Bildes erscheint schwarz. Somit entsteht eine Art Schlüssellochbild.

Tunnelgrafik Original:

Landing-Page-Optimeriung - Test 2 - Tunnelgrafik Original

"Wie sie sehen, sehen sie alles." So oder so ähnlich, könnte der Kommtar zu dieser Grafik sein. Der nicht vorhandene Fokus wird hier noch deutlicher. Fast die komplette Seite ist "aufgedeckt"

Tunnelgrafik optimierte Version:

Landing-Page-Optimeriung - Test 2 - Tunnelgrafike optimierte Version

Auch hier das Ergebnis absolut eindeutig. Der Fokus der Betrachter liegt klar auf der primären Call-to-Action. Alle anderen Bereich treten stark in den Hintergrund.

Fazit:

Nicht nur der direkte Blickkontakt zieht die Blicke der Nutzer auf sich, sondern durch geschicktes Kombinieren von starken Bildern lassen sich die Blicke der Nutzer lenken. Und das sogar ohne direkten Blickkontakt!

Ich wünsche Ihnen viel Spaß beim Optimieren und schauen Sie Ihren Bildern in die Augen!