Landing Page vs. Homepage: Was ist der Unterschied?

Das Homepage-Design der Website Mitte der 90er Jahre war nach heutigen Designstandards ein totaler Albtraum, aber in den Kinderschuhen des Webs war es alles, was wir wussten. Helle türkisfarbene Hyperlinks, die im Weltraum schweben, schienen damals eine gute Idee zu sein.

Zwei Jahrzehnte später haben sich die Dinge geändert. Heutige Homepages konzentrieren sich mehr darauf, Besucher in den Marketing-Trichter zu ziehen, als sie mit jenseitigen Grafiken und Farben zu blenden, die das sichtbare Spektrum abdecken. Dank Landingpage-Buildern ist es jetzt möglich, in Minutenschnelle Erlebnisse mit hoher Conversion-Rate zu erstellen.

In dieser Hinsicht werden Homepages wie Post-Click-Landingpages. Aber es gibt immer noch einige große Unterschiede zwischen ihnen. Berücksichtigen Sie diese Designunterschiede, um hocheffektive Seiten zu erstellen.

Website-Homepage-Design vs. Post-Click-Landingpage-Design: Was Sie wissen müssen

1. Post-Click-Landingpages und Website-Homepages sollten für verschiedene Benutzer erstellt werden

Okay, die Chancen, dass Sie auf eine Homepage stoßen, die wie Microsofts Chaos von 1995 aussieht, sind gering. Aber warum?

Kara Jensen, Creative Principle bei BOP Design, erklärt:

„Es kann leicht sein, sich in das Konzept einer Website zu verstricken und den Endbenutzer zu vergessen. Eine erfolgreiche Website ist nicht nur ein schönes visuelles Element, sondern ein Portal, um Ihre Zielgruppe anzuziehen und ihnen die Informationen zu geben, die sie benötigen entscheiden, ob sie ein neuer Kunde werden wollen."

In kreativen Berufen wie Webdesign ist es nicht ungewöhnlich, dass Designer (und sogar Kunden) so sehr mit dem Endprodukt verbunden sind, dass sie vergessen, für wen sie es schaffen: für den Besucher.

Vor zwanzig Jahren mag diese mit Hyperlinks übersäte Weltraumlandschaft für den Designer von Microsoft cool ausgesehen haben, aber war es etwas, das den Benutzer interessierte? Wahrscheinlich nicht.

Wie wäre es mit dem seitlichen „FAQ“-Button auf der zweiten Homepage? War das etwas für den Benutzer gedacht? Nein.

Bevor Sie eine Seite entwerfen, sollten Sie sich unbedingt fragen: „Was ist das Ziel dieser Seite?“ – oder noch besser: „Was ist das Ziel eines Benutzers, der diese Seite erreicht?“

Was ist das Ziel der Seite

Auf Ihrer Homepage ist dieses Ziel nicht für jeden Besucher vorhersehbar. Neue Interessenten oder wiederkehrende Leads möchten vielleicht die Geschichte Ihres Unternehmens erfahren, während andere direkt nach Plänen und Preisinformationen suchen. Aus diesem Grund enthalten Homepages Navigationsleisten und mehrere ausgehende Links, die Besuchern einen einfachen Zugriff auf alle gewünschten Inhalte bieten.

Nehmen Sie zum Beispiel die Zoho CRM-Produkthomepage, auf deren Navigation Kunden, Entwickler und Interessenten jedes noch so kleine Detail über das Tool erfahren:

Post-Click-Landingpages haben jedoch nur ein Ziel: einen Besucher für ein Angebot zu konvertieren. Wenn Nutzer über einen Werbelink zu Ihrer Post-Click-Zielseite navigieren, erwägen sie, das von Ihnen beworbene Angebot in Anspruch zu nehmen. Aus diesem Grund ist es Ihre Aufgabe, auf Ihrer Post-Click-Landingpage nur die Informationen anzugeben, die Ihr Besucher benötigt, um festzustellen, ob es sich lohnt, dieses Angebot in Anspruch zu nehmen.

Hier ist eine Post-Click-Landingpage, die von demselben Unternehmen erstellt wurde:

