Von Torsten Hubert | Landingpage-Optimierung | 22 Reaktionen

3 Landingpages im Eyetracking-Test und 15 Dinge, die wir daraus lernen können

Auf der Suche nach einem geeigneten Testumfeld für den heutigen Eyetrackingtest bin ich auf das Thema Girokonto gestoßen und habe drei Landingpages von Banken untersucht. Dabei sind mir 15 Dinge aufgefallen, die wir daraus lernen können…

Bei der Suche nach geeigneten Landingpages habe ich einfach das Keyword „Girokonto eröffnen“ in Google eingegeben und die ersten drei Adwords-Anzeigen angeklickt. Verwundert hat es mich, dass alle drei geöffneten Seiten „echte Landingpages“ sind. Keiner der Top-3 Adwords-Anzeigen hat auf seine „normale“ Website verlinkt. Das ist mir bisher eigentlich noch nicht untergekommen. Jemanden von euch vielleicht?

Die Landingpages für den Eyetracking-Test stehen somit auf jeden Fall schon einmal fest… 😉

Die Testkandidaten

DKB Landingpage

Landingpage DKB-Bank
Landingpage DKB

Im oberen Bereich der Seite finden wir das Logo mit dem Claim der DKB. Darunter die werbliche Aussage des DKB-Cash-Girokontos gefolgt vom eigentlichen Inhalt der Seite. Dieser ist dreispaltig angelegt. Auf der linken und rechten Seite sind Trustelemente wie z.B. Finanztest, Focus Money und ntv-Test aufgezeigt.

Im zentralen Bereich befindet sich eine List der wichtigesten Leistungseckpunkte des Girokontos und die blaue Call-to-Action. Abgeschlossen wird die Seite mit einer Trennlinie und dem Footer mit rechtlichen Informationen.

.comdirect Landingpage

Landingpage comdirect
Landingpage .comdirect

Einen ähnlichen Aufbau bietet die Landingpage der .comdirect. Im Kopfbereich ebenfalls das Logo gefolgt von der werblichen Aussage „Kostenlos ohne Mindestgeldeingang“.

Darunter befindet sich der eigentliche Inhalt der Seite mit den wichtigsten Informationen und Call-to-Action auf der linken Seite und dem Stiftung Warentest Trust-Element auf der rechte Seite. Darunter befinden sich weiterführende Aktionen und Downloads. Etwas außerhalb des Layouts befindet sich eine Kontaktbox mit Mitarbeiter-Foto.

Den Abschluss des zentralen Bereichs übernimmt hier ebenfalls der Footer mit rechtlichen und weiterführenden Aktionen.

1822direkt Landingpage

Landingpage 1822direkt
Landingpage 1822direkt

Der Aufbau der 1822direkt Landingpage unterscheidet sich deutlich von den beiden anderen. Es gibt hier einen zweispaltigen Aufbau. Auf der linken Seite gibt es das Keyvisual und zwei Trust-Elemente (ntv-Test und Börse online).

Auf der rechten Seiten finden wir die Begrüßung gekoppelt mit dem werblichen Claim „Beste Tagesgeldbank 2009“. Danach die wichtigsten Vorteile und danach drei unterschiedliche Produkte Tagesgeldkonto, Festgeldkonto und Girokonto.

Den Abschluss bildet auch hier der Footer mit den rechtlichen Infos.

Der Testaufbau

Der Test wurde mit einem relativ geringen Panel von 10 Personen durchgeführt. Es waren 4 weibliche und 6 männliche  Probanden im Alter von 25 bis 37 Jahre mit durchschnittlich bis hoher Internetaffinität. Die Personen erhielten das Briefing, dass Sie sich im Internet nach einem Girokonto informieren möchten und hierzu über eine Google Suche die folgenden Seiten zu sehen bekommen und sich in 10 Sekunden eine erste Meinung zu dem Anbieter und dem Inhalt der Seite / dem Produkt bilden sollen.

Die Ergebnisse

