12 Techniken zur Inspiration für das Post-Click-Landing-Page-Design

Veröffentlicht: 2017-07-14

Ihr Post-Click-Landingpage-Design ist wichtig, denn diese Seiten sind Ihre digitalen Schaufenster – unerlässlich für die Bewerbung und den Verkauf Ihrer Produkte und Dienstleistungen. Bei richtiger Optimierung können die Seiten die Konversionsraten erheblich steigern. Da sie für den Gesamterfolg Ihres Unternehmens entscheidend sind, ist die Erstellung professioneller Post-Click-Landingpages mit hoher Konversion ein wesentlicher Bestandteil Ihrer Marketingstrategie.

Egal, ob Sie nach Inspiration für Ihre App-Post-Click-Landingpage, Produkt-Post-Click-Landingpage, mobile Post-Click-Landingpage oder etwas anderes suchen. Es gibt eine Vielzahl verschiedener Inspirationen für das Post-Click-Landingpage-Design.

Bei Instapage haben wir eine ganze Blog-Kategorie für Post-Click-Landingpage-Beispiele. Wir recherchieren und schreiben regelmäßig zu diesem Thema, um unser Publikum von einigen der größten Marken der Welt inspirieren zu lassen. Darunter Microsoft, Lyft, Marketo, Constant Contact, Oracle, Facebook, MailChimp und HubSpot.

In diesem Artikel werden wir einige Post-Click-Landingpages vorstellen und verschiedene Designtechniken hervorheben, um Sie beim Erstellen Ihrer Seiten zu inspirieren. Für jedes Beispiel besprechen wir, was die Seite gut macht und was A/B-getestet werden könnte, um bessere Ergebnisse zu erzielen.

Post-Click-Landingpages sind Ihre digitalen Schaufenster – unverzichtbar für die Bewerbung Ihrer Produkte und Dienstleistungen.

Klicken Sie, um zu twittern

Inspiration für das Post-Click-Landingpage-Design

Überzeugendes Heldenbild

Menschen verarbeiten Bilder in der Regel bis zu 60.000 Mal schneller als Text. Bei richtiger Verwendung auf Ihrer Seite können Bilder Besucher dazu bringen, sich lange genug mit Ihrer Seite zu beschäftigen, um Ihr Angebot zu konvertieren. Es ist an der Zeit, Ihren Besuchern nicht mehr zu sagen, was sie bekommen, wenn sie Ihr Angebot einlösen, und beginnen stattdessen, ihnen zu zeigen. Ein Hero Shot hilft dem Interessenten, sich vorzustellen, wie es wäre, die Vorteile Ihres Angebots zu erleben.

TaskEasy versteht dies, und sie verwenden ein Heldenbild auf ihrer Seite. Sobald Besucher auf der Seite landen, bekommen sie einen Eindruck davon, wie ihr Rasen aussehen könnte, wenn sie TaskEasy beauftragen:

Inspiration für das Post-Click-Landingpage-Design Hero Image

Was die Seite gut macht.

  • Die Farbe der CTA-Schaltfläche fällt auf, weil sie außer der Schaltfläche „Kontakt“ nirgendwo sonst auf der Seite verwendet wird.
  • Die Kopie des CTA-Buttons verwendet die Ego-Perspektive, wodurch sich Interessenten persönlich mit dem Angebot verbunden fühlen.
  • Richtungshinweise (Pfeile auf den CTA-Buttons und Pfeile, die auf der Seite nach unten zeigen) zeigen den Besuchern, worauf sie ihre Aufmerksamkeit als nächstes richten sollten.
  • Ikonographie hilft dabei, die Aufmerksamkeit auf die Funktionen und Vorteile der Einstellung von TaskEasy zu lenken.
  • Vertrauenssignale und soziale Beweise (Sicherheitsabzeichen, ein Auszeichnungssiegel und ein Facebook-ähnlicher Zähler) lassen potenzielle Kunden sich wohl, sicher und sogar gezwungen fühlen, TaskEasy einzustellen.
  • Das Kontakt-Slide-Out-Formular ermöglicht es Besuchern, das Unternehmen einfach zu kontaktieren, um sich über deren Dienstleistungen zu erkundigen.

