Was ist eine Hero Section?
Eine Hero Section ist der oberste Abschnitt einer Webseite unter dem Logo und Menü, den Besucher der Webseite als aller erstes zu sehen bekommen. Oftmals befindet sich die gesamte Hero Section “above the fold”, also ist komplett sichtbar, ohne scrollen zu müssen.
Eine Hero Section informiert für gewöhnlich über den Umfang und die Vorteile des Angebots, schafft Vertrauen zu potentiellen Kunden und animiert diese zum Handeln. Außerdem dient das Webdesign einer guten Hero Section als Alleinstellungsmerkmal für das Unternehmen und sorgt so dafür, dass sich das Branding, also das Markenbild, von anderen Unternehmen abhebt.
Deine Hero Section hat nur 50 Millisekunden, um einen überzeugenden ersten Eindruck zu vermitteln und nur wenige Momente, um die Conversion Rate zu maximieren. Daher solltest Du beim Gestalten Deiner Hero Section keinerlei Kosten und Mühen scheuen.
Eine optimal konvertierende Hero Section enthält für gewöhnlich ein aussagekräftiges Bild, präzise und überzeugende Titel und einen ins Auge stechenden Call-To-Action. Je nach Kontext kann es auch sinnvoll sein, zusätzliche Elemente wie Social Proof in die Hero Section zu integrieren. Natürlich sollte in der Regel auch nicht das Navigationsmenü oder Logo des Unternehmens fehlen, um die User Experience beim Navigieren zu maximieren.
Der Begriff Hero dabei ist nicht neu, denn bereits in Zeitungen oder Filmen wurde dem “Hero” besondere Aufmerksamkeit gewidmet. Ähnlich wie im Webdesign, ist der Hero auch hier der wichtigste Faktor, um die initiale Aufmerksamkeit zu gewinnen.
Anatomie: Aufbau einer erfolgreichen Hero Section
Hero Grafik
Bei der Hero Grafik (bzw. Hero Image, Hero Video oder Hero Shot) handelt es sich um ein zentrales visuelles Element der Hero Section, das dem Besucher einer Webseite in der Regel als allererstes auffällt. Eine Hero Grafik kann dabei ein Foto, eine Illustration, ein Grafikdesign oder ein fesselndes Video sein.
Das Ziel einer Hero Grafik ist es dabei, die Kernbotschaft der Webseite auf einen Blick zu vermitteln und über den Zweck der Webseite zu informieren. Dabei soll sie Überschriften und andere Textelemente sowie Call-To-Actions unterstützen und nicht bedeutsam von ihnen ablenken. In bestimmten Fällen kann der Flow in Hero Grafiken sogar genutzt werden, um den unterbewussten Blick der Besucher in Richtung des Call-To-Actions zu lenken.
Text Block
In einer Hero Section enthalten Textblöcke die H1-Überschrift und ggf. Untertitel oder andere Textelemente. Sie sind in der Regel linksbündig oder zentriert in der Hero Section platziert.
Die H1-Überschrift ist neben der Hero Grafik das womöglich wichtigste Element einer Webseite, da Besucher erwarten, dass sie klar und eindeutig beschreibt, worum es auf der Webseite geht.
Der Untertitel und andere Textelemente agieren dabei supplementär zur H1-Überschrift und beschreiben das Angebot der Webseite ausführlicher mit zusätzlichen Details.
Call-To-Action
Ein Call-To-Action zielt darauf ab, den Besucher einer Webseite zu einer bestimmten Handlung zu animieren. Für gewöhnlich wird dafür ein Button unter dem Untertitel platziert, der es Besuchern z.B. ermöglicht, ein kostenloses Erstgespräch anzufragen, ein Produkt zu bestellen oder einen Newsletter zu abonnieren.
Social Proof
Social Proof in einer Hero Section ist ein Beweis, der die aufgestellten Behauptungen belegt. Dabei werden die Worte oder Handlungen eines Publikums verwendet, um die Glaubwürdigkeit der Versprechen einer Website zu erhöhen.
Social Proof kann nicht nur durch Rezensionen, sondern auch durch Kunden- oder Partnerlogos, Zertifizierungen oder durch andere Methoden vermittelt werden.
Logo
Das Logo ist das Markenbild des Unternehmens.
Für gewöhnlich wird es in der oberen linken Ecke der Navigationsleiste oder der Hero Section platziert und so wird es auch von den meisten Benutzern erwartet. Die Benutzer erinnern sich zu 89% eher an Logos, die in der oberen linken statt der oberen rechten Ecke platziert sind.
Ebenso ist es für Benutzer 6-mal schwieriger zur Startseite zurückzukehren, wenn sich das Logo in der Mitte statt oben links befindet. Es wird also von einem durchschnittlichen Benutzer erwartet, dass sich das Logo auch als Button verwenden lässt, um zur Startseite zurück zu gelangen.
Das Verwenden eines Logos ist allerdings nicht nur nützlich, sondern suggeriert auch Seriösität und Glaubwürdigkeit. Denn wenn das vertraute Logo fehlt, fehlt auch unser Vertrauen in die Website.
Navigationsmenü
Das Navigationsmenü ermöglicht es den Besuchern einer Webseite, leicht zwischen unterschiedlichen Unterseiten oder Bereichen zu navigieren. Für gewöhnlich wird das Navigationsmenü am oberen Rand der Webseite positioniert.
Es ist wichtig, dass das Navigationsmenü übersichtlich und leicht zu verstehen ist. Daher wird in der Regel empfohlen, nur auf dem Desktop eine Navigationsleiste zu verwenden und auf mobilen Endgeräten responsiv auf ein platzsparenderes Burger Menü zu wechseln.
6 Tipps für eine perfekte Hero Section
1. Verwende fesselnde Grafiken
Die Hero Grafik zieht auf eine ganz natürliche Art und Weise mehr Aufmerksamkeit auf sich, als alle anderen statischen Elemente einer Hero Section. Daher sollte man insbesondere bei der Wahl der Hero Grafik darauf achten, ein höchst fesselndes Hero Image oder Hero Video auszusuchen.
Das Ziel der Hero Grafik sollte man dabei stets im Hinterkopf behalten. So könnte es beispielsweise das Ziel sein, ein Produkt hervorzuheben, die Markenidentität authentisch zu stärken oder einfach nur eine bestimmte Emotion oder Assoziation zu erzeugen. Je nach Kontext wären also eher Fotos, Illustrationen, Grafikdesigns oder Videos geeignet.
Insbesondere Videos eignen sich hervorragend, um das Engagement der Besucher zu erhöhen. So kann mehr Vertrauen geschaffen und eine stärkere Verbindung aufgebaut werden. Dadurch kann wiederum die Konversion der Besucher gesteigert werden.
Oft werden Hero Grafiken besonders groß dargestellt oder über den gesamten Hintergrund gespannt, um die fesselnde und aufmerksamkeitssteigernde Wirkung noch mehr zu verstärken. Dabei sollte stets darauf geachtet werden, dass Hero Grafiken Textelemente unterstützen und nicht unleserlich machen. Außerdem sollten Hero Grafiken Call-To-Actions untermauern und nicht zu stark von ihnen ablenken.
Grundsätzlich sollte es eher vermieden werden, Stockfotos zu verwenden, da Nutzer diese leicht von hochwertigen Fotos unterscheiden können. Wenn es jedoch absolut notwendig ist, sollten diese bewusst ausgewählt werden. Dabei kann auf Seiten wie Unsplash, Pexels, oder Freepik zurückgegriffen werden, um hochwertige und kostenlose Stockfotos zu finden.
Die Wahl einer passenden Hero Grafik kann recht komplex sein, weshalb die erfahrensten Designer eine gründliche Nutzerforschung durchführen, um ihre Zielgruppe genau verstehen zu können.
2. Erstelle eine aussagekräftige H1-Überschrift
Die H1-Überschrift steuert maßgeblich dazu bei, ob eine Webseite die Aufmerksamkeit der Besucher auf sich zieht oder die Besucher sich langweilen und die Seite direkt wieder verlassen.
Die Überschrift muss also sofort überzeugen und sollte daher kurz und präzise den Wert vermitteln, den die Webseite bietet: Je klarer und effektiver, desto besser!
Dabei ist es wichtig, nicht um den heißen Brei herum zu reden. Welches Problem löst die Webseite? Welcher Wert wird geliefert? Nenne klare Antworten auf die wichtigsten Fragen und Probleme Deiner potentiellen Kunden.
Dein Kunde interessiert sich nämlich nicht für Dich, sondern nur dafür, dass seine Probleme gelöst werden. Daher solltest Du beim Gestalten Deiner Überschriften überwiegend auf die Wünsche und Probleme Deiner Kunden eingehen. Was macht Dein Angebot für Deine Kunden besonders? Sprich nicht über Dich, sondern nur darüber, was Du für Deine Kunden tun kannst.
Am Ende ist das Schlimmste, was Du in Deiner Überschrift schreiben kannst: “Willkommen auf meiner Webseite”. So gehst Du nicht auf Dein Angebot und auch nicht auf Deinen Kunden ein.
Ein positives Gegenbeispiel einer Agentur für Suchmaschinenoptimierung könnte sein: “Mehr qualifizierte Leads durch mehr Klicks auf Google”. Es wird präzise darauf eingegangen, was der Kunde sich wünscht: “Mehr qualifizierte Leads”. Außerdem wird beschrieben, wie dies erreicht wird: “Mehr Klicks auf Google”.
3. Wähle einen unterstützenden Untertitel
Der Untertitel ist der perfekte Ort, um Dein Angebot ausführlicher zu beschreiben. Er soll die H1-Überschrift unterstützen und somit kannst Du sie verwenden, um grundlegende Details über Deine Produkte oder Dienstleistungen darzulegen.
Da der Untertitel etwas ausführlicher sein kann als die H1-Überschrift, kann sie zusätzlich clever genutzt werden, um die Denk- und Arbeitsweise des Unternehmens zu vermitteln und Vertrauen zum Unternehmen zu schaffen.
4. Verwende auffällige Call-To-Actions
Bereits in der Hero Section sollte ein klarer Call-To-Action integriert werden, damit die Besucher der Webseite gar nicht erst scrollen müssen, um eine Aktion auszuführen, die für Dein Unternehmen von hoher Wichtigkeit ist.
Der CTA-Button wird für gewöhnlich unter dem Untertitel platziert und kann die Aufmerksamkeit der Besucher durch besondere Formen, auffällige Farben oder spannende Animationen auf sich richten.
Dennoch ist es wichtig darauf zu achten, dass die Font des Labels vom CTA-Button möglichst leicht zu lesen ist. Denn Du möchtest vermeiden, dass Besucher den Zweck des Call-To-Action Buttons nicht verstehen.
Daher ist es ebenso wichtig, das Label vom CTA-Button kurz und präzise zu formulieren. Es sollte stets ein Verb enthalten (“Kontaktiere uns sofort”, “Kostenloses Erstgespräch anfordern”) und einfach zu verstehen sein.
Beim Erstellen eines CTA-Buttons solltest Du Dir folgende Fragen stellen:
- Was ist das Ziel der Webseite?
- Was soll der Benutzer auf der Webseite tun?
- Was genau soll passieren, wenn der Benutzer den CTA-Button anklickt?
5. Zeige Social Proof
Das Prinzip ist ganz einfach: Ein Mensch vertraut Dir, wenn Dir auch viele andere Menschen vertrauen. Nicht nur wir schauen bei Online Shops auf die Anzahl der Bewertungen und der durchschnittlich vergebenen Sterne. Auch Deine Kunden benötigen oftmals Social Proof, um sich vollständig von Deinem Angebot überzeugen zu lassen.
Nicht umsonst hast Du Bewertungen auf Trustpilot, ProvenExpert oder Google gesammelt - nutze sie.
Social Proof kann auf vielerlei Arten Deiner Webseite hinzugefügt werden:
- Kundenbewertungen und Kundenstimmen
- Presse-Erwähnungen und "Bekannt aus”-Banner
- Logos von namhaften Klienten und Partnern
- Daten, Statistiken und Kennzahlen
- Beteiligungen in sozialen Medien
- Siegel, Auszeichnungen, Zertifizierungen und Mitgliedschaften
6. Weniger ist mehr
Es gibt viele wichtige Elemente, die in einer erfolgreichen Hero Section enthalten sein sollten. Dennoch sollte dies nicht zur absoluten Reizüberflutung führen.
Es ist essentiell, zwischen Elementen der Hero Section viel Freiraum zu lassen, den sogenannten Whitespace bzw. Negative Space. Den Elementen sollte genügend Raum zum Atmen gegeben werden, denn nur so kann eine klare Hierarchie geschaffen und aus jedem Element das Beste rausgeholt werden.
“Weniger ist mehr” gilt nicht nur für Whitespace, sondern genauso für Fonts. Verwende möglichst wenig unterschiedliche Schriftarten und wähle Fonts, die besonders leicht zu lesen sind.
Außerdem solltest Du wenn möglich nur einen einzigen CTA-Button in Deine Hero Section integrieren. Nur so kann der Benutzer eindeutig wissen, welche die richtige Handlung ist. Wenn Du allerdings trotzdem einen zweiten CTA-Button verwenden möchtest, sollte einer der beiden klar hervorgehoben werden, um die primäre Aktion so deutlich wie möglich zu vermitteln.
Beispiele: Websites mit hervorragenden Hero Sections
Website von “National Geographic”
Für National Geographic wurde eine Website erstellt, in der man aus der Sicht eines Bären den Yellowstone Nationalpark bewundern kann. Bereits die Hero Section ist eindrucksvoll.
Der Hintergrund zieht durch den Bären direkt die Aufmerksamkeit des Besuchers auf sich. Doch wohin schaut der Bär? Der Blick des Bären leitet den Blick der Besucher direkt auf die Überschrift weiter, die klar kommuniziert, worum es sich bei der Webseite handelt.
Sollte der Webseitenbesucher daraufhin noch weitere offene Fragen haben, kann er den Untertitel lesen. Dort werden diese detaillierter aufgeklärt.
Der Call-To-Action ist hier sehr subtil und regt lediglich zum Scrollen an, um die Reise auf der Website zu beginnen.
Webseite von “Woprio”
Die Webseite von Woprio verwendet alle Elemente, über die wir in diesem Blog gesprochen haben.
Zunächst ist ein aussagekräftiger Titel enthalten, der durch einen ausführlicheren Untertitel untermauert und ergänzt wird.
Es sind zwei Hero Images enthalten, die ein ganz bestimmtes Gefühl erzeugen sollen. Die Besucher sollen fühlen, dass sie genauso glücklich wie die Menschen aus den Hero Images sein werden, wenn sie die Kurse belegen.
Es sind zwei Call-To-Actions vorhanden, die klar visuell auseinanderzuhalten sind. Außerdem ist Social Proof durch Sternebewertungen gegeben.
Die Webseite von “GSAP”
Die Webseite von GSAP reduziert die Inhalte auf ein absolutes Minimum und wendet den Tipp 6 “Weniger ist mehr” (LINK) einwandfrei an. Die Hero Section enthält ausschließlich, was für das Vermitteln von Informationen und das Überzeugen der Webseitenbesucher wichtig ist.
Der Titel sagt “Animate anything”, deutet also darauf hin, dass Benutzer mit dem Produkt alles animieren können. Noch ist der Zweck der Webseite nicht komplett eindeutig, aber durch das Lesen des Untertitels wird klar, dass es sich um eine Javascript Library handelt.
Über den Call-To-Action Button kann man schließlich das Produkt verwenden.
Die textuellen Aussagen werden minimalistisch unterstützt, indem Anteile der Texte und kleine Formen und Illustrationen animiert werden.
Bonus: Was tun, wenn das alles nicht reicht?
Die wissenschaftliche Lage ist eindeutig! Du gestaltest nicht die perfekte Hero Section, indem Du versuchst, die perfekte Hero Section zu gestalten. Du gestaltest die perfekte Hero Section, indem Du es so oft wie möglich probierst!
Wir werden besser in Dingen, wenn wir sie so oft wie möglich wiederholen. So ist es nicht nur im Sport oder in der Musik, sondern in jeder erstrebenswerten Disziplin des Lebens.
Du wirst also die beste Hero Section gestalten, wenn Du ganz viele unterschiedliche Dinge probierst. Stell Dir nicht das perfekte Design vor, sondern gestalte einfach jedes Design, das Du Dir vorstellen kannst. So wirst Du am Ende die perfekte Hero Section gestalten.
Und wenn Du immer noch auf dem Schlauch stehst oder unzufrieden mit dem Ergebnis bist, schreibe uns eine Nachricht und wir helfen Dir dabei, das Beste aus Deiner Hero Section rauszuholen.
