16 Landingpage Komponenten, die überzeugen!

von Sascha Klapetz

Immer mehr smarte Marketer setzen Landingpages im Rahmen ihrer Online-Kampagnen ein. Landingpages haben „nur“ ein Ziel: Verkauf oder Lead. Damit sind diese Seiten sehr Conversionstark und schlagen oftmals die Performance der „normalen“ Webseite im Längen.

Doch welche Komponenten kann eine gute Landingpage enthalten, und was gibt es dabei zu beachten?

Diese Liste der Landingpage Komponenten soll Ihnen als Inspiration für Ihre nächste Landingpage oder Ihren nächsten Test dienen:

• Teil 1
  • 1. Header
  • 2. Headline, Subline oder Overline
  • 3. Teaser
  • 4. Landingpage-Intro
• Teil 2
  • 5. Autor/Unternehmen
  • 6. Testimonials
  • 7. Reader-/Download-Count
  • 8. Produktgrafik
• Teil 3
  • 9. Buttons
  • 10. Formular
  • 11. Trust-Text
  • 12. Vorteile
• Teil 4
  • 13. Countdown
  • 14. „Bekannt aus…“
  • 15. Text
  • 16. Footer

1. Header

Der Header enthält in der Regel das Logo und die Navigation.

Bei einer Landingpage, die nur aus einer Seite besteht, fällt die Navigation weg. Die Links zu Impressum und Datenschutz gehören ohnehin in den Footer. Eine Microsite, die aus mehreren Seiten besteht, kann eine Navigation enthalten. Normalerweise lenkt eine Navigation von Inhalt der Landingpage ab und mindert so die Conversionrate. Ist aber jede Seite einer Microsite eine eigene Landingpage, landet der Nutzer immer auf einer Seite, die zu einer Conversion führt.

Das Logo gehört einfach zu einer professionellen Webseite dazu und schafft Vertrauen. Vorausgesetzt es sieht „professionell“ aus.

Hinweis: Manche Werbenetzwerke, insbesondere im Native Advertising Bereich, lassen einzelne Landingpages nicht zu. Microsites, die auf den ersten Blick wie ein Blog aussehen, haben eine größere Chance auf Freigabe.

2. Headline, Subline oder Overline

Die Headline ist häufig das wichtigste Element der Seite, ebenfalls auf einer Landingpage.

Eine Headline sollte wie Headline aussehen, d.h. kein anderer Text darf größer sein. Sie sollte sowohl auf dem Desktop, Tablet und Mobil gut lesbar sein. Wie im Übrigen generell der gesamte Text der Landingpage. Hier ist neben einer ausreichenden Schriftgröße auf Kontrast zu achten.

Ich meine dich, grauer Text auf hellgrauem Hintergrund. Und auch dich weißer Text auf Hintergrundbild mit hellen Stellen.

Inhaltlich enthält die Headline das Problem, welches der Nutzer hat, und/oder die Lösung, welche dem Nutzer helfen soll. Die Headline sollte in Verbindung mit der Produktgrafik und dem Formular inkl. Button den Sinn und Zweck der Landingpage dem Nutzer verständlich machen, ohne das er den restlichen Text lesen muss.

Manchmal ist eine Headline nicht genug und man braucht noch eine darüber (Overline) oder darunter (Subline). Alle drei sind meist zu viel. Dann hat man die Headline zu kompliziert gedacht.

3. Teaser

Ein Teaser ist ein hervorgehobener Bereich direkt unter der Headline (oder Subline). Man erkennt ihn meist durch eine etwas größere Schriftgröße im Vergleich zum restlichen Text der Landingpage.

Ist der Text der Landingpage verhältnismäßig lang, kann ein Teaser sowohl den Einstieg in den Text erleichtern, als auch eine Zusammenfassung für Schnellleser bieten, der den restlichen Text sowie so nicht liest oder allenfalls überfliegt.

4. Landingpage-Intro

Die Bezeichnung „Intro“ ist nicht eindeutig und könnte ebenfalls für den Teaser verwendet werden. In meiner Sprache ist das Intro einer Landingpage ein hervorgehobener, optisch abgetrennter Bereich, der oberhalb des restlichen Inhalts der Landingpage steht. Dieser kann Headline, Produktgrafik, Teaser und/oder Vorteile, sowie das Formular inkl. Button beinhalten.