Was A/B-Tests:

  • Das TaskEasy-Logo ist mit einem Hyperlink versehen, was bedeutet, dass Besucher die Seite leicht verlassen können.
  • Die CTA-Schaltfläche des Property Managers oben auf der Seite führt Besucher von dieser Seite weg. Obwohl es eine weitere Lead-Capture-Seite öffnet, sollte es eine eigene Kampagne haben, die vollständig von dieser getrennt ist.
  • Das Hinzufügen von Kopien würde Interessenten helfen, die Vorteile der Arbeit mit TaskEasy besser zu verstehen. Derzeit befindet sich keine Kopie auf der Seite, was es den Besuchern erschweren könnte, ein gutes Gefühl für das Unternehmen und das Angebot zu bekommen.
  • Die Fußzeilennavigation bietet Besuchern zu viele Möglichkeiten, die Seite ohne Konvertierung zu verlassen.
  • Die Telefonnummer könnte Click-to-Call-fähig sein, was es Besuchern viel einfacher macht, TaskEasy zu kontaktieren, zumal das Unternehmen sie ermutigt, mit „Möchten Sie uns anrufen? Waren hier!"

Spiegelstriche

Die Leute möchten oft nicht endlosen Text lesen, um zu finden, wonach sie suchen. Sie scannen die Seite lieber schnell, um bestimmte Informationen zu finden – Aufzählungszeichen machen dies möglich. Kopien mit Aufzählungszeichen (Häkchen, Pfeile, Ikonografie usw.) sind effektiv, da sie es Besuchern ermöglichen, die Seite schnell zu durchsuchen und zu finden, wonach sie suchen.

Dieses Yodle-Beispiel verwendet Aufzählungszeichen (Häkchen), um die Vorteile ihrer Software hervorzuheben. Es hebt sich auch durch Leerzeichen vom Rest der Kopie auf der Seite ab:

Inspiration für das Post-Click-Landingpage-Design Bullet Points

Was die Seite gut macht.

  • Das Logo von Yodle ist nicht mit ihrer Homepage verlinkt, sodass Besucher sehen können, auf welcher Webseite sie sich befinden, ohne zu riskieren, dass sie von der Seite wegklicken .
  • Die Click-to-Call-Telefonnummer erleichtert Besuchern die Kontaktaufnahme mit dem Unternehmen.
  • Die Überschrift und die Zwischenüberschrift informieren die Besucher darüber, was das Angebot ist und wie sie davon profitieren.
  • Die kursiv gedruckte Kopie hebt sich vom Rest der Kopie ab und zwingt die Besucher, sie zu lesen.
  • Das gekapselte Formular ist aufmerksamkeitsstark und zeigt den Besuchern, wohin sie gehen müssen, um eine Demo anzufordern.
  • „Personalisierte Demo“ gibt Interessenten das Gefühl, dass das Angebot speziell für sie ist.
  • Die orangefarbene CTA-Button-Farbe r „knallt“ auf der Seite, macht darauf aufmerksam und erhöht die Wahrscheinlichkeit, dass Leute darauf klicken.
  • Der Pfeil auf der CTA-Schaltfläche dient als Richtungshinweis und weckt das Interesse der Leute an dem, was sich hinter dem Formular verbirgt.
  • Vertrauenssignale (Kundentestimonial, Firmenlogos und Auszeichnungssiegel) erhöhen das Vertrauen, das potenzielle Kunden Yodle entgegenbringen, was dazu beiträgt, dass Besucher ihre persönlichen Daten ausfüllen.

Was A/B-getestet werden soll:

  • Die Kopie der CTA-Schaltfläche ist nicht personalisiert und überzeugt möglicherweise nicht viele Besucher zum Klicken. Wenn Sie es in etwas wie "Ich möchte eine Demo" oder "Meine Demo planen" ändern, können Sie möglicherweise bessere Ergebnisse erzielen.
  • Einschließlich eines Headshots mit dem Kunden würde ein Testimonial ihn persönlicher erscheinen lassen und dem potenziellen Kunden noch mehr Vertrauen einflößen.
  • Das Kleingedruckte in der Fußzeile könnte potenzielle Kunden überfordern und von einer Conversion abhalten.

F-Muster

Überlegen Sie bei der Gestaltung Ihrer Seite, wie Ihre Besucher Ihre Seite am wahrscheinlichsten sehen. So können Sie Ihre wichtigsten Elemente entsprechend platzieren. Da die Leute dazu neigen, von oben nach unten und von links nach rechts zu lesen, ist es klug, Ihre Seite so zu gestalten, dass sie einem F-Muster folgt.

