Sie benötigen erstklassige Unterstützung bei der Generierung von Kunden-Anfragen & Verkäufen? Erfolgsbasierte Bezahlung! Unverbindlich anfragen

Landing Page Design

Das Design beeinflusst maßgeblich das Besucherverhalten auf einer Website

Eine Landing Page soll Neukunden generieren, d. h. sie soll Besucher dazu bewegen, zu konvertieren. Als Conversion zählt beispielsweise, wenn ein Interessent ein Kontaktformular ausfüllt, einen Newsletter abonniert oder ein Produkt kauft. Ist der Besucher also erst einmal auf Ihrer Seite gelandet – sei es durch einen Klick auf Werbeanzeigen, Banner oder die organischen Suchergebnisse in Google & Co –, kommt es darauf an, zu verhindern, dass er wieder abspringt und die Seite ohne zu konvertieren verlässt.

Ein professionelles Landing Page Design ist in diesem Zusammenhang ein sehr wichtiger Faktor, der zur Erreichung dieses Ziels beiträgt. Dabei kommt es nicht nur auf die Optik an – die Anforderungen an ein gutes Design sind viel höher und implizieren tiefgreifende Erkenntnisse über Benutzerverhalten: Eine Landing Page verfolgt eine genau festgelegte Strategie, die bereits in der Konzeptionsphase das Design mitbestimmt.

Die richtige Farbwahl für ein Landing Page Design

Schon lange wissen wir, dass die Farbwahl maßgeblich das Kaufverhalten von Menschen beeinflusst. So ist es kein Wunder, dass beim Schaufensterbummel oftmals gelbe Auslagen, Plakate etc. unsere Aufmerksamkeit auf sich ziehen. Sie sprechen den optimistisch eingestellten Part von uns an und motivieren uns zu Spontankäufen. Im Schlussverkauf hingegen treffen wir fast ausschließlich Rot an: es signalisiert Dringlichkeit, fordert aber auch die kämpferische Seite in uns heraus: Schnell noch die letzten Schnäppchen abgreifen, bevor es ein anderer tut!

Doch diese Farbwahl ist nicht willkürlich – unzählige wissenschaftliche Tests haben ergeben, dass bestimmte Farben spezielle Bereiche im Gehirn ansprechen, die mit verschiedenen Emotionen korrespondieren: Unterschiedliche Farben lösen in uns unterschiedliche Gefühle aus. Um dies graphisch darzustellen kann man z. B. auf die Limbic® Map zurückgreifen:

Limbic® Map Farbpsychologie

Dieser Zusammenhang erklärt auch, weshalb bestimmte Menschen auf einige Farbreize stark reagieren, auf andere jedoch überhaupt nicht. Ein solches weithin bekanntes Phänomen ist die Affinität kleiner Mädchen zu Rosa und Pink. Sehen sie etwas in dieser Farbe, wollen sie es haben – im Wesentlichen unabhängig von dem eigentlichen Produkt.

Doch so wie die allermeisten Mädchen auf Rosa ansprechen, hat jeder Mensch eine Farbe, die ihm in besonderem Maße zusagt. Diese ist nachweislich von seiner vorherrschenden emotionalen Gesinnung abhängig. Man unterscheidet zu diesem Zweck zwischen drei Grundtypen: Dominanz – Stimulanz – Balance. Bei allen Menschen sind die diesen Typen zugeordneten Bereiche im Gehirn vorhanden, jedoch sind sie in jedem Individuum unterschiedlich stark ausgeprägt. So haben manche Menschen beispielsweise ein verstärktes Bedürfnis nach Sicherheit und Verlässlichkeit, andere sind eher draufgängerisch. Ist man sich im Klaren darüber, welche Emotionen das angebotene Produkt idealerweise ansprechen sollte, hilft einem die Limbic® Map u. a. bei der korrekten Farbwahl zur Vermarktung desselben.

Praktische Anwendung der Farbgestaltung gemäß Limbic® Map

