medani-pixel
news
24
Mrz 15

Landing-Pages konzipieren. Welche Design-Elemente bringen Ihre Landing-Page auf den Punkt?

Die richtige Landingpage ist im Webdesign ein wichtiges Thema. Denn schon hier muss in wenigen Sekunden klar werden, ob der Besuch die Erwartungen der Besucher erfüllt oder nicht.

Einleitung

Die richtige Landingpage ist im Webdesign ein wichtiges Thema. Nicht nur bei Landingpages im engen Sinn, sprich bei Projekten, die nur oder hauptsächlich aus EINER Startseite bestehen, sondern auch im weiteren Sinn bei jeder Startseite von Webprojekten im Allgemeinen. Denn die Einstiegseite eines Webauftritts ist die wichtigste Seite, denn schon hier muss in wenigen Sekunden klar werden, ob der Besuch die Erwartungen der Besucher erfüllt oder nicht. Auch für die Suchmaschinenoptimierung ist die Landingpage die wichtigste Seite. Und so sollten schon und gerade auf der Landingpage die Ziele der Webpage auf den Punkt gebracht werden, damit diese direkt zum Firmenerfolg führen.

call-to-action-buttons

Quelle: Page eDossier 27.2014

 

Deshalb ist es günstig schon zu Beginn in der Konzeptionsphase einer Website gemeinsam mit den Kunden ausarbeiten: was ist das konkrete und erste Ziel der Webpage? Bei einem Umfragetool, kann dies etwa sein dass möglichst viele Menschen einen bestimmten Fragebogen ausfüllen. Bei anderen Unternehmen der Aufruf eines Call to Action Buttons mit einer Kontaktmaßnahme, die Registrierung in einem Online Dienst, der Anruf einer Notfallhotline, der Klick auf einen Webshop, der Kauf in einem Webshop, oder die Imagebildung durch gezielt platzierte Informationen. Die Ziele einer Landing Page können sehr divers sein und die Fähigkeit guter Beratung ist es, diese Ziele herauszuarbeiten um das Design und die Funktionalitäten erfolgreich zu positionieren.
Quelle: Page Magazin edossier Landing Pages 09/2014 Smashing magazine

Keyelemente von Landingpages

Bei der Gestaltung von Landingpages gibt es keine 100% Formel, denn jedes Unternehmen hat andere konkrete Ziele zu verfolgen, was natürlich Finetuning im Workflow voraussetzt. Gleichzeitig gibt es jedoch Schlüssel-Elemente die für viele Landing Pages sinnvoll sind, und die immer wieder verwendet werden, weil sie bestimmte Funktionen erfüllen, die bei der Userführung hilfreich und nötig sind.

Um das zu zeigen, eignen sich sehr gut zwei Grafiken aus unterschiedlichen doch eng zusammenhängenden Ecken der Weblandschaft, die beide einen ähnlichen Aufbau zeigen. Eine kommt aus einer namhaften Fachzeitschrift, dem PageMagazin, eines aus dem Blog einem bekannten Dienst der Userprofile präzisiert, kissmetrics.
Ein Blick auf beide Grafiken zeigt nämlich, dass beide Quellen sehr ähnliche Konzeptions-Elemente empfehlen.

Beide Starten etwa im oberen Bereich mit einer großen Hauptüberschrift (Key-Headline), einem emotionalen Bild (Heroshot), einer Zweitüberschrift (Subline) und einem Einleitungstext. Diese Elemente helfen dabei, durch Emotionen und prägnanten Textbausteinen auf schnellstem Weg zu verstehen, was man auf der Seite erwarten kann. Mehr dazu weiter unten.

Auch Logo und Navigation befinden sich verständlicherweise bei beiden Grafiken im obersten Bereich befinden, da sie zentrale Elemente der Vertrauensbildung und der Usability sind und oben der am besten sichtbare Ort dafür ist. Außerdem wird bei beiden Quellen die Notwendigkeit von vertrauensbildenden Elementen betont, wie sie etwa Kundenzitate und Gütesiegel sein können. Auch ein markant sichtbarer Conversion Bereich, der die User zu einer gezielten Handlung leitet darf nicht fehlen, wie ein direkt implementiertes Kontakt oder Registrierungsformular, oder ein Button mit einer Aufforderung zur Handlung (Call to Action). Mehr dazu ebenfalls weiter unten.