Die folgende Demo-Post-Click-Landingpage von Oracle folgt einem eindeutigen F-Muster-Layout. Jedes wichtige Element befindet sich entlang des F-Pattern-Pfads, auf den Besucher beim Betrachten der Seite natürlich hinschauen.

  1. Betrachter sehen zuerst das Computerbild in der oberen linken Ecke.
  2. Ihre Augen werden dann dem horizontalen Stiel folgen und dann die Menschen lächeln sehen.
  3. Wenn Sie die linke Seite der Seite nach unten zum nächsten horizontalen Stamm bewegen, konzentrieren sich die Besucher auf die Überschrift und dann auf das einzelne Formularfeld.
  4. Als nächstes setzen sie das F-Muster entlang des vertikalen Stammes fort, wo sie den Textabsatz und die Aufzählungspunkte scannen.
  5. Schließlich landet ihr Fokus auf der leuchtend roten CTA-Taste.

und Inspiration für das Seitendesign F-Muster

Was die Seite gut macht.

  • Lächelnde Menschen machen die Seite menschlicher, wodurch sich die Besucher wahrscheinlich wohler fühlen.
  • Aufzählungszeichen und fetter Text lenken die Aufmerksamkeit auf die Hauptmerkmale des Angebots.
  • Das 1-Feld-Formular macht es schnell und einfach auszufüllen.
  • Der Blick der Besucher ist auf das Formular und den CTA-Button gerichtet, was bedeutet, dass sie sich dort konzentrieren und konvertieren sollten.

Was A/B-Tests:

  • Das Produktbild könnte größer sein. Derzeit ist es schwierig, etwas auf dem Bildschirm zu sehen.
  • Die Überschrift ist nicht überzeugend, da sie den Besuchern keine Informationen darüber gibt, wie ihnen das Angebot zugute kommt.
  • Die Kopie der CTA-Schaltfläche ist schwach. „Weiter“ sagt nichts über das Angebot aus und verleitet nicht zum Klicken.
  • Das Einbeziehen von Social Proof , wie ein Kundentestimonial, könnte die Glaubwürdigkeit des Unternehmens und seines Angebots erhöhen.
  • Navigationslinks in der Fußzeile können Besucher ablenken, von der Seite wegführen und wahrscheinlich die Conversion-Rate verringern.

Z-Muster

Wie das F-Muster hilft auch das Z-Muster den Betrachtern, auf Ihrer Seite zu navigieren, was es zu einer weiteren großartigen Layoutoption für Ihr Seitendesign macht.

Hier ist ein Beispiel von Business-Software.com, das einem klaren Z-Muster folgt.

  1. Besucher sehen zuerst die fettgedruckte Überschrift in der oberen linken Ecke.
  2. Entlang des oberen horizontalen Z-Stiels gelangen sie zum roten Stempel „Zum Download registrieren“.
  3. Wenn sich der Betrachter schräg nach unten und links unten bewegt, richtet er seine Aufmerksamkeit auf das Bild des Berichts.
  4. Schließlich vervollständigen sie das Z-Pattern mit einem weiteren horizontalen Stamm, wo sie auf dem wichtigsten Element der Seite landen – dem CTA-Button.

Inspiration für das Post-Click-Landingpage-Design Z-Pattern

Was die Seite gut macht.

  • Das Logo oben links ist nicht verlinkt, damit Besucher nicht sofort abgelenkt und von der Seite weggeführt werden.
  • Die Überschrift und die Unterüberschrift zeigen den Besuchern effektiv, dass dieser Bericht die Top 10 der Anbieter von Marketing-Automatisierung enthält, und zeigen ihnen, wie sie vom Herunterladen des Berichts profitieren können.
  • Aufzählungspunkte mit minimaler Kopie ermöglichen es den Betrachtern, die Seite schnell zu scannen und die wichtigsten Erkenntnisse zu lernen, ohne viel Text lesen zu müssen.
  • Das Wort „frei“ wird an zwei Stellen verwendet. Auf dem roten Stempel, der von Weißraum umgeben ist und sehr aufmerksamkeitsstark ist, und auf der Kopie, die fett formatiert und direkt über dem Bild steht.
  • Die Berichtsvorschau ermöglicht es Interessenten, einen Eindruck davon zu bekommen, wie der Bericht aussieht, falls sie ihn herunterladen möchten.
  • Der gelbe CTA-Button hebt sich gut vom Rest der Seite ab, sodass wahrscheinlich mehr Besucher darauf klicken.

