Wie erstellt man eine Landingpage? Teil II – Design-Tricks

In diesem Artikel stellen wir verschiedene Tricks und Regeln zum Aufbau einer Landing Page vor, die sie für deine Nutzer zugänglicher macht. Schließlich braucht ein Geschäftsmann den richtigen Anzug, eine Frau das perfekte Kleid, und die Landing Page braucht das richtige Design sowie gut platzierte Inhalte.

Wenn du nicht weißt, wie du eine Landing Page von Grund auf erstellst, lies unseren Artikel „Wie erstellt man eine Landing Page? Teil I“, in dem wir den gesamten Prozess ausführlich beschreiben.

Beachte, dass das Designen einer eigenen Website – anders als das Lesen dieses Artikels – ein zeitaufwändiger Prozess ist. Lass dich jedoch nicht entmutigen. Wenn du deine Website selbst gestaltest, kannst du bis zu 5.000 $ sparen. Also, fangen wir an?

Trick 1 – Vier Kraftpunkte

Vielleicht hast du beim Fotografieren schon einmal das „Raster“ auf dem Bildschirm gesehen? Das hängt mit der „Drittelregel“ zusammen, die auch im Webdesign Anwendung findet. Nach dieser Regel wird die Seite visuell in drei Teile geteilt und besteht aus 9 identischen Quadraten.

Die Punkte im Zentrum der vier Schnittpunkte der Linien sind genau die „Kraftpunkte“. Alles, was sich innerhalb dieser Grenzen befindet, wird vom menschlichen Auge zuerst wahrgenommen. Versuche beim Erstellen einer Landing Page, die wichtigsten Elemente an diesen Schnittpunkten zu platzieren.

Trick 2 – Hick’sches Gesetz

Ein weiterer Trick, der nützlich sein kann, stammt von William Edmund Hick, einem britischen Psychologen. Er stellte fest, dass die Zeit, die für eine Entscheidung benötigt wird, mit der Anzahl der Auswahlmöglichkeiten steigt. Das bedeutet: Je mehr Optionen wir zur Auswahl haben, desto mehr Zeit benötigen wir für eine Entscheidung.

In Studien fanden Mark Lepper und Sheen Iyengar heraus, dass ein Tisch mit 24 Marmeladensorten weniger attraktiv ist als einer mit 6 Sorten. Wenn eine Person zu viel Auswahl hatte, sank die Kaufwahrscheinlichkeit um das Zehnfache. Wie nutzt du das beim Erstellen einer Landing Page? Begrenze die Anzahl der CTAs und Buttons und konzentriere dich auf ein Ziel. Überlege, welche Entscheidungen der Nutzer auf der Seite treffen kann, und reduziere diese so weit wie möglich.

Trick 3 – Das „F“-Modell

Viele Studien zeigen, dass das menschliche Auge beim Betrachten eines Textes einem bestimmten Muster folgt. Zuerst schauen wir von links nach rechts, dann bewegen wir uns nach unten, und dem unteren rechten Bereich schenken wir am wenigsten Aufmerksamkeit – wir überfliegen ihn nur.

Wenn du es dem Nutzer erleichtern möchtest, Informationen aufzunehmen und die Conversion zu verbessern, platziere die wichtigsten Elemente entlang des Buchstabens F und alles weniger Wichtige außerhalb davon. Praktische Kontaktmöglichkeiten sollten an einer auffälligen Stelle stehen: soziale Netzwerke, Telefon usw.

Trick 4 – Die 8-Sekunden-Regel

Du hast nur 8 Sekunden Zeit, um das Interesse des Nutzers zu wecken (laut neuesten Studien sogar noch weniger). Leider ist das die Fähigkeit eines Menschen, sich auf eine Sache zu konzentrieren. Wie schaffst du es also, die Aufmerksamkeit des Nutzers in 8 Sekunden zu gewinnen?

• Mache die Überschrift einprägsam und interessant; sie sollte schnell und prägnant die Vorteile des Produkts/der Seite vermitteln und auf die Probleme eingehen, mit denen der Kunde zu kämpfen hat.
• Unterstütze deine Botschaft mit auffälligen Bildern, die den Hauptzweck des Produkts vermitteln.
• Setze einen sichtbaren und kurzen CTA-Button ein.

