Als Hero-Bereich bezeichnet man den auffälligen Abschnitt am Kopf einer Seite, der Besucher als Erstes empfängt. Typischerweise besteht er aus einer klaren Überschrift, ein bis zwei erklärenden Sätzen, einem Call-to-Action und einem großflächigen Bild oder Farbverlauf. Er liegt damit vollständig above the fold – in dem Bereich also, den man ohne Scrollen sieht.
Seine Aufgabe klingt einfach und ist anspruchsvoll: In wenigen Sekunden muss er beantworten, worum es hier geht, für wen das gedacht ist und was der nächste Schritt sein könnte. Gelingt das, bleiben Besucher. Gelingt es nicht, hilft auch der beste Inhalt weiter unten nicht mehr.
Was einen guten Hero-Bereich ausmacht
- Eine Überschrift, die den Nutzen benennt statt nur den Firmennamen
- Ein bis zwei Sätze, die das Angebot in Alltagssprache erklären
- Eine sichtbare, eindeutige Handlungsaufforderung
- Ein Bild, das zum Angebot passt und den Text nicht überlagert
- Kurze Ladezeit, denn dieses Bild ist meist das erste und größte
Gerade auf dem Telefon steht wenig Platz zur Verfügung. Ein Hero-Bereich, der am großen Bildschirm überzeugt, muss deshalb im Responsive Design mitgedacht werden – sonst rutscht die Handlungsaufforderung aus dem Blick. Auch die Core Web Vitals hängen an diesem Bereich, weil das Hero-Bild in der Regel bestimmt, wie schnell eine Seite sichtbar wird.