Was A/B-Tests:

  • Das Firmenlogo in der unteren rechten Ecke ist mit ihrer Homepage verlinkt, was den Besuchern einen Weg bietet, die Seite zu verlassen, bevor sie auf das Angebot umsteigen.
  • 13 Formularfelder sind viel für ein Angebot in der Awareness-Phase des Marketing-Trichters. Die Nachfrage nach so vielen Informationen zu einem so frühen Zeitpunkt der Käuferreise könnte die Kunden leicht davon abhalten, zu konvertieren.
  • Vergrößern des Weißraums um die wichtigsten Elemente. Etwa das Bild und der CTA-Button würden mehr Aufmerksamkeit auf sie lenken und Besucher dazu verleiten, den Bericht herunterzuladen.
  • Das Hinzufügen von Social Proof würde wahrscheinlich mehr Interessenten davon überzeugen, zu konvertieren. Da sie sich dadurch wohler fühlen und sich für die Idee, mit Business-Software.com zu arbeiten, begeistern würden.
  • Der Seitenfuß könnte entfernt werden. Das Kleingedruckte erscheint unnötig, und das Firmenlogo fungiert als Exit-Link, der Besucher von dieser Seite wegführt.

Leerraum

Eine andere Möglichkeit, Besucher dazu zu bringen, ihre Aufmerksamkeit zu lenken, besteht darin, weißen Raum hinzuzufügen. Durch das Einfügen von ausreichend Leerraum um bestimmte Elemente herum heben sich diese Elemente auf der Seite besser ab.

Neben der Fokussierung auf bestimmte Elemente hilft auch Weißraum.

  • Reduzieren Sie Unordnung
  • Macht Ihre Seite ästhetisch ansprechend
  • Lesbarkeit und Verständlichkeit erhöhen
  • Verbessern Sie die Benutzererfahrung

Sehen Sie sich den gesamten Leerraum um das Lead-Erfassungsformular im folgenden MarcomCentral-Beispiel an. Beachten Sie, dass der Raum um das Formular nicht wirklich weiß ist. Weißraum kann jede Farbe haben, solange er die verschiedenen Seitenelemente trennt und sich von dem hervorgehobenen Element abhebt. In diesem Fall das Formular:

Inspiration für das Post-Click-Landingpage-Design White Space

Was die Seite gut macht.

  • Die Click-to-Call-Telefonnummer bietet Besuchern eine bequeme Möglichkeit, den Kundenservice zu kontaktieren.
  • Das 50-Sekunden-Video ermöglicht es Interessenten, sich schnell und einfach zu informieren, ohne die Kopie durchlesen zu müssen.
  • „Kostenlos“ im Formulartitel und im ersten CTA-Button ist eine sehr überzeugende Kopie, da jeder kostenlos liebt. Das Hinzufügen einer personalisierten Kopie könnte diese Seite noch überzeugender machen.
  • Anchor-Tags führen Besucher beim Anklicken direkt zurück zum Formular, sodass sie es leichter finden und ausfüllen können.
  • Social Proof weckt Vertrauen bei den Besuchern. Das Einbinden von Headshots mit den Kundenstimmen würde noch mehr Wert schaffen.
  • Die Bilder im Abschnitt „Wie es funktioniert“ ermöglichen es Interessenten, besser zu verstehen und sich vorzustellen, was jeder Schritt beschreibt.

Was A/B-Tests:

  • Das Hyperlink-Firmenlogo hat das Potenzial, Besucher von der Seite abzulenken, noch bevor sie das gesamte Angebot gesehen haben.
  • Die Überschrift sollte geändert werden, da sie zwar groß und auffällig ist, aber nicht überzeugend ist. Weil es dem Interessenten keine Vorteile bietet.
  • Der orangefarbene CTA-Button fällt nicht so gut auf, wie er könnte, da orange auf der Seite mehrmals verwendet wird.
  • Die Social-Media-Buttons am unteren Rand der Seite könnten Besucher ablenken und verhindern, dass sie konvertieren.

Anker-Tags

Anker-Tags verweisen auf eine andere Stelle auf derselben Seite, sodass Besucher zu einem bestimmten Teil der Seite springen können, ohne scrollen zu müssen. Da Ankerlinks die Besucher ohne großen Aufwand dorthin bringen, wo sie hin möchten, tragen sie dazu bei, die allgemeine Benutzererfahrung zu verbessern, was den Konvertierungsprozess unterstützt.

PRWeb hat auf seiner Seite zwei Anker-Tags eingefügt – beide „Jetzt starten!“ CTA-Buttons unterhalb der Falte. Wenn Sie darauf klicken, werden Besucher zurück zum Lead-Erfassungsformular über dem Falz geleitet:

Was die Seite gut macht:

  • Die Überschrift ist spezifisch und verwendet Kopien aus der zweiten Person – zwei Eigenschaften, die großartig sind, um Besucher davon zu überzeugen, das Angebot weiter zu lesen und schließlich zu konvertieren.
  • Die Kapselung des Formulars macht es aufmerksamkeitsstarker, was wahrscheinlich potenzielle Kunden anzieht, um es auszufüllen.
  • Wenn Sie das Opt-in-Feld im Formular nicht aktiviert lassen, haben potenzielle Kunden das Gefühl, dass sie ihre eigenen Entscheidungen treffen können, anstatt dass PRWeb Entscheidungen für sie trifft.
  • Die Bilder und der formatierte Text in den Abschnitten „Wie“ und „Warum“ machen auf die wichtigsten Details aufmerksam, wie PRWeb funktioniert und warum sich Interessenten für PRWeb entscheiden sollten.

Was A/B-Tests:

  • Exit-Links (das Firmenlogo, Social-Media-Buttons und die Fußzeilennavigation) könnten alle ohne Konversion von der Seite wegführen.
  • Die mit Aufzählungszeichen versehene Kopie könnte mehr auffallen . Ein Einrücken oder Vergrößern der Pfeile würde mehr Aufmerksamkeit darauf lenken.
  • Das Bild der Anleitung ist abgeschnitten, wodurch es wie ein Konstruktionsfehler aussieht. Es ist auch anklickbar, aber wenn das Bild geöffnet wird, ist es immer noch nicht das vollständige Bild oder größer.
  • 7-Formularfelder können Besucher einschüchtern und sie davon abhalten, das Formular auszufüllen. Zumal sie sich wahrscheinlich noch in der Überlegungsphase der Buyer's Journey befinden.
  • Die Farbe der CTA-Schaltfläche (von allen drei Schaltflächen) fällt nicht auf, da auf der gesamten Seite Rot und Blau verwendet werden.
  • Die Kopie der CTA-Schaltfläche (wieder auf allen drei Schaltflächen) ist vage. Etwas wie: „Ich möchte den Marketing-Leitfaden!“ ist überzeugender und würde wahrscheinlich zu mehr Klicks führen.
  • Das Kunden-Testimonial ist nicht optimiert. Es gibt kein Porträt von Craig Kasnoff, keinen Firmennamen (und hinter Media Consultant sollte kein Komma stehen), und das Testimonial selbst sagt nichts Konkretes, um potenzielle Kunden zu ermutigen, ebenfalls mit dem Unternehmen zu arbeiten.

GIFs

Die Einbindung von Medien in Ihre Post-Click-Landingpage (in Form von Bildern, Videos oder GIFs) kann dazu beitragen, die Conversions zu steigern, da sie Ihr Produkt oder Ihre Dienstleistung erklären und gleichzeitig Ihre Seite optisch ansprechender machen.

GIFs sind animierte Bilder, die Ihre Angebote interaktiver erklären. Anstatt also statische Bilder zu Ihren Seiten hinzuzufügen, wie beispielsweise einen Screenshot Ihres Software-Dashboards, fügen Sie ein GIF hinzu, um visuell zu demonstrieren, wie potenzielle Kunden verschiedene Aktionen ausführen können.

ActiveCampaign macht dies auf ihrer Seite:

Was die Seite gut macht.

  • Die Überschrift und die Zwischenüberschrift sind überzeugend. Die Überschrift verwendet Kopien in zweiter Person, und die Unterüberschrift ergänzt die Überschrift gut, sodass potenzielle Kunden wissen, dass über 150.000 andere Vermarkter ActiveCampaign verwenden.
  • „Keine Kreditkarte erforderlich“ versichert den Besuchern, dass dieses Angebot völlig kostenlos ist.
  • Nur zwei Formularfelder machen es wahrscheinlich, dass mehr Interessenten das Formular ausfüllen.
  • Die Kundenreferenzen eignen sich hervorragend, um soziale Beweise hinzuzufügen, aber die Twitter-Handles könnten Besucher von der Seite wegführen, ohne zuerst zu konvertieren.
  • Das Scroll-Formular und die CTA-Schaltfläche erhöhen die Chancen von Besuchern, Maßnahmen zu ergreifen, da sie unabhängig von ihrer Position auf der Seite sichtbar sind.

Was A/B-Tests:

  • Der CTA-Button fällt nicht auf. Die Farbe verschmilzt mit dem Rest des Blaus auf der Seite, und die Kopie ist unscheinbar.
  • Die Kopie unter der CTA-Schaltfläche sagt "Durch Klicken auf 'Erstellen'..." aber die CTA-Schaltfläche sagt nicht "Erstellen".
  • Navigationslinks in der Fußzeile können Besucher leicht vom Ziel der Seite ablenken.