Schon auf den ersten Blick sind große Designunterschiede oberhalb der Falte zu erkennen. Die fehlende Navigation auf dieser Seite führt dazu, dass sich die Besucher auf das Angebot konzentrieren, das sie zur Bewertung angeklickt haben. Die Überschrift auf der Post-Click-Landingpage ist deutlich nutzenorientierter als die auf der Startseite.

Die Startseite enthält Screenshots aus der App, die mit Links zu anderen Seiten gefüllt sind, während die Post-Click-Landingpage spezifische Zahlen enthält, um die Wirksamkeit des Tools zu belegen.

Startseite:

Post-Click-Landingpage:

Scrollen Sie noch weiter nach unten und Sie werden sehen, dass die Zoho-Startseite kleine Textabsätze verwendet, die Besucher zu den Feature-Seiten der Website führen, während die Post-Click-Landingpage dies als Social Proof ersetzt:

Startseite:

Post-Click-Landingpage:

Auf der Homepage haben wir mehr als 80 Links zu anderen Seiten gezählt, die keine CTAs waren. Auf der Post-Click-Landingpage gab es zwei. Trotzdem sind zwei zu viel. Das Verhältnis von Links zu CTA-Buttons (auch bekannt als „Conversion-Verhältnis“) auf Ihrer Post-Click-Landingpage sollte immer 1:1 betragen.

Schauen wir uns ein weiteres Beispiel an, diesmal von FreshBooks. Zuerst ihre Homepage, oberhalb der Falte:

Nun, eine der Post-Click-Landingpages des Unternehmens, oberhalb der Falte:

Sie sehen fast identisch aus, oder? Fast, aber beachten Sie auf der Post-Click-Landingpage, dass die Überschrift und der CTA geändert wurden. Vor allem wurde das Navigationsmenü entfernt, damit sich die Besucher auf die Bewertung des Angebots konzentrieren können.

Mehrere Teile der Homepage unterhalb der Falte sind gleich. Beide verfügen über Social Proof, die gleichen nutzenorientierten Textabsätze und viele gleiche Grafiken. Wenn Sie jedoch genau hinschauen, werden Sie feststellen, dass auf der Post-Click-Landingpage alle sekundären CTAs durch die Schaltfläche "Kostenlos testen" ersetzt wurden.

Hier ein Screenshot von der Homepage:

Und hier ist eine von der Post-Click-Landingpage:

Lass das Paradox der Wahl nicht eintreten

Denken Sie an das Wahlparadoxon: Je mehr Optionen Sie haben, desto schwieriger wird es, eine Entscheidung zu treffen. Deshalb dauert die Bestellung in Restaurants mit umfangreicheren Speisekarten immer länger.

In dem Restaurant, das Ihre Post-Click-Landingpage ist, sind CTAs Ihre Menüpunkte. Bieten Sie Ihren Besuchern nur eine zur Auswahl an. FreshBooks tut dies mit dem Call-to-Action „Try It Free“ auf der gesamten Seite.

FreshBooks bietet Besuchern auf ihrer Homepage mehrere CTAs, was in Ordnung ist. Diese "sekundären CTAs" wie "Weitere Informationen" helfen Interessenten, die Antworten auf ihre Fragen zu finden, und wenn sie richtig gestaltet sind, lenken sie nicht einmal zu viel vom primären CTA ab.

Können Sie den primären Call-to-Action und den sekundären Call-to-Action auf dieser Seite erkennen?

Sehen Sie, wie "Try It Free" mehr hervorsticht als die farblosen "Weitere Informationen"-Buttons unten? Der Designer dieser Seite möchte den Besucher auf die Schaltfläche "Testen Sie es kostenlos" lenken, aber er gibt Interessenten immer noch die Möglichkeit, sich zu informieren, wenn sie nicht bereit sind, es auszuprobieren. Und das ist der wichtigste Unterschied zwischen einer Website-Startseite und einer Post-Click-Landingpage.

Die Homepage konzentriert sich mehr darauf, den Besucher zu informieren und zu stärken, während sich die Post-Click-Landingpage darauf konzentriert , den Besucher zu überzeugen .

Das Ziel jedes Homepage-Besuchers können wir nicht genau kennen. Aber das Ziel des Post-Click-Landingpage-Besuchers? Es ist eine Entscheidung zu treffen. Erstellen Sie eine anatomisch korrekte Post-Click-Landingpage, um ihnen dabei zu helfen.

