So werden Sie ein Conversion-Centered Designer

Sie möchten also ein Zielseitenvorlagen-Designer sein? Sie denken vielleicht, Sie hätten es leicht. Schließlich sind Landing-Page-Vorlagen nur eine einzige Seite. Das ist viel einfacher als das Erstellen einer vollständigen Website. Die Konstruktionsregeln ändern sich jedoch beim Erstellen Conversion-zentrierter Landing-Pages erheblich.

Was ist eine Zielseite??

Bevor wir uns mit den Gestaltungsprinzipien von Zielseiten befassen, wollen wir einige Definitionen aus dem Weg räumen:

Eine Landing Page ist eine eigenständige, kampagnenspezifische Webseite. Ziel ist es, dass Ihre Besucher eine einzige Aktion ausführen. Es ist nicht Ihre Website und sicherlich nicht Ihre Homepage.

Websites sind Marken-Zentralstationen und richten sich an Personen, die Ihre Website organisch finden oder im Recherchemodus ihres Kaufzyklus referenziert werden müssen. Sie sind nicht gut für Marketingkampagnen.

Marketingkampagnen beziehen sich auf einen einzigen Zweck - kaufen Sie diesen, abonnieren Sie diesen - und benötigen daher eine fokussiertere Erfahrung. Der Hauptgrund für die Verwendung einer Landing Page im Vergleich zu einer Homepage für das Ziel eines Kampagnenverkehrs (PPC, E-Mail, Social) ist auf etwas zurückzuführen Aufmerksamkeitsverhältnis.

Das Aufmerksamkeitsverhältnis ist das Verhältnis der Interaktionspunkte (Links) auf einer Seite zur Anzahl der beabsichtigten Aktionen auf dieser Seite (die für eine Kampagne immer 1 ist). Auf einer Homepage sind dies normalerweise 40: 1, was bedeutet, dass es 39 ablenkende Aktionen und 1 gewünschte Aktion gibt.

Eine fokussierte Landingpage hingegen hat ein Aufmerksamkeitsverhältnis von 1: 1. Aus diesem Grund verwenden intelligente Vermarkter für jede von ihnen durchgeführte Kampagne eine Promotion-spezifische, dedizierte Zielseite.

Was bedeutet das für mich als Designer??

Vorbei sind die Zeiten, als es akzeptabel war, ein schönes Web-Erlebnis zu entwerfen, die Bürste niederzulegen und einen Scheck in der Tasche zu lassen.

Conversion ist derzeit eines der heißesten Wörter im Web. Jede Webseite, die Sie entwerfen, ist jetzt ein "verantwortlicher Inhalt". Damit meine ich, dass sein Zweck, seine Wirkung und sein Erfolg gemessen werden können und werden. Wenn es nicht dazu beiträgt, Besucher erfolgreich in Kunden umzuwandeln, wurde es nicht richtig entworfen.

Das Design ist nicht der einzige Faktor für hohe Konversionsraten. Kopieren spielt eine enorme Rolle. Das größte Exemplar der Welt hilft jedoch nicht, wenn Ihr Besucher abgelenkt oder beleidigt ist. Wir alle wissen, dass schlechtes Design anstößig sein kann - oder verwirrt wird.

Durch die Kombination einiger einfacher Entwurfsprinzipien und einiger grundlegender Psychologie können Sie Ihren Fokus vollständig auf das Erstellen von Weberlebnissen richten, die sowohl begeistern als auch konvertieren.

Ich nenne dieses umsetzungszentrierte Design. CCD für kurz.

Dies ist ein Crash-Kurs in CCD. Ich werde die 7 Prinzipien besprechen. Ich werde Sie mit Psych 101 auf den neuesten Stand bringen und Ihnen dann einige schöne und hochkonvertierende Landing-Page-Vorlagen zeigen, die sie in die Praxis umsetzen, sodass Sie sie durch Beispiele lernen können.

Bereit, Conversion-Centered Designer zu werden?

Die 7 Prinzipien des umstellungszentrierten Designs

Die Prinzipien sind einfach. Lernen Sie sie kennen, üben Sie sie und Sie sehen, wie Ihre Konversionsraten steigen.

Prinzip 1: Einkapselung

Dinge zu verpacken ist eine kluge Praxis. Bei kalten Temperaturen funktioniert es für den Kopf, heiße Bratkartoffeln und Weihnachten macht mehr Spaß. Nehmen Sie also das Wichtigste auf Ihrer Seite (Ihr Conversion-Ziel) und verpacken Sie es in etwas, um zu zeigen, dass es die Aufmerksamkeit Ihres Besuchers verdient.

Prinzip 2: Kontrast

So viele Vermarkter sprechen über die Farbe der Knöpfe. Das ist ein Fehler. Ein guter Conversion-Centered Designer weiß, dass die Farbe der Schaltflächen irrelevant ist. Auf den Unterschied kommt es an. Wenn Sie eine überwiegend grüne Farbseite haben, springt ein roter Knopf auf Ihre Besucher. Mach dir keine Sorgen, dass es wütend aussieht; Ihre potenziellen Kunden sind keine Bullen.

