Landingpage-Optimierung

Landingpage-Optimierung – Tipp #1

10 September 2009, Torsten Hubert

Die Landing-Page-Optimierung ist aus meiner Sicht eins der spannensten Themen im CRO. Es gibt viele Weisheiten und Mythen, wie gute Landing-Pages funktionieren sollen. Mit der neuen Serie möchte ich mit diesen Halbwahrheiten Schluss machen und echte Hilfestellung für die Gestaltung Ihrer Landing-Pages geben. Hierzu werde ich jeweils Teilaspekte der Landing-Page-Optimierung genauer untersuchen und Empfehlungen aussprechen. Im ersten Teil der Serie möchte ich mich mit dem Thema Call-to-Action Design beschäftigen. Genauer gesagt mit der Gestaltung der Onpage-Call-to-Action.

Die These: konträre Elemente konvertieren besser

Buttons sind auf Online-Shops und in Websites häufig aus ästhetischen Gesichtspunkten im CI in ein festes Farbschema integriert. In guten CIs gibt es unterschiedliche Gewichtungen von Buttons um z.B. primäre und sekundäre Aktionen zu gewichten. Aber auch diese passen sich meistens schön harmonisch in das Farbschema der Website ein. Eine konträre Farbigkeit in Buttons, die aus der Farbwelt “ausbricht” gibt es in den wenigsten CI-Definitionen. Dabei sollen doch grade die Primär-Aktionen die Onpage-Call-to-Action hervorstechen, damit diese leicht gefunden werden und den Nutzer so zum nächsten Schritt leiten. Dies führt uns zur These, dass das “Andere” in der Gestaltung die Aufmerksamkeit auf die Primär-Aktion lenkt.

Die bestehende Landing-Page

Um dies zu untersuchen haben wir eine Seite eines großen Versicherers untersucht. Es handelt sich hierbei um eine Unterseite der Webpräsenz die über eine AdWords-Anzeige aufrufbar ist. Ich möchte an dieser Stelle nochmal darauf hinweisen, dass wir aktuell keine Geschäftsbeziehung zu dieser Versicherung haben, noch in irgendeiner Art und Weise rufschädigend wirken möchten. Das folgende Beispiel dient allein der Veranschaulichung:

Landing-Page vor Optimierung

Der Versuchsaufbau

Um nicht auf Experten-Meinungen angewiesen zu sein, habe ich ein kleines Lab in unserem Eyetracker durchgeführt um herauszufinden, ob die These tragbar ist oder nicht. Hierzu wurden ein A/B-Test mit jeweils zehn Probanden durchgeführt. Jeder Proband hat nur eine Version der Landing-Page gesehen um ein klares Ergebnis zu erhalten. Es wurde jeweils drei Messungen mit jeweils 4 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 Unterschied auf der Landing-Page

Der einzige Unterscheid auf der Landing-Page war die Gestaltung der Onpage-Call-to-Action. Der “Jetzt abschließen” Button. Folgende Versionen der Buttons wurden getestet:

Variante 1: das Original:

Landing-Page Original-Ausschnitt

Variante 2: die konträre Darstellung:

Landing-Page Ausschnitt optimiert

Für diese Gestaltung wurde eine auf der Website nicht existierende Farbe gewählt und der Button durch einen stärkeren Schatten noch deutlicher hervorgehoben.

Die Messergebnisse

Version 1: das Original:

Landing-Page-Heatmap Original

Version 2: die konträre Darstellung:

Landing-Page-Heatmap Optimiert

Man erkennt deutlich, dass in der ersten Version die Blicke über die ganze Seite verbreitet sind. Es gibt mehrere “Hotspots”. Die Primär-Aktion ist jedoch keiner davon. In der zweite Version ist der einzige echte “Hotspot” der Messung auf der Call-to-Action. Der Blick der Nutzer geht weniger unkontrolliert über die Website, sondern festigt sich rund um das Ziel des Websitebetreibers.

Das Fazit

Gestalten Sie Ihre primäre Call-to-Action immer konträr zu allen anderen Elementen Ihrer Website. Nur so schaffen sie es die Blicke Ihrer Nutzer zum gewünschten Ziel zu lenken.

Ich wünsche Ihnen viel Erfolg!

Hat Ihnen der Artikel gefallen? Helfen Sie mit

  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogosphere News
  • e-mail
  • Live
  • MisterWong.DE
  • Technorati
  • Webnews.de
  • Yigg
  • Furl
  • StumbleUpon

