6 Landingpage Beispiele, die mit gelungenem UX Design überzeugen!

Was ist eine Landingpage?

Wer eine Landingpage erstellt, der steht vor einem schwierigen Spagat: Du brauchst eine Seite, die a) gleichermaßen dir wie den Nutzer:innen optisch gefällt und die b) ihren Zweck erfüllt. Auch, wenn Punkt a) natürlich vom subjektiven Geschmack abhängt, gibt es eine gute Nachricht: Wenn die Seite viele Conversions erzielt und damit Punkt b) erfüllt, dann scheint sie zumindest den Nutzer:innen zu gefallen – und genau darum geht es doch! 

Gut funktionierende und auf positive Resonanz stoßende Landingpages sind ein unverzichtbares Instrument im Content Marketing. Doch leider erkennen nicht alle Unternehmen dieses enorme Potenzial. Für uns ist das Anlass genug, dir zu zeigen, worauf es beim Aufbau einer gelungenen Landingpage ankommt. Dazu gehören gängige Fehler, die du vermeiden solltest, genauso wie wichtige Tools, die du kennen musst. Doch das alles wäre nichts ohne praxisnahe Beispiele von Landingpages, denen es gelingt, aus Besucher:innen Kund:innen zu machen!

Das solltest du über den Aufbau einer Landingpage im Jahr 2022 wissen

Bevor wir anfangen, möchten wir betonen, dass es keine Zauberformel für die optimale Landingpage gibt. Jedes Unternehmen verfolgt andere Ziele mit der Seite, hat andere Zielgruppen und andere technologische und finanzielle Ressourcen. Während die einen also unbedingt ein neues Produkt verkaufen wollen und dafür viel Geld in die Hand nehmen, wollen andere die Landingpage an einer anderen Stelle der Customer Journey einsetzen und Nutzer:innen eher zum Ausfüllen eines Formulars bewegen. Zu den gängigsten Zielen einer Landingpage gehören:

• Produkte oder Services verkaufen
• Informationen liefern und damit das Interesse an Produkten/Services steigern
• Zur Registrierung für einen Newsletter, in einer Community, für eine Dienstleistung etc. bewegen
• Spezielle Angebote für Produkte oder Dienstleistungen hervorheben
• Leadgenerierung

Bei der Erstellung musst du die Landingpage also individuell an das jeweilige Ziel anpassen.

Bevor es losgeht: Darauf kommt es bei einer gelungenen Landingpage an!

• Zielgruppe analysieren: Bevor du die Landingpage überhaupt aufsetzt, musst du dir bewusst machen, wo du die Nutzer:innen abholen willst bzw. an welchem Punkt der Customer Journey sie sich befinden, wenn sie auf deine Seite treffen. Kennen sie dein Unternehmen schon, weil sie bereits in anderer Form Kontakt mit dir hatten? Oder ist ihnen dein Unternehmen gänzlich unbekannt, aber sie sind nun z. B. über eine Social Media Ad zu dir gelangt? Das sind integrale Fragen, die du dir stellen und auf die du über die Landingpage entsprechende Antworten liefern musst. 
• Mix aus ansprechendem und passendem Design finden: Erwiesenermaßen bleiben Nutzer:innen länger auf einer Website, wenn ihnen das Design gefällt bzw. sich das von dem anderer abhebt. Je länger sie nämlich auf einer Seite verweilen, desto bessere User Signals sendet sie und desto höher sind die Chancen, dass sie konvertieren. Damit genau das passiert, ist folgender Punkt relevant…
• Das richtige Formular finden: Das Formular ist in der Regel das entscheidende Element einer Landingpage. Grundsätzlich gibt es hier kein richtig oder falsch, sondern eher zu viel und zu wenig. Gerade in Deutschland (Stichwort: DSGVO) musst du da vorsichtig sein. Frage also nur das ab, was du unbedingt wissen musst. Wenn es um ein Freebie, eine Trial-Mitgliedschaft oder Ähnliches gilt, dann reicht meist die Mailadresse der Nutzer:innen. Geht es um einen Service, Informationen oder ein physisches Produkt, das verschickt werden muss, dann solltest du mehr Daten abfragen. Gerade im B2B schadet es nicht, in diesem Kontext nach Unternehmen und Position in diesem zu fragen. Stelle dabei aber immer sicher, dass der rechtliche Rahmen stimmt.

