Über gutes Design einer Landingpage

,

Über gutes Design einer LandingpageLandingpages sind heute ein sehr beliebtes Mittel, um Marketing Kampagnen durchzuführen. Die entscheidende Frage lautet demnach: Was macht ein gutes Design einer Landingpage aus?

Überall da, wo ein Besucher über einen Link auf das eigene Angebot geleitet wird, machen Landingpages Sinn. Sowohl bei Bannerwerbung und Adwords-Kampagnen als auch bei Partnerlinks anderer Seiten sind sie das Mittel der Wahl. Doch wie sieht die Grundstruktur einer Landingpage genau aus und worauf ist beim Design zu achten? Legen wir los!

Die Grundstruktur einer Landingpage

Eins möchte ich gleich am Anfang klären: Eine Grundstruktur, die für jedes Produkt das richtige Layout vorgibt, gibt es nicht. Es gibt jedoch einige grundlegende Elemente, die auf JEDE Landingpage gehören. Dazu zählen unter anderem:

  • Header mit Logo und Navigation
    • eventuell mit Anker-Links für die jeweiligen Sections
  • Einleitung
    • Was weiß der Besucher schon und was muss er noch wissen
    • Mission in Form eines Slogans
    • kurze, allgemeine und interessant aufbereitete Beschreibung des Produkts
  • Überzeugende Argumente
    • je nach Produkt und Komplexität mehr oder weniger
    • Alleinstellungsmerkmal
      • Warum ist das Produkt das beste auf dem Markt bzw. das richtige für den Kunden?
  • Bilder
    • Produktbilder
    • Bilder wie Menschen das Produkt nutzen
    • Bilder von bestimmten Szenarien mit dem Produkt
  • Trust Elemente
    • Siegel
    • Partner-Logos
    • Testimonials
    • Zertifikate
  • Je nach Branche und Produkt auch Referenzen
  • Video, falls vorhanden
  • Preise
  • Call-to-Action (CTA)

Das wichtigste Element, welches auch das Hauptmerkmal einer Landingpage darstellt, ist der Call-to-Action. Eine Landingpage wird einzig und allein für ein bestimmtes Produkt und mit einem ganz klaren Ziel erstellt. Zu diesem Ziel führt die Landengpage den User mittels CTA. Hier einige Beispiele für mögliche Ziele und entsprechenden CTA-Elementen:

  • Newsletter-Anmeldung
    • Button  oder Formular
  • Kontaktaufnahme
    • Button oder Kontaktformular
  • Kauf/Vorbestellung des Produktes
    • Button „Zum Einkaufswagen hinzufügen“
  •  Gewinnspiel-Teilnahme
    • Formular
  • Social-Sharing
    • Social Media Buttons

Sicherlich gibt es noch viele weitere Ziele, die mit einer Landingpage verfolgt werden können, an dieser Stelle geht es uns jedoch um die meist genutzten im Web. Kommen wir nun zu dem eigentlichen Design der einzelnen Elemente, die das Layout einer Landing-Page ausmachen.

Bilder, Bilder und nochmal Bilder

Mit einer Landingpage soll der Besucher überzeugt werden und eine bestimmte Aktion ausführen. „Zwingt“ man ihn vorher ellenlange Texte zu lesen und den Zusammenhang mit den entsprechenden Grafiken zu suchen, wird er je nach anfänglicher Motivation die Seite mit hoher Wahrscheinlichkeit verlassen. Deshalb gehören auf jede Landingpage mehrere gute Bilder, die das Produkt und die Möglichkeiten, die der Nutzer damit hat, zeigen. Der Text sollte die Bilder ergänzen und nicht umgekehrt!

Dabei muss man gar nicht lange suchen, um entsprechende Beispiele zu finden. Schaut man sich einmal die Landingpage des neuen iMac’s auf der Apple Seite an, merkt man sofort, dass enorm viel Wert auf große, beeindruckende Bilder gesetzt wurde.

landingpage-imac-apple

Screenshot: apple.com