Prinzip 3: Richtungshinweise

In manchen Kulturen gilt es als unhöflich, darauf hinzuweisen. Nicht in Konversionsland. Wenn jemand auf Ihrer Zielseite ankommt, sollte Ihr Design auf das Ziel hinweisen, das Sie erreichen möchten. Verwenden Sie Pfeile und Triangulation, um Brennpunkte zu erstellen. Verwenden Sie beim Fotografieren die Sichtlinie, um die Aufmerksamkeit auf Ihren Call-To-Action (CTA) zu lenken..

Prinzip 4: Whitespace

Das ist einfach. Versammle die Sachen nicht zusammen. Mangel an Leerzeichen ist anstößiges Design. Indem Sie die Augen der Menschen atmen lassen (können sie das?), Schaffen Sie eine erfreulichere Erfahrung, die Ihnen einige zusätzliche wertvolle Sekunden für die Kommunikation Ihrer Kampagnenbotschaft gibt.

Prinzip 5: Dringlichkeit und Knappheit

Dies ist das erste psychologiebasierte Prinzip. Das Erstellen von Dringlichkeit oder Knappheit ist in erster Linie eine schriftliche Übung, aber es liegt an Ihnen, die Informationen in gutem Design zu präsentieren. Die Nähe zum Ziel der Konvertierung der Zielseite ist der Schlüssel, wenn es um Signalisierung von Knappheit geht. Wenn Sie sicherstellen, dass Ihr Besucher eine Frist kennt, können Sie diesen Klick etwas wahrscheinlicher machen.

Expedia leistet hier hervorragende Arbeit, indem sie die Knappheitsaussage ("Nur noch 3 Tickets zu diesem Preis!") In der Abbildung unten hervorheben.

Prinzip 6: Versuchen Sie, bevor Sie kaufen

Haben Sie jemals eine Traube in einem Supermarkt „probiert“? Das ist eine Vorschau auf Qualität und hilft den Leuten, fundierte Kaufentscheidungen zu treffen. Beispiele im digitalen Bereich umfassen ein Kapitel eines E-Books oder eine visuelle Diashow, die einige Highlights aus einem Branchenbericht, einem Online-Kurs oder einem Teaser / Trailer-Video für eine bevorstehende Veranstaltung abdeckt. Amazon hat mit seiner Buchvorschau „Look Inside“ wirklich den Standard gesetzt.

Wenn Sie Ihr Produkt vor dem Kauf einer genauen Prüfung unterziehen, wirken Sie verbindlich und glaubwürdig. Dies erhöht das Vertrauen und kann ein wichtiger Faktor zur Steigerung der Konversionsrate sein.

Als Conversion-Centered Designer sollten Sie kreative Möglichkeiten finden, diese Vorschauen zu präsentieren.

Prinzip 7: Sozialer Nachweis

Vertrauenselemente sind ein wichtiger Bestandteil jeder Landing Page. Sie sichern Ihre Ansprüche und sprechen, wenn sie richtig gemacht werden, mit Ihren Besuchern aus der Perspektive eines gleichgesinnten Verbrauchers. Zeugnisse sind der beliebteste Ansatz. Wie bei Prinzip 5 ist dies in erster Linie ein schriftliches Element, aber Sie können Aspekte des Smart Content-Designs - insbesondere der Hierarchie - verwenden, um die Benutzer zu ermutigen, sie tatsächlich zu lesen.

Das Hinzufügen einer erklärenden Überschrift über den Testimonials (oder Kundenlogos usw.) kann den Nachweis der sozialen Sicherheit erhöhen.

Umsetzungszentriertes Design in Aktion; 5 Landing Page-Vorlagen

Lassen Sie uns fünf neue Landing-Page-Vorlagen für Unbounce als Inspiration für Ihre eigenen Vorlagen verwenden.

1. Lockwood: Immobilien

  • Verkapselung Das Konvertierungsziel ist das Formular. Es wird also vorne und in der Mitte positioniert und in einem Container eingeschlossen, sodass der kritische Inhalt darüber visuell verbunden werden kann.
  • Kontrast Der CTA zeichnet sich auf der Seite mit einer kräftigen Kontrastfarbe deutlich aus.
  • Richtungshinweise Am Ende des Hauptinhaltsbereichs befindet sich ein Pfeil, der den Blick auf den CTA lenkt, und die Verwendung derselben orange Farbe verbindet die beiden Elemente.
  • Whitespace Wenn Sie sich auf der Seite nach unten bewegen, können Ihre Augen frei durch die Inhaltsblöcke fallen. Luftige und geräumige Fotos und eine minimalistische Palette machen das Ganze zu einem angenehmen Erlebnis.
  • Knappheit Die Aussage, dass nur 3 der Einheiten verbleiben, befindet sich direkt unter dem CTA, um Sie daran zu erinnern, dass Sie sich beeilen sollten. Wenn Sie aggressiver werden möchten, können Sie eine Art * Starburst * probieren - denken Sie nur daran, stilvoll zu bleiben. Das wäre ein großartiger A / B-Test.
  • Sozialer Beweis Hier wird ein angemessener sozialer Beweis verwendet, der sich auf Designpreise konzentriert, und nicht auf ein Zeugnis, das eine sehr begrenzte Wirkung hätte.