Trick 5 – Das Gesetz der Ähnlichkeit

Menschen nehmen die gesamte Struktur anders wahr als ihre einzelnen Elemente. Wir mögen es, wenn Objekte, die sich ähneln, nahe beieinander, aber in separaten Gruppen sind.

Nutze diese Regel. Angenommen, dein Produkt hat großartige Bewertungen. Nutze dies und platziere die Anwendung oder ein Formular direkt neben den Referenzen.

Trick 6 – Social Proof

Social Proof sind verschiedene Zertifikate und Auszeichnungen. Eine Studie von Data Insight und AliExpress zeigte, dass 9 von 10 Käufen nach dem Lesen von Bewertungen abgeschlossen werden. Wie nutzt du das beim Erstellen einer Website? Füge Kundenbewertungen auf deiner Website hinzu.

Trick 7 – Above the fold

Schon davon gehört? Falls nicht, erklären wir es kurz. „Above the fold“ ist der Teil der Website, der sichtbar ist, ohne scrollen zu müssen.

Es wird dich vermutlich nicht überraschen, dass Menschen jedes Jahr immer weniger lesen. Meistens scannen wir einen Artikel nur mit den Augen. Die Nielsen Norman Group Research hat bewiesen, dass Inhalte, die above the fold platziert sind, von Nutzern um 84 % besser aufgenommen werden als Inhalte darunter.

Warum? Die Antwort ist einfach – das Betrachten von Inhalten darunter erfordert zusätzliche Anstrengung (scrollen). Das bedeutet: Je länger dein Inhalt, desto geringer ist die Wahrscheinlichkeit, dass Nutzer sich damit beschäftigen.

Landing Page – Design und UX

Der erste Schritt bei der Wahl des Designs deiner Website ist, zu überlegen, wer zu deiner Zielgruppe gehört. Frauen oder Männer? Was machen sie beruflich? Was tun sie in ihrer Freizeit? Was ist ihr Ziel und was erwarten sie? Wenn du diese Fragen beantwortest, wird deine Aufgabe leichter. Du weißt, ob du Pastell- und Entspannungsfarben oder vielleicht dunkle und geheimnisvolle Farben verwenden solltest. Sobald du die Grundlagen deiner Website kennst und eine erste Vision hast, halte dich an die folgenden Regeln.

Regel #1 – Hochwertige Bilder

Eine Studie von Bright Local ergab, dass 60 % der Menschen Suchergebnisse bevorzugen, die Bilder enthalten. Skyword wiederum hat gezeigt, dass interessante Bilder im Schnitt 94 % mehr Impressionen erzielen. Vermeide also langweilige, stereotype Bilder und finde etwas Originelles und Interessantes. Für solche Bilder muss man meist bezahlen, aber es gibt viele Seiten, die hochwertige Bilder kostenlos anbieten. Hier einige Beispiele:

• Pexels,
• Unsplash,
• StockSnap,
• Negative Space,
• Superfamous Studios,
• Little Visuals,
• Gratisography,
• Kaboompics,
• Picjumbo.

Bildgröße

Ein weiterer wichtiger Faktor, der das Nutzererlebnis beeinflusst, ist die Geschwindigkeit der Website – und damit die Größe der Bilder und Videos. Sie sollten so leicht wie möglich sein, ohne an Qualität zu verlieren.

Für das Komprimieren von Bildern unter Windows empfehlen wir:

• Riot,
• File Minizer Pictures,
• Caesium Image Compressor,
• File Optimizer,
• Pingo,
• JPEG mini.

Für das Komprimieren von Bildern unter MacOS empfehlen wir:

• JPEG mini,
• ImageOptim,
• TinyBeest,
• Photo Size Optimizer.

Online-Bildkomprimierungssoftware:

• TinyJPG.com,
• Compressor.io,
• Kraken.io.

Videogröße

Bei der Größe von Videodateien ist es ähnlich wie bei Bildern, allerdings etwas komplizierter. Fotos können nur wenige MB groß sein, während Videos meist über hundert MB groß sind, was deine Website deutlich verlangsamen kann.

Die besten Video-Komprimierer:

• Any Video Converter Free,
• Leawo Prof. Media,
• Freemake Video Converter,
• WinX Video converter,
• MediaCoder (nur Windows),
• AVS Video converter (nur Windows),
• Total Video Converter,
• HandBrake.

Regel #2 – Farben

Farben spielen im Marketing eine sehr wichtige Rolle und ihre Auswahl sollte gut überlegt sein. Sie beeinflussen in erster Linie, wie der Nutzer dein Unternehmen wahrnimmt. Wenn du mehr über die Psychologie der Farben im Affiliate Marketing erfahren möchtest, lies unseren Artikel „Die Psychologie der Farben im Affiliate Marketing. Wie verändern Details deine Einnahmen?“.

Denke daran, dass die Farben der Marke mit ihrer Mission übereinstimmen sollten und vor allem deiner Zielgruppe gefallen müssen. Das Wichtigste ist jedoch dein Angebot und die Qualität deiner Dienstleistungen.

Außerdem ist die Verwendung von Farben wichtig, wenn es um die Barrierefreiheit für Menschen mit Behinderungen geht, worauf wir in Regel 4 eingehen. Setze niemals zwei unterschiedliche helle Farben direkt nebeneinander, besonders Blau und Grün, da dies für Farbenblinde problematisch sein kann. Die lesbarste Farbkombination ist Schwarz auf Weiß.

Regel #3 – Helle und klare Überschriften

Der Nutzer soll sich deine Seite merken und wiederkommen wollen. Mit einer hellen (unaufdringlichen) und klaren Überschrift unterstützt du ihn dabei sehr. Achte auf Menschen mit Behinderungen oder digital Ausgeschlossene und erleichtere ihnen die Nutzung deiner Website. So sollte es aussehen:

Regel #4 – Barrierefreiheit für Menschen mit Behinderungen

Um Menschen mit Behinderungen die Navigation zu erleichtern, haben wir eine Liste von Punkten zusammengestellt, die beim Design einer Website berücksichtigt werden sollten. Solch angepasster Inhalt hat zudem positive Auswirkungen auf SEO und sorgt für ein besseres Ranking bei Google oder anderen Suchmaschinen.

ALT-Beschreibungen

ALT-Beschreibungen sind alternative Beschreibungen der auf deiner Website veröffentlichten Bilder. Dadurch kann die Vorlesesoftware dem Nutzer mitteilen, was darauf zu sehen ist. Und bei schlechtem Internet siehst du, was auf dem Bild ist – also ist diese Lösung nicht nur für Software geeignet.

Untertitel für Videos

Wenn deine Website viele Videos enthält, solltest du ihnen Untertitel hinzufügen, um gehörlosen Menschen zu helfen. Für längere Audioaufnahmen empfiehlt sich eine Transkription. Ein Online-Tool, das dir automatisch Untertitel hinzufügt, ist z. B. veed.io.

Korrekt bearbeitete und markierte Links

Anstatt einen Link mit „Hier klicken“ zu versehen, verwende besser „Für mehr Informationen besuche [Webadresse]“, das hilft blinden Menschen sehr. Markiere außerdem Hyperlinks in einer anderen Farbe als den Fließtext. So müssen Nutzer sie nicht mit der Maus suchen.

Größe der Buttons

Wenn die Buttons, die auf Unterseiten deiner Website führen, zu klein sind, kann das für Menschen mit Navigationsproblemen hinderlich sein. Achte darauf, dass die „klickbare“ Fläche des Buttons immer groß genug ist.

Tastaturnavigation

Deine Website sollte so aufgebaut sein, dass das Drücken der „TAB“-Taste den Nutzer logisch und intuitiv von der Adresszeile zum Menü und zu anderen Bereichen der Website führt. So können Menschen mit Behinderungen bequem auf deiner Seite navigieren.

Regel #5 – Raum

Ein weiterer Punkt ist der Raum auf deiner Website. Der Nutzer sollte schnell und ohne unnötigen Aufwand erkennen, worum es auf deiner Seite geht und was ihn erwartet. Du willst sicher nicht, dass deine Landing Page wie eine Seite aus dem Jahr 2010 aussieht, auf der überall Text und Werbung ist und der Nutzer nicht weiß, was er tun soll. Solche Situationen sind heute sehr selten. Schau dir aber das folgende Beispiel an, wie eine Seite viel besser hätte gestaltet werden können.

