Hero-Section.

Die Hero-Section, auch Hero-Bereich oder Bühne genannt, ist der erste Bildschirm einer Seite. Hier stehen in der Regel die Hauptüberschrift, ein Satz zum Nutzen, ein Bild oder Video und ein Button. Für ein Unternehmen ist das die wichtigste Fläche der Website, weil hier entschieden wird, ob jemand weiterliest. In einer Blickverlaufsstudie der Nielsen Norman Group von 2018 entfielen rund 57 Prozent der Betrachtungszeit auf den Bereich, der ohne Scrollen sichtbar ist.

So funktioniert eine Hero-Section

Eine gute Hero-Section beantwortet drei Fragen: Was ist das, für wen ist es, und was ist der nächste Schritt? Die Überschrift benennt das Angebot, die Unterzeile den Nutzen, der Button den nächsten Schritt. Wie dieser Button formuliert sein sollte, erklärt der Eintrag zum Call to Action.

Technisch prägt der Hero-Bereich oft die Ladezeit. Die Kennzahl Largest Contentful Paint misst laut web.dev, wann das größte sichtbare Bild, Video oder der größte Textblock im Anzeigebereich dargestellt ist. Als gut gelten laut web.dev höchstens 2,5 Sekunden. Ein großes Titelbild oder Video ist deshalb häufig das Element, an dem sich diese Messung entscheidet. Mehr dazu steht im Eintrag zu den Core Web Vitals.

Worauf ihr im Unternehmen achten solltet

Schreibt die Überschrift für Kunden, nicht für das Leitbild. Ein Satz wie „Wir gestalten Zukunft" passt auf jedes Unternehmen. Konkreter wirkt, was ihr anbietet und für wen. In Relaunch-Projekten sehen wir oft, dass lange über die Bildwelt diskutiert wird und die Überschrift erst am Ende entsteht. Besser ist die umgekehrte Reihenfolge.

Ladet das Titelbild nicht verzögert. Laut web.dev sollte das Bild, das voraussichtlich das LCP-Element ist, nie per Lazy Loading geladen werden. Stattdessen empfiehlt web.dev, ihm mit dem Attribut fetchpriority eine hohe Priorität zu geben. Einblend-Effekte, die das Bild erst nach einem Skript zeigen, kosten zusätzlich Zeit.

Verzichtet auf automatisch wechselnde Slider. Jakob Nielsen rät, Karussells nur auf Wunsch der Nutzer weiterzuschalten, weil sich bewegende Inhalte schwer zu lesen sind und die Barrierefreiheit verringern. Die WCAG 2.2 verlangen auf Stufe A für Bewegung, die automatisch startet, länger als fünf Sekunden dauert und neben anderem Inhalt läuft, eine Möglichkeit zum Anhalten, Beenden oder Ausblenden. Das betrifft auch Hintergrundvideos.

Prüft den Hero-Bereich zuerst auf dem Handy. Auf kleinen Bildschirmen rutscht der Button schnell aus dem sichtbaren Bereich, wenn Bild und Überschrift zu viel Höhe beanspruchen.

Häufige Fragen zur Hero-Section

Brauchen wir ein Video im Hero-Bereich? Nein. Ein Video kann eine Leistung zeigen, die sich schwer beschreiben lässt. Es kostet aber Ladezeit und braucht nach den WCAG eine Pausenfunktion, wenn es länger als fünf Sekunden automatisch neben anderem Inhalt läuft.

Muss alles Wichtige ohne Scrollen sichtbar sein? Nein. Laut derselben NN/g-Studie scrollen Nutzer durchaus, die Aufmerksamkeit nimmt nach unten aber ab. Das Wichtigste gehört nach oben, Belege und Details dürfen folgen.

Hat jede Unterseite eine Hero-Section? Meist ja, aber kleiner als auf der Startseite. Auf einer Landingpage setzt sie fort, was die Anzeige versprochen hat, auf einer Leistungsseite benennt sie die Leistung.

Wie euer Hero-Bereich auf dem Handy wirkt und wo Besucher hängen bleiben, zeigt der kostenlose Design-Check.