2. Homepages folgen dem minimalistischen Vorbild von Post-Click-Landingpages

Auch wenn ihre spezifischen Ziele unterschiedlich sein können, wollen Post-Click-Landingpage-Besucher und Homepage-Besucher in einer grundlegenden Weise dasselbe. Sergie Magdalin, Chief Web Design Officer bei Webflow, erklärt:

„Designer auf der ganzen Welt haben erkannt, dass Menschen Websites wegen ihrer Inhalte besuchen – egal ob es sich um wütende Tweetstorms, nachdenkliche lange Lesevorgänge oder das neueste „benutzergenerierte“ Mem handelt – und dass die ultimative Rolle des Designs darin besteht, Inhalte in einer intuitiven, effizienten und “ entzückender" Weg.

Das ist ein Grund für die Abkehr vom skeuomorphen Design hin zu „flacheren“, minimalistischeren Designansätzen…“

Im Jahr 1995 mussten noch Design-Best Practices und standardisierte Web-Heuristiken entwickelt werden. Website-Ersteller hatten wenig Recherche, um ihre Designs zu stützen. So endete das Internet mit Hyperlinks, die im Weltraum schwebten.

Das Seitendesign begann sich zu ändern

Als immer mehr Unternehmen und Verbraucher sich dem Internet zuwandten, lag der Fokus darauf, den Übergang von der realen Welt in den Cyberspace zu erleichtern. Skeuomorphe Designs, wie zum Beispiel das Mülleimer-Symbol, erleichterten das Wiedererkennen von Elementen und deren Funktion im Web.

Es gab jedoch ein großes Problem mit ihnen. Sie neigten dazu, Webseiten zu überladen. Und das störte, was die Besucher wollten: Inhalte. „Flachere“, minimalistische Gestaltungselemente – zum Beispiel Schatten, Grundschrift und leuchtende Farben – präsentieren es dem Besucher heute auf einfache und geradlinige Weise.

Diese Elemente sind auch ein fester Bestandteil einer bestimmten Art von Seite: der Post-Click-Landingpage. Als Elevator Pitch eines Unternehmens im Web enthält eine Post-Click-Landingpage alles, was ein Besucher braucht, um ein Angebot schnell zu bewerten, und nicht mehr.

Das macht sie so effektiv bei der Konvertierung. Sie betonen Inhalte mit einem einfachen Layout. Und jetzt beginnen Homepages, dasselbe zu tun. Sehen Sie sich diese Post-Click-Landingpage von Autopilot an:

Schaut jetzt auf deren Homepage:

Ziemlich ähnlich, oder? Klicken Sie sich durch und scrollen Sie nach unten, um zu sehen, dass ihre Designs sogar unterhalb der Falte ähnlich sind.

Wenn Sie ein weiteres Beispiel benötigen, sehen Sie sich die FreshBooks-Startseite und die Post-Click-Zielseite oben an. Heute liegt der Fokus unabhängig von der Webseite darauf, Inhalte bereitzustellen, anstatt davon abzulenken.

3. Sowohl Post-Click-Landingpages als auch Website-Homepages müssen Besucher mit einer visuellen Hierarchie führen

Schon vor dem Internet haben die Menschen Seiten auf die gleiche Weise angesehen. Frühe Eye-Tracking-Studien zeigten, dass Leser eine Seite zuerst durch ein Bild oder eine Überschrift auf einer geschriebenen Seite betreten und dann auf der linken Seite nach unten blicken, um nach Aufzählungszeichen oder kursiv gedrucktem Text zu suchen. Der Text wurde zuletzt gelesen.

Im Web ist dies als F-Form-Muster bekannt:

Damit die Leser Ihre wichtigsten Inhalte sehen können, müssen Sie eine sogenannte „visuelle Hierarchie“ erstellen, die auf der Art und Weise basiert, wie die Leute gerne lesen. Es sollte ungefähr so ​​aussehen:

1. Verwenden Sie aufmerksamkeitsstarke Bilder und eine große Überschrift, um Ihre Leser zu fesseln.
2. Teilen Sie den Inhalt Ihrer Seite mit Zwischenüberschriften.
3. Verwenden Sie Aufzählungspunkte, um auf Elemente in einer Liste wie Funktionen und Vorteile aufmerksam zu machen.
4. Verwenden Sie den Fließtext innerhalb dieser Zwischenüberschriften und Aufzählungszeichen, um dies kurz zu erläutern.