Der Anfang ist nicht schlecht: einfache Informationen darüber, was das Unternehmen macht und was zu erwarten ist. Schau dir nun den unteren Bereich an. Der Nutzer wird mit verschiedenen Links und Sätzen bombardiert, die an Spam erinnern. Das solltest du vermeiden.

Regel #6 – Transparente Navigation und Symmetrie

Genau wie der Header sollte auch das Menü einfach sein. Heute ist eine Hauptmenüleiste oben Standard – klar und leicht zu bedienen. Achte darauf, dass deine Landing Page symmetrisch ist, das gefällt dem menschlichen Auge sehr.

Regel #7 – Footer

Nicht zuletzt: der Footer. Wie sollte er aussehen und was sollte er enthalten? Der Footer sollte vor allem durchdacht, einfach und interessant sein. Überlege dir, was du von den Nutzern erwartest, die bis zum Seitenende scrollen. Wenn du die Antwort kennst, wird es dir leichter fallen, einen guten Footer zu gestalten. Meistens suchen Besucher im Footer nach Kontaktinformationen.

Das bedeutet nicht, dass du dort nicht auch für dich wichtige Informationen platzieren kannst. Der Footer sollte die Bedürfnisse der Nutzer erfüllen und dir gleichzeitig helfen, deine Ziele zu erreichen. Hier einige Beispiele für Informationen, die ein Footer enthalten kann:

• Datenschutzrichtlinie und Nutzungsbedingungen,
• Kontaktinformationen,
• Navigation,
• Links zu sozialen Netzwerken,
• Newsletter-Anmeldung.

Landing Page – Textinhalte

Nach der Erstellung der passenden Überschriften und Buttons folgt der nächste Schritt: die Inhalte auf der Seite. Logischerweise sollte alles zur beworbenen Aktion passen und zum Kauf des Produkts anregen.

Die wichtigsten Prinzipien für klare Inhalte sind Hierarchie und System: Jeder Block sollte an seinem Platz sein. Du kannst einen Entwurf in PowerPoint oder auf Papier machen, um die Struktur nachzubilden. Eine klare Benutzeroberfläche erreichst du nur, wenn du die wichtigsten Fragen beantwortest: Was, wo, wohin und warum. Die Informationen sollten in Reihenfolge präsentiert werden: Welches Produkt, warum braucht der Nutzer es. Du kannst Referenzen angeben, um das Vertrauen zu erhöhen. Lead-Generation-Seiten sollten Inhalte Schritt für Schritt so kurz und einfach wie möglich präsentieren. Weniger Schritte erhöhen deine Conversion-Rate.

Auf dem Markt findest du attraktive Lösungen, die dir helfen, deine Website zu erstellen und anzupassen, sodass sie auf jedem Gerät großartig aussieht. Ein Beispiel ist Kubio – ein Site-Builder-Plugin, das Gutenberg erweitert und vollständige Designfreiheit sowie eine reibungslose Seitenerstellung bietet. Es ermöglicht das Bearbeiten kompletter Seiten in einer einzigen, intuitiven Oberfläche, ohne dass du den WordPress-Template-Aufbau verstehen musst.

Diese Website bietet eine große Vorlagen-Galerie, die dir einen schnellen Startpunkt für deine neue Website gibt. Außerdem gibt es eine umfangreiche Block-Bibliothek mit Elementen wie Preistabellen, Bildergalerien, Slidern und Akkordeons, mit denen du schnell fortschrittliche Seiten erstellen kannst. Erwähnenswert ist, dass die Website jeden Seitenbereich wie Header, Footer und Seiteninhalt automatisch in den richtigen Vorlagen speichert.

Hauptfunktionen des Kubio Builders:

• Komplette Seiten in einer einzigen, intuitiven Oberfläche erstellen,
• erweiterte Design- und Responsive-Optionen,
• Seiten durch das Kombinieren vordefinierter Abschnitte erstellen,
• große Vorlagen-Galerie,
• umfangreiche Block-Bibliothek.

Schon hier angekommen?

Wir hoffen, dass du nach dem Lesen bis hierher weißt, wie du deine Website wie ein Profi gestalten kannst. Wir wünschen dir viel Erfolg!