Das Intro ist kurz gesagt die reduzierte Form der Landingpage, die theoretisch schon ausreicht, um den Nutzer vom Angebot zu überzeugen. Trotzdem ist das, was folgt, wichtig um Vertrauen aufzubauen und die Noch-nicht-Überzeugten ins Boot zu holen.

Das Intro ist ein in sich abgeschlossener „Conversion-Bereich“ direkt zu Anfang der Landingpage. Daher eignet es sich sehr gut, um die Conversionrate auf Mobilgeräten zu steigern. Vorausgesetzt die Landingpage ist responsive und gut umgesetzt.

5. Autor/Unternehmen

Jemand verspricht Ihnen die Lösung zu Ihrem Problem, aber Sie kennen die Person gar nicht. Würden Sie ihr glauben? Vermutlich nicht. Daher ist es wichtig, dem Autor oder dem Unternehmen, von dem die Landingpage stammt, einen Abschnitt zu widmen.

Name, Foto oder Logo und ein kurzer Text über den Autor oder das Unternehmen dürfen auf der Landingpage nicht fehlen. Der Text muss verdeutlichen, warum gerade DIE Person oder DAS Unternehmen die Kompetenz hat, dem Nutzer bei seinem Problem zu helfen. Daher sollte die Beschreibung nicht zu allgemein und dem Thema der jeweiligen Landingpage angepasst sein.

6. Testimonials

Jetzt haben wir auf der Landingpage über uns selbst geredet. Was ist noch besser? Klar, wenn „andere“ über uns (positiv) reden. Diese Aufgaben übernehmen die sogenannten Testimonials.

Testimonials sind Stimmen von Nutzer, Kunden oder Leser, die etwas zu dem angebotenen Produkt oder Service sagen. Testimonials können nur als Text, als Text mit Foto oder als Video daher kommen. Sie sind immer mit dem Urheber gekennzeichnet (Namen eventuell abgekürzt).

Testimonials sind meist schwer zu bekommen. Auch wenn Videos und Bilder schön sind, genügen oft ein paar Sätze, die man aus Mails von Kunden oder Lesern generieren kann. Das ist jedenfalls besser, als komplett auf Testimonials zu verzichten.

7. Reader-/Download-Count

Sie bewerben auf Ihrer Landingpage einen digitalen Download oder einen E-Mail-Newsletter/-Kurs? Dann sollten Sie die Beliebtheit Ihres (kostenfreien) Angebots durch einen Reader- oder Download-Count belegen.

Idealerweise zeigt der Reader-/Download-Count die tatsächliche Anzahl der Leser oder Downloads an. Falls dies technisch problematisch ist, zeigen Sie eine (realistische) statische Zahl an.

Platzieren Sie den Count in der Nähe des Formulars oder der Produktgrafik.

8. Produktgrafik

Die Produktgrafik zeigt, was man bekommt.

Einen digitalen Download, ein eBook, stellen Sie zum Beispiel wie ein gedrucktes Buch dar. Der Titel des Buches sollte in jeder denkbaren Auflösung lesbar sein, auch in der mobilen Darstellung.

Wichtig ist, dass auch die Produktgrafik professionell ist. Zu altbacken und vermutlich mit MS Paint (Ruhe in Frieden!) erstellt, kommt nicht so gut an.

„Kommt nicht so gut an“ = Sie mindern die Conversionrate Ihrer Landingpage!

Ist der Download kostenlos, kann die Produktgrafik um einem Störer ergänzt werden.

9. Buttons

Buttons sind eines der wichtigsten Elemente einer Landingpage. Sie sind die Call-to-Action.

Buttons können entweder zum Formular führen oder Bestandteil des Formulars sein. Letztere stellen den (fast) finalen Schritt zur Conversion dar. Zum Beispiel bei einem E-Mail-Newsletter nur „fast“, da es noch die Double-Opt-In Mail zu bestätigen gilt.

Da eine Landingpage nur auf ein Ziel fokussiert ist, enthält diese hauptsächlich primäre Buttons. Alle Buttons führen zur Conversion und sind Teil des Conversion-Flows. Sekundäre Buttons machen nur Sinn, wenn eine Landingpage mehrere Optionen bietet, um zum Ziel zu gelangen. Ein Beispiel: Die Landingpage hat das Ziel den Download einer bestimmten Software. Diese kann man entweder direkt herunterladen (primärer Button) oder über ein anderes Portal z.B. GitHub oder den Mac App Store (sekundärer Button).

