Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
Tara Hornor 26. Dezember 2016

Landing Pages: Beachte diese 6 Best Practices

Online-Anzeigen sind ein fester Bestandteil einer jeden Online-Marketing-Kampagne. Allerdings sollte eine Anzeige nicht einfach auf die Homepage deiner Website führen, da Besucher sonst unsicher sind, was als nächstes zu tun ist. Ein unsicherer Kunde kauft aber nicht. Deshalb ist es nützlich, einige der Best Practices für die Erstellung von Landing Pages zu kennen.

Eine Landing Page, zu deutsch: Einstiegsseite, führt einen Interessenten von der Werbung zum nächsten Schritt, mithilfe des Call-to-Action. Aber nicht alle Landing Pages sind gleich. Als Designer ist es deine Aufgabe, dafür zu sorgen, dass die Landing Page die Besucher reibungslos durch die nötigen Schritte vom Anklicken der Anzeige bis zum Abschluss führt. Dieser Abschluss kann alles mögliche sein. Es hängt davon ab, was du mit der Kampagne erreichen willst. Das könnte zum Beispiel das Abonnieren eines E-Mail-Newsletters, die Erstellung eines neuen Accounts, oder der Kauf eines reduzierten Angebotes auf der Seite sein.

Dein Design muss demnach das Angebot, die Vorteile und den Call-to-Action klar machen. Das Design sollte außerdem Vertrauen erwecken und es dem Besucher leicht machen, den nächsten Schritt zu gehen.

Der folgende Beitrag richtet sich einerseits an Neulinge auf dem Gebiet des Landing-Page-Designs und andererseits an jene, denen bislang der große Erfolg auf diesem Gebiet verwehrt blieb. Unsere sechs 6 Best Practices und Landing-Page-Inspirationen werden dir helfen, zu erkennen wo deine Designs verbesserungbedürftig sind.

Halte die Landing Page kurz und knapp

Wie oben erwähnt, ist es der Sinn einer Landing Page, eine bestimmte Zielsetzung zu unterstützen und Besucher zu den Aktionen zu führen, die sie ausführen sollen. Daher sollte die Landing Page erkennbar die Fortsetzung der Werbung sein, durch deren Anklicken deine Besucher auf ihr gelandet sind. So wissen sie, dass sie an der richtigen Adresse sind.

Besucher wollen natürlich keinen Roman lesen, um zum nächsten Schritt zu gelangen, also fass dich kurz und komm auf den Punkt. Der Titel sollte der Teil sein, der dieselben Wörter nutzt, die die Besucher auf die Seite geführt haben. Du solltest auch den Wert des Angebotes und inwiefern es ihnen zugute kommt erwähnen. Aber am wichtigsten ist es, einen unübersehbaren Call-to-Action zu platzieren, der dem Besucher klar und deutlich vermittelt, was als nächstes zu tun ist.

Vermeide lange Texblöcke, nutze stattdessen Zwischenüberschriften, Stichpunkte und Design-Strategien wie fett gesetzten Text, oder auffällige Farben, um das Auge auf die wichtigen Abschnitte zu ziehen.

Googles Landing Page zu ihrer Anzeige für Adwords ist simpel und führt den Besucher deutlich zum nächsten Schritt – die Eingabe einer E-Mail-Adresse, um einen Angebotscode zu erhalten. Desweiteren nutzt die Anzeige dieselben Wörter, wie der Titel der Landing Page.

Genau wie die Google-Anzeige verwendet auch die Verizon-Anzeige, die zu dieser Landing Page führt, dieselben Worte in der Überschrift: „$150 bill credit“. Hier wird im Anschluss Verizons Slogan und eine kurze Erklärung, wie das Angebot funktioniert gegeben. Es gibt zwei Call-to-Action Buttons, was manchmal, wie in diesem Beispiel, nötig ist, aber jeder Call-to-Action ist auf die zwei Typen von Besuchern, die die Anzeige anklicken würden, zugeschnitten.

Die Anzeige, die auf diese Landing Page von BigStock führt, erwähnt Video-Projekte. Also werden sich Besucher, die auf dieser Seite landen, ganz und gar nicht verloren fühlen. Der Inhalt ist klar, kurz und auf den Punkt. Besser noch, es gibt sogar eine Fortschrittsleiste am Boden, so dass Besucher wissen, wie viele Schritte noch zu machen sind und wie weit fortgeschritten sie in jedem Schritt des Prozesses sind.

Konzentriere Dich auf Deine Botschaft

