CATEGORY

Digital Marketing Kickoff 2016

Diese 7 Grundregeln für Conversion Centered Design machen dich zum Landing Page Hero

7 Grundregeln für Conversion Centered Design
Die 7 Grundregeln für Conversion Centered Design. Foto: Death to Stock.

Hast du schon einmal mit einem Designer gearbeitet?

Designer sind ganz spezielle Menschen. Egal ob Webdesigner, Grafikdesigner oder auch Interior Designer.

Verstehe mich nicht falsch. Ich habe selber schon hauptberuflich als Webdesigner gearbeitet (Das ist 10 Jahre her und meine Webseiten kann ich heute niemandem mehr zeigen).

Digital Marketing Kickoff 2016
Schon angemeldet? 8 Experten, 8 kostenlose Marketing Webinare.

Ich habe jedoch auch schon auf Kundenseite mit faszinierenden Künstlern gearbeitet, die großartige Projekte umsetzen. Manchmal hatte ich jedoch das Pech, dass Designer sich mehr auf das Ausleben eigener Bedürfnisse konzentrieren, statt ein fantastisches Nutzererlebnis für meine Zielgruppe zu erschaffen.

Sowas raubt mir den letzten Nerv.

Und es ist nunmal so:

Gibt es kein positives Nutzererlebnis, dann gibt es keine Conversion

Das Design versagt.

Die Kunst besteht darin, dass du eine Landing Page erstellst, die visuell ansprechend ist und den User in Richtung Conversion führt.

Die 7 Grundregeln für Conversion Centered Design helfen dir, das Zepter selber in die Hand zu nehmen. Nutze intelligente Design-Tipps und psychologische Auslöser, um eine hochkonvertierende Landing Page zu bauen.

Was ist Conversion Centered Design

Unser Mitgründer Oli Gardner und Begründer von Conversion Centered Design definiert es so:

CCD nutzt die Bestandteile einer Landing Page, um ein Nutzer-Erlebnis zu schaffen, das einem einzigen Unternehmens-Ziel entgegenwirkt. Mit Design-Elementen und psychologischen Auslösern wird der Besucher dazu gebracht, das gewünschte Conversion-Ziel zu erreichen.

Ob du nun Leads generieren oder ein Produkt bzw. eine Dienstleistung verkaufen möchtest – im Idealfall nutzt du für deine Marketing-Kampagne eine dedizierte Landing Page und setzt geschickt CCD ein.

Die 7 Grundregeln für Conversion  Centered Design

Die Grundregeln teilen sich wie schon gesagt in zwei Bereiche, die ich hier aufführe:

Design

1. Einkapselung
2. Kontrast & Farbe
3. Richtungsweiser
4. Weissraum

Psychologie

5. Dringlichkeit und Verknappung
6. Erst testen, dann kaufen
7. Social Proof

1. Einkapselung

Conversion Centered Design im James Bond Vorspann
Conversion Centered Design im James Bond Vorspann. Foto: Radiotimes.com

Ein Klassiker. Der Tunnel-Effekt lenkt den Blick des Betrachters auf das gewünschte Element. Mit starken, dynamischen Formen erreichst du diese Wirkung. In den Intros zu James-Bond-Filmen kommt dieser visuelle Trick zum Einsatz, wenn der britische Agent umgeben von kreisförmigen Elementen auf dem Bildschirm erscheint.

Kannst du anders, als Daniel Craig anzustarren?

Diesen Effekt kannst du auf deiner Landing Page einsetzen, indem du deinem Formular einen Rahmen verpasst. So erkennt der User schneller, welche Elemente zueinander gehören und deine Call To Action bekommt mehr Aufmerksamkeit.

Hubspot Landing Page mit eingekapseltem Formular
Screenshot: Hubspot Landing Page mit eingekapseltem Formular

2. Kontrast & Farbe

Die Verwendung von Kontrast ist ein einfaches Mittel, das für jedes Farbspektrum eingesetzt werden kann. Am einfachsten ist jedoch ein monochromes Farbschema.

Conversion Centered Design: Nutze starke Kontraste
Conversion Centered Design: Nutze starke Kontraste

Je mehr sich die Call-To-Action von der Umgebung unterscheidet, desto leichter wird sie wahrgenommen. Wenn du auf der Landing Page eine schwarze oder graue Schrift verwendest, dann wird eine CTA im ähnlichen Ton nicht den gewünschten Kontrast bringen – ein farbiges Element ist hier sinnvoller.