2. Lasano: Gesundheit & Wellness

  • Kapselung bilden? Prüfen.
  • Kontrastierender CTA? Prüfen.
  • Whitespace? Prüfen.
  • Sozialer Beweis? Prüfen.
  • Richtungshinweise Hier werden Sie zwei Arten von Richtungshinweisen feststellen. Die erste nutzt die Standortlinie der Frau, um Ihren Blick von links nach rechts zu lenken. Noch besser wäre es, wenn sie nach unten und nach rechts schaute, aber das könnte sie auch traurig aussehen lassen, was dem Thema der Vorlage zuwiderlaufen würde. Zweitens gibt es eine sekundäre Anweisung unterhalb des Formulars, die mit einem kleinen Erinnerungspfeil endet, der Sie nach oben zeigt. Kleine Dinge haben nicht immer eine große Wirkung, aber wenn Sie mehrere kleine Dinge im Konzert haben, können sie dies.

3. Yuli: Software-Demo

  • Kapselung bilden? Prüfen.
  • Kontrastierender CTA? Prüfen.
  • Whitespace? Prüfen.
  • Richtungshinweise Der obere Teil der Seite ist der Ort, an dem sich der Hauptinhalt befindet. Daher wird ein Pfeil mit einer Aufforderung an der Stelle platziert, an der der Inhalt gelesen wurde, und zeigt auf den CTA. Beachten Sie auch, wie eine Art Lehrdreieck entsteht, indem Sie die Farbe Orange für Elemente reservieren, die auf den Zweck der Seite verweisen: "Kostenlose Demo", "Schließen Sie sich uns an, um eine kostenlose Demo zu erhalten", "Jetzt meine Demo buchen".
  • Sozialer Beweis Ein Video wird diesmal verwendet, um eine höhere Komplexität zu erreichen. In einem A / B-Test, den ich auf der Homepage von Unbounce.com durchführte, stellte ich fest, dass durch das Ersetzen von Textzeugnissen durch eine Videoversion die Conversion-Raten um 25% erhöht wurden. Hier gibt es eine Kombination aus Video und Text. Beachten Sie auch, dass die Vorlage die Hierarchie des Informationsdesigns verwendet, um die Social-Proof-Elemente (darunter das Video und die Kundenlogos) mit einer beschreibenden Überschrift einzuführen.

4. Fernweh: Reisen

  • Kontrastierender CTA? Prüfen.
  • Whitespace? Prüfen.
  • Sozialer Beweis? Prüfen.
  • Verkapselung Bei einer Klick-Landing-Page ist dies etwas anders, da es kein Formular gibt. Der CTA wird jedoch mit anderen wichtigen Informationen in einem Begrenzungsrahmen im Seitenkopf positioniert. Das Fußzeilenelement verwendet auch den Farbkontrast, um die "Schlussargumentanweisung" mit einem wiederholten CTA einzukapseln.
  • Richtungshinweise Es ist ein bisschen weit, aber der Eiffelturm verbindet sich irgendwie mit dem CTA. Und es zeigt ziemlich geschickt, dass Sie durch Klicken auf den CTA nach Paris gefahren werden, um unter dem Turm zu stehen. Wie romantisch. In einem anderen Sinn leiten die kreisförmigen Feature-Fotos den Blick durch die Seite zum abschließenden CTA.

5. Polar: Nicht für Profit

  • Whitespace? Prüfen.
  • Sozialer Beweis? Prüfen.
  • Kontrastierender CTA Wie in all diesen Beispielen hebt sich der CTA vom Rest des Designs ab. Beachten Sie auch, wie das Ziel der Kampagne (Geld durch Spendengelder) durch die orange Farbe im Zielthermometer hervorgehoben wird. Dadurch wird eine Verbindung zwischen den emotionalen und physischen (Conversion-) Zielen der Seite hergestellt.
  • Dringlichkeit & Knappheit Die Kombination aus Spendenziel und den emotionalen Aussagen „Die Zeit läuft für den Eisbären ab“ und „Ich prognostiziere, dass wir eisfreie Sommer am Nordpol innerhalb eines Jahrzehnts sehen könnten“, erzeugen sowohl Dringlichkeit als auch die bevorstehende Knappheit.

In Summe

Conversion-Centered Designer zu sein, ist die nächste Entwicklung des Designs im Business. Mit den heutigen Erkenntnissen machen Sie Ihren Chef / Ihre Kunden sehr glücklich, wenn ihre Conversion-Raten steigen.

Wenn Sie also Ihre Themeforest-Landing-Page-Vorlagen entwerfen, führen Sie sie nach den sieben Prinzipien von CCD aus und sehen Sie, wie sie sich wirklich zusammenfügen.

Lesen Sie weiter

  • Der ultimative Leitfaden für Conversions Centered Design (E-Book)