Optisch sollten Buttons als Buttons erkennbar sein und sich vom umgebenden Inhalt hervorheben. Dies erreicht man oft durch die Verwendung einer Komplementärfarbe, die im Layout hervorsticht.

Textlich gibt es bessere Möglichkeiten als „Absenden“. Wenn etwas kostenlos (aber nicht umsonst ist), dann kann man auch das Wort „Kostenlos“ oder „Gratis“ in die Call-to-Action einbauen, zum Beispiel „Kostenlos anfordern“. Noch besser: Nehmen Sie das Thema bzw. das was der Nutzer erhält mit auf, sofern der Buttontext dann nicht zu lang wird. Zum Beispiel: „Kostenlose Landingpage-Tipps“.

Im Idealfall erklärt der Buttontext ganz alleine, warum der Nutzer darauf klicken sollte.

10. Formular

Über den Button haben wir schon geredet, jetzt geht es um das ganze Formular.

Je nach Ziel der Landingpage ist das Formular mal länger, mal kürzer. Wichtig in allen Fällen: Fragen Sie nur die wirklich notwendigen Daten ab! In vielen Tests wurde erwiesen, dass sich die Anzahl der auszufüllenden Formularfelder in der Regel negativ auf die Conversionrate auswirkt. Dieser Effekt ist je nach Art des Formularfelds mal größer, mal kleiner.

Ein Beispiel: Zur Anforderung eines E-Mail-Newsletters sollten Sie nicht die Telefonnummer als Pflichtfeld abfragen, außer dies gehört aus irgendwelchen Gründen zu ihrem Geschäftsmodell und der Datensatz wäre sonst wertlos. Aber selbst dann: Erklären Sie dem Nutzer, warum Sie diese Daten von ihm benötigen und welche Vorteile das für ihn hat. Das kann man entweder direkt auf der Landingpage machen oder in einem nachgelagerten Nachqualifizierungsprozess.

Validieren Sie die Formulareingaben immer Serverseitig (z.B. PHP) „und“ Clientseitig (Javascript). Warum? Javascript könnte beim Nutzer deaktiviert sein (sehr unwahrscheinlich) oder aufgrund eines Fehlers in einem der auf der Webseite verwendeten Skripte nicht funktionieren (leider wahrscheinlicher). Dann bietet die Serverseitige Validierung ein Backup. Zudem ist sie in vielen Fällen auch aus Sicherheitsaspekten unabdingbar. Trotzdem sollte man auch Clientseitig validieren, so dass dem Nutzer Fehler ohne unnötigen Reload der Seite angezeigt werden. Das erhöht die Feedback-Geschwindigkeit ungemein, insbesondere bei einer schlechten mobilen Verbindung, und erhöht so das Nutzererlebnis.

Am wichtigsten: Testen Sie die Formulare Ihrer Landingpage! Jeder kleine Fehler aus Nutzersicht, jede kleine Ungereimtheit kann drastische Auswirkungen auf die Conversionrate Ihrer Landingpage haben!

Da kann die Headline noch so toll sein, die Produktabbildung noch so professionell, wer das Formular „verhaut“, der verliert unnötig Geld!

11. Trust-Text

Der Trust-Text nach meiner Definition findet direkt unterhalb des Formulars unterhalb des Buttons statt. Hier soll noch mal die mögliche Angst genommen werden, wertvolle Daten preiszugeben und auf den Button zu klicken.

Einfache Aussagen wie „Wir geben Ihre E-Mail-Adresse nicht weiter“ (sofern dies stimmt) oder „Sie können sich jederzeit abmelden“ (bei einem E-Mail-Newsletter ohnehin erforderlich) können schon genügen, um den letzten Zweifel auszuräumen.

12. Vorteile

Vorteile? Eine Landingpage besteht doch nur aus Vorteilen, oder?

Irgendwie ist da was dran, aber: Irgendwo auf einer Landingpage findet sich häufig ein Abschnitt, indem kurz und prägnant die Vorteile des Produkts oder Services dargestellt werden. Entweder als einfache Aufzählung, oder in Form von Kästen mit Icon, Überschrift und kurzem Text.

Oft ist es die magische Zahl Drei, also 3 Vorteile werden genannt, die klipp und klar auf den Punkt bringen, warum Sie die Lösung für das Problem des Nutzers haben. Es können aber auch mehr Vorteile sein. Nur sollte diese Aufzählung nicht zum Fließtext mutieren.