Visuelle Hinweise

Visuelle Hinweise spielen eine große Rolle beim Post-Click-Landingpage-Design. Weil sie dazu beitragen, eine visuelle Hierarchie aufrechtzuerhalten, Besucher zu beschäftigen und sie auf wesentliche Elemente hinzuweisen. Drei häufig verwendete visuelle Hinweise sind Pfeile, Blickwinkel und strategisch platzierte Objekte, die alle in die Richtung von Elementen zeigen, die für Ihr Conversion-Ziel von wesentlicher Bedeutung sind.

Pfeile

Pfeile werden häufig auf Post-Click-Landingpages verwendet, da sie einfach, unkompliziert und leicht verständlich sind. Sie können animiert oder stationär sein und werden am häufigsten verwendet, um Besucher auf Lead-Erfassungsformulare und CTA-Schaltflächen hinzuweisen, wie es Bridgeline Digital in diesem Beispiel tut:

Inspiration für das Post-Click-Landingpage-Design Visual Cues-Arrow

Was die Seite gut macht.

  • Das Einfügen einer Statistik über erhöhte Konversionsraten wird wahrscheinlich das Interesse der Besucher an der Marketingautomatisierung wecken. Auch die fette Formatierung hilft, darauf aufmerksam zu machen.
  • „Kostenlos“ wird an zwei verschiedenen Stellen erwähnt, um zu betonen, dass potenzielle Kunden für dieses Whitepaper nicht bezahlen müssen.
  • Mit Aufzählungszeichen können potenzielle Kunden leicht herausfinden, was ihr Whitepaper enthalten wird, ohne Textblöcke durchlesen zu müssen.
  • Die orangefarbene CTA-Schaltfläche sticht hervor und passt gut zum Formulartitel und -pfeil.
  • Firmenlogos erhöhen den Vertrauenswert der Seite und lassen die Besucher denken: "Wenn diese bekannten Unternehmen mit Bridgeline Digital zusammenarbeiten, dann sollte ich das auch."

Was A/B-Tests:

  • Das Hyperlink-Firmenlogo und die Fußzeilen-Links bieten Besuchern einen Weg, die Seite zu verlassen, was wahrscheinlich die Absprungrate erhöht.
  • Das Erhöhen des Weißraums um das Produktbild würde es stärker hervorheben.
  • Die Kopie der CTA-Schaltfläche muss verbessert werden, da "Whitepaper herunterladen" nichts Überzeugendes ist. Das Hinzufügen von nutzenorientiertem und/oder Ego-Text würde wahrscheinlich mehr Interessenten zum Klicken anregen.

Blick

Da Menschen dazu neigen, zu sehen, was andere sehen, ist die Verwendung des menschlichen Auges als Richtungshinweis besonders effektiv auf Landingpages nach dem Klick. Wenn beispielsweise ein menschliches Bild auf Ihrer Seite die Überschrift anzeigt, wird die Aufmerksamkeit Ihres Besuchers wahrscheinlich auch auf die Überschrift gelenkt. Daher ist diese Technik nützlich, um Besucher dorthin zu bringen, wo Sie sie haben möchten.

Auf der Seite unten fügte Vistage ein Bild einer Frau hinzu, die in Richtung des Lead-Erfassungsformulars schaut. Wenn Besucher sie ansehen, fühlen sie sich unbewusst gezwungen, auf das Formular zu schauen:

und Inspiration für das Seitendesign Visual Cues - Eyesight

Was die Seite gut macht:

  • Keine Exit-Links (abgesehen von einer Datenschutzrichtlinie) machen es Besuchern unmöglich, die Seite zu verlassen, ohne auf das „X“ in ihrem Browser zu klicken oder das Formular auszufüllen.
  • Kontrastierende Farben dienen als visueller Hinweis und lenken die Aufmerksamkeit auf die wichtigsten Elemente der Seite: die Überschrift, die Frau und den CTA-Button. Da der Rest der Seite Grautöne ist, heben sich diese drei Komponenten von allem anderen ab.
  • Das Einfügen einer Datenschutzrichtlinie trägt dazu bei, das Vertrauen der Besucher zu wecken und ihnen mitzuteilen, dass ihre Informationen beim Unternehmen sicher sind.