Davon abgesehen ist das oberste Gebot bei jedem Formular: So einfach wie nötig und so effektiv wie möglich. Können Nutzer:innen das Formular ganz einfach ausfüllen sinkt die Wahrscheinlichkeit auf den Abbruch des Ausfüllvorgangs. Außerdem wichtig: Das Formular sollte mobile friendly sein. Viele Unternehmen unterschätzen die Bedeutung von mobilen User:innen noch immer, dabei steigt die Smartphonenutzung immer stärker an. Daher muss um jeden Preis ein responsives Design für das Formular her, das sowohl am Desktop als auch mobil funktioniert. 

• Inspiration holen: Wenn du nicht bereits selbst ein aufregendes Websitedesign hast, das sich auf neue Landingpages übertragen lässt, dann helfen Besuche auf anderen Seiten. Schau dir in diesem Fall Websites von Unternehmen an, die eine ähnliche Zielgruppe wie du haben. Falls du Nachfragen hast, schadet ein Austausch mit dem entsprechenden Unternehmen nicht, besonders gut funktioniert das über LinkedIn. Eventuell erfährst du so mehr über Trafficzahlen oder Conversion Rates. Wenn das nicht funktioniert, hilft eine Inspirationstour, um mehr über die Elemente, Designs und Ansprache für deine Zielgruppe herauszufinden. 
• Führe Tests durch: Es ist noch keine ideale Landingpage vom Himmel gefallen. Deshalb musst du erst einmal austesten, ob sie gut funktioniert und was du ggf. noch verbessern musst – A/B-Testing ist hier das Zauberwort. 

Die wichtigsten Grundlagen für eine erfolgreiche Landingpage 

Um die Erfolgschancen einer Landingpage zu maximieren, gibt es ein paar grundlegende Elemente, auf die du achten solltest. 

Wichtige Informationen und CTA „Above the Fold“

Wer schon einmal an einer Website gearbeitet hat, der kennt den Begriff „Above the Fold“. Gemeint ist der Bereich, den Nutzer:innen sehen, sobald sie eine Landingpage besuchen, ohne dass sie scrollen müssen. Dieser Bereich ist eben deshalb so entscheidend, weil du hier bereits die wichtigsten Informationen liefern und einen CTA (Call-to-Action), der eine Conversion hervorruft, platzieren musst. Bei einer Landingpage, deren Conversionelement weit „Below the Fold“ platziert ist, sinken die Chancen auf eine erfolgreiche Conversion rapide. Wichtig auch hier: auf Mobile-Friendliness achten.

Schlichter Aufbau für schnelle Orientierung

Ellenlange Texte, komplizierte Formulare, zu viele Bilder, die teilweise thematisch gar nicht passen – all diese Elemente desorientieren Nutzer:innen. Genau das Gegenteil solltest du tun: Überfordere Besucher:innen deiner Website nicht, sondern setze auf Simplizität. Das Ziel deiner Landingpage ist es schließlich, den Prozess zu verschlanken und Besucher:innen schnell zur Conversion zu führen! 

Aussagekräftiger und animierender Call to Action

Neben der Position des Call to Actions (CTA) Above the Fold steht und fällt der Erfolg einer Landingpage auch mit dessen Inhalt und Überzeugungskraft. Du forderst Nutzer:innen zu einer Handlung auf, formuliere das also auch klar und verständlich, ohne sie dabei unter Druck zu setzen. Die Wortwahl ist hier entscheidend. CTAs mit nur einem schlichten Verb wie „absenden“ oder „testen“ wirken nicht allzu animierend. „Sichere dir jetzt eine kostenlose Testversion“ suggeriert Nutzer:innen hingegen eine gewisse Sicherheit und animiert ihn oder sie gleichzeitig zu einer Handlung (Imperativ am Anfang). Mit dem Zusatz „kostenlos“ machst du deutlich, worin der wichtigste Vorteil für Nutzer:innen liegt: Sie können gratis etwas ausprobieren, bevor sie kaufen. 

Vertrauen der Besucher sichern

Wenn Besucher:innen über eine Landingpage z. B. infolge einer Social Media Ad zum ersten Mal mit deinem Unternehmen interagieren, dann ist meist kein Vertrauen da. Setze in diesem Fall vertrauensvolle Signale in Form von Gütesiegeln von Bewertungsportalen (z. B. Trusted Shops, Trustpilot etc.). Nutzerbewertungen (in Form von Sternen oder Punkten) helfen neuen Besucher:innen, das Vertrauen in deine Page und dein Unternehmen zu steigern.