Möchten Sie im Internet etwas verkaufen, dann ist das Wissen über den Zusammenhang von Farben und Emotionen im wahrsten Sinne Gold wert, denn es ermöglicht Ihrer Website die gezielte Ansprache Ihrer speziellen Bedarfsgruppe.

Wer eine Versicherung verkaufen will, spricht mit seinem Angebot eine gänzlich andere Zielgruppe an als jemand, der teure Sportwagen anbietet. Darum ist das Corporate Design von Versicherungen in der Regel blau oder türkis, denn diese Farben vermitteln Seriosität und Vertrauen, während Sportwagen-Hersteller oftmals auf die Farben Rot oder Schwarz setzen und somit die Bereiche im Gehirn ansprechen, die für Dominanz und Statusbestreben stehen. Nicht umsonst produzieren Ferrari, Lamborghini & Co beinahe ausschließlich rote und schwarze Luxuswagen.

Die farbliche Gestaltung einer Website trägt also ganz wesentlich zu ihrem Erfolg bei. Sie sollte auf die angesprochene Zielgruppe ausgerichtet sein. Zugleich darf sie jedoch nicht zu bunt werden, denn das lenkt Besucher nur unnötig ab und verringert durch den stark gestreuten Blickfokus die Orientierung und somit die Conversion Rate. Das Gesamtbild der Seite sollte harmonisch sein, zugleich müssen jedoch die wichtigen Elemente – Handlungsaufforderungen, Kundennutzen, Buttons... – genug Kontrast besitzen, um die Aufmerksamkeit des Besuchers gezielt auf sich zu ziehen.

Bilder für Landing Pages (Heroshot)

Bildelemente, insbesondere das Hauptbild ("Heroshot"), sind äußerst wichtig, denn sie lockern das Gesamtbild auf, machen das Angebot interessanter und lassen den Besucher auf den ersten Blick erkennen, in wie weit das Angebotene dem entspricht, was er sucht.

Landing Page Heroshot, Beispiel T-Shirt-Druckerei

Hierbei gelten zwei Grundregeln:

  1. Ein Bild muss sich harmonisch einfügen und darf nicht von der Handlungsaufforderung oder anderen wichtigen Elementen ablenken.
  2. Es muss einen klaren Zusammenhang zwischen Überschrift und Bild geben.

Ein Produkt-Shot beispielsweise weckt Vorfreude auf das haptische In-den-Händen-halten, wodurch die Conversion Rate signifikant angehoben werden kann. Ein unpassendes, der Überschrift widersprechendes Bild verwirrt den Interessenten hingegen und lässt ihn an der Relevanz und Seriosität des Angebots zweifeln, wodurch die Absprungrate steigt.

Bietet man statt eines physischen Produkt beipielsweise eine Dienstleistung an, kann man natürlich keinen Produkt-Shot darstellen. In diesem Fall hat man andere Möglichkeiten, den Besucher emotional anzusprechen, beispielsweise mit dem Foto eines lächelnden und zufriedenen Kunden oder der Abbildung eines kompetenten Handwerkers.

Um an professionelles Bildmaterial für ihre Website zu kommen, greifen viele Unternehmen auf Online-Bilddatenbanken zurück. Die Vorteile liegen auf der Hand: Man ist nicht gezwungen, für eine Handvoll Fotos einen professionellen Fotografen zu engagieren und spart somit Zeit und Geld. Gleichzeitig bieten diese Datenbanken eine beinahe unbegrenzte Auswahl verschiedenster Motive, u. A. auch von weit entfernten Sehenswürdigkeiten oder seltenen Naturschauspielen – interessant vor allem für Reisebüros.

Wer also nicht selbst Fotograf ist oder auf einen betriebsinternen Fotografen zurückgreifen kann bzw. seltene Motive sucht, für den sind solche Bilddatenbanken eine gute Alternative. Doch sollte man dabei eine wichtige Regel unbedingt beachten: Nur Bilder mit niedriger Downloadzahl verwenden! Viele generische Bilder aus großen Bilddatenbanken werden auf zahlreichen Websites genutzt und sind bei internetaffinen Nutzern bekannt. Das macht die Landing Page unglaubwürdig.