Conversion Centered Design: Kontrast und Farbe
Conversion Centered Design: Der Käfer setzt sich durch seine Farbe ab

Farben können beim Betrachter eine emotionale Reaktion hervorrufen. Die Farbe Orange ist zum Beispiel dafür bekannt, dass sie positive Gefühle bewirkt und ist daher in der Regel eine gute Farb-Wahl für deine CTA.

Welche Farbe du letztendlich wählst, hängt vom Gesamt-Farbschema deiner Landing Page ab. Blaue CTAs können sehr wirkungsvoll sein. In meinem Beispiel von Intercom wäre ein solcher Button jedoch fatal, weswegen hier ein grüner Button zum Einsatz kommt.

Conversion Centered Design: Kontrast und Farbe
Der Call To Action Button sticht farblich heraus. Screenshot: Intercom.io

3. Richtungsweiser

Conversion Centered Design: Richtungsweiser
Landing Page Design: Nutze Pfeile und Pfade als Richtungsweiser

Richtungsweisende Elemente helfen deinen Usern, den Weg zum Conversion-Ziel zu finden. Wie in der Offline-Welt folgen wir auch auf Landing Pages den Pfeilen und Pfaden oder der Blickrichtung von anderen Menschen.

Auf der Landing Page zu unserem Unwebinar über Conversion Centered Design nutzen wir zuerst die kleine Ausbuchtung (Pfad) unter der Head- und Subline, um die Besucher zu den detaillierten Informationen unseres Angebots zu führen. Dann setzen wir einen Pfeil ein, um von den Bullet Points auf die Call To Action zu verweisen.

Conversion Centered Design: Richtungsweiser im Landing Page Design
Unwebinar über Conversion Centered Design

Freundliche Gesichter auf deiner Landing Page verleihen deinem Webauftritt einen persönlichen & freundlichen Charakter.

Was du bestimm weisst: Es liegt in unserer Natur, den Blicken von anderen Menschen zu folgen. Wenn ein Dutzend Menschen in den Himmel starrt, wirst du womöglich auch hochschauen.

Was du eventuell nicht weisst: Wir folgen auch den Blicken von einzelnen Menschen, vor allem auf Bildern.

Per Eye-Tracking-Methode wurden die Blicke von Web-Usern analysiert.

In diesem Versuch blickt das Baby den Besucher an. Der direkte Augenkontakt sorgt dafür, dass wir der Headline, der Beschreibung und dem Produkt wenig Aufmerksamkeit schenken.

Conversion Centered Design: Richtungsweiser im Landing Page Design
Unwebinar über Conversion Centered Design: Eye-Tracking

Blickt das Baby nach rechts, verändert sich unser Verhalten. Wir visieren das Gesicht des Babys an und wandern dann mit unseren Augen nach rechts. Die Spalte mit den Produktinformationen wird stärker wahrgenommen – die Wahrscheinlichkeit einer Conversion wird erhöht.

Conversion Centered Design: Richtungsweiser im Landing Page Design
Unwebinar über Conversion Centered Design: Eye-Tracking

Sei also mit der Einbindung von Fotos, die Menschen zeigen, vorsichtig.

Stelle sicher, dass diese nicht nur die Blicke deiner User auf sich ziehen, sondern sich positiv auf die Gesamt-Performance deiner Landing Page auswirken.

Du weisst ja was ich gerne sage:

4. Weissraum

Conversion Centered Design: Weissraum im Landing Page Design
Der Landing-Page-Schock. Bild: Giphy.com

Kennst du das, wenn du eine Webpage besuchst und maßlos überfordert bist? Meistens fehlt einer solchen Seite genug Weissraum bzw. Leerraum. Alle Elemente verschwimmen zu einem Matsch von Texten, Buttons und Bildern.

Gib den Elementen deiner Landing Page und deinen Besuchern Luft zum Atmen!

Vergleiche die Webpage links im Screenshot mit unserer Landing Page zur Unbounce-Testversion.

Conversion Centered Design: Weissraum im Landing Page Design
Webpage ohne Weissraum vs. Landing Page mit viel freier Fläche

Verteidige den leeren Raum, denn…

Weiter geht’s mit den psychologischen Elementen.

5. Dringlichkeit und Verknappung