Passende Landingpage zur Kampagne

Wenn du Nutzer:innen über eine Werbeanzeige in Social Media oder Suchmaschinen auf die Landingpage locken möchtest, dann sollten beide Elemente aufeinander abgestimmt sein. Das gilt sowohl für Design, Inhalt und die Tonalität. Ist das nicht der Fall, verwirrt das Besucher:innen, schadet dem Vertrauen und animiert nicht zu einer Conversion.

Triggerelemente gezielt einsetzen

Wahrscheinlich kennst du das, wenn auf einer Hotelbuchungsseite eine Anzeige mit dem Text „Nur noch zwei Zimmer verfügbar“ erscheint. Dabei handelt es sich um einen Trigger, der in dieser aber auch in vielerlei anderer Form auftauchen kann. Er hilft dabei, Nutzer:innen in eine bestimmte Richtung zu bewegen – im Idealfall natürlich zur Conversion. Achte dabei darauf, nicht zu aggressive Elemente einzusetzen, denn das schreckt Besucher:innen eher ab als an. Bei Popups ist beispielsweise der Grat zwischen erfolgreicher Conversion und entnervtem Wegklicken sehr schmal.

Beliebte Fehler bei Landingpages: Was du unbedingt vermeiden musst 

Bei der Erstellung einer Landingpage warten ebenso viele Fallstricke wie Dinge, die du richtig machen kannst. Dazu zunächst Folgendes: Fehler sind menschlich und gehören gerade beim Optimierungsprozess von Landingpages dazu (zur Erinnerung: Eine Landingpage ist nie komplett fertig). Dennoch gibt es Dinge, die du unbedingt vermeiden sollst, weil  sie das Ziel, Conversions zu hebeln, nicht unterstützen.

Die Ein-Kanal-Strategie

Eine Landingpage sollte in der Regel nicht nur auf einen Kanal ausgerichtet sein. Berücksichtige deshalb alle relevanten Kanäle bei der Erstellung der Page. Selbst wenn Nutzer:innen z. B. über eine AdWords Kampagne auf die Landingpage kommen, sollte die Seite SEO optimiert sein. Das hilft, da sie so langfristig auch eine organische Reichweite generieren bzw. organischen Traffic auf die Website bringen kann. 

Zu viel Text schadet dem Ziel

Füllst du die Landingpage mit zu viel Text oder zu vielen Informationen, verunsichert das Besucher:innen eher in ihrem weiteren Verhalten. Deshalb gilt für eine Seite, die Conversions hebeln soll: Möglichst präzise deutlich machen, worin der Vorteil eines Service oder eines Produkts liegt. Bullet Points sorgen bspw. für mehr Übersichtlichkeit, gutes Copywriting überzeugt zum Verkauf usw. 

Ineffektiver Aufbau

Da eine Landingpage Conversions erzielen soll, sind unnötige Informationen eher schädlich. Hier helfen CTAs (z. B. als Buttons) und vor allem ein roter Faden, der Nutzer:innen eine gewisse Stringenz in deinem Konzept zeigt.

Hilfreiche Tools beim Aufbauen einer Landingpage

Neben den inhaltlichen Hürden beim Aufbau einer Landingpage, gibt es auch technische zu meistern. Zum Glück gibt es da eine ganze Reihe von Tools, die dir bei dem Prozess unter die Arme greifen. Du brauchst lediglich ein Konzept von den Inhalten, die letztendlich auf der Landingpage laden sollen.

Einfach, aber weniger individuell: Website-Baukästen

Prinzipiell ist ein Website Baukasten die einfachste Möglichkeit, eine Landingpage aufzubauen. Sie erfordern kaum bis keine Vorkenntnisse, sehen dafür aber im Endergebnis hochprofessionell aus. Entscheidender Nachteil ist allerdings der Faktor der Individualität. Landingpages aus dem Baukasten sind in ihren Anpassungsmöglichkeiten beschränkt. Dennoch sind sie gerade für Anfänger:innen bzw. für erste Versuche an Landingpages eine gute Option. Diverse Anbieter haben solche Baukästen im Angebot, dazu gehören:

• Jimdo
• Wix
• ePages
• Squarespace
• Page4

Individuell, aber nicht so einfach: Content Management Systeme

