Hero-Bereiche: Wie man sie optimal gestaltet

Der Hero-Bereich ist der große, prominente Block am oberen Rand einer Webseite, der Teil, den Besucher zuerst sehen und am schnellsten beurteilen. Hier stellt sich eine Seite vor: Was ist das, für wen ist es und was ist der nächste Schritt. Ein starker Hero zieht Besucher an und gibt den Ton für alles Weitere an. Ein schwacher hinterlässt Verwirrung oder Überzeugungsnotstand, und viele verlassen die Seite einfach, bevor sie überhaupt scrollen.

Trotz seiner Bedeutung wird der Hero-Bereich oft nur als Ort für ein schönes Bild und einen vagen Slogan betrachtet. Das ist eine verpasste Gelegenheit. Ein großartiger Hero ist ein funktionierender Teil der Seite mit einer klaren Aufgabe, und ihn gut zu gestalten, ist eine Fähigkeit, die jedes Unternehmen lernen kann. Dieser Leitfaden erklärt, wofür ein Hero-Bereich da ist, welche Elemente ihn effektiv machen und welche Muster einen Hero, der konvertiert, von einem trennen, der lediglich dekoriert.

Wozu ein Hero-Bereich wirklich dient

Ein Hero-Bereich hat eine Kernaufgabe: schnell Ihren Wert zu kommunizieren und den Besucher zum nächsten Schritt zu leiten. In den wenigen Sekunden, die ein Besucher damit verbringt zu entscheiden, ob er bleiben möchte, muss der Hero die Fragen beantworten, die ihm durch den Kopf gehen. Was macht dieses Unternehmen? Ist es für mich relevant? Was kann ich hier tun? Wenn der Hero klar antwortet, entspannt sich der Besucher und liest weiter. Wenn nicht, greift er nach dem Zurück-Button.

Deshalb ist ein Hero mehr als nur visuelles Flair. Er ist das Eröffnungsargument Ihrer Seite. Das Bild, die Überschrift und der Call to Action dienen diesem Argument gemeinsam. Wenn sie in dieselbe Richtung ziehen, wirkt der Hero mühelos und überzeugend. Wenn sie auseinanderziehen, versagt selbst ein schönes Design.

Die wesentlichen Elemente eines starken Hero-Bereichs

Ein großartiger Hero-Bereich besteht aus einer kleinen Anzahl von Elementen, von denen jedes eine spezifische Aufgabe hat. Fügt man zu viele hinzu, verschwimmt die Botschaft. Hier sind die Teile, die ihren Platz verdienen.

Eine Überschrift, die den Wert ausdrückt

Die Überschrift ist das Herzstück des Hero-Bereichs. Sie sollte in einfacher und spezifischer Sprache den Wert, den Sie anbieten, oder das Problem, das Sie lösen, darlegen. Vermeiden Sie abstrakte Slogans, die zwar poliert klingen, aber nichts Konkretes aussagen. Ein Besucher sollte Ihre Überschrift einmal lesen und sofort erfassen, was Sie tun und warum es für ihn wichtig ist. Spezifität schlägt Cleverness, und Klarheit schlägt beides.

Eine Unterüberschrift, die Details hinzufügt

Unter der Überschrift füllt eine kurze unterstützende Zeile die Details aus, die die Überschrift weggelassen hat. Wenn die Überschrift das Ergebnis benennt, kann die Unterüberschrift erklären, wie Sie es liefern oder für wen es ist. Kurz gehalten, bilden die beiden Zeilen zusammen ein vollständiges Wertversprechen, das ein vielbeschäftigter Besucher in Sekunden aufnehmen kann.

Ein klarer primärer Call to Action

Jeder Hero braucht einen offensichtlichen nächsten Schritt. Das bedeutet normalerweise eine prominente Schaltfläche mit aktionsorientiertem Text, der dem Besucher genau sagt, was passiert, wenn er klickt. Führen Sie mit einer einzigen primären Aktion anstelle mehrerer konkurrierender Schaltflächen, da eine Überlastung der Auswahl tendenziell zu gar keiner Auswahl führt. Wenn Sie eine sekundäre Option anbieten, geben Sie ihr ein deutlich geringeres visuelles Gewicht, damit die Hierarchie unmissverständlich bleibt.

