25 min 
Hast du ein neues E-Book geschrieben und willst es nutzen, um deine E-Mail-Liste zu vergrößern? Oder planst du ein Webinar und möchtest möglichst viele Teilnehmer gewinnen? Oder bewirbst du deine Produkte vielleicht direkt über Werbeanzeigen und versuchst deine Click & Conversion Rate zu steigern?
Dann brauchst du eine dedizierte, an die Intention deiner Nutzer und dein eigenes Ziel angepasste Landingpage. Kaum eine andere Einzelseite ist so effektiv und gleichzeitig effizient wie eine Landingpage – sofern diese “richtig” gestaltet ist.
Beim Erstellen von Landing Pages (auch Einsprung- oder Einstiegsseiten genannt) gibt es eine Liste wichtiger Elemente, die du beachten solltest – abhängig von ihrem grundlegenden Sinn und Zweck sowie der Zielgruppe. In diesem Artikel findest du eben jene Liste für ein perfektes Landing Page Design inklusive Beispiele (auch für die unterschiedlichen Arten von Landingpages), Tipps sowie Tools und Templates, die dir die Gestaltung vereinfachen.
Du hast eine konkrete Frage? Dann spring direkt zur Antwort!
- Was ist eine Landing Page?
- Warum lohnt sich der Einsatz von Landing Pages?
- Welche Arten von Landing Pages gibt es (inkl. Beispiele)?
- Aufbau effektiver Landing Pages
- Exkurs: Die Psychologie hinter erfolgreichen Landingpages
- Design-Konzepte
- Landing Page Tools
Dieser Artikel fokussiert sich wie du siehst auf die grundlegende Erstellung von Landing Pages. Ich habe ihn Anfang 2020 vollständig überarbeitet. Tipps zur Landing Page Optimierung findest du hier.
Was ist eine Landingpage? Definition, Vorteile und Funktionen
Die Funktion einer Landing Page ergibt sich eigentlich schon durch ihren Namen: Es handelt sich um eine Webseite, auf der ein Nutzer landet, nachdem er auf den hinführenden Link geklickt hat – etwa in einer Werbeanzeige, deinem Newsletter, in einem Facebook-Beitrag oder auch in der Suche.
Der große Unterschied zu anderen Seiten besteht darin, dass die Landingpage nur für einen bestimmten Zweck gebaut wird – sie fokussiert sich auf eine konkrete Handlung, die der Nutzer ausführen soll. Das kann der Klick auf einen speziellen Link oder Button sein (wir sprechen dann von “Click-Through Landing Page”), die Anmeldung zu einem Newsletter oder der Download einer Datei im Austausch gegen persönliche Daten (wir sprechen von “Lead Generation Landing Pages”) oder auch der direkte Kaufabschluss (dann sprechen wir von “Sales Landing Pages”).
Zwar kann eigentlich jede Seite eine Landing Page sein, aber nur in den seltensten Fällen willst du deine regulären Seiten wie Blogartikel, die “Über uns”-Seite oder Produkt- und Service-Seiten den Landing Page Design-Prinzipien folgend gestalten. Das würde nämlich einige Restriktionen bedeuten, die auf diesen Seiten nicht unbedingt sinnvoll sind, aber dazu später mehr.
Einer der Aspekte, die Landing Pages so effektiv machen, ist der, dass du dort die im Schritt zuvor (also wie gesagt der Werbeanzeige, dem Newsletter oder Social Media-Beitrag) kommunizierte Botschaft – auch visuell – aufgreifen kannst und den Nutzer damit sofort abholst. Dieser erkennt dadurch unmittelbar die Relevanz deiner Seite und fühlt sich in seiner Handlung bestätigt, und er kann sich schneller orientieren.
Aber alles der Reihe nach! Bevor wir weiter über Gestaltungsprinzipien sprechen, will ich zunächst auf die eben angedeuteten unterschiedlichen Einsatzzwecke von Landing Pages eingehen.
Warum sollte ich Landing Pages nutzen? 4 gute Gründe, die für den Einsatz sprechen…
Du kannst wahrscheinlich jedes Unternehmen, das Landinge Pages im Einsatz hat, fragen, warum sie diese nutzen und jedes Mal eine andere Antwort erhalten. Das liegt daran, dass es viele unterschiedliche Anwendungsmöglichkeiten solcher Seiten gibt. Allein gemein ist jedoch, dass sie eine überdurchschnittlich hohe Conversion Rate aufweisen und sich damit als wichtiger Baustein im Online-Business, sei es für Content Marketing oder im E-Commerce etabliert haben…
- Du willst ein konkretes Nutzerproblem, bspw. eine direkte Suchanfrage, bedienen: Dann eignet sich Landing Page nicht nur als Antwort auf die Frage, sondern kann gleichzeitig dazu beitragen, den Nutzer in seiner Customer Journey einen Schritt weiter zu bringen. Vielleicht möchte er mit dem Laufen beginnen und sucht nach einer Hilfestellung für die Wahl der passenden Laufschuhe. Mit einem “Laufschuh Guide” könntest du hier punkten und die Gelegenheit nutzen, ihn – ohne weitere Umschweife – in deinen Laufschuh-Shop (und bestenfalls direkt zu einer passenden Vorauswahl) zu führen. Das wäre dementsprechend ein Beispiel für eine Click-Through Landing Page.
- Genau so kannst du auch einzelne Produkte oder Dienstleistungen über eine Landing Page verkaufen. Der Vorteil besteht darin, dass du diesen genügend Raum gibst und dadurch mehr Möglichkeiten hast, den Interessenten von ihnen zu überzeugen (Betonung auf überzeugen, nicht überreden!). Die Anforderungen an Sales Landing Pages sind dahingehend allerdings noch etwas höher.
- Vielleicht sucht dieser Nutzer aber auch schon nach einem Trainingsplan – den du natürlich liefern kannst. ;-) Über eine Landing Page kannst du diesen zum Download anbieten und dadurch persönliche Daten (oder zumindest eine E-Mail-Adresse) des Nutzers erheben. Deine Seite dient dementsprechend der Lead-Generierung.
- Je nachdem wie umfangreich (manche würden das auch “holistisch” nennen) und idealerweise auf die wichtigen Keywords optimiert deine Landing Pages sind, besteht zudem die Chance, dass du mit diesen Seiten in den Suchergebnisse rankst und dadurch zusätzlichen organischen Traffic generierst. Viel ”kostenloser” Traffic mit einer hohen Conversion Rate ist doch eine gute Kombination!
Und Achtung, jetzt kommt der Eye Opener: Je mehr dedizierte Landing Pages du im Einsatz hast, desto mehr Keywords kannst du über die Suche bedienen (vor allem dann, wenn du keinen Blog oder ähnliches hast), desto mehr Leads kannst du generieren und desto mehr Produkte und Dienstleistungen direkt verkaufen.
BOOM! Mic drop.
…
[Rhetorische Pause]
…
Okay, wenn du “ein kleiner Freelancer” bist (keine Wertung) und deine Website ohnehin nur aus wenigen Seiten besteht, dann könntest du theoretisch alle nach den Design-Prinzipien von Landing Pages (halt durch, ich verrate sie dir gleich!) gestalten. Aber je größer und komplexer eine Website wird, desto schwieriger ist das. Landing Pages sind da oft der “Quick win”, weil flexibler und leichter zu handhaben.
In jedem Fall solltest du die unterschiedlichen Einsatzmöglichkeiten von Landing Pages kennen und kombinieren. Denn mit Blick auf die Customer Journey sind sie alle wichtig.
Welche Arten (ergo Einsatzzwecke) von Landing Pages gibt es?
Auf einer typischen Webseite, etwa der Homepage, hat der Nutzer unzählige Interaktionsmöglichkeiten – diverse Navigationspunkte, unterschiedliche Content-Angebote, vielleicht eine Seitenleiste oder Links im Footer. Auch wenn sich der Nutzer auf solchen Seiten leicht orientieren kann, so verteilt sich doch seine Aufmerksamkeit und nicht jeder Nutzer wird auf dieselbe Art und Weise aktiv. Das ist in diesem Fall nicht weiter schlimm, da es der Intention der Seite entspricht. Gerade die Homepage dient ja als Einstiegspunkt und Überblick des Angebots.
Doch was, wenn du mit einer Seite ein ganz konkretes Ziel verfolgst? Wenn der Nutzer eigentlich nur eine ganz bestimmte Aktion durchführen soll?
In seinem Buch “The Paradox of Choice” thematisiert Barry Schwartz dieses Problem. Er kommt zum Schluss, dass Wahlfreiheit zwar wichtig ist, zu viel Auswahl den Menschen jedoch überfordern kann. Wenn du seinen legendären TED Talk noch nicht kennst, dann nimm dir unbedingt die 20 Minuten, um ihn anzuschauen! Er präsentiert darin nämlich auch die Lösung auf dieses Problem, auf das ich weiter unten auch nochmal eingehe.
Für deine Landing Pages heißt das Folgendes: Entscheide dich, welches konkrete Bedürfnis oder Problem deiner Zielgruppe du lösen möchtest. Denk darüber nach, welche deiner Produkte oder Dienstleistungen die beste Lösung ist und biete diese auf einer Landing Page an. Wenn du die Auswahl von Anfang an reduzierst, tun sich deine Nutzer mit ihrer Entscheidung deutlich leichter.
Je nach Bedürfnis bzw. sich daraus ableitendem Zweck kannst du Landing Pages nun unterschiedlich gestalten, wobei wir insbesondere zwei Arten unterscheiden:
Click-Through Landing Pages
Click-Through Landing Pages fungieren als eine Art Filter und sind vor allem dann nützlich, wenn eine Transaktion im Sinne der Lead-Generierung oder des Kaufabschlusses zum jetzigen Zeitpunkt noch sehr unwahrscheinlich ist. Vor allem dann, wenn du dein Produkt oder deine Dienstleistung näher erklären musst, um Nutzern ihren Mehrwert klarzumachen. Der Fokus solcher Landing Pages liegt daher auf der Informationsvermittlung, der Bedarfsweckung und der Motivierung des Nutzers, sich intensiver mit deinem Angebot zu beschäftigen.
Ein schönes Vorbild ist diese Landingpage von Babbel:
Landingpage zur Sprach-Selektion bei babbel.com
Sie holt den Nutzer bei seiner Suche nach “Sprachen lernen” auf einfachste Weise ab: der Frage, welche Sprache er denn lernen möchte. Weitere Informationen darüber, dass es sich hierbei um eine App und ein kostenpflichtiges Produkt handelt oder welche Lernmethoden zur Anwendung kommen, fehlen komplett. Babbel macht sich stattdessen geschickt verschiedene psychologische Verhaltensprinzipien zunutze (u.a. Simplicity und Social Proof), um dem Nutzer ein Commitment (auch das ist ein solches Prinzip) abzuringen und ihn folglich dahingehend zu beeinflussen, seine Entscheidung auch wirklich durchzuziehen – ergo sich bei Babbel anzumelden und mit dem Lernen der ausgewählten Sprache zu beginnen.
Kleine und große Jas
Kleine Jas verwandeln anfänglichen Widerstand in ein Gespräch, in dem sich auch Gemeinsamkeiten offenbaren. Daraus kann langfristig eine Zusammenarbeit entstehen (also ein großes Ja), denn es ist unser grundlegendes menschliches Bedürfnis, etwas Gemeinsames mit anderen zu erleben. Außerdem fördert ein kleines Ja auch die Gegenseitigkeit (Reziprozität, siehe unten).
Lies dir einfach mal das Buch One Small Yes* und diesen Artikel durch und du wirst das Konzept verstehen: Start with a small yes.
Ein anderes Exempel ist diese Landing Page von Jira, die sich speziell auf die BitBucket-Integration als konkretes Nutzerinteresse fokussiert. Gemäß der Suchintention sind hier deutlich mehr Informationen zu finden als bei Babbel, der Zweck auch dieser Seite besteht jedoch allein darin, den Nutzer von Jira zu überzeugen – um ihn dann im nächsten Schritt im Sinne einer Anmeldung zu konvertieren.
Jiras Landingpage dient mehr als Information Hub, weniger der direkten Lead-Generierung
Landing Pages zur Lead-Generierung
Das Hauptmerkmal von “Lead Gen” Landing Pages, wie sie im Englischen umgangssprachlich genannt werden, ist das Vorhandensein eines Formulars. Der Zweck dieser Seiten besteht schließlich darin, Kontakt- und weitere persönliche Informationen von Nutzern als potenzielle Kunden zu sammeln. Dazu zählen primär die E-Mail-Adresse und ggf. der Name, um das darauffolgende E-Mail-Nurturing zu personalisieren, in den meisten Fällen werden jedoch auch noch weitere Informationen wie Job Position, Arbeitgeber oder sogar eine Telefonnummer abgefragt. Der Umfang des Formulars ist aber letztendlich vor allem vom Gegenwert abhängig, den ein Nutzer für die Preisgabe seiner Daten erhält. Das könnte ein E-Book, ein Whitepaper oder nützliche Checklisten und Templates für seine berufliche Arbeit sein.
Wenn es einen “Klassiker” solcher Landing Pages gibt, dann sieht er wahrscheinlich so aus, wie diese hier von Unbounce. Sie enthält eine Headline, ein Hero Image, eine Kurzinfo als Liste sowie, natürlich, ein Formular:
Beispiel einer “typischen” Landing Page zur Lead-Generierung (unbounce.com)
Auch diese Seite von HubSpot und Ryte ist ein gutes Vorbild, denn sie erweitern das Minimum um eine “Einwandbehandlung”, indem sie Fragen beantworten, die sich der Nutzer stellen könnte. Außerdem geben sie eine kostenlose Vorschau auf das Angebot, sodass sich der Nutzer quasi schon vorab überzeugen kann. Die Kür ist hierbei übrigens das dynamische Formular, das zum einen mit bereits bekannten Nutzerdaten vorausgefüllt wird, sodass der Nutzer etwa seinen Namen oder seine E-Mail-Adresse nicht mehr eintragen muss. Mit smarten Formularen ist es sogar möglich in Abhängigkeit der bereits bekannten Nutzerdaten das Formular zu verändern und beispielsweise anstelle der bereits bekannten Job Position die Berufserfahrung in Jahren abzufragen.
Eine erweiterte Lead-Generierungs-Landingpage (hubspot.de)
Zusätzlich zu diesen beiden Arten von Landing Pages ist es außerdem ratsam, die folgende Grundregel zu bedenken und Landing Pages auf Basis der Herkunft eines Nutzers bzw. dessen Typs (Stichwort: Personas) zu unterscheiden:
Grundregel: Eine Landing Page pro Kanal/Plattform bzw. pro Nutzertyp
Inbound Marketing bzw. Marketing im Allgemeinen basiert auf der Nutzung mehrerer Traffic-Kanäle wie die organische Suche via Content, E-Mail-Marketing, Search & Display Ads sowie andere Marketing-Kanäle. Liegt es da nicht nahe, Nutzern aus jedem dieser Kanäle und vielleicht sogar jeder einzelnen Plattform oder gar jedem einzelnen Link, einen eigenen, angepassten Einstiegspunkt zu gestalten?
Jede Plattform hat ihre Eigenheiten, für die sie von ihren Nutzern wertgeschätzt wird und die sich höchstwahrscheinlich auch in einem typischen Nutzerverhalten widerspiegeln. Schaffst du durch den Look & Feel einen nahtlosen Übergang auf deine eigene Webseite, werden sich Nutzer sofort wohlfühlen.
„Bei Landingpages ist es wichtig, dass diese ein auf die Anzeige abgestimmtes Nutzererlebnis liefern – der Nutzer muss neugierig gemacht werden. Noch wichtiger ist aus meiner Sicht aber das regelmäßige Testing, denn oft irrt sich der Bauch beim Aufbau von Landingpages“.
– Nicolai Kuban, CEO contentbird
Beim Erstellen von Landing Pages solltest du dir daher also immer eine Frage stellen: Mit welcher (expliziten) Intention und welcher (impliziten) Erwartungshaltung bzw. Hoffnung kommt ein Nutzer auf meine Landing Page?
Spätestens mit der Antwort auf diese Frage muss uns klar werden, dass “One Size Fits All” keine sinnvolle Taktik sein kann und wir mehr als eine Landing Page benötigen. Ein weiterer Vorteil vieler Landing Pages ist, nebenbei gesprochen, dass wir viel gezielter deren Effektivität messen und dementsprechend auch optimieren können. Das spart Zeit und Geld und bringt uns, auch wenn es zunächst nicht den Anschein haben mag, schneller voran als wenn wir versuchen, eine Landing Page an “alle” anzupassen.
Bevor du jetzt anfängst dir den Kopf zu zermartern, wo du nur all die Zeit hernehmen sollst, um Unmengen von Landing Pages zu erstellen, sei beruhigt: Um diese Anforderung zu erfüllen, können wir dynamische Landing Pages gestalten und Bilder, Texte, Calls-to-Action etc. automatisiert und in Abhängigkeit von der Herkunft einzelner Nutzer variieren. Weitere Infos dazu findest du im Abschnitt über Tools.
WERBUNG
Content Design (2. Auflage)
Robert Weller, Ben Harmanus
Mit diesem Buch lernst du die Konzeption und audiovisuelle Gestaltung von Content holistisch zu betrachten und zielgerichtet umzusetzen.
Aufbau effektiver Landingpages: Welche (grafischen) Elemente sind obligatorisch, welche optional?
Für die Gestaltung einer funktionierenden Landing Page sind folgende Elemente essentiell und einige weitere optional. Grundsätzlich gilt: Elemente ohne konkreten Nutzen (ergo Funktion), haben auf einer Landing Page nichts zu suchen!
- Die Überschrift (Headline) transportiert die Kernbotschaft und bestenfalls auch schon das Wertversprechen einer Webseite und muss dem Besucher versichern, dass er am richtigen Ort gelandet ist (Stichwort: Relevanz). Von Vorteil ist also eine möglichst kurze und prägnante (um so schnell wie möglich relevante Informationen zu kommunizieren), optisch auffallende (um möglichst schnell Aufmerksamkeit zu erregen) und hinsichtlich des Wordings bzw. der verwendeten Keywords an die Sprache der Nutzer sowie für Suchmaschinen optimierte Überschrift. Apples Präsentation des MacBook Pro ist ein anschauliches Beispiel, wie dominant Headlines eingesetzt werden können.
Apple gibt Überschriften viel Raum – selbstbewusst, informativ und inspirativ
Mehr über Headlines lesen:
- Bilder bzw. Visualisierungen sagen mehr als tausend Worte, ja, aber auf einer Landing Page sollten niemals Bilder ohne spezifischen Zweck verwendet werden. Derek Halpern hat hierzu einen tollen Artikel über den Einfluss von Bildern auf die Conversion Rate geschrieben. Im Kontext von Landing Pages sprechen wir vor allem über den sogenannten “Hero Shot”, der das Angebot möglichst eindeutig visualisieren und dem Nutzer eine Vorschau bzw. Vorstellung davon geben soll, was ihn erwartet. Auch das macht Apple im obigen Beispiel sehr gut.
- Ein Call-to-Action (kurz CTA oder Handlungsaufforderung) fordert den Nutzer zu einer ganz bestimmten Handlung auf und sollte daher eindeutig sein – sowohl visuell als auch sprachlich. Zudem ist es sinnvoll, pro Landing Page nur eine Handlung zu triggern und so das Auswahl-Paradoxon (Paradox of Choice), also die Unentschlossenheit durch zu viele Alternativen, aufzulösen und die Wahrscheinlichkeit zu steigern, dass der Nutzer überhaupt etwas tut. Das heißt jedoch nicht, dass die Landing Page nur einen CTA haben darf! Es spricht nichts dagegen, mehrfach zur selben Handlung aufzufordern.
Ein schönes Beispiel dafür ist die Website des Online Form Builders Wufoo. Die Seite enthält insgesamt vier Handlungsaufforderungen, von denen lediglich eine (“Live Demo”) eine Alternative zu den anderen drei (“Sign up”) darstellt – für Wufoo selbst dürften aber beide Handlungen lukrativ sein.
Wufoo platziert drei Handlungsaufforderungen kontraststark oberhalb der Falz - Ein geschmeidiger Blickverlauf erleichtert die Informationsaufnahme und stellt sicher, dass der Besucher den CTA wahrnimmt. Icons, Pfeile und andere richtungsweisende Gestaltungselemente helfen dabei, die Aufmerksamkeit des Lesers zu lenken und auch Farben und Kontraste können den Lesefluss verbessern. ConvertKit macht das sehr sympathisch, wie im Screenshot unten zu sehen. Shawn Borsky hat hierzu außerdem einen sehr detaillierten Artikel geschrieben, in dem er die "Power Structure" und Hierarchie von Visual Design erklärt.
ConvertKit lenkt den Blick des Nutzers mit einfachen Linien - Vertrauen zu gewinnen ist essentiell, wenn es um die Konvertierung von Besuchern zu Abonnenten oder Käufern geht. Vertrauen schaffende Elemente sind beispielsweise Prüf- oder Gütesiegel (TÜV, Trusted Shops, ProvenExpert etc.), die Verwendung von Kundenmeinungen und Rezensionen und auch die Optimierung von Formularen, sodass diese nicht zu aufdringlich wirken (Wieso brauchen die mein Geburtsdatum?!). Ich empfehle hier auch die Lektüre von Corey Eridon Artikel zum Thema.
An der einen oder anderen Stelle habe ich eben schon erwähnt, dass die Gestaltung effektiver Landing Pages nicht nur auf Gestaltungsprinzipien sondern auch psychologischen Verhaltensprinzipien basiert. Das können wir gerne noch ein wenig vertiefen, falls es dich interessiert.
Exkurs: Die Psychologie hinter erfolgreichen Landingpages
Du hast vielleicht schon mal von Robert Cialdinis sechs “Prinzipien des Überzeugens” gehört (siehe unten). Das sind sogenannte Behavior Pattern, oder auch kognitive Verhaltensmuster, die die Wahrnehmung, das Kauf(Verhalten), Entscheidungen und die Motivation von Menschen beeinflussen. Folglich können wir sie beim Visual Design und in der Marketingkommunikation einsetzen – und eben auch auf Landing Pages.
-
Simplicity (Einfachheit) – Je einfacher einer Landing Page zu verstehen und zu navigieren ist, desto besser. Weniger ist mehr, heißt es so schön. Das gilt für den Inhalt aber auch für die visuelle Gestaltung. Laut einigen Experten hast du maximal 5-6 Sekunden um die Aufmerksamkeit deiner Besucher zu gewinnen bzw. genauer gesagt auf deiner Landing Page zu halten. Durch das Entfernen unnötiger Elemente auf einer Seite (Werbebanner, Hyperlinks, Text-, Bild- oder Navigationselemente) reduzierst du Ablenkung, schaffst Freiraum für das, was wirklich relevant ist, und lenkst den Fokus auf einen guten CTA. Auch Formulare auf Lead Gen Landing Pages sollten möglichst einfach sein (oder zumindest so wirken).
Mit der Einfachheit einher geht auch die Reduktion der Handlungsalternativen. Diesem Prinzip liegt das Auswahl-Paradoxon zugrunde (Paradox of Choice), das ich oben schon ansprach. Je weniger Interaktionsmöglichkeiten der Nutzer auf einer Landing Page hat, desto leichter fällt ihm die Entscheidung. Wir sprechen in diesem Kontext von einer möglichst hohen “Attention Ratio”, also dem Verhältnis der Gesamtanzahl an möglichen Handlungen (z.B. Links, die der Nutzer klicken kann) zur Anzahl der gewünschten Handlungen (z.B. ein Formular ausfüllen). Ideal für Landing Pages ist logischerweise ein Verhältnis von 1:1.
Auf anderen Seiten, etwa der Startseite, ist dieses Verhältnis wie gesagt weniger wichtig, weil sich der Nutzer ja zunächst selbst orientieren soll. Unbounce erklärt den Unterschied hier sehr gut.
-
Authority (Autorität) – Da wir Menschen dazu neigen, dem Rat von Autoritäten (z.B. Ärzten, Chefs oder auch “Influencern”) zu folgen, empfiehlt es sich, diesen Effekt auf Landing Pages zu erzeugen. Das funktioniert besonders gut durch die Abbildung von
-
Auszeichnungen, zum Beispiel dem “Red Dot Design Award 2019” (Gedanken des Nutzers: Ah, das heißt, dass eine fachkompetent Jury genau draufgeschaut und dies als das beste Produkte bewertet hat!).
-
Gütesiegeln, zum Beispiel “Stiftung Warentest bewertet dieses Produkt mit 1,2!” (Gedanken des Nutzers: Also kann ich das auch gefahrlos kaufen…).
-
Erwähnungen in relevanten Fachmedien, zum Beispiel “Bekannt aus HORIZONT, W&V & T3N” (Gedanken des Nutzers: Die werden schon nichts Schlechtes geschrieben haben, sonst würde der Anbieter sie hier nicht erwähnen.).
-
Partnern oder Kunden, zum Beispiel “Unternehmen wie Canon, Hyundai und Citrix vertrauen auf unsere Lösungen” (Gedanken des Nutzers: Was die haben, brauche ich auch!).
-
Testimonials, zum Beispiel von bekannten Sportlern wie bei GOWOD (Gedanken des Nutzers: Die scheinen ja wirklich überzeugt zu sein von diesem Produkt… und sie wissen, wovon sie reden!).
Die Meinung von bekannten Personen wiegt stärker als die von beliebigen Kunden
-
Social Proof (sozialer Beweis) – Wenn es anderen gefällt, fühl ich mich auch wohl damit. So können wir kurz und knapp die Wirkung von Social Proof beschreiben. Im Grunde ist es nichts anderes als ein Beweis dafür, dass ein Produkt gut ist bzw. Kunden damit zufrieden sind (Stichwort: Rezensionen, Bewertungen, Testimonials). Quasi die Online-Variante von Word-of-Mouth, die Unternehmen dabei hilft, Vertrauen aufzubauen.
-
Reziprozität (Gegenseitigkeit) – Wer sagt schon nein zu etwas, das augenscheinlich nichts kostet? Gibst du Nutzern etwas, ohne dass sie dafür bezahlen oder eine andere Gegenleistung erbringen müssen, steigt die Wahrscheinlichkeit, dass sie dir deshalb etwas zurückgeben wollen. Im Austausch für ein relevantes E-Book sind sie also vielleicht eher bereit, dir ihre E-Mail-Adresse und andere persönlichen Daten preiszugeben, als wenn sie nichts dafür bekommen. Überhaupt sind Wörter wie “kostenlos”, “gratis” oder “Geschenk” wahre Wunderwaffen, um Nutzer zu konvertieren.
Außerdem meiden Menschen vor allem im Internet jegliche Risiken und sind um ihre Privatsphäre und die Sicherheit ihrer Daten besorgt – zwar nicht alle im selben Maße, aber das Bewusstsein für Datenschutz steigt. Um Besuchern ein Gefühl der Sicherheit zu geben, kannst du zum Beispiel für gekaufte Produkte (Geld zurück-)Garantien anbieten, mögliche Zweifel deiner Nutzer direkt ansprechen und klären (in der Fachsprache heißt das Einwandbehandlung) oder ihnen eine kostenlose Testphase ermöglichen, in der sie dein Produkt (oder auch deine Dienstleistung) ohne finanzielles Risiko testen können.
-
Scarcity (Verknappung) – Im Marketing ist die Verknappung eine gängige Methode, um Besucher zu “motivieren”, ihre Kaufentscheidung nicht länger aufzuschieben. Oft geschieht dies durch Deadlines für Sonderangebote oder die prominente Anzeige der Produktverfügbarkeit. Während ich dir den Einsatz von Verknappung grundsätzlich empfehlen würde, so solltest du bei der Implementierung experimentell vorgehen und stets ein Auge auf mögliche negative Nebeneffekte abseits der gemessenen Conversion Rate haben. Es könnte ja beispielsweise sein, dass zwar mehr Kunden kaufen, den Kauf aber direkt bereuen (weil sie sich unter Druck gesetzt gefühlt haben und eigentlich noch gar nicht so weit waren mit ihrer Entscheidung) und folglich ein Produkt wieder zurückschicken. Ein Blick in die Retourenrate zum Beispiel gibt dir Aufschluss darüber, ob sich die Verknappung negativ auf die Customer Experience auswirkt oder nicht.
Grundsätzlich kann ich dir an dieser Stelle auch das 7-Ebenen-Modell von André Morys zur nutzerzentrierten Website-Analyse empfehlen. Es thematisiert die sieben grundlegenden Aspekte, die beim Entscheidungsprozess wichtig sind: Relevanz, Vertrauen, Orientierung, Stimulanz, Sicherheit, Komfort und Bewertung. Darüber hinaus führt André in seiner Erklärung auch noch einige weitere Behavior Pattern als “Mittel zum Zweck” auf.
Literaturempfehlungen
Abgesehen von der Übersicht und Erklärung einzelner Verhaltensprinzipien bei konversionsKRAFT empfehle ich dir die Lektüre folgender Bücher:
Hinweis: Diese Links führen über einen Affiliate-Link zu Amazon. Im Falle einer Bestellung erhalte ich dadurch eine kleine Provision, für dich bleibt der Preis jedoch unverändert.
Design-Konzepte, die sich auf Landing Pages anwenden lassen
Ergänzend zu den oben erwähnten essentiellen Elementen variiert der Aufbau einer Landing Page je nach Zweck. Dabei kannst du dich bspw. am AIDA-Modell aus der Werbepsychologie orientieren, um Nutzer „durch deine Informationen“ zu führen:
- Attention – Der erste Eindruck muss die Aufmerksamkeit des Nutzers gewinnen bzw. halten (schließlich ist er in den meisten Fällen ja bereits über eine Werbeanzeige oder einen anderen Touchpoint auf dich aufmerksam geworden) und bestenfalls auch schon auf das „nächstwichtige“ Elemente lenken.
- Interest – Der nächste Schritt besteht darin, das Interesse des Nutzers zu wecken. Das kann durch ein konkretes Angebot oder relevante Informationen geschehen. Dein Ziel ist es, ihn zu involvieren und zu weiteren Interaktionen zu motivieren.
- Desire – Durch dieses Involvement soll der Nutzer einen Bedarf erkennen und – implizit oder sogar explizit – den Wunsch deinem Angebot äußern.
- Action – Der letzte Schritt ist offensichtlich: der Nutzer soll dein Angebot annehmen und kaufen (oder allgemeiner formuliert: konvertieren).
Dieses Modell hat sich mit der Zeit allerdings weiterentwickelt und wurde um diverse Phase ergänzt. Du könntest demnach auch Landing Pages für die Phase „Satisfaction“ nach dem Kauf / nach der Konversion erstellen oder den Kunden durch eine Landing Page in der „Confidence“-Phase konkret mit rationalen Argumenten bei seiner Entscheidungsfindung unterstützen (bzw. ihn in seiner Entscheidung bestärken).
Noch spezifischer kannst du deine Landing Page gestalten, wenn du Design-Konzepten von Pionieren wie Oli Gardner von Unbounce (siehe Tools) folgst. Sie kombinieren die unterschiedlichen, bis hierher beschriebenen Möglichkeiten und treiben den Fokus auf die jeweilige Intention einer Landing Page auf die Spitze (im positiven Sinn).
Ein kleiner Hinweis vorweg: Viele der folgenden Beispiele sind keine klassischen Landing Pages per Definition, können aber als Produktseiten oder Startseiten auch als solche fungieren. Genau genommen kann das jede Seite, die Besuchern als Einstieg dient.
Attention-Driven Design – wenn’s gesehen werden soll!
Bei diesem Ansatz geht es um die Reduktion visueller Komplexität, um Nutzern das Verständnis für deine Webseite zu erleichtern und dadurch ihre Aufmerksamkeit besser steuern zu können. Einfachheit und Klarheit erzeugst du am besten durch:
- Größe – Je größer ein Element auf deiner Landing Page ist, desto größer ist die Bedeutung, die ihm ein Nutzer beimisst. Einzelne Elemente innerhalb eines Bereichs deiner Webseite stehen dabei in Relation zu allen anderen Elementen.
Was wohl bei Wunderlist die zentrale Nachricht ist?
- Abstände – Liegen mehrere Elemente sehr nahe aneinander, so werden diese als zusammengehörig wahrgenommen, so wie die für den Kauf relevanten Informationen (Preis, Größe, Verfügbarkeit, Lieferkonditionen etc.) im folgenden Screenshot. Stehen Elemente in großem Abstand zueinander, werden sie einzeln wahrgenommen.
Bildunterschrift: Otto.de gruppiert Informationen, z.B. Produktbilder, Produktinformationen und Kundenvorteile
Diesen Effekt kannst du sogar noch steigern, indem sich Elemente berühren oder sogar überlappen.
- Selektion – Als Mittel zur selektiven Aufmerksamkeit kannst du bestimmte Elemente oder Texte visuell hervorheben; durch Fettschrift, Unterstreichung, die Verwendung einer Hintergrundfarbe oder eben dem Einsatz von Abständen.
Es gibt noch viel mehr Möglichkeiten, um Aufmerksamkeit zu erzeugen. Weitere Inspiration findest du in diesem Slide Deck von Unbounce, das sich sehr stark an klassischen Gestaltgesetzen orientiert:
Conversion-Centered Design – wenn’s passieren soll!
Bei diesem Ansatz konzentrierst du alle gestalterischen und inhaltlichen Elemente auf eine spezifische – für dich als Webseitenbetreiber lukrative – Handlung des Nutzers. Bei Click-Through Landing Pages wäre das bspw. der Klick auf die nächste Seite, bei Lead Gen Landing Pages das Ausfüllen des Formulars.
Der Unterschied zu Attention-Driven Design besteht vor allem darin, dass du nicht darauf vertraust, dass der Nutzer “die wichtigen” Elemente selbst findet (weil sie prominent gestaltet sind) und entsprechend darauf reagiert. Vielmehr gehst du auf Nummer sicher und führst ihn sozusagen bis zur Conversion, indem du
- durch Einkapselung (oder auch Abkapselung/Separation) einzelner Elemente – in diesem Fall zum Beispiel das Formular – die Aufmerksamkeit des Nutzers auf diese Elemente lenkst und ihn so schneller ans Ziel bringst. Ein banales Beispiel: Die Anmeldeseite der Videoplattform WISTIA:
Nutzer können sich mit einem bestehenden Account oder per Formular anmelden. Mehr nicht
- Du kannst auch einzelne Elemente durch einen deutlichen Kontrast voneinander abheben – durch Größe oder Farbe. Nutze beispielsweise eine klare Signalfarbe für einen Call-To-Action-Button.
- Mithilfe richtungsweisender Elemente kannst du die Aufmerksamkeit deiner Besucher auf bestimmte Bereiche deiner Webseite lenken. Nutze hierfür Pfeile oder pfeilähnliche Elemente, wie im Beispiel ConvertiKit oben schon gezeigt.
- Mehr Übersicht schaffst du durch die Verwendung von Whitespace. Dahinter steckt die Idee, mehr Freiraum zwischen einzelnen Komponenten zu schaffen. Ein übersichtliches Design hilft deinen Nutzern, schneller relevante Elemente zu erkennen und zu nutzen (siehe die Anmeldeseite von WISTIA).
- Nur wenige Menschen können Sonderangeboten widerstehen. Diesen Umstand kannst du auch für dich nutzen. Sorge einfach nur für Verknappung bei deinem Produkt. Diese entsteht entweder durch eine Begrenzung der zeitlichen Verfügbarkeit oder einer Limitierung der Stückzahl. Dringlichkeit ist ein effektives Kommunikationsmittel, um Interessenten schneller zum Kauf oder zur Eingabe persönlicher Daten zu bewegen. Eine Deadline suggeriert dem Nutzer, dass das Angebot nach Ablauf einer Frist in der gegenwärtigen Form nicht mehr verfügbar ist.
- Wir verspüren eine moralische Verpflichtung, etwas zurückzugeben, wenn wir ein Geschenk erhalten. Gehe also in Vorleistung und biete eine Gratisprobe oder eine Testversion deines Produkts an. Ein kostenloses Erstgespräch oder die Anmeldung zu einem kostenlosen E-Mail-Kurs wären natürlich auch denkbar. Reziprozität ist ein gutes Mittel, um ganz unaufdringlich auf der Agenda deiner Nutzer zu landen.
User-Centered Design – wenn’s erlebt werden soll!
Bei diesem dritten Ansatz dreht sich die inhaltliche und visuelle Gestaltung um den Nutzer und die Erfahrung, die er auf deiner Webseite macht. Der gestalterische Fokus liegt auf der User Experience und vor allem auf der Usability deiner Landing Page. Ziel ist es, dass der Nutzer deine Webseite eigenständig, möglichst einfach erkunden kann und dabei nicht nur relevante Informationen erhält, sondern auch unterhalten wird. Diese „Freizügigkeit“ lebt sich allerdings (oft, nicht immer) negativ auf die Conversion Rate aus.
Der Prozess des User-centered Design ist im Vergleich zu den vorherigen etwas strategischer und umfasst die folgenden vier Schritte:
- Im ersten Schritt geht es darum, Informationen zu sammeln und zu strukturieren: Wer wird auf deiner Seite landen? Warum und unter welchen Bedingungen passiert das? Versuche mit derartigen Fragen die Motivation und Erwartungen deiner Nutzer zu verstehen, sodass du sie gezielt bedienen kannst.
- Definiere im nächsten Schritt alle Anforderungen an die Landing Page: Was muss die Seite leisten, damit sie sowohl für dich als Betreiber als auch für deinen Nutzer relevant (ergo informativ, unterhaltsam, lukrativ etc.) ist?
- Entwickle dann auf Basis der ersten beiden Schritte das Design deiner Landing Page.
- Sobald die erste Version live ist und Traffic reinkommt, kannst du die Interaktion deiner Nutzer (mit Blick auf dein definiertes Ziel) messen und dahingehend Optimierungsideen generieren.
Was eigentlich für jede Landing Page gilt, unabhängig von dem ihr zugrundeliegenden Design-Ansatz, wird hier besonders deutlich: Betrachte die Gestaltung Page als kontinuierlichen Prozess. Nur in den seltensten Fällen (oder überhaupt...?!) ist das erste Design bereits optimal.
Growth-Driven Design – wenn was draus wachsen soll!
Der letzte Ansatz, den ich dir im Rahmen dieses Artikels vorstellen will, ist gleichzeitig der jüngste: Growth-Driven Design. Genau genommen beschränkt er sich nicht nur auf Landing Pages, sondern kann für das Design (konzeptionell und visuell-gestalterisch) der gesamten Website genutzt werden. Der Kerngedanke ist die agile Entwicklung von Website auf Basis von Daten. Das Vorgehen sollte dir demnach nicht unbekannt vorkommen:
- Finde heraus, wie deine Landing Page deiner Zielgruppe nützen kann. Das bestimmt maßgeblich deine Zielsetzung.
- Entwickle und publiziere dann einen „MVP“ (Minimum Viable Product) deiner Landing Page. Das ist sozusagen die kleinstmögliche Variante, mit der du einen Nutzen stiftest und deine Ziele erreichen kannst. Fang damit an, Nutzerdaten zu sammeln und auszuwerten.
- Entwickle deine Seite dann auf Basis der Daten weiter. Das ist der Teil, der typischerweise unter „Conversion-Optimierung“ verstanden wird.
HubSpot beschreibt diesen Prozess im Detail auf www.growthdrivendesign.com
Zuletzt noch ein persönlicher Tipp mit Blick auf “Best Practice” Beispiele: Es spricht nichts dagegen, sich anderenorts Inspiration zu suchen. Wichtiger ist aber, dass du die Prinzipien effektiver Landing Page Gestaltung verstehst. Denn nicht immer wirst du das vermeintlich perfekte Template finden, das dann auch wirklich funktioniert. Früher oder später kommt der Punkt, an dem du selbst anfangen musst, deine Landing Pages zu optimieren. Nur wie, wenn du keine Ahnung hast, wie du das Verhalten deiner Nutzer in deinem Sinne beeinflussen kannst, weil du einfach nur Layouts kopiert hast…
Mein Tipp: Schau dir HubSpots Growth Driven Design Course an! (Übrigens auch ein schönes Beispiel für eine Lead Gen Landing Page.)
Bewährte Tools, um Landingpages zu erstellen
Es gibt zahlreiche Landing Page Tools und Baukästen auf dem Markt und mit allen kannst du schnell und einfach – das heißt vor allem auch ohne Programmierkenntnisse – entsprechende Seiten erstellen. Fast alle kommen mit einem reichen Angebot diverser Landingpage Vorlagen, die du per Drag’n’Drop Editor anpassen kannst. Im Detail gibt es aber durchaus ein paar entscheidende Unterschiede, auf die ich dich aufmerksam machen will.
Disclaimer: Einige der folgenden Links zu den Tools sind Partner-Links. Sei dir aber gewiss, dass ich nur jene Tools promote, von denen ich selbst überzeugt bin! Deshalb findest du hier auch keine vollständige Liste aller verfügbaren Tools (und auch keine WordPress Themes oder Plugins, denn ich nutze ein anderes CMS).
- Unbounce* ist höchstwahrscheinlich der bekannteste – und vielleicht sogar der beste – Landing Page Builder auf dem Markt, hat aber dementsprechend auch seinen Preis und lässt dich lediglich 14 Tage lang kostenlos testen. Abgesehen von einem recht intuitiv bedienbaren Editor bietet Unbounce außerdem über 100 individualisierbare Templates, Pop-ups und Sticky Bars, die du hervorragend mit deiner Landing Page kombinieren kannst, eine Split-Testing-Funktion sowie ein umfangreiches Angebot an Integrationsmöglichkeiten.
- Zudem bietet Unbounce mit dem Landing Page Analyzer (siehe Screenshot unten) ein ziemlich cooles Tool zur Analyse deiner Landing Page. Dabei werden die Seitenladezeit, Mobilfreundlichkeit, Conversion-Centered Design, SEO, Vertrauenswürdigkeit & Sicherheit, Message Match sowie Social Tags berücksichtigt und im Detail kommentiert. Probier’s am besten selbst mal aus!
Lass deine Landing Page mit Blick auf unterschiedliche Faktoren bewerten
-
Drift ist vielleicht noch überwiegend für seine Chatbot-Tools bekannt, bietet inzwischen aber auch “Conversational Landing Pages”. Das ist ein zukunftsweisender Gedanke, denn Conversions durch Conversations – also den persönlichen Dialog über Interfaces wie Live Chats – zu erzielen, hat in meinen Augen großes Potenzial. Dazu folgen auch bald dedizierte Artikel hier im Blog, hier zunächst mal eine Erklärung von Drift selbst:
-
Paperform lässt sich leicht anpassen, um jede Art von Projekt zu verwalten - von Formularen, die das Onboarding automatisieren, bis hin zu speziellen Landing Pages für Produkte und Veranstaltungen. Wozu der Aufwand für eine ganze Seite, wenn ein alleinstehendes Formular ausreicht? In ihrem Blogartikel beschreiben sie die Hintergründe ihrer Idee: Why We're Building a New Paradigm to Combine Landing Pages with Forms. Mir persönlich gefällt dieser Ansatz sehr gut und ich werde ihn in Zukunft definitiv häufiger testen.
Der Paperform-Editor ist schön schlicht und fokussiert sich auf Formulare
- Nicht fehlen dürfen in dieser Liste auch Leadpages und Instapage. Leadpages wäre vielleicht mein Favorit, wenn ich mehr mit Landing Pages arbeiten würde, vor allem weil die Integration von Content Upgrades / Lead Magnets extrem leicht von der Hand geht (dafür nutze ich ConvertKit). Wie bei Unbounce stehen dir auch hier unzählige Vorlagen zur Verfügung, auch für Pop-ups und du kannst das Tool mit diversen anderen integrieren. Instapage wurde 2019 generalüberholt, sodass ich zur neuen Version noch nicht viel sagen kann. Funktionell geht es etwas weiter als die anderen Tools (bietet zum Beispiel Heatmaps und Personalisierung), kostet aber auch im Einsteigerpaket mehr.
- Zum Ende dieser Liste sei noch ConvertKit erwähnt, weil auch dieses Tool eine Landing Page Funktionalität aufweist. Diese steht jedoch wie gesagt nicht im Vordergrund, vielmehr geht es um den gesamten automatisierten Workflow vom Formular auf einer Landing Page über E-Mails bis hin zu Content Upgrades und Lead Nurturing.
Darüber hinaus gibt es noch viele weitere Anbieter, etwa Landingi oder Varify.io (aktuell noch in der Beta), aber mehr Auswahl macht die Entscheidung ja nicht unbedingt leichter. ;-)
Den passenden Anbieter zu wählen, hängt maßgeblich von deinen individuellen Anforderungen und natürlich deinem verfügbaren Budget ab. Willst du bspw. nur Click-Through Landing Pages bauen, dann kannst du Drift und Paperform im Grunde schon ausklammern. Willst du möglichst einfach Content Upgrades verteilen, dann brauchst du wahrscheinlich weniger Landing Pages, sondern mehr Pop-ups und Formulare und greifst eher zu ConvertKit oder Leadpages.
Ich fürchte, es führt also kein Weg drumherum, die einzelnen Tools miteinander zu vergleichen und idealerweise einfach mal zu testen. Es sei denn, du gibst dich mit einer pauschalen Empfehlung zufrieden!?
Zusammenfassung: Landing Page Design in a nutshell
6.000 Wörter später hast du nun hoffentlich einiges über die Gestaltung von Landing Pages gelernt. Hier das Wichtigste nochmals zusammengefasst:
- Jede Seite kann eine Landing Page sein, aber nicht jede ist intentional gestaltet und verfolgt ein konkretes, definiertes und der Gestaltung zugrunde liegendes Ziel. Genau das zeichnet Landing Pages aber aus: Eine Zielgruppe (aus einem spezifischen Kanal). Ein Ziel. Eine Botschaft. Zielführendes Design.
- Landing Pages können unterschiedlichen Zielen dienen: Google Rankings, Klicks auf eine andere Seite (z.B. in deinen Onlineshop), Lead-Generierung, Sales. Je nach Funktion ergeben sich unterschiedliche Anforderungen an die Gestaltung.
- Effektive Landing Pages haben eine Headline, einen “Hero Shot” (eine Visualisierung des Angebots oder zur Erzeugung emotionaler Resonanz) und einen Call-to-Action. Außerdem haben sich blickführende und vertrauensbildende Elemente bewährt.
- Gute Landing Pages machen sich verschiedene verhaltenspsychologische Prinzipien zunutze. Das können zum Beispiel Dringlichkeit und Verknappung sein, Gratisangebote, Einfachheit oder der soziale Beweis sein.
- Je nach Ziel einer Landingpage haben sich unterschiedliche Gestaltungsprinzipien bewährt: Conversion-centered Design für die Lead-Generierung, User-Centered Design für Click Through Landing Pages, oder Growth-Driven Design als allgemeine Herangehensweise an die Gestaltung von Webseiten.
- Es stehen unzählige Tools für den Landingpage Aufbau zur Verfügung. Eine pauschale Empfehlung ist kaum möglich, aber ein Blick abseits der Marktführer kann sich durchaus lohnen.
Ein abschließendes Wort zur Effizienz
Es spricht nichts dagegen, Templates für das Erstellen von Landingpages nutzen, aber achte darauf, dass sich diese auch für dein Ziel bewährt haben. Einen Button zu klicken ist etwas anderes als ein Formular auszufüllen… Auch deine Zielgruppe sollte eine Rolle spielen bei der Auswahl des Templates. Jene die gerade “modisch” sind, aber womöglich nicht deinen Kunden gefallen, werden wohl kaum funktionieren. Teste dahingehend einfach so viel wie möglich (und sinnvoll). Das ist in der Regel besser, als zu versuchen, das Rad ständig neu zu erfinden. Und wenn du etwas gefunden hast, das funktioniert, dann leite daraus einfach deine eigenen Templates ab.
Möchtest du weiterhin investigative, inspirative und inhaltlich tiefgründige Fachartikel mit journalistischen Anspruch erhalten? Dann unterstütze mich dabei – jeder Beitrag, schon ab 1 Euro, ist eine wertvolle Hilfe, um die Zukunft von toushenne.de zu sichern.
unterstützen
Robert ist Autor des Bestsellers „Content Design“ (Hanser Verlag), unabhängiger Content-Stratege und Gründer dieses Magazins (ehem. „toushenne.de“). Daneben lehrt er Content-Marketing an der FH JOANNEUM sowie Content Design an der ZHAW. Mit über zehn Jahren Erfahrung aus dem Agenturgeschäft, E-Commerce- & SaaS-Unternehmen sowie zahlreichen Freelance-Projekten mit führenden Marken wie Adobe, Bike24 und contentbird, entwickelt er wirksame Strategien für die Optimierung des Content ROI.