Umgekehrt verhält es sich für Landingpages, die du mithilfe eines Content Management Systems (CMS) erstellst. Sie bieten deutlich mehr Möglichkeit durch Widgets, Plugins etc., erfordern dafür aber deutlich mehr Kenntnisse von der Materie „Website.“ Zu den gängigsten Anbietern zählen:

• WordPress
• Joomla
• Contentful
• TYPO3
• Storyblok

Für Commerce Plattformen interessant: Shopsysteme

Gerade für Unternehmen, die erst am Anfang stehen und noch keinen eigenen Online-Shop aufgezogen haben, sind Shopsysteme interessant. Die Anbieter ermöglichen es dir, durch ihre Tools, eine Landingpage für Produkte zu erstellen und sie darüber zu verkaufen. Gängige Anbieter sind: 

• Shopify
• WooCommerce
• OXID
• Shopware
• Ecwid

6 Beispiele für gelungenes und effektives UX Design bei Landingpages

Wenn du die Theorie nicht schon übersprungen hast, dann kommen wir jetzt zum wesentlichen Teil dieses Artikels. Unsere Beispiele sind gezielt ausgewählt, um aufzuzeigen, welche Ansätze Unternehmen aus verschiedenen Branchen mit ebenso verschiedenen Zielen zur Erfüllung dieser wählen. Aber Vorsicht: Schaust du dir nur unsere Beispiele ohne Kontext an, wirst du nicht sofort alles wissen, um selbst eine erfolgreiche Landingpage aufzubauen. Mache dir außerdem bewusst, dass du unsere Beispiele besser nicht deckungsgleich kopieren solltest. Individualität ist ein wichtiger Faktor, den Besucher:innen wertschätzen. 

1. Casper

Nein, hier geht es weder um einen Geist, noch um einen Rapper, sondern um Matratzen. Dank eigener Illustration, klarer Überschrift und direkt zu sehenden CTA-Buttons wissen Besucher:innen sofort, was sie auf dieser Seite erwartet. Der Clou: Obwohl die Seite von Casper an sich für eine Landingpage sehr lang ist und viele Informationen bereithält, ist sie optimal strukturiert. Das ist vor allem dem Button „Shop Mattresses“ zu verdanken, der die Wahl eröffnet, entweder direkt zum Produkt zu gehen oder den Guide zu lesen.  

2. Aevor

Bei diesem Beispiel, ebenfalls aus dem B2C Bereich, ist die Botschaft und der Zweck klar. Besucher:innen sollen diesen Rucksack kaufen. Die Marke Aevor selbst – und das wird auch im weiteren Verlauf der Landingpage klar – legt hohen Wert auf fair und möglichst nachhaltig produzierte Produkte. Um mögliche Käufer:innen tief in den Bann des Produktes zu ziehen, nutzen sie Bullets, Tabellen und sogar ein Produktvideo.

3. Searchmetrics

Ein gelungenes Beispiel aus dem B2B Bereich ist Searchmetrics. Das Unternehmen hilft anderen Unternehmen dabei, Search Daten zum eigenen Vorteil zu nutzen. Ein Tool, das dabei helfen soll, ist die Searchmetrics Suite. Die zugehörige Landingpage stellt die wichtigsten Vorteile des Tools kurz vor – und das direkt im Sichtfeld der Nutzer:innen. Besonders attraktiv für Besucher:innen: Der Klick auf den Button „Demo vereinbaren“ generiert einen Sprung direkt zum Kontaktformular. Hier profitieren beiden Seiten: Das Unternehmen generiert einen Lead, wenn Nutzer:innen das Formular ausfüllen und diese wiederum können das Produkt risikofrei besser kennenlernen. 

4. Windwärts

Windwärts verschreibt sich nachhaltiger Energieerzeugung durch Windkraft. Sie bieten sowohl Services für Betreiber:innen von Windkraftanlagen (B2B) als auch für Landbesitzer:innen (B2C) an. Das Thema nachhaltige Energie ist ein ebenso brisantes, wie schwer Kommunizierbares. Um die Thematik einfach und effektiv darzustellen, wählt Windwärts passende Illustrationen und einen umfangreichen Ratgeber auf jeder Landingpage. Gerade auf der für Landbesitzer:innen ist die wichtigste Botschaft ganz oben: „Wieviel kann ich mit meinem Land verdienen?“ und wie läuft der Prozess ab? Per Button können Interessenten dann direkt Kontakt aufnehmen. 

