So erstellen Sie ein Landing Page Wireframe mit Tipps von Experten

Eine Post-Click-Landingpage ist oft einer der ersten Eindrücke, die die Leute von Ihrer Marke sehen. Daher ist es wichtig, sie außergewöhnlich zu machen. Ein Post-Click-Landingpage-Drahtmodell kann dabei helfen, indem es Ihnen ermöglicht, die Anordnung der Seitenelemente zu visualisieren, bevor Sie die Seite tatsächlich erstellen.

Was ist ein Post-Click-Landingpage-Wireframe?

Ein Wireframe ist ein grundlegendes Design-Layout oder ein Skelett einer Post-Click-Landingpage, um Stakeholdern eine Vorstellung davon zu geben, wie die Seite strukturiert wird und welche Assets für den Aufbau benötigt werden.

Rares Cimpean, ein visueller Designer für Instapage, erklärt:

Bei der Zusammenstellung eines Post-Click-Landing-Page-Wireframes sollten Sie sich auf den Fluss, die Benutzerfreundlichkeit und Zugänglichkeit der Seite konzentrieren, wie schnell die Benutzer an die benötigten Informationen gelangen, wie zugänglich und erkennbar der CTA ist usw. All diese Faktoren werden in der Wireframing-Phase berücksichtigt.

Hier sind einige Wireframe-Post-Click-Landingpage-Beispiele, sowohl lang als auch kurz:

Eine Post-Click-Landingpage-Wireframe-Vorlage dient mehreren Hauptzwecken:

• Als Mittelweg zwischen Ihrer Stift- und Papierskizze und dem ersten Prototyp fungieren
• Um einen Überblick über die Inhalte zu geben, die auf der Seite angezeigt werden
• Um einen Entwurf der Seitenstruktur bereitzustellen
• Um die Gesamtrichtung der Benutzeroberfläche zu vermitteln

Hinweis: Es gibt kein einzelnes Post-Click-Landingpage-Wireframe-Design, das für alle Kampagnen geeignet ist. Einige Post-Click-Landingpages erfordern möglicherweise lediglich eine Überschrift, eine Kopie mit Aufzählungszeichen, ein Formular und eine CTA-Schaltfläche, während andere möglicherweise zusätzliche Vorteile hervorheben und soziale Beweise nachweisen müssen. Verkaufsseiten erfordern beispielsweise oft detailliertere Produktbeschreibungen und müssen möglicherweise länger sein. (Denken Sie daran, dass Sie immer eine kurze Seite im Vergleich zu einer langen Seite A/B-Tests durchführen können, um zu sehen, welche bessere Ergebnisse liefert.)

Egal welche Art von Seite Sie Wireframing haben, unser Grafikdesign-Manager Rafal Bogdan betont, wie wichtig es ist, Ihr Wireframe zunächst sehr einfach zu halten, um die beteiligten Stakeholder nicht zu überfordern:

Ich möchte mich nicht zu sehr auf die Elemente konzentrieren, die von den Stakeholdern in der nächsten Phase abgelehnt werden könnten. Die Hauptidee eines Wireframes besteht darin, bestimmte Projektfunktionen auf einer Post-Click-Landingpage anzuzeigen und ihnen zu helfen, zu verstehen, wie sich diese Funktionen auf der echten Seite verhalten.

Sobald Sie Ihr Wireframe haben, ist es Zeit für das Design, es zum Leuchten zu bringen. Im Folgenden sind die Elemente aufgeführt, die normalerweise auf Post-Click-Landingpages mit hoher Conversion-Rate zu finden sind.

So erstellen Sie ein Wireframe für eine Post-Click-Landingpage

Keine Navigation

Da Post-Click-Landingpages für Conversions und einen einzigen Zweck konzipiert sind, sollten keine Navigationslinks vorhanden sein, die Nutzer von Ihrem Conversion-Ziel ablenken könnten. Entweder konvertieren oder verlassen – keine anderen Optionen.

Viele Unternehmen haben nach dem Entfernen ihrer Navigationsleisten erhebliche Änderungen ihrer Conversion-Raten festgestellt:

• Career Point College verzeichnete einen Anstieg der Conversion-Rate um 336%, nachdem die obere Navigationsleiste entfernt und das Formularlayout geändert wurde.
• Yuppiechef verzeichnete durch das Entfernen der Navigationsleiste einen Anstieg der Conversion-Raten um 100 % (von 3 % auf 6 %).
• SparkPage verzeichnete während des A/B-Tests einen Anstieg der Conversion-Rate von 9,2 % auf 17,6 %, indem sie ihre Top-Navigation entfernten.

