Seite auswählen

Design-Mythen in der Conversion Optimierung:

Heute möchte ich mit einigen Conversion Design-Mythen aufräumen!

Soviel zu gutem Conversion Design vorab:

Es gibt keine „beste“ Button-Farbe.

Es gibt keine „beste“ Schriftart.

Es gibt kein „perfektes“ Template für jede Landingpage.

Wer mehr als diesen einen Blog-Artikel zum Thema Conversion Optimierung gelesen hat, der wird bereits über die Diskussion gestolpert sein: Welche Farbe hat der perfekte Call-to-Action-Button? Das Beispiel unterschiedlicher Button-Farben habe ich selber früher häufig benutzt, um Einsteigern in die Conversion Optimierung die Idee eines A/B-Tests bildlich zu vermitteln. Leider bleibt diese Idee viel zu oft in den Köpfen der Adressaten hängen – dafür entschuldige ich mich.

Wer aber nach diesem Artikel immer noch glaubt, dass es sinnvoll ist, eine bestimmte Button-Farbe auf allen Seiten einzusetzen… dafür übernehme ich keine Verantwortung mehr. „Button-Farbe“ ist also der niedrigste gemeinsame Nenner von CRO-Talk.

Ich wiederhole es einfach noch mal: Es gibt keine beste Button-Farbe.

Schaue dir dieses Beispiel an:

(via Hubspot-Blog)

In diesem Fall ist der Button einmal grün und einmal rot, was den Umsatz (nicht nur die CTR) um fast ca. 10% erhöht.

„Nun“, würden jetzt manche sagen, „sie hätten sogar noch mehr Conversions gemacht, wenn sie Amazon-Orange benutzt hätten. Warme Farben wie Rot sind aufregend, aber auch Warnsignale. Also sollte die etwas sanftere Variante, nämlich orange Buttons verwendet werden.“

Manche Optimierer gehen sogar so weit zu sagen: „Rot ist die beste Button-Farbe.“

Hier ist ein Test von Verizon, der die Allgemeingültigkeit dieser Aussage anzweifelt. In einer Variante gibt es viele rote Buttons und in der anderen Variante viele dunkelgraue Buttons.

Die Antwort scheint klar –  die roten Buttons werden gewinnen.

Baseline-Variante „Verizon Button-Test“ – Rote Buttons

Test-Variante „Verizon Button-Test“ – Graue Buttons

Nicht ganz. Die dunkelgrauen Buttons erhöhten die Klickrate um 10% gegenüber den roten Buttons.

Interpretation des CTA-Button Tests

Wie ist das möglich? Da Verizons Branding rot ist, gehen die roten Buttons innerhalb der Seite verloren. Die Buttons kontrastieren den Rest der Seite nicht genug.

Denn was bei Conversion-zentriertem Design funktioniert, ist die Nutzung von Kontrast. Dort, wo du den Besucher zu einer Aktion bewegen möchtest, sollte der größte Kontrast zwischen Call-to-Action und Hintergrundfarbe sein.

Wenn du dir die beiden Beispiele noch einmal genauer ansiehst, fällt im ersten Beispiel auf, dass es auch dort weitere grüne Elemente gibt. Sowohl in der Überschrift, im Hero-Shot als auch in den Vorteilen finden sich grüne Elemente. Der Call-to-Action Button reiht sich in diese Elemente ein und passt gut zum Branding, wird aber wenig wahrgenommen. Die Gewinner-Hypothese für diese beiden ist also, dem Call-to-Action mehr Kontrast zu geben.

Wenn du deinen passenden Farbkontrast bestimmen willst, benötigst du den Hexadezimal-Farbcode der Farben auf deiner Website. Diesen kannst du zum Beispiel mit der gratis Google-Chrome Extension ColorZilla bestimmen. Mit dem Adobe Kuler kannst du dann ganz einfach verschiedene Varianten deiner Kontrast-Farbe finden oder gleich ein gutes Farbset für deine Website und deine Marke ermitteln.

Es gibt keine „beste“ Schriftart im Conversion Design

Eine weitere Frage, die sehr oft auftaucht, ist: „Was ist die beste Schriftart für mehr Conversions?“

Auch hier ist die Antwort unbefriedigend, aber wahr: Es gibt keine beste Schriftart.

Wichtig ist, eine Schriftart zu verwenden, die klar zu lesen ist und deren Persönlichkeit zu den Informationen der Seite und des Unternehmens passt.

Wenn du einen guten Designer hast, sollte er dir helfen können, die Suche nach der richtigen Schriftart einzuschränken. Für Überschriften und Navigationselemente empfiehlt sich auf jeden Fall eine serifenlose Schrift. Ausnahmen bestätigen die Regel.

Versuche, dich auf wenige Schriftarten zu beschränken. Normalerweise genügen zwei verschiedene Schriftarten für die komplette Website. Auf Plattformen wie Pinterest findest du gute Font-Pairings.

Kostenlose Schriftarten gibt es beispielsweise auf Adobe Edge Web Fonts. Eine weitere Quelle für kostenfreie Schriftarten ist die Font-Sammlung von Google.

Häufig funktioniert die Kombination einer Schrift mit Serifen und einer serifenlosen Schrift. Beispiele findest du bei fontpair.co.

