Expertentipps: Wie erstellt man eine Landing Page?

Landing Page

Konkrete Arbeitsschritte statt schnöder Theorie: Unser Expertenteam aus Designern und Marketern gibt Ihnen einen umfassenden Einblick in die Gestaltung und Umsetzung einer Landing Page. Am Beispiel unseres letzten Projektes zeigen wir Ihnen, welche Elemente der Website ausführlich diskutiert wurden, warum welche Entscheidungen getroffen wurden und worauf Sie bei Ihrer nächsten Landing Page unbedingt achten sollten.

Unsere Landing Page: Was wollten wir erreichen?

Vor einiger Zeit haben wir den "Branchenreport Industrie 2014" verfasst, für den wir die Websites von 120 deutschen Unternehmen auf Herz und Nieren geprüft haben. Die Ergebnisse wurden in einem 20-seitigen Report zusammengefasst, der zum kostenlosen Download angeboten wird. Um diesen Content erfolgreich verbreiten zu können, haben wir uns für eine Landing Page entschieden, deren Ziel es ist, die Besucher von unserem Branchenreport zu überzeugen und zu motivieren, das Formular auszufüllen sowie den Download zu starten. Damit verknüpft wurde eine zweite Landing Page, auf der die Analyse der eigenen Website angefordert werden konnte.

Aufbau und farbliche Gestaltung

Screenshot der gesamten Landing Page
Ein erster Überblick: In der vergrößerten Ansicht sehen Sie die gesamte Landing Page.

Ein Blick auf die gesamte Seite zeigt deutlich die wichtigsten Merkmale der Landing Page:

  • Die Seite bietet nur wenig Inhalt, fokussiert sich stattdessen auf die zentrale Zielsetzung.
  • Im Mittelpunkt steht das farblich abgesetzte Formular inklusive auffälligem Call to Action-Button
  • Die Texte sind kurz gehalten und sollen die Vorteile auf den Punkt bringen.
  • Der untere Bereich ist zurückhaltend gestaltet, bietet aber inhaltlich weiteren Mehrwert

Ein möglicher Kritikpunkt an der Gestaltung könnten die grünen Bullet Points sein, die in gewisser Konkurrenz zum Call to Action-Button stehen, der das zentrale Element der Seite sein sollte. Ein berechtigter Einwand, dennoch kann man dieses "Problem" durchaus in Kauf nehmen, weil davon auszugehen ist, dass niemand auf einen Download-Button klickt, ohne vorher zu wissen, was er eigentlich herunterlädt. Folglich sollte die Aufmerksamkeit nicht ausschließlich auf den Button gelenkt werden, sondern auch ein kurzer Schwenk auf die Benefits ermöglicht werden.

You never get a second chance to make a first impression

Screenshot des ersten Eindrucks
Dieser Ausschnitt wird dem Besucher als erstes präsentiert und muss sofort Interesse wecken.

Das gilt auch für Landing Pages: Wenn ein Nutzer die Website das erste Mal besucht, bleibt nicht viel Zeit, sein Interesse zu wecken. Folglich müssen zwei Elemente der Landing Page besonders gelungen sein: die Überschrift und das zentrale grafische Element, das als Bild oder Video realisiert werden kann (der sogenannte Heroshot). Auf einem der beiden Elemente wird der Blick definitiv als erstes fallen.

In unserem Fall kam nur ein grafisches Element in Frage: das Cover des Reports. Man hätte auch andere Visualisierungen wählen können, doch wir wollten sofort verdeutlichen, dass es sich um einen Report handelt.

Da man anhand des Bildes aber nicht erkennen kann, mit welchem Thema sich der Report befasst, musste dieses Information im Titel inklusive Untertitel transportiert werden, in unserem Fall "Websites deutscher Industrie­unter­nehmen auf dem Prüfstand - Sichern Sie sich den kostenlosen Report". Welche Informationen sind dort verpackt: es geht thematisch um Websites in der Industrie, es ist ein Report und dieser ist kostenlos.