Perfect-Landing-Page-lrg

Quelle: kissmetrics

Zu den Elementen im Einzelnen:

Bilder
Bilder, besonders im Kopfbereich müssen aussagekräftig sein, und die Ziele der Webpage unterstützen. Personen in Aktion mit den Produkten oder Personen in passenden Stimmungen und Aktivitäten inszenieren die Produkte und Dienstleistungen, erzeugen Emotionen und helfen dabei, dass Besucher schneller verstehen, was sie durch das Angebot bekommen können. Hier ist es absolut notwendig qualitative und professionell erzeugte Bilder zu wählen, die ästhetisch und inhaltlich die Botschaft unterstreichen. Auch wenn man verständlicherweise Kosten sparen möchte und zu selbst gemachten Bildern greift, hier empfehlen wir ganz klar auf professionelle Bilder zu setzen, denn sonst kann man oft mehr Schaden als Nutzen erzeugen und den Gewünschten Fluss zur Aktion (Userflow) unterbrechen.

Textelemente & Message Match
Alle Elemente haben natürlich ihre Funktion. Eine Headline soll Interesse wecken und prägnant sein. Ein beschreibender Text zusätzlich hilft, um die Botschaft zu konkretisieren. Darin sollte der Nutzen für die User herausgearbeitet werden, so dass schnell klar wird, welcher Nutzen sich durch das Produkt oder die Dienstleistungen erfüllt.

Doch auch abseits vom prägnanten Wording gilt es mit zu berücksichtigen, welche Botschaft die Headline transportieren soll.

Message Match ist dabei ein sinnvolles Werkzeug. Denn eine noch so gut formulierte Headline kann durch ihren Inhalt User möglicherweise verwirren. Denn kommen User zum Beispiel durch einen sich gerade im Umlauf befindenden Flyer zur Website, muss das was der Flyer verspricht sofort wieder gefunden werden. Befindet sich zum Beispiel auf einem Flyer eine bestimmte Aktion, muss diese auch so sofort auf dem anderen Medium – der Webpage – auffindbar sein. Ideal ist es, wenn direkt der Wortlaut auch in der Headline der Seite wiederfindet. Von Bildern gar nicht zu sprechen, diese haben noch größeren Wiedererkennungswert und sollten deshalb ohnedies wiederholt werden. Zurück zum Wording – ein allgemeingültiger Spruch wie „wir machen das“ verhilft nicht zur Conversion, sondern eher zum Absprung, weil das Versprechen des Flyers sich nicht erfüllt und die Besucher mit Ihrem Interesse allein gelassen werden.

Leistungen vs. Vorteile
Auf vielen Seiten sind Leistungen ein Thema, denn diese verraten interessierten Besuchern schon auf der Startseite, was Sie von dem Unternehmen erwarten können. Außerdem versorgen Sie Google und Co mit den notwendigen Schlagworten, um in Suchmaschinen gut gerankt werden zu können.

Wie die Leistungen in die Landing Page implementiert werden sollen – hier gibt es mehrere Ansätze. Zum einen ist ein Portfolio das die Leistungen zusammenfasst sinnvoll, wenn es kurz gehalten ist und aus einer verständlichen Überschrift pro Leistung besteht und einem kurzen Erklärungstext, da so ein Überblick über das vorhandene Angebot gegeben werden kann, und die wichtigsten Begriffe für SEO auf die Seite gebracht werden können. Gleichzeitig ist es aus User Sicht noch sinnvoller Lösungen für die Problemstellungen oder Interessensgebiete von Usern direkt anzusprechen als die Leistungen inhaltlich aufzuzählen. Denn User wollen oft keine Produktpaletten lesen, sondern Lösungen für Ihre Probleme erhalten. Ein kurzes Listing mit den wichtigsten Vorteilen des Produktes oder des Dienstleisters mit dem Inhalt „das können Sie erwarten“ ist hier oft effektiver, weil es die Besucher persönlicher und schneller abholt als generell formulierte Angebote. Less ist sozusagen more. Dass hier ebenso wichtige Schlagworte für SEO enthalten sein sollten erklärt sich von selbst.