Comporium Media Services ist eine weitere Marke, die die Notwendigkeit versteht, die Navigation zu entfernen, um die Conversions zu maximieren. Nicht einmal ihr Logo ist verlinkt, was die Besucher auf der Seite hält und sich darauf konzentriert, eine Beratung anzufordern:

Wenn Best Practices befolgt werden, sollten nur Links verwendet werden, die die Glaubwürdigkeit erhöhen (z. B. Nutzungsbedingungen und/oder eine Datenschutzrichtlinie) und Links, die die Benutzererfahrung verbessern (z Nummer).

Überschrift und Zwischenüberschrift

Ihre Überschrift ist eines der wichtigsten Elemente, denn ohne eine überzeugende werden Besucher nicht genug davon überzeugt, Ihr Angebot weiter zu bewerten. Da dies der primäre Weg ist, Ihre Nachricht zu übermitteln, muss sie Aufmerksamkeit erregen, deutlich sichtbar sein, sobald Benutzer auf der Seite landen, und oberhalb des Falzes.

Ihre Unterüberschrift wird verwendet, um Ihre Hauptüberschrift zu ergänzen, insbesondere wenn die Hauptüberschrift lang ist oder zusätzlichen Kontext erfordert (z. B. eine Statistik).

Der Schlüssel zum Schreiben einer guten Überschrift besteht darin, sicherzustellen, dass sie Ihr einzigartiges Wertversprechen (UVP) vermittelt oder Ihr Produkt oder Ihre Dienstleistung von Ihren Mitbewerbern unterscheidet.

Diese Autopilot-Post-Click-Landingpage-Überschrift informiert Unternehmen darüber, dass sie mit Autopilot im Vergleich zu anderer Marketing-Automatisierungssoftware „schneller wachsen“ können. Die Zwischenüberschrift ergänzt diese Idee dann, indem sie beschreibt, wie sie schneller wachsen können:

Neben der Angabe Ihres UVP gibt es vier Haupttypen von überzeugenden Schlagzeilen:

1. News: Stellen Sie Interessenten eine neue Lösung vor
2. Eigeninteresse: Appell an das inhärente Eigeninteresse der potenziellen Kunden<
3. Schnelle und einfache Lösung: Appell an den Wunsch der Interessenten nach schnellen Lösungen
4. Neugier: Wecken Sie das Interesse und die Neugier der Besucher und verleiten sie zum Weiterlesen

Sie können eine verwenden oder mehrere für eine noch kraftvollere Überschrift kombinieren. Die überzeugendsten Überschriften verwenden zwei oder mehr.

Sie können eine verwenden oder mehrere für eine noch kraftvollere Überschrift kombinieren. Die überzeugendsten Überschriften verwenden zwei oder mehr.

Medien

Da es für Menschen einfacher ist, Bilder als Text zu verarbeiten, tragen ansprechende Medien (Bilder, Gifs und Videos) dazu bei, den Wert eines Angebots zu vermitteln, noch mehr als Worte es können. Visuals sind jedoch keine Einheitslösung. Welche Art von Medien Sie für Ihre Post-Click-Zielseite auswählen, hängt von Ihrem Angebot ab.

Zu den Arten von Post-Click-Landingpage-Bildern gehören:

• Hero Shots: Bieten Sie Besuchern einen Eindruck davon, wie Ihr Produkt oder Ihre Dienstleistung ihr Leben zum Besseren verändern würde
• Produktbilder: Ermöglichen Sie Besuchern, die Details Ihres Angebots zu sehen, einschließlich seiner Hauptfunktionen
• Infografiken: Ermöglichen Sie Besuchern, Daten und Statistiken (Diagramme, Grafiken usw.) einfacher zu konzipieren

Sehen Sie sich die Bilder an, die iContact verwendet, um Interessenten mehrere Beispiele für die geschäftlichen E-Mails zu zeigen, die sie bei der Erstellung unterstützen:

Neben Bildern gibt es verschiedene Arten von Post-Click-Landingpage-Videos:

• Erklärvideos: Erklären Sie, wie Ihr Produkt funktioniert – insbesondere wenn es neu oder kompliziert ist – und konzentrieren Sie sich dabei darauf, wie es Ihren potenziellen Kunden zugute kommt
• Einführungsvideos: Präsentieren Sie neue Unternehmen, kündigen Sie neue Produkte an oder heben Sie neue Produktfunktionen hervor
• Video-Testimonials und Fallstudien: Dienen Sie als Social Proof, indem Sie echte, zufriedene Kunden zeigen, die ihre Zufriedenheit und ihren Erfolg mit Ihrem Produkt oder Ihrer Dienstleistung erklären

Verzichten Sie bei der Verwendung von Bildern auf Stockfotos, es sei denn, sie vermitteln eine realistische Situation Ihres Angebots und sind thematisch relevant. Alles andere und Sie riskieren, Ihre Markenwahrnehmung und Ihren Wert zu verringern.

Verzichten Sie bei der Verwendung von Bildern auf Stockfotos, es sei denn, sie vermitteln eine realistische Situation Ihres Angebots und sind thematisch relevant. Alles andere und Sie riskieren, Ihre Markenwahrnehmung und Ihren Wert zu verringern.

Kopieren

So versucht Sie auch sein mögen, Besuchern alles über Ihr Angebot zu erzählen – tun Sie es nicht. Die Aufmerksamkeitsspanne beträgt höchstens wenige Sekunden, daher muss Ihre Kopie prägnant sein und die Aufmerksamkeit der Leute sofort erregen.

Aufzählungspunkte (markiert durch Ikonographie, Häkchen, Pfeile usw.) sind beispielsweise eine gängige Methode, um wichtige Informationen zu übermitteln, sodass Besucher die Seite schnell durchsuchen und die wichtigsten Erkenntnisse des Angebots identifizieren können.

Interessenten können sich mithilfe von fett gedruckten Abschnittsüberschriften, minimalem Text und Aufzählungszeichen schnell über die Videokonferenzlösung von Highfive informieren:

Sozialer Beweis

Vor der Umstellung müssen die Leute darauf vertrauen können, dass Ihr Unternehmen einen zuverlässigen Service bietet. Hier kann Social Proof auf vielfältige Weise überzeugen:

• Kundenreferenzen: Zeigen Sie potenziellen Kunden, dass Sie Ihr Versprechen halten, da es direkt von Ihren Kunden überprüft wird (über Zitate mit spezifischen Informationen, Statistiken, vollständigen Namen, beruflicher Zugehörigkeit und Titeln sowie Headshots).
• Kundenlogos (und Anzahl): Zeigen Sie die bekannten Unternehmen an, mit denen Sie bereits zusammengearbeitet haben (und wie viele), und lassen Sie die Besucher wissen: „Da unser Produkt oder unsere Dienstleistung für sie gut genug war, wird es auch für Sie sein.“
• Branchenauszeichnungen: Zeigen Sie, dass Sie von Branchenführern, Reportern, Nachrichtensendern, Websites usw. öffentlich anerkannt wurden.
• Vertrauenssiegel: Stellen Sie sicher, dass Ihre Zahlungsinformationen vor Dritten sicher sind.
• Datenschutzrichtlinie: Versichert Interessenten, dass ihre E-Mail-Adresse angemessen verwendet und nicht an Dritte weitergegeben wird.

Wenn Sie auf dieselbe Post-Click-Landingpage von Highfive zurückblicken, sehen Sie sich alle sozialen Beweise an, die sie verwendet haben, um Besucher zur Conversion zu bewegen – Markenlogos, ein zitiertes Testimonial und Branchenbewertungen:

Hier ist ein weiteres Beispiel, diesmal von Splash Omnimedia, das alle Arten von Social Proof enthält – eine Kundenzahl, Markenlogos, ein Fallstudienvideo und ein zitiertes Testimonial:

Indem Sie all diese Beweise kombinieren, überzeugen Sie potenzielle Kunden von einer Conversion, indem Sie auf Ihre CTA-Schaltfläche klicken.

Formular zur Lead-Erfassung

Die perfekte Form zu erstellen ist nicht so einfach. Nicht genügend Formularfelder und Sie sammeln nicht alle Informationen, die Sie benötigen; zu viele Felder und Sie riskieren, potenzielle Kunden abzuschrecken. Die Länge Ihres Formulars hängt davon ab, wo Ihr Angebot im Marketingtrichter liegt. Generell gilt: Je höher, desto kürzer die Form und umgekehrt.