Oftmals steht der Besucher deiner Page kurz vor dem Klick auf den CTA-Button. Kommuniziere einen Vorteil jetzt zu handeln, damit der User seine Entscheidung nicht aufschiebt. Nach dem Prinzip “Aus den Augen – aus dem Sinn” landet er ganz schnell bei deinem Mitbewerber.

Amazon blendet ein, wie schnell du das Produkt bekommen kannst, wenn du innerhalb eines tickenden Zeitlimits bestellst.

Ist es nicht schön, wenn du dich gedanklich am Dienstag Abend im Sessel das neue Buch lesen sehen kannst?

Gekauft!

Conversion Centered Design: Dringlichkeit im Landing Page Design
Conversion Centered Design: Dringlichkeit erzeugen

Adidas nutzen ebenfalls eine bewährte Technik:

Sie zeigen an in ihrem Online-Shop an, wie oft das Produkt noch verfügbar ist. Ist das Produkt auch noch heruntergesetzt, so wird der Druck schnell zu handeln erhöht.

Conversion Centered Design: Verknappung im Landing Page Design
Das Conversion-Prinzip der Verknappung. Screenshot: Adidas.de

Nicht einmal als Marketer bin ich vor diesem Trigger sicher.

Während ich diese Zeilen tippe, sehe ich in meinen neuen Sneakern verdammt gut aus. :)

Dringlichkeit und Verknappung funktionieren auch bei der Lead-Generierung. Du kannst beispielsweise darauf hinweisen, dass nur 100 Personen an deinem Webinar teilnehmen können (je nach Software/gebuchter Leistung ist das schließlich wahr) oder das kostenfreie Ebook nur für eine begrenzte Zeit verfügbar ist (Hubspot wendet diese Methode an).

Sei vorsichtig: Erzeuge keine künstliche Dringlichkeit oder Verknappung. Wenn du hier rumtrickst, kann das wie im Fall von Zalando eine Abmahnung zur Folge haben.

6. Erst testen, dann kaufen

Niemand trifft gerne eine falsche Kaufentscheidung. Daher ist es ein gutes Mittel, wenn der Klick auf den Call To Action nicht das Gefühl vermittelt, ein Risiko einzugehen.

Software-as-a-Service-Unternehmen (kurz: SaaS) bieten in der Regel die Möglichkeit, das Produkt kostenfrei zu testen. So kannst du z.B. die Testversion des SEO-Tools Xovi für 14 Tage in vollem Umfang nutzen.

Conversion Centered Design: Xovi gewährt eine 14-tätige Testphase
Conversion Centered Design: Xovi gewährt eine 14-tätige Testphase

Alternativ sind manche Testversionen zeitlich unbegrenzt nutzbar, dafür sind die Funktionen eingeschränkt.

Eine andere Möglichkeit ist, nach dem Kauf eine Rückgabe-Frist zu gewähren. Das ist besonders vertrauenserweckend, wenn es sich um ein digitales Produkt wie ein eBook handelt. Schließlich kann der Käufer das Buch lesen, duplizieren und das Geld zurückholen.

Das Produkt muss schon gut sein, wenn der Autor diese Garantie gewährt – oder?

Conversion Centered Design: Die Geld-zurück-Garantie
Conversion Centered Design: Die Geld-zurück-Garantie

7. Social Proof

Sind wir uns bei einer Entscheidung nicht sicher, dann fragen wir oftmals Freunde oder Verwandte.

Bei Käufen im Internet suchen wir nach Hinweisen, dass auch andere dem Unternehmen vertrauen oder mit dem Produkt zufrieden sind.

In der Regel sind das folgende Indikatoren:

  • Zufriedene Kunden (Testimonials)
  • Social Media Follower oder Likes
  • Die aktuelle Kundenanzahl
  • Qualitätssiegel
  • Auszeichnungen von vertrauenswürdigen Organisationen
  • Rezensionen

Leider muss ich sehr oft würgen, wenn ich auf Social Proof stoße. Da wird in so hohen Tönen gelobt, dass die Schleimspur aus meinem Monitor trieft.

Fakes sind leicht zu durchschauen. Das US-amerikanische Putzhelfer-Vermittlungs-Startup Homejoy hat’s in Deutschland probiert und ist prächtig gescheitert.

Die Testimonials auf der amerikanischen Seite wurden für die deutsche Seite verwendet. Das Problem: Plötzlich wurde aus der New Yorkerin Erica die Berlinerin Charlotte.