Call to Action
Wenn man als User auf eine Seite kommt, möchte man sofort wissen, was kann man hier tun? Um einen Überblick über die Inhalte zu bekommen, gibt es natürlich das Menü, das verständlich konzipiert werden sollte. Gleichzeitig gibt es für einzelne Ziele, Aktionen, Lösungswege und Themen sogenannte Call to Action Buttons. Um die Bedeutung dieses stark verwendeten Begriffs hier zu verdeutlichen hilft folgendes Zitat aus dem WebMagazin Smashing-Magazine:

„The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. „Buy this now!“) or lead to a web page with additional information (e.g. „Learn more…“) that asks the user to take action.“

Call to Action Buttons werden also verwendet um User direkt zu gewünschten Inhalten zu führen wo gewünschte Aktionen ausgeführt werden können. Diese Buttons sind sehr wichtig, da sie effektiv und zielführend zu den gewünschten Zielen führen, ohne dass lange Wege über die Menüstruktur zurückgelegt werden müssen, sondern schnell und direkt.

Damit User diese Buttons finden können, diese interessant und nützlich finden und diese auch verwenden, gibt es nützliche Tipps zur Konzeption, zur Gestaltung und zur Platzierung.

– Call to Action Buttons sollten immer in begünstigten Areas des Screens gezeigt werden die gut sichtbar sind. Wenn Call to Action Buttons im oberen Bereich von Webpages platziert werden, ist die Chance umso grösser, dass sie gesehen werden (Hraby). Auch kann man sie in fixen Ebenen über die Seite legen, die immer am gleichen Ort sichtbar bleiben, während die anderen Elemente sich beim Scrollen bewegen, bleiben diese Elemente fix im Bild. Auf einer Sidebar etwa mit fixierten Inhalten (Wiener Tafel). Der Vorteil von beiden Varianten ist es, das man sich merkt, wo der Aufruf war, weil er sich immer am gleichen Ort befindet, auch auf unbekannten Seiten.

  • Günstig ist auch, den Usern per Wording zu erklären, dass es einfach ist, und oder kostenlos die gewünschte Aktion auszuführen. Beispiel: „in 60seconds signup and free for 30days“
  • Call to Action Buttons müssen atmen damit sie wirken können und gesehen werden. Sprich es sollte immer genug Weiß raum um einen Button herum sein.
  • Buttons sollten kontrastreich sein, entweder durch die Farbe oder die Textur (komplex vs. simpel)
  • sich zwischen mehreren Optionen entscheiden zu können überzeugt und wirkt nicht aufs Auge gedrückt. So können Secondary actions neben primary actions überzeugen, wenn diese alternative Möglichkeiten bieten. Take a tour neben sign up zum Beispiel, kann helfen, dass sich die Besucher vor der Entscheidung einfach informieren können. Primary Actions sollten der Hierarchie halber immer deutlicher designt sein, als Secondary Actions und sich durch Größe oder Farbe abheben.
  • hilfreich kann auch sein die Einmaligkeit des Angebotes im Call to Action Button zu unterstreichen. Z.b. „Bis 31.12. testen“ oder „solange der Vorrat reicht“
  • sehr unterstützend für die Zielsetzung ist auch den Button mit dem Nutzen zu verbinden, und dem Besucher klar zu machen, welchen Nutzen er davon hat, die angebotene Aktion auszuführen. Z.b. „send beautiful fotos in only 45 seconds.“ Oder „And know the details about xy.“

Vertrauensbildende Maßnahmen
Ein gut designtes und gut platziertes Logo ist nach wie vor das wichtigste vertrauensbildende Medium. Denn es zeigt, dass es sich um ein seriöses Unternehmen handelt. Gleich danach folgt ein gutes und professionelles Design. Zusätzlich tragen aber auch weitere Elemente wie auch Kundenzitate stark dazu bei, dass dem Unternehmen das notwendige Vertrauen geschenkt wird. Denn in vielen Fällen ist ein Zitat einer vertrauenswürdigen Firma der letzte Impuls, der zur Entscheidungshilfe beiträgt. Gerade wenn es um Vertrauen geht und die Frage – „Können die das?“ helfen Testimonials diese Werte zu bestärken.

Auch ist es natürlich günstig Zertifizierungsmaßnahmen zu setzen und diese auch auf der Landingpage in Form von Gütesiegel sichtbar zu machen. Gütesiegel unterstreichen erneut die Seriosität, die Qualität und den Einsatz eines Unternehmens und schaffen Vertrauen.

SENDEN
SENDEN