So wie das Design deiner Landing Page mit dem der Werbeanzeige übereinstimmt, so sollte auch der Rest des Inhalts eine gemeinsame Botschaft vermitteln. Das heißt, dass jeder Bestandteil des Designs den Besucher direkt zum nächsten Schritt führt: dem Call-to-Action, dem Handlungsaufruf.

Ohne Kongruenz könnten deine Besucher unterwegs ihr Interesse verlieren, oder abgelenkt werden, was die Konversionsrate deutlich beeinflussen würde. Stelle sicher, dass alle Inhalte sich auf eine Botschaft konzentrieren, um die Nutzer mit Leichtigkeit durch die Schritte zu führen.

Diese Landing Page für das Pittsburgh Kunstinstitut hat eine sehr klare Aussage, die wenig Erklärung bedarf. Außerdem macht die Seite den Call-to-Action durch einen beweglichen roten Pfeil, der auf den ersten Schritt zeigt, sehr deutlich.

Sowohl die Anzeige, die zu dieser Seite geführt hat, als auch die Seite selbst, haben ein Ziel: trete NRA bei, um eine Reisetasche zu erhalten. Klugerweise enthält die Landing Page das gesamte Formular, so dass Besucher schnell alle Schritte sehen können und wissen, wie schnell der Prozess ist.

Vielleicht hast du bereits erkannt, dass einige Landing Pages richtige Seiten einer Website sind. Es wird manchmal behauptet, dass es verwirrend für Besucher sein könnte, die womöglich das Navigationsmenü anklicken und abgelenkt werden könnten. Discover zeigt hier wie es geht und leitet alle Leser direkt zum Call-to-Action, weil jedes Bild und jeder Text auf der Seite den Leser zum wichtigsten und deutlich erkennbaren Call-to-Action-Button führt.

Verwende ein klares, unmissverständliches Design

Klares Design bedeutet, dass jeder Aspekt dabei hilft, die Botschaft deiner Landing Page zu unterstützen. Wenn deine Information kurz und knapp ist, wie oben beschrieben, dann ist es leicht, ein klares Design zu erstellen. Nutze viel Leerraum, da zu viel Wirrwarr die Aussagen eher verstecken, nicht verstärken.

Vergiss auch nicht, dass zu viele Bilder die Ladezeit der Landing Page verlängern. Also schränke den Gebrauch von grafischen Elementen ein und stelle sicher, dass du nur jene mit einbeziehst, die deine Aussage unterstützen. Bedenke, dass jeder Teil des Designs den Besucher zum nächsten Schritt führen soll.

In diesem Beispiel zieht das einzelne, die volle Bildschirmbreite nutzende, Foto die Aufmerksamkeit direkt auf sich. Der Designer hat die Frage in großer Schrift auf das Bild gesetzt, zusammen mit der ersten Frage des Formulars und Anleitungen, die den Besuchern sagen, wie leicht es ist die Antwort zu finden.

Diese Landing Page für Hootsuite ist extrem stromlinienförmig. Sie beginnt mit der Kopfzeile, einem Subheader, Stichpunkten, um die Vorteile zu erklären und, abschließend, einem prominenten Button für den Call-to-Action. Beachte auch den Text auf dem Button: „Kostenlose Anmeldung“. Einen weiteren Vorteil direkt auf dem Button zu platzieren, spart Platz und hilft, den Besucher zu überzeugen.

Baue Vertrauen auf

Sowohl große als auch kleine Firmen müssen Vertrauen erwecken, um Besucher zu gewinnen. Alle Landing Pages sollten das Marken- oder Firmenlogo beinhalten. Große, bekannte Firmen brauchen womöglich nicht mehr als ein Logo und vielleicht eine Garantie für das spezifische Angebot.

Kleinere Firmen müssen deutlich mehr Aufwand treiben, um ihre Vertrauenswürdigkeit zu beweisen. Neben dem Logo, Referenzen oder sogar Testimonials, sollten für den E-Commerce auch einige der gängigen Trust-Siegel erworben werden.

Auf diesem Landing-Page-Design befinden sich die Trust-Siegel direkt unter dem Call-to-Action Button, um sicherzugehen, dass Besucher nicht aufgrund von Zweifeln zögern werden. Zudem wird prominent darauf hingewiesen, dass es das Unternehmen schon etliche Jahre am Markt gibt. Auch das schafft Vertrauen.

NPR braucht seine Vertrauenswürdigkeit nicht mehr zu beweisen, da es sich als Nachrichtenquelle bereits etabliert hat. Trotzdem platzieren sie ihr Logo und die Social-Media-Buttons in die Kopfzeile. Außerdem arbeiten alle Elemente auf exzellente Weise zusammen. Die Vollbildschirm-Ansicht demonstriert, wie „persönlich“ die öffentliche Radio-App ist. Die Call-to-Action-Buttons setzen sich recht deutlich vom Bild ab und lassen die Besucher den richtigen Download für ihr Smartphone wählen.