Auch hier gab es Stoff für Diskussionen. Der Streitpunkt war dabei der Fokus auf die Industrie. Der Branchenreport liefert auch interessante Informationen für nicht-industrielle Unternehmen, daher könnte die gewählte Formulierung für einige Website-Besucher eher abschreckend wirken. Allerdings haben wir uns recht früh auf die passende Branche spezialisiert, das sollte auf der Landing Page deutlich werden. Alternativ wäre eine stärkere Betonung der einzelnen Online-Themen, die im Report behandelt werden, denkbar.

Benefits auf der Landing Page
Kurz und knapp: Die Vorteile des Reports.

Auf den Punkt gebracht: die Benefits

Das erste Interesse konnte mit Überschrift und Grafik geweckt werden, jetzt will der Besucher genauere Informationen. Die zentrale Frage, die für den Nutzer beantwortet werden muss: Warum sollte ich überhaupt Zeit investieren, um mir den Branchenreport herunterzuladen? Das Mittel zur Beantwortung dieser Frage sollten einige Bullet Points sein, die kurz den Nutzen umreißen. Denken Sie dabei immer aus der Sicht des Nutzers. Entscheidend ist nicht, was an dem beworbenen Produkt toll ist, sondern welchen Mehrwert der jeweilige Nutzer erfährt.

Damit die wichtigsten Benefits sofort ins Auge stechen, haben wir uns für die bereits erwähnte farbliche Absetzung mit Hilfe der grünen Icons entschieden. Inhaltlich sind wir den Ratgebern gefolgt und haben die Mehrwerte für die Nutzer betont, beispielsweise "Anregungen zur Optimierung Ihrer Website" oder "Ansatz für Ihre eigenen Strategien".

Screenshot: Formular
Das Formular sollte möglichst kurz sein und einen auffälligen Call to Action Button besitzen.

Jetzt gilt's: Das Formular und der Call to Action

Beim Formular gilt das gern zitierte "So kurz wie möglich, so lang wie nötig". Je mehr Formularfelder ausgefüllt werden müssen, desto abschreckender erscheint das Formular und entsprechend hoch ist die Abbrecherquote. Folglich haben wir uns auf die wirklich notwendigen Informationen beschränkt: die E-Mail-Adresse inkl. Double Opt-in, damit wir mit dem Nutzer kommunizieren können, und den Namen, damit wir den Nutzer persönlich ansprechen können. Ob noch weitere Informationen, etwa Telefonnummer oder Unternehmen abgefragt werden, muss individuell entschieden werden. Möglicherweise ist es sinnvoll, eine höhere Abbrecherquote in Kauf zu nehmen, um wenige sehr wertvolle Leads zu gewinnen.

Der zweite zentrale Aspekt ist der Call to Action-Button. Wichtig waren uns die farbliche Abhebung (kräftiges Grün auf weißen Hintergrund) und eine aussagekräftige Beschriftung. Mit "Kostenlosen Download anfordern!" wollten wir noch einmal den Kern der Landing Page betonen. Mit einem simplen "Senden" auf dem Button hätten wir dieses Ziel sicherlich nicht erreichen können. Grundsätzlich sollte der Button noch einmal den letzten Anstoß geben, das Formular zu senden.

Ein letzter Überzeugungsversuch im Footer

Screenshot: Footer
Noch nicht überzeugt? Der Footer ist die letzte Chance, um gute Argumente zu liefern.

Ist der Footer einer Landing Page wirklich wichtig? Sollte der Fokus nicht ausschließlich auf dem Call to Action-Button liegen? Gute Frage, darüber haben wir auch nachgedacht. Letztlich haben wir den unteren Bereich der Website als Chance gesehen, weitere Argumente für das beworbene Objekt zu platzieren. Schädlich ist es sicherlich nicht, denn es gibt nur zwei denkbare Anwendungsfälle: Im Idealfall ist der Besucher schon vorher überzeugt, füllt das Formular aus und beschäftigt sich nicht mit dem unteren Bereich. Ist er noch nicht überzeugt und scrollt weiter, stehen die zusätzlichen Informationen zur Verfügung, um erneut zum Download zu animieren. Führt auch dieser Versuch nicht zum Ziel, hat man es zumindest noch einmal versucht.

