Sie sind auf Seite 1von 8

Conversion Design – Klarheit ist Trumpf

upliftr.de/blog/cro-grundlagen/conversion-design/

December 4, 2017

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
1/8
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.

2/8
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.
3/8
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

4/8
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.

5/8
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…

6/8
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


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 LIFT-Modell von Widerfunnel (via Widerfunnel.com)
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?
7/8
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

8/8