Was A/B-Tests:

  • Das Hinzufügen von Social Proof , wie z. B. Kundenreferenzen oder Firmenabzeichen, würde wahrscheinlich mehr Besucher dazu verleiten, herauszufinden, ob sie sich für das Angebot qualifizieren.
  • Minimale Informationen über das Angebot können verhindern, dass Nutzer eine Conversion durchführen. Das Hinzufügen von Aufzählungspunkten oder kleinen Textteilen, um die Angebotsvorteile hervorzuheben, kann zu besseren Ergebnissen führen.

Objekte

Eine dritte häufig verwendete visuelle Hinweistechnik besteht darin, Objekte so zu positionieren, dass sie direkt auf einen bestimmten Bereich Ihrer Seite zeigen. Dadurch wird die Aufmerksamkeit der Interessenten auf bestimmte wichtige Seitenelemente gelenkt.

Lyft tut dies im folgenden Beispiel, indem es ein Fahrzeug direkt in Richtung seines Lead-Erfassungsformulars positioniert und es fast berührt:

Inspiration für das Post-Click-Landingpage-Design Visual Cues-Object

Was die Seite gut macht:

  • Nur ein Formularfeld ist ideal, um Personen davon zu überzeugen, ihre Informationen zu übergeben.
  • Wenn Sie das Kontrollkästchen für die Vereinbarung nicht aktiviert lassen, fühlen sich potenzielle Kunden besser in der Kontrolle und fühlen sich mit dem Konvertierungsprozess vertraut.
  • Der Abschnitt „Sehen Sie, wie viel Sie verdienen können“ ist nützlich, da er es Interessenten ermöglicht, ihre Informationen einzugeben und auf die Schaltfläche „CTA berechnen“ zu klicken, ohne die Seite zu verlassen. Nachdem der wöchentliche Auszahlungsbetrag berechnet wurde, verwandelt sich die Schaltfläche in eine weitere Schaltfläche „Jetzt bewerben“, die den Konvertierungsprozess unterstützt.
  • Der Abschnitt „So funktioniert Lyft Driving Works“ ermöglicht es dem Unternehmen, Schritt für Schritt Informationen zur Funktionsweise von Lyft bereitzustellen – und da es horizontal scrollt, wird die Seite nicht mit Texten überladen.

Was A/B-Tests:

  • Mehrere Exit-Links machen es den Besuchern leicht, abgelenkt zu werden und von der Seite weg zu navigieren, ohne auf das Angebot umzusteigen.
  • Überschrift und Zwischenüberschrift sind aufgrund des geschäftigen Hintergrunds schwer zu lesen. Wenn Sie sie an einem anderen Ort testen, an dem sie besser sichtbar sind, kann dies mehr Aufmerksamkeit erregen und zu besseren Ergebnissen führen.
  • Die Kopie der CTA-Schaltfläche ist so vage wie es nur geht. „Weiter“ sagt überhaupt nichts über das Angebot aus und zwingt wahrscheinlich nicht viele Leute zum Klicken.

Visuelle Hierarchie

Jede Post-Click-Landingpage sollte einer bestimmten visuellen Hierarchie folgen – Inhalte, die vom Wichtigsten zum Unwichtigsten geordnet sind. Das Element, das zuerst die Aufmerksamkeit der Besucher erregen soll (normalerweise die Überschrift), sollte oben auf der Seite platziert werden, da dies die Spitze der Hierarchie ist, und der Rest des Inhalts wird dann von höchster bis niedrigster Priorität geliefert.

Viele Eigenschaften spielen eine Rolle beim Erstellen einer visuellen Hierarchie, einschließlich, aber nicht beschränkt auf:

  • Größe
  • Farbe/Kontrast
  • Dichte/Nähe
  • Leerraum
  • Textur/Stil

SendGrid verwendet mehrere dieser Komponenten auf ihrer Seite. Mal sehen, welche sie verwenden und welche sie verbessern sollten:

Inspiration für das Post-Click-Landingpage-Design Visuelle Hierarchie

Was die Seite gut macht.

  • Größenvariationen und Fettformatierungen helfen dabei, die Aufmerksamkeit auf die wichtigsten Textstellen zu lenken und bilden eine starke visuelle Hierarchie.
  • Die Überschrift zwingt die Besucher dazu, SendGrid zu verwenden, indem drei namhafte Unternehmen erwähnt werden, die ebenfalls SendGrid verwenden.
  • Mehrere kooperative CTA-Schaltflächen bieten Interessenten mehrere Möglichkeiten, das Angebot an verschiedenen Stellen auf der Seite einzulösen.
  • Das Produktbild zeigt eine Vorschau, wie der gelieferte Inhalt aussehen wird.
  • Aufzählungspunkte mit minimalem Textanteil sorgen dafür, dass potenzielle Kunden keine Textabsätze durchlesen müssen, um zu finden, wonach sie suchen.
  • Ein Kundentestimonial und Firmenausweise dienen als sozialer Beweis und überzeugen wahrscheinlich mehr potenzielle Kunden, mit SendGrid zu arbeiten, da andere damit Erfolg haben. Das Hinzufügen von Dave Tombacks Kopfschuss zu seinem Testimonial würde es noch effektiver machen.