Natürlich hat nicht jeder ein entsprechendes Produkt und Bilder in dieser Form und Auflösung. Doch auch bei digitalen Produkten und Dienstleistungen kann man sehr gut mit kostenlosen und kostenpflichtigen Bildern aus dem Netz arbeiten.

Sehr oft werden auf Landingpages, vor allem bei digitalen Produkten, die Menschen und somit die Endnutzer außer Acht gelassen. Dabei kann man heute sehr effektiv Bildern von Gruppen und einzelnen Personen auf seinen Produktseiten einsetzen. Ein sehr schönes Beispiel hierfür ist die Landingpage von dem Cloudspeicher-Dienst Google-Drive:

google-drive-landingpage

Screenshot: google.com

Neben den Bildern von Menschen, werden für diesen Zweck auch gerne Schreibtische inklusive Zubehör eingesetzt. Alles was man mit dem Produkt positiv in Verbindung bringen kann, kann auch auf der Landingpage verwendet werden. Man sollte dennoch vorsichtig sein und nicht zu sehr vom eigentlichen Produkt ablenken oder das Image anderer Brands für sich nutzen bzw. diesen auf der Landingpage überstrapazieren.

  6 Startup-Tipps von Mark Zuckerberg

Nicht immer sind Bilder, die für Sicherheit, Einfachheit und Freunde stehen sollen, sofort klar und eindeutig verständlich. Hier könnte man vorbeugen und  vor dem Launch der Landingpage einmal die eigenen Freunde und Bekannte fragen, ob die Wirkung und Intention auch rüberkommt.

Text? Ja, aber dann bitte groß

Neben Bildern und Buttons gehört natürlich auch Text zum guten Design einer Landingpage. Ein Fehler, der häufig gemacht wird, ist, zu viel Text und in der falschen Typografie und Größe einzusetzen. Texte sollten häppchenweise verteilt und mit großen Überschriften versehen werden. So können sich Besucher einfach durch die Landingpage bewegen und alles nötige zum Produkt erfahren, ohne sich in lange Texte hineinlesen zu müssen. Die Überschriften dienen als Anker und sollten wichtige Merkmale und Argumente, die für das Produkt sprechen, enthalten.

Neben der Länge und Größe der Texte lässt sich auch die Typografie als Gestaltungsmittel für das Design nutzen. Dabei sollte die Schrift immer gut lesbar sein und zum restlichen Design passen. Dicke Schriften ohne Serife lenken zum Beispiel schnell die Aufmerksamkeit auf sich und wirken modern. Wobei Serif Schriftarten häufig für kreative Berufe und Produkte verwendet werden. Hier ein Beispiel für den Einsatz von Texten auf Landingpages:

dropbox-landingpage

Screenshot: dropbox.com

Minimalismus ist mehr als nur ein Trend

minimalismus-auf-landingpages

Minimalismus kommt ursprünglich aus der Kunst und wurde von der Architektur übernommen und steht dort für eine besonders einfache, reduzierte und oft kubistische Bauweise. Wer sich in letzter Zeit ein wenig über Design-Trends erkundigt hat, müsste ebenfalls über den Begriff gestolpert sein. Minimalismus steht im Design für:

  • viel Platz
  • große weiße bzw. einfarbige Flächen
  • wenig Farben
  • Einsatz von unterschiedlichen Typografien
  • klare Linien
  • Fokus auf den Inhalt

Auch zum guten Design von Landingpages gehört ein minimaistischer Ansatz. Da bei dieser Art von Produktseiten immer nur ein Produkt im Fokus steht, sollte auch das Design sich daran halten. Um Produktbilder möglichst gut in Szene zu setzen, lässt man drumherum viel weiße Fläche. Auch bei den Texten und Überschriften kann man durch große Abstände zum restlichen Layout eine gute Wirkung erzielen.

Dabei ist Minimalismus mehr als nur ein Trend. Der Begriff beschreibt den Fokus auf das Wesentliche, den viele Designer im digitalen verloren haben und sich durch interaktive Elemente und neue technische Möglichkeiten immer weiter davon entfernen. Minimalismus reduziert den Inhalt einer Seite auf das Nötigste und stellte das, was wirklich wichtig ist, in den Mittelpunkt.