Ähnliche Beiträge:

  1. Landingpage-Optimierung – Tipp #3 – Schau mir in die Augen
  2. Landingpage-Optimierung – Tipp #2
  3. Landingpage-Optimierung Tipp #4 – Gefahr durch Blicke
  4. Landingpage Optimierung Tipp #5 – Call-to-Action links oder rechts
  5. 5 wichtige Elemente für gute Landing-Pages

Tags | Call-to-Action, Conversion Optimierung, Eyetracker, Konversionsoptimierung, Landing-Page, Landingpage-Optimierung, Lead-Generierung, Mythen, Tipps

Über den Autor:
Torsten Hubert Torsten Hubert beschäftigt sich seit zehn Jahren intensiv mit Webmarketing und ist Google Advertising Professional. Er ist hauptberuflich Senior-Consultant bei dem CRO-Spezialisten Web Arts AG und hat sich dort auf Webmarketing und Landing-Page-Optimierung spezialisiert. Lesen Sie auch sein privates Landingpage-Optimierung Blog oder folgen Sie ihm auf Twitter.

30 Responses to “Landingpage-Optimierung – Tipp #1”

Kommentare:
  1. Torsten Daus says:

    Interessanter Beitrag – ich frage mich bei solchen doch recht aufdringlichen Call-to-action-Buttons immer, ob denn auch tatsächlich gewünscht ist, dass der Surfer direkt den “Weiter” bzw. “Kaufen” Button so frühzeitig erkennen soll. Ist es nicht in manchen Fällen die Originalversion in Ihrem Test, die gewünscht ist? Sollen die User nicht zunächst die Informationen der Seite aufnehmen und den Button danach finden?

    Klar, es gibt viele Fälle, in denen ein Formular nicht als Formular zu erkennen ist, aber dies ist ja in diesem Beispiel nicht der Fall.

    Beste Grüße
    Torsten Daus

  2. Nicolas Neubauer says:

    Beeindruckendes Ergebnis!

  3. Ich muss Ihnen recht geben Herr Daus, die Intention des Website-Betreibers kenne ich natürlich nicht.

    Ziel des Tests war ja auch nicht die Abverkäufe zu optimieren, sondern nur die Blicke des Nutzers auf eine Aktion zu konzentrieren. Ob das jetzt unbedingt der “Jetzt abschließen” Button sein muss, ist aus meiner Sicht egal. Ich wage einfach mal die ungetestete Aussage, dass mit dieser Gestaltung auch jeweils die anderen beiden Buttons “Jetzt berechnen” und “Angebot anfordern” in den Fokus gerückt werden können. Je nach den Zielen des Website-Betreibers und den Wünschen der Kunden.

    Um letzteren Punkt herauszuarbeiten bietet sich unser Produkt MotivationLab® an. Dies dient dazu die Motivatoren der Nutzer herauszuarbeiten und die Website daraufhin zu optimieren.

    Viele Grüße und danke für Ihr Feedback,
    Torsten Hubert

  4. André Morys says:

    Zu Frage der Relevanz dieser Optimierung kann nur der Betreiber des Portals etwas sagen. Die Signifikanz des Ergebnisses finde ich aus optimierungs-technischer Sicht erstaunlich.

  5. Genau nur für diesen Zweck (Konzentration auf Call2Action) habe ich eine separate Seite gestartet – die Aufgabe und das Ziel sind klar fokussiert: den Nutzer dazu bewegen, die Testversion des Produkts herunterzuladen. Mit gesunder Dosis an Informationen plus kontrastreiche Schaltflächen. Zu sehen unter http://simple.wpseo.de

  6. Starke Konzentration auf die Call-to-Action. Aus Nutzersicht würde ich eventuell noch mehr Infos zu “was ist wpseo” verlinken und einige Pro-Argumente nach oben holen.

    Auf welche Art schaffst du Traffic auf diese Seite? Banner? AdWords?

  7. Torsten, sorry, ohne Kommentarbenachrichtigung habe ich erst jetzt mitbekommen, dass du auf meinen Kommentar reagiert hast.

    Ja, das habe ich auch noch vor, ich werde die Landingpage nach und nach modifizieren und dabei die Conversion Rate messen.

    Zurzeit ist die Webseite mit klassischen Banneranzeigen verknüpft.
    Schönen Dank für deine Vorschläge.

  8. linda says:

    Sehr spannender Beitrag, vielen Dank, die Grafiken sind beeindruckend und untermauern eindeutig die Empfehlung, z.B. Warenkorb-Buttons auffällig zu gestalten.

  9. Die Grafiken sind im Prinzip ganz nett – gibt es aber auch Zahlen zur Conversion Rate. Mehr Aufmerksamkeit ist schön – aber führt sie auch zu mehr Kaufabschlüssen?

  10. André Morys says:

    Hallo Herr Krüger,

    toll, dass Sie so früh morgens schon konversionsKRAFT.de lesen, vielen Dank!

    Zur Frage: Wenn meinen Kollegen richtig verstanden habe, will er zeigen, welchen Einfluss kleinste Veränderungen an Call-to-Action-Elementen in Form des Blickverlaufs haben können.

  11. @Morys: Die Zusammenarbeit mit unseren US-amerikanischen Kollegen bedarf manchmal ungewöhnlicher Arbeitszeiten. ;-)

    Danke für die Aufklärung. Dann wundert mich das Ergebnis jedoch nicht – interessant wäre nun, wie diese Aufmerksamkeitsveränderungen wirklich wirkt. Es gibt genug Fälle, wo z.B. rote Buttons die Conversion stark negativ beeinflusst haben, da diese (so eine Theorie) von den Besuchern eher als Warnsymbole wahrgenommen werden und somit vom klicken abschrecken.

  12. André Morys says:

    stimmt, das könnte tatsächlich passieren,… aber darum ging es ja zum Glück nicht in dem Experiment.

  13. Oliver Klein says:

    Spannendes Ergebnis, ich hatte immer bedenken, dass diese farbliche Untermalung eher störend wirken könnte.

    Danke für diesen Test.
    Grüße

  14. Ich glaube genau das ist der “Trick” an der Sache. Durch den visuellen Störer durch die Farbe, ist der Button natürlich auffälliger.

  15. Schrauber says:

    Das Thema Landingpage ist viel umfangreicher, als eine Landingpage vermuten lässt. Das Thema ist aber sehr interessant und mit den richtigen Tricks kann man einiges erreichen.

  16. Mesut Yilmaz says:

    Super tipp, den ich jetzt in meiner Landing Page umsetzen werde. Wann kommt der nächste Beitrag zu Landing Pages Optimierung?

    Und nochmals Danke!

  17. Ich finde eure Messergebnisse richtig toll… Habt ihr die selber ausgewertet oder wurden die eingeholt?!

  18. Hallo Herr Freitag
    Wir haben natürlich Eye-Tracking-Systeme welche es uns ermöglichen solche Daten zu erheben
    http://www.konversionskraft.de/hintergrunde/eyetracking-analyseverfahren-zur-usability-und-konversionsoptimierung.html

