In diesem Artikel schauen wir uns gezielt den Aufbau und die Optimierung einer Landingpage an. Dabei legen wir den kompletten Fokus auf die Elemente, die unabdingbar für die Zielerreichung (Conversions) sind. Elemente wie den Footer blenden wir dafür gezielt aus. Auch das Menü lassen wir außen vor, da eine Conversion-optimierte Landingpage häufig auf ein Menü verzichten sollte.
Anatomie: Aufbau einer Landingpage
Landingpages bestehen aus unterschiedlichen Elementen. Beim Aufbau einer Landingpage werden diese Elemente fokussiert zur Erreichung definierter Ziele eingesetzt. Dazu nutzen wir hier eine Analogie aus der Biologie: die Anatomie der Landingpage.
In einem menschlichen Körper hat jedes Organ eine Funktion. Diesen Grundgedanken gilt es auch bei Landingpages zu verfolgen. Jedes Element muss eine Funktion haben, die dem Ziel der Landingpage dient. Frage dich also immer: Welche Funktion hat das Element? Warum sollte es auf diese Landingpage?
Jede Landingpage hat mindestens vier zentrale Elemente, die eine wesentliche Bedeutung für die Conversion haben:
1. Headline + Subline = Teaser
Headline und Subline bilden den verbalen Teaser und befinden sich immer im oberen, sichtbaren Bereich (above the fold). Der Teaser klärt zwei wesentliche Fragen und kämpft somit um die volle Aufmerksamkeit des Besuchers:
Was wird angeboten?
Was habe ich davon?
In diesem Teaser sollte auch die Unique Selling Proposition (USP) kommuniziert werden. Der Teaser – wie auch der gesamte Text deiner Landingpage – muss kurz, knapp und motivierend geschrieben sein. Dabei ist es natürlich wichtig, im Ton der Marke zu bleiben und damit deine Zielgruppe abzuholen.
Vergiss bitte niemals: Du kommunizierst mit Menschen - nicht mit Suchmaschinen oder Algorithmen. Es sind Menschen, die eure Landingpages besuchen. Es sind Menschen, die eure Inhalte überzeugen sollen. Der Text muss verständlich sein und Vertrauen aufbauen, damit eine Kaufentscheidung möglich wird.
2. Hero Bild / Keyvisual als Eyecatcher
Das Hero Bild ist das wichtigste visuelle Element deiner Landingpage. Es hat die Funktion, dein Angebot zu zeigen oder deine Zielgruppe visuell abzuholen. Der Hero (Video, GIF oder Bild) sollte eine Symbiose mit der Headline und Subline bilden.
Nutze bestenfalls keine Bilder aus Stock-Datenbanken oder simple Produktfotos der Hersteller! Solches Bildmaterial ist austauschbar, eintönig und hat keinen Wiedererkennungswert. Stell dir vor, eure Konkurrenz nutzt zufällig das gleiche Bild.
Im Idealfall solltest du eigene Bilder der Produkte oder Bundles verwenden, die nur auf euren Landingpages genutzt werden. Das kann allerdings je nach Umfang der Bilder eine große Investition bedeuten. Sie rechnet sich aber im Zeitverlauf.
Mithilfe von AI Tools wie Adobe Firefly oder Dall-E lassen sich außerdem schon beeindruckende Bilder oder Hintergründe von künstlicher Intelligenz erzeugen. Mit einer professionellen Bildbearbeitung kannst du so ganz eigene visuelle Welten kreieren. Stelle dabei aber immer sicher, dass du rechtlich einwandfrei agierst.
3. Call to Action: die Handlungsaufforderung
Ein weiteres zentrales Element im Aufbau einer jeden Landingpage ist die Handlungsaufforderung: Was soll der Nutzer tun? Der sogenannte Call to Action sorgt für die Conversion. So wird aus dem Besucher der Landingpage letztendlich ein zahlender Kunde. Klassiker sind sicherlich “Jetzt kaufen”, “Mehr entdecken” oder “Mehr erfahren”.
Wichtig: Jede Landingpage sollte immer nur eine Art von Call to Action haben. Das entspricht einem Conversion-Ziel. Versuche nicht, zu verkaufen und gleichzeitig noch deinen Newsletter zu pushen. Das verwirrt nur und führt eher dazu, dass User keine der beiden Aktionen machen.
Der Call to Action kann je nach Länge der Landingpage auch mehrmals auf einer Landingpage in regulären Abständen platziert werden. Aber er sollte wie gesagt immer das gleiche Ziel kommunizieren.
Tipp: Teste, welche CTAs am besten funktionieren. Neben dem Text kannst du auch Farben, Größen uvm. ausprobieren. So kommst du Schritt für Schritt durch gezielte Landingpage Optimierung zu mehr Conversions.
4. Social Proof durch Testimonials oder Bewertungen
E-Commerce ist ohne den Begriff „social“ heute kaum mehr vorstellbar. Ähnlich dem klassischen Empfehlungsmarketing wird über bekannte Werbeikonen, sogenannte Testimonials, das Vertrauen in eine Marke oder ein Produkt gestärkt.
Auch Testergebnisse (TÜV, Stiftung Warentest o.ä.), Kundenbewertungen sowie Case Studies im B2B E-Commerce sind tolle Mittel, um den Social Proof zu kommunizieren. Diese Bewertungen einzusammeln kann mühsam und zeitintensiv sein. Aber es lohnt sich langfristig!
Gerade bei Kampagnen-Landingpages ist der Social Proof sehr wichtig, weil es nur einen begrenzten (Zeit-)Raum für die Präsentation der Benefits gibt. Die Aufmerksamkeit der Besucher hast du in der Regel nur für wenige Sekunden. Wenn du hier nicht überzeugst, springt der User ab.
5. Interaktive Elemente als Eyecatcher
Menschen sollen auf der Landingpage eine Aktion durchführen. Im E-Commerce ist das meistens ein Kauf. Füge also interaktive Elemente wie Produktlisten, Karussells, Produktfinder, Videos, GIFs etc. hinzu, um die Entscheidung zu unterstützen.
Natürlich gibt es unzählige weitere Elemente, die auf einer Landingpage im E-Commerce Sinn ergeben. Aber denk immer daran: Weniger ist mehr. Teste ausgiebig, was funktioniert und versuche immer die besten Inhalte für die Nutzer zu identifizieren. Dann klappt es auch mit den Conversions!
Aufbau der Landingpage testen
Diese Elemente sind zentraler Bestandteil von allen Landingpages und müssen immer in Einklang gebracht werden. Im Zusammenspiel ermöglichen sie, das strategische Ziel der Landingpage zu erreichen.
Achte darauf, dass die wichtigsten Informationen direkt im sichtbaren Bereich der Landingpage platziert werden. So muss der Nutzer nicht erst scrollen, um alles Wichtige zu verstehen. Diesen Bereich nennt man Above the fold. Above the fold müssen bis auf den Social Proof alle oben genannten Elemente platziert werden.
Extra-Tipp: Versuche bei der Konzeption der Landingpage, zuerst den mobilen Viewport mit den zentralen Elementen anzugehen. Denn im E-Commerce kommt der Großteil der Nutzer über Mobilgeräte, auf denen deutlich weniger Platz zur Verfügung steht. Mobile-first ist die Devise!
Von der Anatomie zum inhaltlichen Fundamt
Soweit zur Anatomie der Landingpage. Jetzt wissen wir, auf welche Elemente es beim Aufbau einer Landingpage ankommt. Die inhaltliche und strategische Ausarbeitung dieser ist essentiell für eine optimale Conversion der Besucher.
Content: der Inhalt der Landingpage entscheidet
Wir wissen nun, dass wir mit den überschaubaren Elementen und dem zielgerichteten Inhalt rasch zum Punkt kommen müssen, damit der Besucher deinem Call to Action folgt. So wie die gesamte Anatomie auf die Conversion ausgerichtet wird, so wird das auch mit dem Inhalt geschehen.
Ohne Worte und überzeugende bzw. begeisternde Bilder oder Grafiken wird unsere Landingpage keinen Erfolg bringen. Wir brauchen also einen kreativen Rahmen, bevor wir uns im nächsten Schritt der Gestaltung und Umsetzung widmen können.
Mobile-First Content
Ein Großteil der User nutzt euren Shop oder die dazugehörige App auf dem Smartphone. Somit muss der Inhalt logischerweise in erster Linie für kleine Bildschirme optimiert sein.
Fangen wir also mit dem Inhalt und der dahinterstehenden Konzept an. Das beinhaltet die Planung, Erstellung, Publikation und Verwaltung von Inhalten. Unsere Inhalte für die Landingpage müssen den Benutzer fesseln und überzeugen.
Sprich die User direkt an. Verwende keine passive, distanzierte Sprache - es sei denn, deine Zielgruppe kommuniziert so. Du möchtest doch, dass die User deiner Landingpage die Botschaften in Sekundenschnelle verstehen, oder?
Keine Angst vor dem leeren Blatt
Versuche zu Beginn, die für die Zielgruppe relevanten Fragen zu beantworten. Dabei können die klassischen journalistischen W-Fragen ein guter Ausgangspunkt sein:
Wer: Wer sind wir und wen sprechen wir an?
Was: Was bieten wir an? Was ist das Problem, dass wir lösen?
Wo: Wo lösen wir das Problem? Wo braucht der User unsere Produkte?
Wann: Wann greift unser Angebot? Hat das Angebot eine begrenzte Laufzeit?
Wie: Wie lösen wir das Problem? Wie differenzieren wir uns von vergleichbaren Angeboten oder Produkten?
Warum: Warum machen wir das, was wir tun? Warum hilft unser Angebot bei der Problemlösung?
Woher: Woher kommen wir? Woher kommt unser Angebot? Was steckt dahinter?
In der Kürze liegt die Würze
Dein Text kann in Form einer Kurzgeschichte aufgebaut sein oder auch in Form eines Elevator Pitches. Wichtig ist in jedem Fall, dass mit den ersten Worten (dem Teaser) eine fesselnde Neugierde bei euren Usern ausgelöst wird. Nur wenige Sekunden schenken die User ihre Aufmerksamkeit und daher musst du schnell zum Wesentlichen kommen.
Den ersten Call to Action kannst du bereits nach der Einleitung für die Besucher einbauen. Einige sind nach den einleitenden Worten so überzeugt, dass sie schon eine innerliche Kaufentscheidung getroffen haben. Gib ihnen sofort die Möglichkeit zum Kauf!
Der Text muss kurz und nicht langatmig sein. Vermeide Wiederholungen! Nimm dir den Text immer wieder vor - gerne auch an verschiedenen Tagen.Als Übung kannst du ihn auch laut vorlesen. Länger als eine Minute sollte dein Landingpage Text für E-Commerce Produkte nicht sein. Das klingt zwar nach einer sehr kurzen Zeitspanne, aber beim Vorlesen wirst du merken, wie lange eine Minute ist. Diese Aufmerksamkeit erwartest du später von euren Usern.
Hinzu kommt, dass Besucher der Landingpage nicht in den Genuss eines einfachen, beschriebenen Blattes Papier kommen. Der Text wirkt auf der Landingpage in Kombination mit einer Vielzahl an zusätzlichen gestalterischen Elementen: Bilder, Videos, Buttons, Popups, Produktlisten uvm. All das müssen seine Augen und sein Gehirn filtern.
Nutze kurze Textblöcke von maximal zwei bis drei Sätzen. Vermeide dabei Verschachtelungen in den Sätzen. Aufzählungen sind bspw.
viel besser
durch das menschliche Auge
zu scannen
und zu speichern,
als lange Absätze. Diese Methode nennt sich Chunking.
Wichtig: Achte stets auf die Rechtschreibung und die Grammatik. Du transportierst durch ein fehlerfreies Schreiben und eine richtige Zeichensetzung immer auch Qualität, Seriösität und Vertrauen beim Leser.
Anatomie und Inhalte zusammenführen
Nun haben wir den Text und gießen ihn in unsere Struktur. Dabei orientieren wir uns stets an der beschriebenen Anatomie der Landingpage.
Wir konzentrieren uns bei der optimierten Landingpage nun auf fünf Elemente. Es ist dabei völlig normal, dass man den Text im Nachgang noch mal optimieren muss.
Teaser: Als Head- und Subline platzieren wir zwei einleitende Sätze, die gezielt auf das „Warum“ und das „Wie“ abzielen und den Besucher direkt ansprechen. Gefolgt vom ersten Call to Action.
Hero Bild: Ein Keyvisual, dass zur Zielgruppe und zum Produkt passt.
Social Proof: Wir platzieren zwei bis maximal vier kurze und persönliche Testimonials oder Bewertungen von Lesern auf der Landingpage.
Finaler Call to Action: User, die bis zum Ende der Landingpage kommen, sind interessiert. Mit dem finalen Call to Action kommen sie dann zum Produkt oder weiteren Informationen.
Vorbereitung für künftige A/B-Tests
Während der Texterstellung, wird es höchstwahrscheinlich verschiedene Versionen geben. Sätze und Wörter werden ausgetauscht. Du überlegst, was wohl besser funktionieren wird.
Sammel von Beginn an alle Textfragmente und Wörter, bei denen du dir nicht sicher bist, ob A oder B besser performen würde. Diese Fragmente eignen sich häufig sehr gut als Basis für sogenannte A/B-Tests, die essentiell bei der kontinuierlichen Landingpage Optimierung sind.
Mittels eines A/B-Tests kannst du bspw. zwei unterschiedliche Sublines in Ihrem Teaser oder verschiedene Keyvisual für einen festgelegten Zeitraum gegeneinander testen. Danach kannst du prüfen, welche der beiden besser konvertiert.