Ein unterstützendes visuelles Element

Ein Bild, eine Illustration oder ein kurzes Video verleiht dem Hero seine visuelle Wirkung und kann Kontext schneller vermitteln als Worte. Die entscheidende Anforderung ist Relevanz. Das visuelle Element sollte Ihre Botschaft verstärken und idealerweise Ihr Produkt, Ihr Ergebnis oder Ihre Zielgruppe zeigen, nicht nur Platz mit einem generischen Stockfoto füllen. Ein aussagekräftiges visuelles Element hilft den Menschen, sich vorzustellen, wie sie davon profitieren; ein dekoratives verschwendet den prominentesten Platz auf der Seite.

Ein optionales Vertrauenssignal

Ein einzelnes, ehrliches Vertrauenssignal kann einen Erstbesucher beruhigen, ohne den Hero-Bereich zu überladen. Eine kurze Zeile Social Proof, ein wiedererkennbares Kundenlogo oder eine kurze Bewertung können die Aufgabe erfüllen. Eines genügt. Ein Stapel von Abzeichen im Hero-Bereich wirkt eher ängstlich als selbstbewusst.

Den Hero-Bereich für maximale Wirkung gestalten

Die richtigen Elemente zu haben, ist nur die halbe Miete. Wie Sie sie anordnen und gestalten, entscheidet darüber, ob der Hero klar und selbstbewusst oder überladen und verwirrend wirkt.

Eine starke visuelle Hierarchie aufbauen

Das Auge sollte zuerst auf die Überschrift, dann auf die unterstützende Zeile und dann auf den Button fallen. Verwenden Sie Größe, Gewicht, Farbe und Abstände, um diese Reihenfolge bewusst zu erzeugen. Wenn alles gleichzeitig schreit, wird nichts gehört. Ein schneller Test ist, den Hero-Bereich anzuschielen: Die Elemente, die prominent bleiben, sind diejenigen, die Ihre Botschaft tragen, und das sollten die sein, die Sie am meisten gesehen haben möchten.

Die Botschaft fokussiert halten

Die Versuchung, alles im Hero-Bereich zu sagen, ist groß und fast immer kontraproduktiv. Der Hero-Bereich ist die Eröffnung, nicht der gesamte Pitch. Vertrauen Sie darauf, dass der Rest der Seite Details liefert. Ein fokussierter Hero-Bereich mit einer klaren Botschaft und einer klaren Aktion ist einem überladenen überlegen, der versucht, jeden Vorteil auf einmal abzudecken.

Sicherstellen, dass der Text über Bildern lesbar bleibt

Eine häufige Falle ist es, Text direkt über ein geschäftiges Bild zu legen, so dass die Wörter schwer lesbar werden. Wenn Sie Text über ein visuelles Element legen, stellen Sie sicher, dass genügend Kontrast vorhanden ist, vielleicht durch eine abgedunkelte Überlagerung, ein massives Panel hinter dem Text oder ein Bild mit einem ruhigen Bereich, in dem Wörter platziert werden können. Lesbarkeit ist niemals optional, egal wie auffällig das Foto ist.

Für jeden Bildschirm gestalten

Ein Hero-Bereich, der auf einem breiten Desktop-Monitor ausgewogen aussieht, kann auf einem Telefon auseinanderfallen, wobei die Überschrift schrumpft, der Button unter dem ersten Bildschirm verschwindet oder das Bild alles dominiert. Da die meisten Besucher auf einem Telefon ankommen könnten, gestalten Sie den Hero-Bereich so, dass die Überschrift und der primäre Button auf kleinen Bildschirmen sichtbar und lesbar bleiben. Vorschau Sie den Hero-Bereich immer auf einem Telefon, nicht nur auf einem Laptop.

Ladezeit beachten