Conversion Centered Design: Social Proof
Homejoy: Etwas sagt mir, dass ich euren Testimonials nicht vertrauen kann…

Natürlich wurde dieser Fake aufgedeckt und fleißig im Netz verbreitet.

Selbst wenn du deine Kunden für so naiv hältst, fürchte dich vor deinen Mitbewerber. Diese haben ganz sicher ein Auge auf dich und werden dafür sorgen, dass dein Schwindel auffliegt.

Übrigens schließen Homejoy die Pforten…

Conversion Centered Design: Social Proof
Homejoy hat bei der Expansion viel Vertrauen verspielt

Mach’s besser.

Mach es wie hier auf der Affenbuch.com Landing Page.

Oben rechts wird die Anzahl der bereits verkauften Ebooks genannt. Alternativ kannst du auch so etwas wie “Bereits 3,267 zufriedene Kunden nutzen XY” einsetzen (wenn’s wahr ist).

Natürlich kannst du an dieser Angabe zweifeln. Deswegen werden zur Unterstützung Blogs aufgelistet, in denen der Affenblog bereits (positiv) erwähnt wurde.

Conversion Centered Design: Social Proof
Social Proof: 1.000 verkaufte Ebooks und Erwähnungen in Experten-Blogs

Du bist noch nicht überzeugt? Scrolle runter und du stößt auf ein Dutzend von authentischen Käufermeinungen.

Die Aussagen sind nicht wie so oft generisch, sondern individuell verfasst. Die Autoren werden mit dem vollständigen Namen genannt und einer Blog-URL genannt.

Das ist Social Proof.

Conversion Centered Design: Social Proof
Affenbuch.com: Entweder keine oder überzeugende Kundenrezensionen

Fazit

Wenn du selber Landing Pages erstellst, dann gleiche deinen Entwurf mit den 7 Grundregeln für Conversion Centered Design ab. Vielleicht kannst du deine Page schon optimieren, bevor diese ins Rennen geschickt wird.

Falls du jemanden mit dem Design deiner Landing Page beauftragst, stelle sicher, dass er die Landing Page mit Fokus auf Conversions erstellt. Die Kunst liegt darin, eine schöne wie auch den Conversions dienlichen Seite zu erstellen.

Falls du noch mehr über Conversion Centered Design lernen möchtest, schaue dir jetzt unser Unwebinar “Wie du mit Conversion Centered Design und A/B-Tests deine Landing Page optimierst” an. Mein Blog-Artikel basiert auf einer Präsentation, die ich gemeinsam mit Fabian Liebig von Optimizely erstellt habe.

Welche Elementen von Conversion Centered Design hast du schon ausprobiert? Hinterlasse mir gerne deinen Kommentar!

Über Ben Harmanus
Ben baut als Community & Content Marketing Manager die Präsenz von Unbounce in der DACH-Region aus. Er liebt es, relevanten Content zu produzieren, Webpages zu optimieren und sich darüber mit der Community auszutauschen. Verbinde dich mit ihm auf Xing, Twitter oder LinkedIn.
» Mehr Blog Posts von

Comments:

  1. Falco

    Hallo Ben,

    mal wieder ein Danke für Klopper-Artikel!
    Wundbar!

    Als stolzes Mitglied des Affenclans freut es mich natürlich ganz besonders, dass du diesen Ansatz nochmals bestätigst, an dem ich mich nun die ganze Zeit orientiert habe *puh*
    Da fällt mir als Design-Noob fast schon ein Stein vom Herzen ;)

    Vielen Dank & sehr gerne mehr davon
    Falco

    (0)
    Reply
  2. Ben Harmanus

    Hi Falco,

    wie immer gilt. Gern geschehen! :)

    Was genau meinst du mit “…dass du diesen Ansatz nochmals bestätigst, an dem ich mich nun die ganze Zeit orientiert habe…”. Würde mich freuen, wenn du mir da auf die Sprünge helfen kannst.

    Und eines kann ich versprechen: Es gibt mehr davon. :)

    Viele Grüße & hab Dank für dein Feedback,

    Ben

    (0)
    Reply
  3. Gudrun Traumann

    Hallo Ben,
    danke für die anschaulichen Tipps und die Beispiele dazu.
    Gudrun

    (0)
    Reply
Kommentare