Was A/B-Tests:

  • Die Frau im Bild könnte auf die Schlagzeile/CTA-Schaltfläche hinunterschauen, um einen visuellen Hinweis hinzuzufügen und Besucher zu ermutigen, auch so zu schauen.
  • Die CTA-Buttons könnten vergrößert und in einer anderen Farbe getestet werden, um mehr Aufmerksamkeit auf sie zu lenken. An anderer Stelle auf der Seite ist blau, also "knallen" sie nicht so oft, wie sie könnten.
  • Das Erhöhen des Weißraums um einige Elemente, wie die CTA-Schaltflächen und die Überschrift, würde ihnen helfen, sich besser abzuheben.
  • Die CTA-Schaltfläche „See Pläne und Preise“ sollte entfernt werden, da sie Besucher auf eine andere Seite führt und sie von dieser ablenkt.

Aufmerksamkeitsstarker CTA-Button

Ein perfekt optimierter, aufmerksamkeitsstarker CTA-Button ist das wichtigste Element, das Sie in Ihr Post-Click-Landingpage-Framework integrieren sollten. Es sollte sich von allen anderen Elementen abheben, damit keine Verwirrung entsteht, wo potenzielle Kunden klicken müssen, um Ihr Angebot einzulösen.

WalkMe hat seine zweistufige Opt-in-Seite mit einem großen, kontrastierenden CTA-Button erstellt, der auf der Seite sicherlich auffällt und die Aufmerksamkeit der Besucher auf sich zieht:

Inspiration für das Post-Click-Landingpage-Design CTA

Was die Seite gut macht.

  • Das Hintergrundbild bietet dem Besucher eine realistische Vorschau, wie seine Software aussehen wird.
  • Der CTA-Button taucht wirklich auf der Seite auf. Es ist nicht nur groß und kontrastreich, sondern wird auch oben auf der Seite wieder angezeigt, wenn der Benutzer zu scrollen beginnt.
  • Das zweistufige Opt-in-Formular reduziert die Unordnung und sorgt dafür, dass sich die Benutzer weniger eingeschüchtert fühlen, da sie ihre Informationen hier nicht eingeben müssen.
  • Aufzählungszeichen machen es Interessenten leicht, sich über das Angebot zu informieren, ohne zu viel Text durchlesen zu müssen.
  • Social Proof (die Kundenreferenz und die scrollenden Firmenlogos) werden potenzielle Kunden dazu veranlassen, mit diesem Unternehmen zusammenzuarbeiten.

Was A/B-Tests?

  • Die Änderung der CTA-Button-Kopie in einen personalisierteren (mit First-Person-Formatierung) und nutzenorientierten Text würde wahrscheinlich die Conversion-Rate verbessern.
  • Das Ersetzen des Bildes durch ein GIF (below the fold) würde den Benutzern ein interaktiveres Erlebnis auf der Seite bieten und das Produkt besser erklären.
  • Das Hinzufügen eines Headshots zum Kundentestimonial würde es vertrauenswürdiger machen und seine Wirksamkeit erhöhen.

Welche Post-Click-Landingpage-Designtechniken haben Sie inspiriert?

Die Verwendung von Post-Click-Landingpages zum Bewerben und Verkaufen Ihrer Produkte und Dienstleistungen ist ein wesentlicher Bestandteil Ihrer Marketingstrategie. Das liegt daran, dass sie bei richtiger Optimierung – mit den oben beschriebenen Techniken, zusammen mit unserem Design Best Practices Guide und dem Post-Click-Zielseitenoptimierungsleitfaden – Ihre Conversion-Raten erheblich steigern können.

Verwandeln Sie Anzeigenklicks in Conversions, erstellen Sie dedizierte, schnell ladende Post-Click-Seiten für jedes Angebot. Erfahren Sie, wie Sie allen Ihren Zielgruppen einzigartige Post-Click-Landingpages bieten, indem Sie sich noch heute für eine Instapage Enterprise-Demo anmelden.