Justworks hat diese Post-Click-Landingpage entworfen, um Preisinformationen bereitzustellen. Da es sich um ein Top-of-the-Funnel-Angebot handelt, ist es sinnvoll, dass es nur drei von Feldern enthält und sehr grundlegende Informationen abfragt:

Im Gegensatz dazu befindet sich die kostenlose Testversion von Autopilot weiter unten im Trichter, daher ist es akzeptabel, nach weiteren Informationen zu fragen:

Aufruf zum Handeln

Ihre CTA-Schaltfläche ist der Ort, an dem die Post-Click-Landingpage-Conversion stattfindet. Sie muss also auffallen und darum bitten, angeklickt zu werden. Hier sind die wichtigsten Aspekte zur Optimierung Ihres CTA-Buttons:

• Farbe: Verwenden Sie die Farbtheorie, um einen Farbton, einen Farbton oder eine Schattierung zu finden, die gut kontrastieren und sich vom Rest Ihrer Seite abheben.
• Kopieren: „Senden“ und „Herunterladen“ sind allgemein und wenig inspirierend. Erstellen Sie stattdessen spezifische, personalisierte Kopien und integrieren Sie „Sie“, „Ihr“, „Ich“ und „Mein“, um mehr Klicks auf die CTA-Schaltfläche zu generieren.
• Größe: Lassen Sie die Leute nicht nach dem Button suchen – machen Sie ihn sichtbar. Es kann auch visuelle Hinweise enthalten – wie die hüpfenden Pfeile auf der Volusion-Post-Click-Landingpage
  unten – um noch mehr Aufmerksamkeit zu erregen:

Minimale Fußzeile

Post-Click-Landingpage und Website-Fußzeilen sind nicht dasselbe. Die Fußzeilen der Post-Click-Zielseite sollten keine Sitemaps, Produktseiten-Links oder Social-Media-Konten enthalten. Jeder von Ihnen eingefügte Link schafft eine weitere Ablenkung und eine zusätzliche Möglichkeit, Ihre Seite zu verlassen, ohne zu konvertieren.

Schauen Sie sich all diese Fluchtwege an, die Infegy den Besuchern bietet:

Wenn Sie sich dafür entscheiden, eine Post-Click-Landingpage-Fußzeile einzufügen, stellen Sie sicher, dass nur aktuelle Copyright-Informationen, Nutzungsbedingungen und eine Datenschutzrichtlinie angezeigt werden, wie dies bei Tapstone der Fall ist:

Leerraum

Leerräume lassen Ihre Seite atmen, sodass alle Elemente Aufmerksamkeit erregen und Besucher sich leichter auf Ihrer Seite bewegen können. Hinzufügen von Leerzeichen auch:

• Reduziert Unordnung
• Verbessert die Lesbarkeit
• Schafft visuelle Hierarchie
• Lässt Ihre Post-Click-Landingpage professioneller aussehen

Vergleichen Sie die folgenden Post-Click-Landingpages von NASM und Acquisio:

Die Seite von NASM ist überfüllt und könnte für einige Leute überwältigend sein, da es schwierig ist zu entscheiden, wo man zuerst hinschaut und wie man auf der Seite navigiert. Die Seite von Acquisio verfügt über ausreichend Leerraum, sodass die Navigation von oben nach unten einfacher ist und insgesamt ein besseres Erlebnis geboten wird.

Alles beginnt mit einem Post-Click-Landingpage-Wireframe

Durch das Erstellen eines Wireframes kann Ihr Team die gesamte Seitengeschichte bestimmen, sehen, welche Assets benötigt werden und wie viel Kopien erforderlich sind. Von dort aus können Sie mit den obigen Vorschlägen eine optimierte Post-Click-Landingpage gestalten. Um jedoch eine personalisierte, zu 100 % anpassbare Post-Click-Landingpage zu erstellen, benötigen Sie eine Lösung, die für diese Aufgabe leistungsstark genug ist.

Mit Instapage können Marketer pixelgenaue Seiten mit unserem designfreundlichen Builder, CSS-Editor, Ausrichtung und Gruppierung, Hotkeys und mehr erstellen. Verwenden Sie dann integrierte Heatmaps für A/B-Tests für noch höhere Conversions und skalieren Sie Ihre Produktion mit Instablocks™. Keine andere Lösung ist vergleichbar. Melden Sie sich noch heute für eine Instapage Enterprise-Demo an.