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:
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:
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:
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:
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:
In der optimierten Version wurden die Buttons in die Blickrichtung der Person auf dem Visual verschoben.
Der ad-on Landing-Page-Test
Heatmap Original:
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:
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:
“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:
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!
17 Kommentare
Rene,
Cooler Post. Kurze Frage, werden außer Blickfeld-Analysen nachher auch die Wirkung abgefragt? Also, welchen Eindruck die Seite auf die Befragten macht? Könnte mir vorstellen, dass zwar die Buttons beim ersten Beispiel besser gesehen werden, der Gesamteindruck der Seite sich aber verringert. Das zweite Beispiel zeigt eine bessere Eignung. Sehr schöner Hinweiß mit der Eignungsüberprüfung des Key-Visuals.
Torsten Hubert,
Hallo Rene,
leider ist das “nur” ein reiner Wahrnehmungstest. Da es sich bei den Websites nicht um Kunden von uns handelt, können wir die Auswirkung auf die reale Konversionsrate nicht feststellen. Vielleicht lesen die Betreiber der Websites ja den Blog und Testen die Elemente einmal in einem A/B-Test gegeneinander und teilen uns die Ergebnisse mit.
Webstandard-Team,
Klasse Beitrag Torsten mit wunderbaren Screens, die aufzeigen das mit wirklich kleinen Veränderungen eine große bzw. verbesserte Wirkung erzielt werden kann.
Sergej Müller,
Absolut lesenswerter Post mit viel Gehalt. Herzlichen Dank dafür, wieder was gelernt.
Rene,
Hehe 😉 Jetzt wo Kaltakquise anders so schwierig ist 😛
Ja, aber bei Euren Beratungen. Befragt ihr neben A/B Test auch einen Teil der Kunden?
Torsten Hubert,
@Rene: Im Rahmen der Beratung unserer Kunden liegt der Fokus klar auf der Befragung der Kunden. Mit Hilfe unseres MotivationLabs® finden wir hier die wirklichen Motivatoren und Demotivatoren für / gegen eine Konversion heraus.
Thomas Rentschler,
Wunderschöner Beitrag, hoher Informationsgehalt. Danke.
Malte Landwehr,
Zwei sehr gute Beispiele für Conversion-Optimierung. Wobei mich bei diesen beiden Seiten noch interesssieren würde, was bei gespiegeltem Design (also Buttons links und Person recht) passiert.
Dirk E. Schneider,
Vielen Dank, die Beiträge dieser SErie zeigen, dass es einen methodischeren Ansatz gibt als das bloße “Austesten” von oberflächlichen Ideen. Hier wird Wahrnehmungs- und Konsumpsychologie messbar gemacht. Ich freue mich auf weitere Beiträge!
Max Holde,
Hallo Torsten, wirklich tolle Versuche! Die mich als Designer dazu bringen noch genauer darauf zu achten wie ich Elemente anlege. Vielen Dank!
toto,
ein guter Beitrag.
Auch wir setzen landingpages ein und werden diesen Beitrag weiter beobachten.
Weiter so!
Didi,
Zwei sehr gute Anschauungsbeispiele die es sehr gut verdeutlichen!
Daniel,
Wunderschöner Beitrag mit hohem Informationsgehalt. Danke.
Svenni,
Ein wirklich interessanter Test. Besten Dank für die aufschlussreichen Infos. =)
Michael Klomfass,
Thanx! Wenn man mal von den zahlreichen Rechtschreibfehlern absieht, ein wirklich sehr wertvoller Beitrag.
Manuel,
Wow, das ist beeindruckend. Es ist unglaublich worauf man heutzutage achten muss.
Christoph,
Klasse Artikel. Bin ein großer Fan vom Gesichtern in Websites zur Aufmerksamkeits- und Sympathie-Steigerung. Die Beweisführung der Verknüpfung von Gesichtsabbildung und call-to-action-Button ist super-überzeugend.