Ein großes Hero-Bild ist wertlos, wenn es mehrere Sekunden zum Laden benötigt. Während es lädt, starren Besucher auf leeren oder fehlerhaften Raum und erhalten einen schlechten ersten Eindruck. Optimieren Sie Hero-Bilder sorgfältig, damit der obere Bereich der Seite schnell gerendert wird, und überlegen Sie, wie das Layout aussieht, bevor das Bild vollständig geladen ist.

Häufige Hero-Fehler, die es zu vermeiden gilt

Selbst durchdachte Designs tappen in ein paar bekannte Fallen. Diese zu vermeiden, hält Ihren Hero-Bereich funktionsfähig.

Der vage, nur aus Slogan bestehende Hero-Bereich

Ein Hero-Bereich mit einem poetischen Slogan und einem schönen Bild, aber ohne klare Aussage darüber, was Sie tun, lässt Besucher raten. Wenn ein Fremder allein aus dem Hero-Bereich nicht erkennen kann, was Ihr Unternehmen anbietet, erfüllt er seine Aufgabe nicht. Ersetzen Sie vage Sprache durch Spezifisches.

Der überladene Hero-Bereich

Einige Hero-Bereiche versuchen, mehrere Botschaften, mehrere Schaltflächen und einen dichten Textblock unterzubringen. Das Ergebnis überfordert, anstatt zu überzeugen. Reduzieren Sie den Hero-Bereich auf eine Botschaft und eine primäre Aktion, und lassen Sie die Seite darunter den Rest erledigen.

Das rein dekorative visuelle Element

Ein generisches Stock-Bild, das keinen Bezug zu Ihrem Angebot hat, fügt nichts hinzu und kann sogar das Vertrauen untergraben. Wählen Sie visuelle Elemente, die Ihre spezifische Botschaft verstärken, oder verwenden Sie ein klareres Design anstelle von Füllbildern.

Der versteckte Call to Action

Wenn der wichtigste Button zu unauffällig gestaltet ist oder zu weit unten platziert ist, um auf dem ersten Bildschirm zu erscheinen, werden viele Besucher niemals handeln. Machen Sie die primäre Aktion innerhalb des Hero-Bereichs sichtbar und einladend.

Wie der Hero-Bereich mit dem Rest der Seite verbunden ist

Ein Hero-Bereich funktioniert nicht isoliert. Er gibt ein Versprechen ab, das der Rest der Seite einhalten muss. Wenn der Hero-Bereich besagt, dass Sie ein bestimmtes Problem lösen, sollten die folgenden Abschnitte erklären, wie, Beweise zeigen und Vertrauen in dieselbe Aktion aufbauen, die der Hero-Bereich eingeführt hat. Ein subtiler Hinweis darauf, dass weiterer Inhalt folgt, wie z.B. das Hineinblicken des nächsten Abschnitts in den unteren Bereich des Bildschirms, lädt Besucher ein, weiterzumachen. Der Hero-Bereich beginnt die Geschichte; die Seite erzählt sie.

Gut gestaltet, wird der Hero-Bereich zum wertvollsten Block Ihrer Seite und trägt mehr als jeder andere dazu bei, Besucher zu binden. Für den breiteren Kontext, wie er in ein vollständiges Projekt passt, siehe unseren Leitfaden für kundenspezifisches Webdesign. Der Hero-Bereich ist eng mit der breiteren Idee der Gestaltung dessen, was Besucher zuerst "above the fold" sehen, verbunden und spielt eine zentrale Rolle im Landingpage-Design.

Häufig gestellte Fragen

Referenzen

1. Nielsen Norman Group, "Die wichtigsten Elemente einer Webseite" — nngroup.com
2. Smashing Magazine, "Effektive Hero-Bereiche gestalten" — smashingmagazine.com

Wünschen Sie sich einen Hero-Bereich, der Besucher anzieht? Erfahren Sie mehr über unseren Ansatz zum Webdesign, oder kontaktieren Sie uns, um Ihr Projekt zu besprechen.