Auch fontsquirrel ist eine gute Adresse für schöne und kostenlose Schriftarten.

Es gibt kein „perfektes“ Template für jede Landingpage

Es ist bereits deutlich geworden, dass es keine einfachen Lösungen in Design-Fragen gibt. Manche Lösungen funktionieren auf der einen Seite und schneiden auf der nächsten Website schlecht ab.

Eines haben gute Landingpages aber gemeinsam: Sie sind visuell klar aufgebaut und führen den Besucher durch die einzelnen Elemente der Seite. Dem Besucher sollte klar werden, was er als nächstes tun soll.

Sehen wir uns dies in einem A/B-Test von Spreadshirt an. Optimizely erklärt diesen Test ausführlicher in seinem Blog.

A/B-Test Spreadshirt Optimizely Conversion Design

Die Variation übertraf das Original um unglaubliche 606% bei den Klicks auf „Start Selling“! Klarheit ist häufig Trumpf…

Im Original gibt es eine visuell viel kompliziertere Grafik. Der Besucher muss fünf verschiedene Schritte entschlüsseln. Dann kommt plötzlich noch eine zweite Grafik dazu, die illustrieren soll, wie der Prozess dann bei Spreadshirt weitergeht. Viel zu kompliziert…

In der Variation wird es klarer. Es gibt drei einfache Schritte. Der „Make money“ Part wird schon irgendwie funktionieren. Für die Anmeldung ist er aber vorerst nicht wichtig. Dazu sind die einzelnen Prozess-Schritte mit wenigen Wörtern erklärt.

Auch der Call-to-Action bekommt eine deutlich wichtigere Rolle. Zwar ist er vom Farb-Kontrast zurückhaltender, aber er bekommt eine eigene Zeile und ist der nächste logische Schritt. Auch Weißraum, also der Platz um ein Element, kann ein Conversion-Uplifter sein.

Zum Schluss möchte ich noch eines von vielen guten Konzepten vorstellen, die dir helfen können, dein Design zu analysieren:

Das LIFT-Modell von Widerfunnel

Entwickelt wurde das LIFT-Model von Chris Goward, dem CEO von Widerfunnel und Autor von „You should test that“. Das LIFT-Model geht davon aus, dass es auf einer Landingpage ein paar einfache Grundprinzipien gibt, die entweder Conversion-Treiber oder -Bremsen des Conversion Designs sein können.

Die Grundlage: Das Werteversprechen (Value Proposition)

Das Werteversprechen ist nicht so leicht zu fassen. Es ist die Motivation deines Besuchers, auf deiner Seite aktiv zu werden. Eine Gleichung: Erwarteter Nutzen minus erwarteter Aufwand.

Die wichtigsten Conversion-Treiber

LIFT-Modell von Widerfunnel (via Widerfunnel.com)

Relevanz (Relevance): Passt deine Landingpage zu den Erwartungen deiner Nutzer? Stimmt die Überschrift mit der Anzeige überein, auf die der Nutzer vor dem Besuch der Seite geklickt hat?

Klarheit (Clarity): Wie klar ist die Nutzerführung. Nimmt der Besucher die für ihn wichtigen Elemente in der richtigen Reihenfolge wahr? Ließt er erst die Überschrift, dann die Vorteile und wird danach zur Handlungsaufforderung geführt? Oder springen irgendwo auf der Seite bewegliche Elemente ins Bild (wie zum Beispiel ein Chat-Fenster) bevor der Besucher Zeit hatte, sich selber zu informieren?

Die stärksten Conversion-Hemmer

Ablenkung (Distraction): Das Gegenteil von Klarheit. Gibt es mehr als ein Conversion-Ziel auf der Seite. Muss der Besucher sich zwischen drei gleich starken Call-to-Action-Button entscheiden? Wird er womöglich von der Seite weggeführt?

Angst (Anxiety): Erklärt deine Copy dem Besucher, was nach dem Klick auf den Button passiert? Werden im Formular Felder abgefragt, die die Unsicherheit erhöhen? Warum sollte der Besucher beispielsweise seine Telefonnummer angeben, wenn er ein E-Book runterladen will? Sind die Daten sicher? Kann ich dem Anbieter vertrauen?

Dringlichkeit (Urgency): Wie schon im Artikel Conversion-Copywriting geschildert, sollte deinem Besucher auch klar werden, warum er jetzt handeln sollte. Welche Argumente hast du, um deinen Besucher gerade jetzt zu einer Conversion zu bewegen?

Dieses Modell ist nur eine von vielen Schablonen, die dir bei einer ersten Überprüfung deines Designs helfen können.

Was du mitnehmen solltest:

  • Es gibt keine „beste“ Button-Farbe. Kontrast ist, was wirklich zählt. Ist dein Call-to-Action das auffälligste Element?
  • Es gibt keine „beste“ Schriftart. Unterschiedliche Schriftarten erzeugen unterschiedliche Stimmungen, also kommt es auf deine Kunden und dein Thema an. Lesbarkeit ist das Wichtigste.
  • Visuelle Klarheit ist der Schlüssel zu mehr Conversions. Entferne Ablenkungen um deinen Call-to-Action.

Zum nächsten Artikel der Conversion-Grundlagen Serie:

So nutzt du Psychologie um die Conversions zu steigern