Ein gern genutztes und häufig empfohlenes Element im unteren Bereich sind kurze Zitate von zufriedenen Nutzern, um die Beliebtheit des Produkts zu unterstreichen. In unserem Fall haben wir darauf verzichtet, weil wir kein Produkt bewerben wollen, sondern Inhalte. Bei einer anderen Zielsetzung wären die Testimonials möglicherweise der erfolgversprechendere Weg.

Screenshot der mobilen Ansicht
Bei der mobilen Version fällt das Bild weg, das Formular öffnet sich erst nach dem Klick.

Mobile Optimierung auch für Landing Pages

Schon zu Beginn der Gestaltung sollte beachtet werden, dass die Landing Page auch auf kleinen Bildschirmen lesbar und bedienbar sein muss. Idealerweise wird dafür ein Responsive Design genutzt, das für unsere Seite zum Einsatz kam und für kleine Viewports folgende zentrale Unterschiede aufweist: Zum einen fällt das Bild weg, zum anderen öffnet sich das Formular erst, wenn es ausgewählt wird.

Beides sind zugegebenermaßen Streitfälle: Noch vor wenigen Zeilen wurde die Wichtigkeit des Bilds betont, um einen guten ersten Eindruck zu hinterlassen. Aus Platzgründen haben wir uns allerdings dagegen entschieden und den Fokus auf den Titel gelegt, der ebenfalls alle notwendigen Informationen transportiert. So wird trotzdem deutlich worum es auf dieser Landing Page geht. Bei anderen Produkten wäre ein Bild möglicherweise ein absolutes Must-have.

Das führt uns zum zweiten Streitpunkt: Sollte man Formulare verstecken? Auch hier gehen die Meinungen weit auseinander: Manche sagen, dass versteckte Formulare häufiger besser konvertieren, da der Besucher bereits von dem Produkt überzeugt ist, bevor er das Formular sieht, und folglich auch das Ausfüllen gerne in Kauf nimmt. Wiederum andere Nutzer fühlen sich eher von dem plötzlichen Erscheinen des Formulars vor den Kopf gestoßen und verweigern anschließend das Ausfüllen. Da sich diese Glaubensfrage nicht eindeutig beantworten lässt, haben wir uns für die Mischform entschieden: Transparenz auf der Desktopvariante, verdecktes Formular auf dem Smartphone.

Fazit: Es kommt drauf an...

Klare Regeln können die Arbeit immens erleichtern, im Fall der Landing Page Gestaltung muss man leider darauf verzichten. Dennoch ist es hilfreich, allgemeine Vorgaben als grobe Richtlinie zu nutzen, und diese anschließend den eigenen Anforderungen entsprechend anzuwenden. Empfehlenswert ist etwa der E-Mail-Kurs vom Landing Page-Experten Oli Gardner. Wie dieser Prozess funktionieren kann, hat dieser Beitrag beispielhaft gezeigt, wenngleich unsere Umsetzung ebenfalls nur Anreize und Denkanstöße für die eigene, individuell gestaltete Landing Page geben kann.

Newsletter abonnieren

Die besten Tricks und Expertentipps für rundum erfolgreiche Webprojekte.

Folgen Sie uns ...

... und verpassen Sie nie wieder einen neuen Beitrag in unserem Blog.

Sie haben noch Fragen?

Dann kontaktieren Sie uns einfach und wir stehen sofort zur Verfügung.

Nachricht senden

×

Eine Nachricht senden...

Formular wird geladen ...

Tipps der Redaktion

Um-logo-teaser

Professionelle Newsletter: zielgerichtet und persönlich

  • E-Mails direkt aus dem CMS
  • Individuelle Segmentierung
  • Effiziente Marketing Automation

Hier gibt's alle Details

×Schließen