Die Vorteile sind für Schnellleser und wollen schnell gelesen werden!

13. Countdown

Ein Countdown limitiert das Angebot der Landingpage, und erhöht so den „Druck“ auf den Nutzer zu konvertieren. Durch den Countdown wird das Angebot zeitlich oder quantitativ limitiert. Beispiele: „Der Download ist nur noch xx Stunden, xx Minuten und xx Sekunden kostenlos verfügbar!“ oder „Das Seminar ist auf 100 Plätze limitiert - nur noch 13 Plätze verfügbar!“.

Ein Countdown ist nur ein richtiger Countdown, wenn er während des Besuchs des Nutzers auf der Landingpage aktiv ist, also runter zählt. Im ersten Beispiel ist dies leicht zu bewerkstelligen, indem man auch die Sekunden anzeigt. Im zweiten Beispiel mit den limitierten Seminarplätzen ist dies schon schwieriger, wenn man sich an den real verfügbaren Seminarplätzen orientiert und nicht schummelt.

Technisch wird ein Countdown über Javascript realisiert.

Ein Countdown auf der Landingpage gehört sicherlich zu den „aggressiveren“ Methoden zur Erhöhung der Konversionsrate. Ist der Countdown unglaubwürdig, können auch schnell die Landingpage, das Produkt und das Unternehmen dahinter unglaubwürdig erscheinen. Testen Sie daher den Countdown von Fall zu Fall.

14. „Bekannt aus…“

„Bekannt aus Film und Fernsehen.“ So in der Art funktioniert diese Landingpage Komponente. Nur muss man nicht unbedingt aus Film und Fernsehen bekannt sein. Erwähnungen in anderen Online-Medien wie Nachrichtenportalen und bekannteren Blogs genügen auch.

Wichtig ist, dass es sich in der Zielgruppe um ein relevantes und bekanntes Medium handelt und man die Nennung z.B. mit einem Link zum Beitrag nachweisen kann.

Bestenfalls ist das Angebot bzw. Produkt, welches auf der Landingpage beworben wird, „bekannt aus“. In manchen Fällen genügt aber auch, wenn der Autor oder das Unternehmen „bekannt aus“ sind.

Die Darstellung erfolgt nach einer einleitenden Überschrift durch Logos der Medien. Je nach Layout sollte man diese ausgegraut darstellen, damit die unterschiedlich farblichen Logos nicht zu sehr vom Rest der Landingpage ablenken.

15. Text

Worte verkaufen. Die meisten der zuvor genannten Landingpage Komponenten bestehen aus Worten und nicht aus Bildern. Genau genommen haben wir hier und da schon über den Text gesprochen.

Hier meine ich aber den Fließtext (mit Zwischenüberschriften), der sich in die anderen Komponenten nicht einordnen lässt. Aber brauchen wir in unserer schnelllebigen Zeit überhaupt noch einen etwas längeren Text? Liest das überhaupt noch einer?

Meine Antwort: Es kommt auf die Landingpage bzw. das beworbene Angebot an. Wenn Sie sich aber nicht sicher sind, dann ist mehr „guter“ Werbetext besser als weniger.

Sicher werden Sie sich übrigens, wenn Sie das testen!

16. Footer

Der Footer sollte auf einer Landingpage die rechtlichen Unabdingbarkeiten abhandeln, wie Link zum Impressum, Datenschutz, eventuell AGB und womöglich Urheberrechtsangaben zu verwendeten Medien.

Steht nur das im Footer, darf er gerne so unauffällig wie möglich sein, muss aber aus rechtlicher Sicht lesbar bleiben.

Ein Footer kann aber auf das Vertrauen erhöhen, wenn darin ein bekanntes Unternehmen auftaucht, womöglich im gleichen Land, mit einer seriösen Firmierung. Und keine „Scheinfirma“ auf irgendeiner Südsee-Insel.

Ende gut, alles gut?

Nun haben wir uns gemeinsam 16 Landingpage Komponenten angesehen, die man wählen und kombinieren kann, um eine konversionstarke Landingpage zu erstellen. Nicht alle Landingpage Komponenten gehören auf jede Landingpage, einige jedoch schon. Andere wiederum sollte man testen.

Eine „gute“ Landingpage steht nie still.