Schauen wir uns die Ergebnisse des Eyetracking-Tests einmal im Detail an. Natürlich können wir keine Aussagen zu den Konversionsraten der Seiten machen. Das einzige was wir „aus der Ferne“ können, ist die Wirkung der Elemente auf die Aufmerksamkeit der Nutzer zu analysieren und dies bewerten.

Eyetracking Ergebnisse DKB

Heatmap DKB
Heatmap DKB

Es sind sechs große Fokus-Bereiche im Eyetracker zu erkennen. Das Trustelement auf der linken Seite, der Beginn der Nutzenliste in der Mitte, die blauen Teile der Nutzenliste, das 0-Euro Promo rechts im Text, das erste Trustelement auf der rechten Seite und die Call-to-Action am unteren Ende des zentralen Bereiches.

Das Logo und die werbliche Botschaft werden in den ersten 10 Sekunden kaum wahrgenommen. Die Texte neben den blauen Bullets genauso wie die weiteren Trustelemente auf der rechten Seiten ebenfalls nicht.

Das können wir daraus lernen:

  • Keine bannerähnlichen Formate nutzen
    Wichtige werbliche Informationen sollten nicht in einem Format dargestellt werden, dass einem Banner ähnelt. Grade internetaffine Nutzer blenden solche Elemente unbewusst aus. Besonders unterstützt wird dieses Verhalten durch den Rahmen des Elements.
  • Wichtige Informationen links vom Text platzieren
    Die Position links des Textes ist sehr aufmerksamkeitsstark. Hier sollten sehr wichtige Informationen platziert werden, die den Nutzer schnell davon überzeugen, weiter in die Seiten einzusteigen. Das Siegel „Bestes Girokonto 2010“ von ntv-Test ist ein schönes Beispiel für ein geeignetes Element.
  • Die richtigen Dinge highlighten
    Die Vorteile des Kontos werden in Form einer blauen Bulletliste gefolgt von grauem erklärenden Text dargestellt. Das Problem hierbei ist, dass die eigentliche Information nicht im aufmerksamkeitsstarken Teil des Textes steht. Fünf der acht blauen Texte lauten „0,- Euro“. Dies ist für den Nutzer zwar ein Zeichen für günstig, aber beinhaltet sonst keine relevanten Informationen.
  • Zusammenhängende Informationen nicht trennen
    Durch die Aufteilung des Content-Bereichs in zwei Spalten entsteht eine Trennung zwischen den beiden Textteilen. Hier könnte z.B. statt „0,- Euro“ und „Internet-Konto“, „Kostenloses Internet-Konto“  stehen. So würde dem User der Nutzen klarer kommunziert werden.
  • Platzieren Sie das stärkste Trust-Siegel oben
    Es wird deutlich, dass die Liste der Trust-Elemente auf der rechten Seite von oben nach unten deutlich weniger  wahrgenommen wird. Zusätzlich tritt hier der sogenannte Halo-Effekt auf. Das erste Siegel wird sehr stark wahrgenommen. Die Botschaft besagt in etwa: „günstiges Girokonto“. Das zweite Siegel (Stiftung Warentest) wird erkannt und ebenfalls mit dem Girokonto verbunden. Viele Nutzer projizieren den eben gelesenen Testsieger auf dieses Element. Einige Aussagen der Nutzer zu diesem Produkt waren: „Testsieger Stiftung Warentest“. Dabei handelt es sich um eine völlig andere Aussage: „Günstig reisen mit der DKB-Visa-Card“.

Eyetracking Ergebnisse .comdirect

Heatmap comdirect
Heatmap comdirect

Die .comdirect Landingpage hat sechs Aufmerksamkeitsbereiche. Den Anfang macht das Logo im Kopfbereich, gefolgt von der werblichen Info oberhalb des eigentlichen Textes. Danach die Headline und Einleitungstext und das Trust-Element auf der rechten Seite. Weitere sehr starke Elemente sind die Call-to-Action und das Foto der Kontaktbox.