Nutze das richtige Farbschema

Wie bei jedem Design-Projekt ist es ein Muss, ein Farbschema zu nutzen, das Hand in Hand mit der Botschaft geht. Wie bei jedem anderen Web-Design, sollten Landing Pages Farben nutzen, die das Auge von den unwichtigsten zu den wichtigsten Elementen der Seite führen.

Starke Kontraste in deinem Farbschema helfen dir, wichtige Informationen hervorzuheben. Wenn zum Beispiel der Rest deines Schemas Pastellfarben nutzt, denk mal darüber nach, den Call-to-Action in einer kräftigen Farbe zu setzen.

Ein bildschirmfüllendes Bild belebt die Landing Page. Dieses hier gibt Bench einen persönlichen, menschlichen Touch durch die Verwendung des Bildes eines Buchhalters. Das helle Orange setzt sich gut vom Hintergrund-Foto ab und lenkt die Besucher zum nächsten Schritt.

Formulare heben sich gut von Hintergrundbildern ab, wenn sie in einer Box platziert sind, wie auf dieser Landing Page. Während der „Search“-Button durch seine Farbe heraussticht, gehen die blauen Anleitungsboxen durch den blauen Himmel im Foto etwas unter. Eine bessere Farbwahl wäre entweder ein Wechsel des Hintergrundbildes, oder grüne Anleitungsboxen und ein Call-to-Action Button in kräftigem Orange.

Perfektioniere das Layout

Organisiere die Informationen so, dass das Auge des Lesers von den weniger wichtigen, zu den wichtigsten Informationen fließt. Platziere die Kopfzeile, sämtliche Formulare, Call-to-Action-Buttons und sogar den Teil des Textes, der den Wert des Angebotes erklärt, soweit oben wie möglich. Hintergrundinfos und vertrauensbildende Maßnahmen, wie Trust-Siegel, kannst du ans Ende der Seite setzen.

Landing Pages müssen sich auch nicht zwingend von oben nach unten lesen lassen. Deine sieht vielleicht besser aus, wenn du das Formular und den Call-to-Action-Button in der linken Spalte und das Angebot in der rechten platzierst, oder umgekehrt.

Diese Landing Page beinhaltet jede Menge Bilder, um zu demonstrieren, wie das Drag-and-Drop-Frontend-Entwicklungs-Tool funktioniert. Dabei finden sich Titel und Call-to-Action klugerweise auf der linken Seite des Hauptbildes. Direkt darunter befinden sich die Vorteile, präsentiert in einem klaren Raster-Layout.

Das hier ist ebenfalls ein ansprechendes Landing-Page-Design mit sehr gutem Layout. Das Logo und die Kopfzeile sind oben. Das Formular ist klar sichtbar, direkt neben dem zugehörigen Foto. Während die Wörter auf dem Bild etwas schwer zu lesen sind, werden die Vorteile unten mit sympathischen Icons und Text in einem Raster wiederholt.

Hast du eine Landing Page erschaffen, die deinem Kunden hohe Konversionsraten eingebracht hat? Oder hat es überhaupt nicht funktioniert? Teile deine Erfahrungen nebst Tipps für die Erstellung von Landing Pages unten in den Kommentaren.

Tara Hornor

Tara Hornor schreibt vornehmlich über Marketing, Werbung und Markengestaltung, aber auch über Web- und Grafikdesign, sowie Fotografie. Gemeinsam mit ihrem Ehemann betreibt sie die Creative Content Experts, eine kreative Textagentur in den Vereinigten Staaten. Folgen Sie @TaraHornor auf Twitter, wo sie einen steten Fluss an Informationen von sich gibt...

2 Kommentare

  1. Perfekter Bericht Tara.
    Habe gute Ansätze bzw. Ideen für meinen Blog entdeckt. Werde einiges verändert in Kürze. Gut wäre noch ein Splitttest zwischen 2 bis 3 Landingpages einzubauen! Wie könnte man das umsetzen? Ist nur eine Idee.
    Habe nun viel zu tun für meine Blogstruktur.
    Wünsche dir einen guten Rutsch ins neue Jahr und eine
    #GESUNDHEIT auf einem stabilen #FUNDAMENT für Dein
    #Gesundes-Langes-Leben

  2. Artikel zum Thema Landing Page ist super geworden.
    Danke

Schreibe einen Kommentar

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