Die Hierarchie sollte auch auf bekannten Webdesign-Prinzipien basieren. Logos befinden sich beispielsweise immer oben links auf einer Webseite. Links sind entweder unterstrichen oder haben eine andere Farbe als der Rest des Textes. Versuchen Sie nicht, die Art und Weise, wie die Leute im Web lesen, neu zu erfinden. Eine MIT-Studie hat einmal gezeigt, dass Menschen vertraute Seitenlayouts bevorzugen, die versuchen, von langjährigen Best Practices abzuweichen.

Beispiel

Hier ist ein Beispiel für eine gute visuelle Hierarchie:

Das Bild und die Überschrift ziehen die Aufmerksamkeit des Lesers auf sich. Sie gehen hinunter zur Zwischenüberschrift „Mehr als 40.000 Organisationen und Tochtergesellschaften weltweit … und wachsen weiter“. Darunter enthalten Aufzählungspunkte wichtige Informationen über die Software. Auf der rechten Seite sammelt ein Formular potenzielle Informationen und eine bunte Schaltfläche schließt die Konvertierung ab.

Beispiel für eine schlechte visuelle Hierarchie

Hier ist ein Beispiel für eine schlechte visuelle Hierarchie:

Die Seite hat eine Überschrift, Unterüberschrift, Aufzählungspunkte und sogar eine Infografik – was ist also los?

Nun, die Leute lesen von links nach rechts, und da das Formular den linken Rand umbricht, beginnt der Text am Formular. Für die Leser bedeutet das, dass diese Seite am rechten Rand dieses Formulars beginnt . Und das bedeutet, dass der kritischste Teil dieser Seite – das Formular und der Call-to-Action – vollständig verloren gehen.

Besucher lesen die Zwischenüberschrift, die Aufzählungspunkte und werfen einen Blick auf die Infografik auf der rechten Seite, da sie sich in ihrer Sichtlinie befindet. Aber selbst mit Hilfe dieser visuellen Hilfe ist es für die Leser unnatürlich, das Formular nach links zu sehen, während sich der Rest des Inhalts auf der rechten Seite befindet.

Hier ist eine Homepage, die eine gute visuelle Hierarchie erstellt (klicken Sie hier, um die vollständige Homepage anzuzeigen):

Ein Bild und eine Überschrift ziehen die Aufmerksamkeit des Lesers auf sich, dann beschreiben mehrere Zwischenüberschriften mit Aufzählungsinhalten kurz die Vorteile des Dienstes. Dann spricht ein Video-Testimonial von der Macht von Upwork. Und darunter lädt ein Call-to-Action den Besucher ein, der Plattform beizutreten.

Hier ist ein Beispiel für eine schlechte visuelle Homepage-Hierarchie (klicken Sie hier, um die vollständige Homepage anzuzeigen):

Auf den ersten Blick sieht diese Homepage so aus, als würde sie den Regeln einer guten Hierarchie folgen. Ein Bild mit einer überlagerten Überschrift erregt die Aufmerksamkeit des Besuchers; dann führt eine Zwischenüberschrift einige Symbole mit Aufzählungszeichen ein. Darunter präsentiert das Unternehmen Auszeichnungen und prominente Kunden. Aber darunter dann?

Nichts. Der Benutzer muss zurück nach oben scrollen oder die Fußzeile der Website durchsuchen, um den nächsten Schritt zu tun. Jedes Element auf Ihrer Seite sollte Ihren Besucher zum Eingang Ihres Marketing-Trichters führen. Am Ende dieser Seite sollte ein CTA stehen.

Website-Homepages und Landingpages haben mehr gemeinsam, als Sie denken

All dieses Gerede über Website-Homepages vs. Post-Click-Landingpages lässt Sie vielleicht denken, dass es sich um zwei völlig unterschiedliche Tiere handelt. In gewisser Weise sind sie es sicherlich. Aber im Kern sind sie gleich.

Das Erstellen von Post-Click-Landingpages war noch nie so einfach – bis jetzt. Melden Sie sich noch heute für eine Instapage Enterprise-Demo an.