Ratgeber

Hero Section: was oben auf deine Website gehört

Für Selbstständige im deutschsprachigen Raum · Lesezeit ca. 4 Minuten

Die Hero Section, auf Deutsch meist oberer Bildschirm, ist alles, was jemand von deiner Seite sieht, bevor er scrollt. Auf dem Handy sind das eine Überschrift, zwei Zeilen und ein Button. Mehr nicht. In diesem kleinen Rechteck entscheidet der Besucher, ob er weiterliest. Und auf den meisten Seiten steht dort ein Name, ein Slogan und ein schönes Foto, das nichts erklärt.

Die Prüfung

Zeig deine Seite auf dem Handy jemandem, der dich nicht kennt, fünf Sekunden lang. Dann Handy weg, und frag:

1. Was wird hier angeboten?
2. Für wen ist das?
3. Was soll ich jetzt tun?

Ist eine der drei Antworten falsch oder beginnt mit „Ich glaube ...", verliert deine Seite genau hier die meisten Besucher. Alles, was weiter unten steht, sieht dann kaum noch jemand.

Die Ursache

Der obere Bildschirm fühlt sich an wie eine Visitenkarte, also schreiben wir dort, wer wir sind. Der Besucher will aber wissen, was er davon hat. Dazu kommt die Scheu, sich festzulegen: Eine Überschrift, die alles offen lässt, schließt niemanden aus. Sie holt aber auch niemanden ab.

Die Lösung

Ein guter oberer Bildschirm besteht aus drei Bausteinen und einem Bild.

1. Die Überschrift sagt das Ergebnis. Nicht, was du tust, sondern was dein Kunde danach hat oder los ist. In seinen Worten, nicht in deinen Fachbegriffen.
2. Die Unterzeile sagt, für wen und wie. Hier darf stehen, was du machst, in einem konkreten Satz.
3. Der Button sagt, was beim Klick passiert. „Termin wählen", „Checkliste anfordern", nicht „Mehr erfahren". Mehr dazu im Ratgeber Call to Action.
4. Das Bild zeigt dich oder das Ergebnis. Nicht eine Stimmung. Ein echtes Foto schlägt jedes Stockbild.

Wenn Platz ist, darf unter dem Button eine Zeile Beleg stehen: ein echter Kunde, eine Zahl, die stimmt, oder eine Zusage, die die größte Sorge nimmt.

Beispiele vorher und nachher

Die ersten drei sind ausgedacht, damit das Muster sichtbar wird.

• Physiotherapie. Vorher: „Willkommen in der Praxis Sonnenschein." Nachher: „Nach der Knie-OP wieder laufen, ohne Angst vor dem nächsten Schritt." Unterzeile: „Physiotherapie mit Trainingsplan, bis zu deinem ersten Lauf."
• Steuerberatung. Vorher: „Ihr kompetenter Partner in allen Steuerfragen." Nachher: „Deine Steuererklärung als Selbstständiger, ohne Schuhkarton voller Belege." Unterzeile: „Ich hole die Unterlagen digital ab, du unterschreibst nur noch."
• Coaching. Vorher: „Coaching mit Herz und Verstand." Nachher: „Dein erstes Team führen, ohne jeden Streit selbst zu schlichten." Unterzeile: „Coaching für neue Führungskräfte, in acht Terminen."
• Ein echter Fall. Auf sculpturemallorca.com steht direkt unter der Überschrift: „Zeitgenössische Skulpturen für Garten, Terrasse und Innenhof. Ausgesucht auf Mallorca, geplant bei Ihnen vor Ort, fertig aufgestellt." Was, für wen, wie, in einem Satz. Zur Fallstudie.

Was oben nichts verloren hat

• „Willkommen auf meiner Website" oder ähnliche Begrüßungen, die Platz kosten und nichts sagen.
• Dein Name als Überschrift, solange du nicht schon bekannt bist.
• Ein Slider mit wechselnden Botschaften. Der Besucher sieht nur die erste.
• Zwei gleich laute Buttons mit verschiedenen Zielen.
• Ein Fenster, das sofort aufgeht und nach der E-Mail-Adresse fragt.

Häufige Fragen

Was ist eine Hero Section?

Der obere Bildschirm einer Website, also alles, was man sieht, bevor man scrollt: Überschrift, Unterzeile, Button und meist ein Bild.

Was gehört in die Überschrift der Startseite?

Das Ergebnis für deinen Kunden, in seinen Worten. Nicht dein Name, nicht dein Beruf und kein Slogan, der erst erklärt werden muss.

Wie lang darf die Überschrift sein?

So kurz, dass sie auf dem Handy in drei oder vier Zeilen passt. Klarheit geht vor Kürze: Eine längere Überschrift, die man versteht, schlägt eine kurze, über die man rätselt.

Brauche ich ein Bild im Hero?

Nicht zwingend. Wenn, dann ein echtes: du oder das Ergebnis deiner Arbeit. Ein Stockfoto verbraucht Platz, ohne etwas zu sagen.

Ein Button oder zwei?

Einer. Ein zweiter, deutlich leiserer Link für Unentschlossene ist in Ordnung, aber nie zwei gleich laute Buttons mit verschiedenen Zielen.

Wie teste ich meinen Hero?

Mit dem Fünf-Sekunden-Test: Zeig ihn jemandem, der dich nicht kennt, und frag danach, was angeboten wird, für wen, und was man jetzt tun soll.

Die Abkürzung

Den eigenen Hero liest man nie mit fremden Augen. Im Hero-Check gestalte ich ihn neu, mit Begründung, schriftlich in 48 Stunden, für 49 €.