Wer die oberen Grundregeln auf seiner Landingpage beachtet und durch Analysen und A/B Tests weiter optimiert, kann seine Konversion auf Dauer steigern.

2 Kommentare
  1. Ben Harmanus
    Ben Harmanus says:

    Hallo Robert,

    die wichtigste Sache nennst du gleich zu Beginn deines Artikeles:

    „Eine Grundstruktur, die für jedes Produkt das richtige Layout vorgibt, gibt es nicht. Es gibt jedoch einige grundlegende Elemente, die auf JEDE Landingpage gehören.“

    Viele schauen sich Case Studies and oder nutzen ein Template und fügen eigene Inhalte ein. Die funktionierende Landing Page eines anderen ist immer die Lösung des Problems eines anderen!

    Es ist hilfreich zu sehen, wie andere ihre konvertierende Landing Page erstellt haben, das Resultat kann jedoch nicht kopiert werden.

    Was mir in deinem Post auch gefällt: Minimalismus! Ja, verspielt sein und sich kreativ austoben, das ist nichts für eine Landing Page und generell heutzutage im Rücklauf, da Spielereien nichts verkaufen.

    Bei einigen anderen Formulierungen habe ich jedoch ein wenig Bauchschmerzen:

    „Navigation“: Eine Navigation, die per Anker durch die Landing Page führt – ja – aber nur nicht von der Landing Page weg. Vielleicht meintest du das, aber wer sich nicht auskennt, kann das missverstehen. Im Optimalfall hat eine Landing Page KEINE Navgiation, die zum Beispiel zur Homepage etc. führt. Die Möglichkeit hin und her zu klicken ist ein Conversion-Killer.

    Die „Mission in Form eines Slogans“ sollte nicht in Richtung Werbung schielen. Viel wichtiger ist es , den Mehrwert in der Headline und der Subline zu vermitteln. Das macht die Werbung mit ihren Slogans überhaupt nicht. Das geht es nur um Sprüche, die sich einprägen sollen, indem sie immer wieder auf die Zielgruppe abgefeuert werden.

    Landing Pages müssen in Sekundenbruchteilen den Nutzen kommunizieren!

    Deswegen gefällt mir dein Google-Beispiel mit „Dateien überall abrufen“ besser als das von Apple. Die Page von Apple ist in meinen Augen eine Unterseite von der Website, aber keine Landing Page, auf die man gezielt Traffic schickt.

    Zudem würde ich nicht dazu raten, dass Landing Pages „mehrere Bilder“ brauchen. Ein Visual kann genug sein! Im Prinzip sollte man herausfinden, was der User sehen MUSS! Bei einem komplizierten Tool helfen Screens, Animationen und Videos – aber es gibt auch Pages, die mit nur einem Foto großartig konvertieren.

    Dazu fällt mir eine der am häufigsten gestellten Fragen ein: Wie lang soll eine Landing Page sein?

    So lang wie sie sein muss. 🙂

    Grüße,

    Ben Harmanus, Community & Content Marketing Manager D/A/CH Unbounce

    PS: Ich blogge regelmäßig über Landing Pages, schau doch mal vorbei: http://www.unbounce.com/de/blog

    Antworten
    • Robert Nejbert
      Robert Nejbert says:

      Hallo Ben,

      vielen Dank für dein ausführlichen Kommentar! Du hast Recht, dass man den Punkt mit der Navigation falsch verstehen kann, wenn man neu auf dem Gebiet ist. Ich wollte damit ebenfalls sagen, dass auf eine gute Landingpage im Idealfall keine Links gehören, die zu einem Absprung führen. Ein typischer Conversion Killer 😉
      Auch bei den Bildern ist es von Seite zu Seite unterschiedlich. Hier wollte ich jedoch betonen, dass ein Bild ausdrucksstärker ist als lange Texte, weshalb man mit Grafischen Elementen und Bildern nicht unbedingt sparen sollte, wenn man eine Landingpage gestaltet.

      Viele Grüße

      Robert

      Antworten

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.