Trackbacks / Pingbacks:
  1. [...] zu Landing-Page-Optimierung: Kontrastreiches Call-to-Action –LINK– [...]

  2. [...] This post was mentioned on Twitter by André Morys Web Arts, André Morys Web Arts, Inside AdWords-Team, Martin "Grobi&q and others. André Morys Web Arts said: RT @mhenrici: Konversionsoptimierung von Landingpages http://bit.ly/U9NPu call-to-action at its best [...]

  3. [...] Landing-Page-Optimierung – Tipp #1 | Konversionsrate verbessern, Conversion-Rate-Optimization … Versuch: Landingpage Optimierung durch konträre Elemente Tags: Landingpage Optimierung [...]

  4. [...] Read this article: Landing-Page-Optimierung – Tipp #1 | Konversionsrate verbessern, Conversion-Rate-Optimization – konv… [...]

  5. [...] und Irrtümern. Da sie aber gerade auch für Online-Shops ein sehr wichtiger Faktor ist, will Torsten Hubert von konversionskraft.de in einer Artikelserie Teilaspekte genauer untersuchen und dazu Tipps [...]

  6. [...] Hubert stellt auf seinem Blog die Ergebnisse einer Untersuchung vor, die er mit einem “Eye-Tracker”, also einer [...]

  7. [...] und Irrtümern. Da sie aber gerade auch für Online-Shops ein sehr wichtiger Faktor ist, will Torsten Hubert von konversionskraft.de in einer Artikelserie Teilaspekte genauer untersuchen und dazu Tipps [...]

  8. [...] Offensichtlich eine Art Serie. Na ja. Der erste Beitrag ist jedenfalls schonmal gut. Hier der Link: http://www.konversionskraft.de/landing-page-optimierung/landing-page-optimierung-tipp-1.html Kategorie: Keyword-Advertising Trackback Jetzt kommentieren [...]

  9. [...] Ziel einer jeden Webseite, Kunden oder interessenten zu generieren. Hierzu bin ich auf einen interessanten Beitrag [...]

  10. [...] Hubert vom konversionsKRAFT Blog gibt in zwei Artikeln (1, 2) Tipps zur Optimierung von Landing Pages, also Produktseiten, die besonders für [...]


Leave a Reply

Conversion Optimierung  Konversionsrate  Shop-Optimierung