5. Uber

Uber müssen wir dir wahrscheinlich nicht vorstellen, aber warst du schon einmal auf der Website von Uber und nicht in der App? Falls nicht, dann wirst du dort sehen, dass sie hier prominent und noch vor der Buchung einer Fahrt oder dem Bestellen von Essen die Möglichkeit präsentieren, sich selbst als Fahrer:in zu registrieren. Als international operierendes Unternehmen sitzen bei Uber Designprofis am Werk. Deshalb ist der Aufbau der Seite, obwohl er ziemlich reduziert ist, informativ und zielführend.

6. Carwow.de

In Deutschland gibt es eine große Auswahl an Vergleichsplattformen für Gebraucht- und Neuwagen, wie sollen die sich also voneinander abheben? Carwow hat das zum Thema Elektroautos eindrucksvoll geschafft und sich mit seiner Landingpage an die Spitze des Rankings gesetzt. Das gelingt dank verschiedener Faktoren, am meisten hilft aber die Struktur. Durch sie können Besucher:innen nach eigenen Vorlieben auswählen, welchen Karosserietypen sie für ihr Elektroauto haben wollen. Auch die Buttons „Auto wählen“ und „Welches E-Auto passt zu Ihnen?“ leiten Nutzer:innen geschickt weiter zum Ziel. 

Zwischen guter und schlechter Landingpage unterscheiden mit dem UX Score

Wir sind bereits darauf eingegangen, welche Elemente auf einer Landingpage das Erreichen eines bestimmten Zieles begünstigen und was sie eher behindert. Betrachten wir nur den Faktor einer guten User Experience und in Anlehnung daran die User Signale, die an Suchmaschinen ausgesendet werden, gibt es ein Verfahren, das uns bei der Bewertung einer Landingpage hilft: der UX Score.

Die Methode kommt aus der qualitativen Sozialforschung und lässt sich mit einer qualitativen Inhaltsanalyse vergleichen. Beim UX Score bewertet ein mehrköpfiges Panel aus UX Tester:innen verschiedene Faktoren einer Landingpage durch ein Wertungssystem von 1 bis 5. Im suxeedo User Signals Whitepaper haben wir das Verfahren anhand des Beispiels von Carwow, das wir in diesem Artikel schon behandelt haben, durchgeführt.

Dabei kam heraus, dass Carwow als vermeintlich unbekanntere Brand zu einem wichtigen Keyword besser rankt als Branchengrößen wie Peugeot oder Volkswagen, eben weil ihre Landingpage für Elektroautos eine viel bessere UX bietet. Mehr über die Analyse erfährst du, wenn du dir das kostenlose Whitepaper runterlädst.

Fazit: Mit präziser Ansprache, logischem Aufbau und nutzerfreundlichem Design zur optimalen Landingpage

Unsere wichtigste Erkenntnis zu Landingpages ist wohl, dass die perfekte Landingpage nicht existiert, auch nicht in unseren Beispielen. Dennoch gibt es Faktoren, die eine gut konvertierende Landingpage begünstigen und Besucher:innen dazu animieren, eine gewünschte Aktion auszuführen. Kernziele dabei sind es, die wichtigsten Informationen in aller Kürze zu liefern, einen Aufbau zu finden, der Nutzer:innen sinnvoll über die Seite leitet und ein UX Design zu wählen, das zum Klicken animiert und möglichst einzigartig ist. Wer dieses Dreigestirn bei der Erstellung einer Landingpage berücksichtigt, der nutzt sie effektiv zu seinem Vorteil und hebelt Conversions.

Du brauchst Hilfe beim Aufbau einer konvertierenden Landingpage? Als erfahrene Content Creation Agentur sind wir auch auf die UX und den inhaltlichen Aufbau von Landingpages spezialisiert. Wir haben nicht nur zahlreiche ansprechende Landingpages für Kund:innen aus dem B2B und B2C erstellt, sondern auch mit aussagekräftigen Inhalten gefüllt und damit effektiv Conversions gehebelt!

• About
• Letzte Beiträge

Sebastian Aumüller

Sebastian ist Inbound Marketing Manager bei suxeedo. Er kümmert sich u. a. um den Content auf unserer Website und findet dank seiner umfassenden Copywriting Skills die richtige Ansprache für jede Zielgruppe.

• Marketing für Banken: Strategien, die Vertrauen schaffen und überzeugen