Der eigentliche Content der Seite wird kaum wahrgenommen.

Das können wir daraus lernen:

  • Logo braucht Freiraum
    Damit das Logo wahrgenommen werden kann, benötigt es Freiraum. Gönnen Sie sich diese „Platzverschwendung“.
  • Relevante Aussagen fokussieren
    Das werbliche Element wird weniger beachtet, als die Headline „Jetzt Aktivitätsprämie sichern“ des Contentbereis. Die Primärmotivation der Seite ist jedoch Girokonto eröffnen. Dies sollte entsprechend im Zentrum der Aufmerksamkeit stehen.
  • Ein einzelnes Trust-Element wirkt sehr stark
    … wenn es wirklich gut ist. Ein „Testsieger“ oder „Spitzenreiter“ von Stiftung Warentest ist wie ein Ritterschlag. Nutzen Sie es gezielt und verwässern Sie es nicht durch schlechtere Siegel.
  • Nutzen Sie haptische Buttons
    Ein Button ist ein Button ist ein Button… 😉
    Gestalten Sie ihn entsprechend haptisch. Das Auge sucht nach solchen gewohnten Interaktionsflächen. Unterstützt wird dies durch deutliche und kontrastreiche Farbgebung.
  • Call-to-Action-Text = Zusammfassende Aktion
    Dampfen Sie den Text der Call-to-Action auf das wesentliche der Seite herunter. In diesem Beispiel ist dies „Jetzt Girokoto eröffnen“. Zeigen Sie dem User, was er hinter dem Button zu erwarten hat. Dies sollte möglichst seine Primärmotivation erfüllen. Eventuell könnte man hier noch optimieren mit „Jetzt kostenlos Girokonto eröffnen“ um diesen Aspekt mehr in den Vordergrund zu holen. Ein Button mit „Jetzt kostenlos Girokonto eröffnen und Aktivitätsprämie sichern“ ist jedoch sicher ein bischen viel. 😉
  • Vorsicht bei Gesichern
    Gesichter auf Landingpages, die den Nutzer ansehen sind absolute Aufmerksamkeitsmagneten. Sie sind ein extrem mächtiges Mittel um Aufmerksamkeit zu steuern. Lesen Sie hierzu meine zwei Posts Schau mir in die Augen und Gefahr durch Blicke.

Eyetracking Ergebnisse 1822direkt

Heatmap 1822direkt
Heatmap 1822direkt

Die 1822direkt Landingpage hat sieben Aufmerksamkeitsbereiche: das Logo, das Gesicht der Frau, das erste Trust-Element, die Begrüßung / werbliche Information, die beiden ersten Zwischenüberschriften und die erste Call-to-Action.

Das Besondere der Landingpage ist, dass der Teaser des eigentlich gesuchten Produkts „Girokonto“ kaum wahrgenommen wird.

Das können wir daraus lernen:

  • Inhaltliche Relevanz schaffen
    Das wichtigste Learning aus dieser Seite ist, dass die Seite natürlich an die Bedürfnisse des Nutzer angepasst werden muss. Wenn dieser nach „Girokonto eröffnen“ sucht, sollte ich den Girokonto-Teaser nach oben stellen und die Inhalte der Seite möglichst auf das Thema Girokonto abstimmen.
  • Logo oben links
    Das Logo in der linken oberen Ecke ist erwartungskonform und hat dort eine hohe Aufmerksamkeit. Gestützt wird dies durch die sehr kontrastreiche Darstellung mit blauem Hintergrund und weißem Text.
  • Klarer Seitenaufbau und klare Gliederung bringt Orientierung
    Das Eyetracking zeigt das typische Scanmuster vieler Internet-Nutzer. Sie überfliegen den Text und bleiben an Zwischenüberschriften oder Bulletlisten hängen. Erzeugen diese eine emotionale Resonanz, steigt der Nutzer weiter ein und liest diesen Abschnitt, bevor er weiter scannt.
  • Klare Priorisierung der Call-to-Action-Elemente
    Die Seite hat drei absolut gleichwertige Call-to-Action-Elemente. In Kombination mit der Relevanz zum Motiv des Nutzers sollte eine Primär-Call-to-Action definiert und entsprechend stärker gestaltet werden.

