Der wichtigste Part deiner Website: 6 Tipps für die perfekte Hero Section

Sicherlich gibt es nichts wichtigeres und weniger unterschätztes auf deiner Website, als eine wirklich gute Hero Section. Ein Besucher deiner Website entscheidet innerhalb von 3 Sekunden  (manche Studien gehen sogar von unter 1s aus), ob er auf deiner Seite  bleibt oder eben zur Konkurrenz geht. 

Hierbei spielen neben einem tollen Look & Feel noch 6 weitere Faktoren eine wichtige Rolle:

1. Übersichtlicher Header: 

Deine Website-Navigation sollte klar und übersichtlich sein. Jeder User soll sofort erkennen können welche Inhalte er noch finden kann. Überlade die Navigation jedoch nicht. Falls dies der Fall ist, versuche durch ein DropDown  Menü deine Links besser zu strukturieren.  Zusätzlich sollte dein Logo hier untergebracht werden. 

2. Aussagekräftige Headline:

Überschriften sind sicherlich eines der wichtigsten Elemente auf deiner Website.  Durch die Schriftgröße und Dicke der Schrift sollte diese Headline besonders hervorgehoben werden. Da der Nutzer diesen Text als erstes wahrnimmt, solltest du ihn durch diese Headline begeistern. 

Spreche hier über Vorteile für den Kunden und nicht die Features deines Produktes oder deiner Dienstleistung. Genauso fehl am Platz sind hier Sätze wie bspw: “Willkommen bei Firma XYZ - wir bieten ABC an”. Der Kunde interessiert sich nicht für dich, sondern vielmehr dafür, wie du ihn bei seinem bestimmten Problem helfen kannst. 

Ein gutes Beispiel hierfür wäre bspw. : “Gesündere und Leistungsfähigere Mitarbeiter durch Firmenfitness” → Vorteil des Kunden: Gesündere und Leistungsfähigere Mitarbeiter. Wie erreichen wir das: Firmenfitness. 

3. Subheadline: 

Die Subheadline ist eine Unterüberschrift, mit der du die Aussage der primären Headline unterstreichen oder ergänzen kannst. Stelle dem User zusätzliche Informationen zur Verfügung. Wie genau oder durch was löst du die Probleme des Users?

4. Klarer Call-to-Action (CTA)

Ein CTA ist eine Handlungsaufforderung. Damit versuchst du den User zu einer bestimmten Aktion auf deiner Website zu animieren. Auf einer Website ist ein CTA in der Regel mit einem Link versehen, der den User auf eine Zielseite bringt, ein Pop-Up öffnet oder eine andere Aktion auslöst. Meistens nutzt man den CTA als Button. Zur Formulierung eines treffenden CTAs kannst du dir diese Fragen stellen: “ Was soll der User auf deiner Website tun?”, “Was genau passiert, wenn der User auf meinen Button / Link klickt?” oder “Welches Ziel verfolgt deine Website? “

• Der CTA sollte so klar wie möglich beschreiben was durch den Klick passiert. Bspw. : “Erstgespräch vereinbaren”. 
• Der CTA sollte sich vom Rest der Seite abheben.
• Der Nutzer soll durch das Erscheinungsbild des CTAs dazu gezwungen werden nirgends anders hinschauen zu können.
  

5. Starkes Bild:

Verwende ein aussagekräftiges Bild. Dieses kann die Funktion deines Produktes darstellen, ein Endergebnis davon oder, solltest du das Gesicht deines Unternehmens sein, dich darstellen.  Das Bild sollte nicht vom CTA ablenken. Im besten Fall lenkst du durch das Bild den Blick zum CTA.

In dieser Hero Section wird beispielsweise die Blickführung subtil zur Überschrift gelenkt. Durch den Blick des Trainers und die ausgestreckte Hand, die Richtung Headline zeigt, rückt der Textbereich in den Vordergrund.

Der kann auch noch stärker angewendet werden, beispielsweise durch ein großes Bild von einem Gesicht, dessen Augen in Richtung der Headline / des CTAs gerichtet sind.

6. Social Proof:

Social Proof entsteht dadurch, dass Menschen dir mehr Vertrauen schenken, wenn sie wissen, dass bereits viele andere Leute dir vertrauen. Du kennst es sicherlich von dir selbst. Nichts kann mehr Vertrauen erzeugen, als Meinungen von echten Kunden. Erzeuge daher durch Social Proof Vertrauen in deine Marke. Mit welchen Firmen hast du zusammengearbeitet? Hast du Testimonials? Wie viele Kunden hattest du schon?

Die meisten Unternehmen haben schon Rezensionen oder Bewertungen auf Plattformen wie Trustpilot, ProvenExpert oder Google. Schreibe (wenn bekannt) diese Kunden an und frage, ob du ihre Bewertung auf deiner Website veröffentlichen darfst. Noch glaubwürdiger wirken die Kundenstimmen mit einem Bild des Kunden.

Hier siehst du nochmal alle 6 Punkte am Beispiel eines Hero Section Entwurfs:

Was bringt die Hero Section? - Kurz gesagt

Eine gute Hero Section ist essenziell für den Erfolg deiner Website. Sie entscheidet über wichtige Kennzahlen die Absprungrate, Scrolltiefe, Aufenthaltsdauer oder Conversion-Rate.

Im Prinzip ist deine Hero Section wie ein sehr kurzer Pitch von deinem Unternehmen. Du versuchst innerhalb von wenigen Sekunden den Nutzer von deinem Angebot zu überzeugen und ihn dazu zu bewegen mit deiner Website zu interagieren oder eine Kontaktanfrage zu stellen.

Wenn du die oben genannten Faktoren berücksichtigst, kannst du deine Website selber schon sehr entscheidend verbessern. Bei hohen Anforderungen an das Design oder für die Formulierung klarer Texte / einer scharfen Positionierung ist es häufig sinnvoll, einen Freelancer oder eine Agentur mit an Board zu holen.

‍

Auf LinkedIn hat Yannik das wichtigste für eine gute Hero Section auch nochmal zusammengefasst:

‍

‍