Schriftart, Schriftgröße und Schriftstil

Die Wahl der Schrift ist ebenfalls ein wichtiger Aspekt im Design-Prozess. Sie sollte unbedingt auf Angebot und Zielgruppe abgestimmt sein, denn verschiedene Schriftarten transportieren unterschwellig z. T. stark differierende Messages.

Schriftstile

Auch die Schriftgröße ist im Webdesign nicht unerheblich, denn eine zu kleine Schrift erschwert die Lesbarkeit und weckt hierdurch bei den Besuchern Unlust aufs Lesen. Es ist wissenschaftlich erwiesen, dass das Lesen am Bildschirm weitaus ermüdender für die Augen ist, als das Lesen gedruckter Vorlagen. Deshalb sollte man im Webdesign unbedingt eine größere Schrift wählen, als es im Printdesign nötig wäre. Zudem nimmt mit zunehmenden Alter bekanntlich das Sehvermögen ab. Wer daher die Zielgruppe 25+ ansprechen möchte, sollte nicht unter 13px gehen, bei der Gruppe 50+ sind sogar mindestens 16px empfehlenswert.

Ähnlich verhält es sich beim Farbkontrast: die Schrift muss sich deutlich vom Hintergrund absetzen, ansonsten ist sie gerade auf minderwertigen Bildschirmen mit schlechtem Kontrast kaum lesbar. Zwar sind Grautöne bei Designern äußerst beliebt, aber nutzertechnisch sind sie eher ungeeignet für die Darstellung von Text, sofern nicht ein gewisser Kontrast zwischen Hintergrund und Schrift gewährleistet ist. Nicht nur ältere Besucher bekommen Probleme, solch eine Schrift zu lesen, auch Nutzer von mobilen Endgeräten, die zudem oftmals bei schlechten Lichtverhältnissen – beispielsweise bei starker Sonneneinstrahlung – die Seiten besuchen, können derartige Texte nur schwer entziffern.

Kontrast beeinflusst die Lesbarkeit

Wichtige Schlüsselwörter sollten auf Ihrer Landing Page zudem fett hervorgehoben werden. Besucher überfliegen eine Website zunächst nur kurz, um festzustellen, ob die Inhalte für sie relevant sind – eine Technik bekannt als "Skimming". Fette Worte fokussieren sie hierbei besonders; wecken diese ihr Interesse, unterstützt dies die Entscheidung, auf der Seite zu verweilen und sich ausführlicher mit dem Inhalt auseinanderzusetzen.

Relevante Überschriften finden

Beim Skimming ziehen neben den fetten Wörtern besonders die Überschriften die Aufmerksamkeit der Nutzer auf sich. Sie sollten sich in Stil und Größe deutlich vom Fließtext absetzen. Inhaltlich sollten sie eine sehr knappe und interessante Zusammenfassung des folgenden Textes darstellen: Der Nutzer muss gleich verstehen, worum es geht und zugleich neugierig auf mehr gemacht werden. Dabei sind besonders Wortwahl und Wortstellung von Relevanz – nicht nur für 'echte' Besucher sondern auch für die Positionierung in Suchmaschinen.

Die Hauptüberschrift muss das, was im vorangegangenen Interaktionselement (z. B. eine Anzeige in AdWords, ein Newsletter oder ein organisches Suchmaschinenergebnis) kommuniziert wurde, zwingend aufgreifen. Man spricht hierbei vom sog. Message Match. Da die Hauptüberschrift den Inhalt einer Seite widerspiegelt, lassen Differenzen zwischen Überschrift und Interaktionselement den Nutzer zweifeln, auf der richtigen Seite gelandet zu sein. Dies erhöht maßgeblich die Absprungrate, weshalb im Umkehrschluss der Message Match positive Auswirkungen auf die Conversion Rate hat.

