Hardik Dewra

2 min read

Was eine gute Hero Section leistet

Eine Hero Section hat vier Aufgaben. Produkt nennen, Käufer nennen, ein Ergebnis versprechen, eine Aktion anbieten. Der Rest da oben ist Deko.

Eine gute Hero Section hat eine Aufgabe

Eine Hero Section bringt die richtige Person dazu, weiterzuscrollen. Jemand landet, gibt dir ein paar Sekunden und entscheidet, ob die Seite von seinem Problem handelt. Alles, was ohne Scrollen zu sehen ist, arbeitet auf diese eine Entscheidung hin. Vier Dinge tragen sie: was das Produkt ist, für wen es ist, was sich dadurch ändert und eine klare Aktion. Slogans, Award-Badges und animierte Hintergründe nehmen diesen vieren den Platz weg.

Sag, was das Ding ist

Überschriften scheitern, wenn sie ein Gefühl statt eines Produkts beschreiben. „Denk neu, wie dein Team baut“ könnte ein CRM sein, ein Recruiting-Tool oder eine Yoga-App. „Projektmanagement für Baukolonnen, gebaut rund um Baustellenfotos“ sagt einem Leser in einer Zeile, ob er bleiben soll. Nimm das Kategoriewort, das dein Käufer selbst am Telefon benutzen würde. Wenn die Überschrift die Unterzeile braucht, um Sinn zu ergeben, macht die Überschrift zu wenig.

Nenn die Person, die du willst

Eine Zeile, die eingrenzt, leistet mehr, als die meisten Designer erwarten. „Für Shopify-Marken ab 50.000 $ Umsatz im Monat“ schickt die falschen Besucher weg und sagt den richtigen, dass sie hier richtig sind. Gründer fürchten, das macht den Markt kleiner. In der Praxis hebt eine benannte Zielgruppe die Qualität der Anfragen, weil die Leute, die dann buchen, schon halb überzeugt sind. Setz die Eingrenzung in die Unterzeile oder in die Dachzeile über der Überschrift.

Ein Versprechen und eine Aktion

Zwei gleich starke Buttons teilen die Aufmerksamkeit und senken die Klicks auf beide. Wähl die Aktion, die du am meisten willst, gib ihr den vollen Button, und mach aus der zweiten Option einen ruhigen Textlink. Der Button-Text sollte benennen, was als Nächstes passiert. „Meinen Seitenplan holen“ schlägt „Absenden“, und „Preise ansehen“ schlägt „Mehr erfahren“, weil der Leser weiß, was hinter dem Klick wartet. Nimm denselben Button-Text überall auf der Seite.

Zeig das Produkt bei der Arbeit

Deck die Überschrift mit der Hand ab und schau dir das Hero-Bild allein an. Wenn du nicht erkennst, was verkauft wird, ist das Bild Deko. Ein Screenshot der echten Oberfläche, ein Foto des Produkts in einer echten Umgebung oder ein kurzer Clip vom Ergebnis schlagen alle das lächelnde Stock-Model am Laptop. Wenn du eine Dienstleistung verkaufst, zeig das Ergebnis: die Seite, die du gestaltet hast, das Dashboard, den fertigen Report.

Setz einen Beleg neben den Button

Eine Zeile Beweis neben dem Call to Action räumt den ersten Zweifel weg, bevor er entsteht. Eine Logo-Reihe mit fünf Kunden, die Leute kennen, eine Bewertung mit der Zahl der Rezensionen, oder ein einzelnes Ergebnis mit einer echten Zahl. Jedes davon funktioniert. Halt es bei einem Beleg in der Hero Section und heb dir die Case Studies für spätere Abschnitte auf. Vage Trust-Badges ohne Quelle lesen sich meistens wie Füllmaterial.

Ein Fünf-Minuten-Test für deine Hero Section

Zeig die Hero Section jemandem außerhalb deiner Firma, fünf Sekunden lang. Deck sie ab und stell dann drei Fragen. Was verkauft das hier? Für wen ist es? Was passiert, wenn du auf den Button klickst? Zwei falsche Antworten von dreien heißen: Die Hero Section braucht eine neue Fassung, bevor irgendetwas darunter zählt. Mach den Test auch auf einem Handy-Bildschirm, denn dort liest der meiste Traffic, und der sichtbare Bereich ist viel kleiner.