Ich wünsche viel Spaß beim Optimieren und freue mich auf Ihre Kommentare.

Torsten Hubert

Torsten Hubert beschäftigt sich seit fünfzehn Jahren intensiv mit Webmarketing und ist Google Advertising Professional. Er ist hauptberuflich Head of Consulting und Mitglied der Geschäftsleitung bei dem CRO-Spezialisten Web Arts AG und hat sich dort auf strategisches Growth-Consulting spezialisiert. Weiterhin ist Torsten Hubert Dozent für Conversion Optimierung, Usability und Motivatorik an der Hochschule Darmstadt.Sie erreichen Torsten Hubert auch über XING.
Frage zum Artikel? Frag den Autor

22 Reaktionen auf „3 Landingpages im Eyetracking-Test und 15 Dinge, die wir daraus lernen können

  1. Sehr lesenswerter Artikel!

    • Hi Torsten. Das sind erst einmal nette Ergebnisse für die einzelnen Landing Pages. Das muss aber nicht bedeuten, dass ich ein Ergebnis aus der einen Studie 1:1 auf meine Landing Page übertragen kann? Es sind aber Anregungen, über die man sich Gedanken machen kann bzw. bei den man überlegen kann, was wie wirken könnte.

      Wie Du schon geschrieben hast, wurde die Conversion nicht untersucht, sondern nur, welche Elemente besonders oder weniger stark wahrgenommen werden. Alle 3 Landing Pages haben keine direkte Conversion auf der Seite (zum Beispiel ein Formular), sondern verlinken auf eine weitere Seite, wo dann wahrscheinlich ein Formular ausgefüllt werden kann. Hast Du einmal die Auswirkung der Landing Page-Elemente auf die Klickrate des Buttons untersucht? Sprich, gibt es bestimmte Elemente, die abschreckend wirken und von einem Weiterklicken abhalten? Und andersherum: Gibt es Elemente, die das Weiterklicken fördern? Kannst Du das Segmentieren? Viele Fragen. 🙂

      BTW: Kann ich hier auch Kommentare abonnieren oder habe ich das Plugin (Subscribe to Comments) übersehen? 🙂

      • @Christian: Danke

        @Birger: Du hast völlig recht. Die Erstellung von Landingpages ist sehr individuell und man kann in meinen Augen kaum globale Regeln definieren, wie diese aufgebaut werden sollten. Die 15 Tipps hier sollen als Anregung und Inspiration für Tests dienen.

        Bezüglich der Frage was das Weiterklicken auf Seiten fördert, kann man aus diesem Grunde leider auch keine wirklich allgemeingültigen Details liefern. Ich habe hier mal eine Serie über Kovnersionskiller geschrieben vielleicht hilft dir das ja etwas weiter… 😉

        Subscribe to Comments Plugin haben wir im Moment nicht am Start. Ist aber eine Überlegung wert.

        • Interessante und nachvollziehbare Interpretation. Für mich ist das größte Problem der Versuchsaufbau, da alle Seiten die gleiche Zeit und Aufmerksamkeit bekommen – in der Praxis aber in Konkurrenz, bzw. Verdrängung stehen würden.

          Interessant wäre: Würde sich der User überhaupt 10sek. auf jeder Seite aufhalten…

          • Hallo Herr Hubert,
            die Analyse der verschiedenen Landingpages finde ich sehr interessant. Was ich mir noch gewünscht hätte neben der Conversiondaten wären die 3 Adwordstexte der Banken. Dann hätte man schön erkennen können, ob das Nutzenversprechen auch direkt im oberen Bereich der LP aufgegriffen wurden.

            Viele Grüße,

            Dieter König

            • Hallo Torsten,
              würdest du empfehlen Landingspages zubauen und eine Eyetracking-Analayse mit (firmenunabhängigen) Testpersonen vor dem Launch durchzuführen (mit der Möglichkeit der anschließenden Optimierung)? Oder wäre dies zu aufwändig?

              • Sehr interessanter Artikel. Bei meinem nächsten Projekt werde ich ein paar Erkenntnisse einbauen

                • Ich bin begeistert, was sich alles aus einfachen Heatmaps so rauslesen lässt … Wäre da etwas vorsichtiger, nicht wegen der Anzahl an Testpersonen (n=10), viel eher wegen der wenig differenzierten und genauen Betrachtung der Daten. Was ich gerne wissen würde: Wie unterscheidet sich die Aufmerksamkeitsverteilung in den ersten 2 Sekunden von derjenigen in der rechtlichen Kontaktdauer mit der Page? Welche Elemente haben die meisten Fixationen bekommen? Gibt es typische Verläufe, Blickübergangswahrscheinlichkeiten zwischen Elementen der Page? Wie lange hat es im Mittel gedauert, bis das zielführende Element betrachtet wurde?
                  Erst wenn diese Antworten vorliegen, erst dann lassen sich meiner Erfahrung nach aus Blick-Bewegungsmessungen (! Betonung liegt auf Bewegung) Erkenntnisse und Schlüsse ableiten. Bunte Heatmaps sind einfach nur schön, aber nur wenig interpretationsfähig.
                  Klar, Antworten auf die aufgeworfenen Fragen sind aufwändig zu ermitteln, es braucht weitere Analysen, Werkzeuge in der Auswertung und damit Zeit. Aber diese Zeit lohnt sich, so meine Erfahrung.

                  Weiter Tipps und Anmerkungen zur Auswertung von Blickdaten u.a. hier:
                  –// „Trends bei Blickbewegungsmessungen im Usability-Lab: Schöne, bunte Bilder sind zu wenig!“
                  –// http://tinyurl.com/3xnvkqd
                  Kurz-URL auf Blogbeitrag auf Usabilityblog.de .

                  Nichts für „Ungut“, Torsten, aber wir müssen und sollten aufpassen, dass wir dieses wertvolle Instrument „Eyetracking“ richtig einsetzen und „verkaufen“. Es ist ein so tolles Tool – und liefert so wertvolle, objektive und zuverlässige Daten wie fast kein anderes Erhebungsverfahren. Wenn richtig eingesetzt und zielführend ausgewertet.

                  • Und mal wieder viel gelernt, vielen Dank!!!

                    • Hallo Herr Wilhelm, das sind sicher interessante Fragen die Sie da stellen. Wir haben aber in diesem Test das Ziel, ganz einfache Anregungen für Optimierungen in A/B-Tests zu liefern, d.h. die Validierung der Erkenntnisse kann duch das Eyetracking gar nicht erfolgen sondern erfolgt in der Praxis jeweils individuell. Und zum Thema „Eyetracking als wertvolles Tool“ stolpere ich gerade über einen Beitrag von eResult in der IWB Nr. 20/2010 auf Seite 44 und bin ratlos …?

                      • von Christian reschke

                        … Und manchmal sind die Seiten auch nicht so ganz optimal weil der Auftraggeber nicht mitzieht…

                        • Ich bin dankbar für die gewonnen Erkenntnisse, an denen ich kostenlos profitieren kann. Zumindest regen sie meine „grauen Zellen“ zum nach- und überdenken an.

                          Eine Frage habe ich, die ich leider nirgends beantwortet bekomme: Wurde nach dem ersten Eindruck gefragt? Wenn ja, wie änderte sich dieser während der fortlaufenden Benutzung der Landingpage?

                          • eine sehr hilfreiche Information, die ich bei meinem nächsten Projekt miteinbeziehen werde…Danke!

                            Schreibe einen Kommentar

                            Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.