Vertrauensbildende Elemente einsetzen

Damit der Besucher einer Landing Page konvertiert, ist es essenziell, sein Vertrauen zu gewinnen. Hierzu darf selbstverständlich das eigene Logo nicht fehlen, denn er möchte natürlich wissen, mit wem er es zu tun hat. Die Frage, an welcher Position und in welcher Größe das Logo abgebildet werden soll, ist dabei nicht uninteressant: Selbstbewusstsein kann man demonstrieren, indem man sein Logo eher dezent einsetzt. Aber Vorsicht: Wer es übertreibt, riskiert, dass der Besucher das Logo schlichtweg übersieht. Mit Hilfe von A/B-Tests kann die Auswirkung von Position und Größe des Logos auf die Conversion Rate festgemacht werden. Die so erhaltenen Ergebnisse fließen dann im Rahmen der Landing Page Optimierung in ein verbessertes Design mit ein.

Zudem ist es für den Erfolg einer Seite von Vorteil, weitere vertrauensbildende Elemente (TÜV-Siegel, Kundenbewertungen, Logos von Kooperationspartnern etc.) einzubauen – aber natürlich nur, wenn sie der Wahrheit entsprechen und vor allem glaubwürdig sind. Unglaubwürdige Kundenbewertungen oder schlecht leserliche Siegel wecken eher Misstrauen und lassen den Besucher einen Betrugsversuch vermuten.

Button Design ("Call-to-Action"-Button)

Damit ein Button funktionieren kann, darf er nicht wie eine simple farbige Fläche aussehen, sondern muss klickbar wirken. Dezente Farbverläufe und Schatten lassen einen Button plastisch erscheinen. Beim Hinüberfahren mit der Maus sollte sich die Farbe leicht ändern – dies unterstreicht den interaktiven Charakter dieses Elements.

Um die Wichtigkeit des Haupt-Buttons hervorzuheben und die Aufmerksamkeit nicht von ihm abzulenken, sollte seine Farbe in keinem anderen Element der Seite verwendet werden.

Call-to-Action Button Farbe

Responsive Webdesign

Vereinfacht gesagt bedeutet Responsive Webdesign, dass sich das Design einer Website – genauer gesagt die Anordnung der einzelnen Elemente – der Breite des Browsers anpasst, mit welchem sie betrachtet wird. Dies ist heutzutage beinahe unabdingbar, denn immer mehr User sind mit mobilen Endgeräten im World Wide Web unterwegs.

Damit die Übersichtlichkeit und Navigierbarkeit einer Seite auf wenigen Zentimeter breiten Handydisplays ebenso gewährleistet werden kann wie auf einem 28" Desktop-Computer, erstellen wir unsere Seiten ausschließlich mithilfe dieser Technik.

Responsive Webdesign für verschiedene Endgeräte

Optimierung des Designs

Hat man all die vorangehenden Aspekte bei der Konzeption und Umsetzung eines Landing Page Designs beachtet, so ist man bereits Besitzer einer sehr guten Landing Page. Doch das heißt nicht, dass es nicht auch noch besser geht. Darum sollte eine kontinuierliche Optimierung zum Pflichtprogramm gehören.

Bei ConversionLift setzen wir dies in die Tat um: Wir überprüfen in sogenannten A/B-Tests oder multivariaten Tests jeden Monat die Auswirkungen von Variationen einzelner Landing Page Elemente auf die Conversion Rate. Außerdem bieten wir noch zahlreiche andere Tools wie prädiktives Eyetracking oder Nutzertests an, mit denen wir Ihre Seite optimieren können. So verbessern wir die von uns erstellten Seiten stetig und gewährleisten eine fortlaufende Conversion Optimierung.


Sprechen Sie uns gerne an und lassen Sie uns über ein für Sie passendes Landing Page Design reden:

Kontakt-Anfrage

Menü anzeigen