Die „Hero Section“! Wieder so ein neuartiger Fachbegriff, von dem noch niemand gehört hat? Fachbegriff ja, neu nicht wirklich. Tatsächlich ist die Bezeichnung des „Heros“ (also des Helden) eine recht alte Bezeichnung aus dem Zeitungsdruck. Als Hero wird hier der Bereich oberhalb des Falzes (above the fold) bezeichnet, also das was man am Zeitungskiosk sieht, wenn die Zeitung dort gefaltet auf der Theke liegt. Sie werden sicherlich zustimmen, dass dieser erste Blick auf den Hauptartikel mit Bild und Headline entscheidet, ob Sie sich interessieren oder nicht. Ob Sie einen ersten Blick riskieren oder nicht – und, ob Sie die Zeitung kaufen oder nicht.
Genau dieses Prinzip lässt sich auch auf eine Website übertragen. Die Hero Section ist hier das, was der Besucher ohne zu scrollen auf den ersten Blick sieht. Ähnlich wie bei der Zeitung besteht die Hero Section aus einem Bild, das als Eyecatcher dient, einer Headline, die neugierig macht oder direkt verdeutlicht „hier bist du richtig“, einem kurzen leicht zu konsumierenden aussagekräftigen Text und idealerweise einer Handlungsaufforderung (CTA = Call To Act). Diese Handlungsaufforderung kann vieles sein, z.B. ein Bestellbutton, die Eintragung in einen Newsletter, eine Kontaktaufnahme oder auch einfach ein „Weiterlesen-Button“, der tiefer in das Thema führt und damit auch tiefer in die Homepage. Generell gibt es im Internet mehr Möglichkeiten als bei einem Printmedium. So kann eine Hero Section auch aus einem Slider bestehen oder statt einem Bild ein Video enthalten, animiert sein etc… die Möglichkeiten sind vielfältig. Gerade durch neue CSS3-Programmiermöglichkeiten lässt sich auch viel besser die Größe des Heros bildschirmunabhängig bestimmen, als noch vor ein paar Jahren. Mit der „Cover“-Funktion passt sich ein Abschnitt, bzw. Hintergrundbild beispielsweise immer dem kompletten Screen an.
Zurück zur ursprünglichen Frage: Hero Section? Brauch ich das?
Die Antwort: auf jeden Fall!
Eine gute Hero Section auf einer Website verringert die Absprungrate und erhöht die Verweildauer. Gerade im Internet hat man oft nur wenige Sekunden, um den Besucher zum Weiterlesen zu animieren.
Mehr noch, die Hero Section ist in der Lage, Kompetenz und Glaubwürdigkeit auszustrahlen, sich auf den ersten Blick zu positionieren und zu zeigen, für was und für wen man da ist. Ausserdem kann man durch ein gutes Hero Image und ein offenes, nicht überladenes Design eine Emotionalität hervorrufen, von Wow-Effekt (Kompetenz) über ein Schmunzeln (Sympathie) bis hin zum Kuschel-/Wohlfühlfaktor.
Dies alles ist natürlich nicht bloß blanke Theorie. Verschiedenste Studien zum Thema Hero Section untermauern diese Benefits. Wer könnte so etwas besser untersuchen als Google? Die Experten für Human Computer Interaction (HCI) und Visualisierung bei Google Research untersuchten mit ihrer Studie „The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments“ wie sich das Design einer Website auf den ersten Eindruck der Nutzer*innen auswirkt.
Die Autoren zeigten ihren Studienteilnehmern 119 Homepage Screenshots und fanden heraus, dass die visuelle Komplexität des ersten Eindrucks die ästhetische Wahrnehmung des Nutzers innerhalb der ersten 50 Millisekunden stark beeinflusst.
Fazit:
Eine gute Hero Section vermittelt einen optimalen ersten Eindruck, führt damit zu weniger Absprüngen und zu längerer Verweildauer der Besucher. Sie spricht Ästhetik an und Emotion und weckt Neugierde. Eine aussagekräftige Headline („Herzlich willkommen“ ist ein no go) und ein kurzer, auf den Punkt gebrachter, schnell konsumierbarer Text vermittelt Kompetenz und Vertrauen.
Für uns als Webentwickler ist es ziemlich eindeutig: das Hero Bild, das wir wählen, und die Art und Weise, wie wir es in eine Hero Section integrieren, beeinflusst die Stimmung und das Verhalten der Nutzer und damit den Erfolg einer Website in erheblichem Maße.
Wie wird Ihre Hero Section aussehen?
Wie wäre es mit einer Überarbeitung der Startseite Ihrer Homepage? Natürlich mit dem Hauptaugenmerk auf eine gute Hero Section, ganz individuell an Ihre Bedürfnisse und Ansprüche angepasst. Wir beraten Sie gerne.
