UX Serie: #1 Website-Hero – Darauf sollten Sie achten

  • UI/UX Reihe
  • Webdesign
Lesedauer: ca. 12 min

Im ersten Teil unserer User-Inferface- und User-Experience-Serie dreht sich alles um den Helden Ihrer Webseite: den Website-Hero. Wir beleuchten wesentliche Aspekte des Heros und zeigen worauf zu achten ist. Notiz am Rande: Im Folgenden beziehen wir uns (vorerst) nur auf den Hero, der sich above-the-fold befindet.

Inhalt

    Worum es in dieser Serie geht

    Moderne, stylische Webseiten reichen längst nicht mehr aus um Besucher und potenzielle Kunden zu begeistern. Benutzererfahrung (User Experience, kurz UX) und Bedienbarkeit (Usability) prägen mehr als je zuvor den Besuch einer Webseite. Sie sind maßgebliche Faktoren für Absprünge und Conversions. In unserer UI/UX-Reihe gehen wir deshalb näher auf die Themen User Experience und Usability ein. Dabei beleuchten wir wesentliche Bestandteile und Bausteine einer Webseite, zeigen auf wie sie die Benutzererfahrung und Bedienbarkeit beeinflussen und wie sie für User optimiert werden können.

    Wer steckt hinter der Maske des Website-Heros?

    Haben Sie in letzter Zeit mal ein paar Webseiten besucht? Klar, blöde Frage, Sie sind ja sogar jetzt im Moment auf einer – und was für einer! Aber denken Sie mal etwas weiter zurück. Was ist Ihnen bei den Webseiten als erstes aufgefallen? Es ist wohl nicht sonderlich gewagt zu behaupten, dass es ein Website-Hero (auch Hero-Image, Hero, dt. Heldenbild) war.

    Es gibt sie in den verschiedensten Formen und Farben. Groß, klein, grell leuchtend, matt pastellfarben mit Text, Illustrationen, Animation und Buttons. Die Anzahl an Möglichkeiten ist schier endlos. Ihre Gemeinsamkeit ist der Zweck: Auffallen um jeden Preis! Sonderlich schwer fällt Ihnen das nicht. Denn es liegt in ihrer Natur:

    Die Maske fällt

    Ein Hero-Image ist ein meist am Anfang einer Seite platziertes Banner-Bild, das sich in der Regel über die gesamte Bildschirmbreite erstreckt. Damit ist es oftmals das erste, was ein Besucher auf einer Webseite sieht. Er soll die Besucher zum Staunen bringen. Einen förmlichen WOW-Effekt auslösen und Aufmerksamkeit auf sich ziehen. Auf diese Weise wird dem Besucher in kürzester Zeit ein Überblick über relevante Informationen vermittelt. Er erkennt den Kontext der Webseite und worum es inhaltlich geht.

    Die Möglichkeiten sind also vielfältig und dem Hero sind nahezu keine Grenzen gesetzt. Das ist hervorragend! Denn so kann er sich perfekt an den individuellen Anforderungen einer Webseite ausrichten lassen. . Es gibt zahlreiche Beispiele dafür, wie Heros sich an den Zweck einer Webseiten anpassen.

    • E-Commerce: Bestseller oder neue/saisonale Produkte
    • Leadgenerierung: Anmeldeformular/ E-Mail-Feld
    • Restaurant: Slider (auch Hero-Slider, dt Schieber) mit Fotos von Gerichten

    Im Folgenden wollen wir verstärkt auf die benutzerorientierte Gestaltung eines Website-Heros eingehen. Das Hauptaugenmerk liegt dabei auf den Möglichkeiten und Herausforderungen den Hero einer Webseite für Besucher zu optimieren. Das Ziel ist die allgemeine, übergreifende Benutzererfahrung durch gezielte Maßnahmen nachhaltig zu verbessern.

    Das Bild eines Helden – Hintergrund des Website-Heros

    Kein Hero ohne Hintergrund. Ganz einfach. Neben einfachen Bildern zählen dazu im engsten Sinne auch einfarbige Flächen oder Farbverläufe. Diese Arten werden als statischer Hintergrund zusammengefasst. Ebenso denkbar sind dynamische Hintergründe wie Videos und Slider. In diesem Beitrag gehen wir vorerst nur auf statische Hintergründe ein.

    Bei der Wahl des Hintergrunds sollte die übergeordnete Strategie beachtet werden: Was soll dem Besucher vermittelt werden? Welche Botschaft passt zur jeweiligen Webseite und wie kann der Besucher diese am einfachsten erfassen? Egal für welche Ausführung man sich entscheidet, jede Möglichkeit birgt Herausforderungen und Vorteile.

    Bilder

    Zu dieser Art von Hero-Hintergrund zählen nicht nur Fotografie, sondern auch Abbildungen und sonstige Illustrationen. Mit Ihnen lässt sich dem Besucher auf den ersten Blick vermitteln, was ihn auf der Webseite erwartet. Bestenfalls ist man sich der Motivation seiner Besucher bewusst und wählt ein Bild aus, das zur jeweiligen Intention passt und somit weitere Interaktion fördert. Man muss sich die Frage stellen, ob beispielsweise Emotionen oder ein Lifestyle vermittelt werden soll. Gegebenenfalls sind auch Produktbilder oder dienstleistungsbezogene Bilder die bessere Option. Unabhängig davon sollte man unter Anderem folgende Punkte beachten:

    Bildqualität: Die Auflösung der Bilder sollte ausreichend hoch sein. So kann es problemlos skaliert und auf verschiedenen Bildschirmgrößen dargestellt werden.

    Hochwertigkeit: Das Bild sollte angemessen für den Zweck und optisch ansprechend für Besucher gestaltet sein. Oftmals lohnt es sich in professionelle Fotografien vom Fachmann zu investieren.

    Bildausschnitt: Gegebenenfalls besitzt das Bild einen besonderen Bildabschnitt, der angezeigt werden soll. Dann ist sicherzustellen, dass dieser auf allen Bildschirmgrößen entsprechend angezeigt oder positioniert wird. Gegebenenfalls gilt es für unterschiedliche Bildschirmgrößen individuelle Hintergrundbilder zu verwenden.

    Ausschnitt besonderer Bildabschnitte auf verschiedenen Bildschirmgrößen
    Großer Bildschirm mit dargestelltem, besonderen Bildausschnitt (links) und kleiner Bildschirm mit abgeschnittenem, besonderen Bildausschnitt (rechts).

    Dateiformat: Mit modernen Bildformaten wird die Performance gesteigert und große Ladezeiten vermindert. Gerade bei größeren Bildern lohnt es sich die Dateien in die Formate JPEG 2000, JPEG XR oder WebP zu konvertieren.

    Dateigröße: Zugegebenermaßen, die Komprimierung von Bilddateien kann oftmals zu Qualitätsverlust führen. Allerdings hat ein noch so gestochen scharfes Bild keine Möglichkeit Ihre Besucher zu erreichen, wenn es zu lange lädt. Wie so oft: die Mischung macht’s. Es sollte ein passender Kompromiss aus Qualität und Bildgröße gefunden werden. Möglichkeiten hierfür sind die bereits erwähnten modernen Bildformate oder verlustfreie Komprimierungsalgorithmen.

    Kontrast: Gerade, wenn der Hero Textelement, Schaltflächen o.Ä. enthält ist ausreichender Kontrast unabdingbar. Auch hier gilt es wieder die Balance zu finden. Einerseits soll das Bild seine volle Wirkung entfalten und andererseits der Inhalt gut leserlich und erkennbar sein. Desweiteren spielt der Kontrast eine wesentliche Rolle für die Gestaltung einer visuellen Hierarchie des Inhaltes (mehr dazu in Folgekapitel).

    Ausschnitt besonderer Bildabschnitte auf verschiedenen Bildschirmgrößen
    Hero mit schlechtem Kontrast (links) und Hero mit gutem Kontrast (rechts).

    Farbflächen und -verläufe

    Anstelle eines Bildes werden oft auch einfach farbige Hintergründe verwendet. Dieser Art von Hintergrund eignet sich vor allem dazu Augenmerk auf die Marke oder die Corporate Identity des Unternehmens zu legen. Besonders, wenn primäre oder sekundäre Akzentfarben Ihres Corporate Design verwendet werden.

    Von links nach rechts: Einfarbiger Hintergrund, Farbverlauf als Hintergrund, Verzierter, dekorierter Hintergrund

    Dateiformat: Wenn es nicht nur eine einfarbige Fläche oder ein Verlauf ist, bietet sich oftmals die Verwendung von SVG-Dateien (Scalable Vector Graphics) an. Diese haben den Vorteil, dass sie aufgrund der geringen Größe schnell geladen werden können. Darüberhinaus werden sie auf allen Bildschirmen stets scharf angezeigt.

    Banding: Ein sehr spezifischen Problem bei Farbverläufen. Es bezeichnet die abgestufte Darstellung eines Verlaufes anstelle eines weichen Übergangs. Banding tritt beispielsweise auf, wenn der Farbverlauf sich über weite Strecken erstreckt, oder die Farben den Verlaufes nah beieinander liegen.

    Darstellung von Banding und weicher Gradient
    Farbverlauf mit Banding (links) und weicher Verlauf (rechts)

    Wie auch bei normalen Bildern sollte hier auf Bildqualität, Hochwertigkeit, Größe und ausreichend Kontrast geachtet werden.

    Mischformen

    Oftmals findet sich auch eine Mischung der genannten Hintergrundarten. Somit lässt sich bis zu einem gewissen Grad, die Vorteile beider Bildformen realisieren. Ein einfaches Beispiel hierfür ist eine transparente Farbfläche, die über ein Bild gelegt wird.

    Weitere technische Details zur Optimierung von Bildern für den Einsatz im Hero und auf der Webseite im allgemeinen zeigt dieser Artikel zur Bildoptimierung auf.

    Besucher mit dem Website-Hero erreichen

    Bei der Gestaltung des Hero-Images sollte man sich eins vor Augen führen: Es gibt zwei Arten von Besuchern auf einer Webseite. Die mit direkter und die mit indirekter Intention. Erstere sind z.B. Personen, die aufgrund einer Empfehlung direkt nach Ihnen suchen. Aufgrund dieser Empfehlung und des einhergehenden Social Proofs, sind diese Besucher weniger anfällig für Schwierigkeiten im Umgang mit der Navigation auf Ihrer Webseite. Dem Gegenüber stehen Besucher mit indirekter Intention. Beispielsweise Personen die im Internet nach einem Produkt/ einer Dienstleistung suchen und über ein Suchanzeigenergebnis auf Ihrer Webseite landen. Diese Gruppe besitzt eine geringere Frustrationsgrenze und weist daher eine erhöhte Absprungchance auf. Der Grund hierfür sind mangelhafte Navigationskonzepte sowie eine geringe Zugänglichkeit relevanter Informationen. Ein Hero (und die Webseite bestenfalls im Allgemeinen) sollte stets so ausgelegt sein, dass spontane oder einmalige Besucher dieselbe Erfahrung machen, wie Besucher, die sich auf der Webseite bereits auskennen.

    Größe des Website-Heros

    Zur Steigerung der Bedienbarkeit spielt die Größe des Heros eine zentrale Rolle. Ein großer Website-Hero nimmt viel Platz auf der Webseite in Anspruch und versperrt den Zugang zu weiteren Inhalten. Das kann Fluch und Segen zugleich sein. Große Heros sind kein Problem, wenn sie nur oder zumindest größtenteils relevante Informationen für den Besucher enthalten. In diesem Fall fungiert der Hero als eine Art Dashboard, das alle relevanten Informationen enthält. Zusätzlich werden weitere Inhalte schnell und erkenntlich zugänglich gemacht.

    Der Vorteil hierbei ist, dass der Besucher nicht extra nach spezifischen Informationen suchen muss. Er hat sie unmittelbar und übersichtlich zur Hand. Dem gegenüber stehen große Heros ohne nennenswerte Informationen oder Navigationsoptionen. Sie erschweren dem Besucher maßgeblich die Orientierung auf der Webseite. Ebenso wird die Zugänglichkeit zu relevanten Inhalten immens beeinträchtigt, da diese sich meist darunter befinden. Dabei ist ebenso zu beachten, dass der Hero auf unterschiedlichen Endgeräten auch verschieden viel Platz einnimmt.

    Artikel Blog UIUX Hero-Image Flächenabdeckung eines konstaten Heros auf verschiedenen Geräten
    Darstellung eines Heros mit konstanter Höhe auf unterschiedlichen Geräten

    Was auf großen Bildschirmen also noch überschaubar ist, kann auf kleineren schnell zu Orientierungslosigkeit führen. Gegebenenfalls kann ein dynamischer Hero hier Abhilfe schaffen. Hierbei wird in Abhängigkeit vom Endgeräte ein entsprechender Hero angezeigt. Der klare Vorteil dabei ist, dass die Zugänglichkeit von weiteren Inhalten stark vereinfacht wird.

    Inhalt des Website-Heros

    Neben der Größe ist auch der Inhalt des Heros maßgeblich für die Benutzererfahrung. Stellt sich nur die Frage welcher Inhalt rein soll. Ganz so reinfach lässt sich das allerdings nicht beantworten. Denn der Inhalt richtet sich stark nach Funktion und Zweck der Webseite. Auch die Intention der Besucher ist zu berücksichtigen. Als Faustregel gilt: Die Interessen der Besucher müssen erkannt und in den Vordergrund gestellt werden. Ebenso ist das Anführen von Vorteilen für Besucher von großer Bedeutung. Bloße Merkmale oder Beschreibungen des Unternehmens weisen für ihn keinen klaren Nutzen. Beispiele, die keinen Nährwert für den Besucher besitzen, sind unter Anderem:

    Firmenname oder -logo: Verständlicherweise will man sein Unternehmen präsentieren und bestenfalls sogar im Gedächtnis bleiben. Jedoch sollte man sich hier in die Rolle des Besuchers hineinversetzen. Denn im Regelfall ist dies für den Besucher nicht von primärem Interesse. Viel mehr möchte er erfahren, ob er auf dieser Webseite findet, was er sucht. Dabei ist irrelevant ob es sich um Dienstleistungen, Produkte, Entertainment oder Ähnliches handelt. Im Zentrum steht der Besucher und seine Bedürfnisse – nicht das Unternehmen.

    Inhaltslose Texte: Ebenso ungebräuchlich für den Besucher wie Firmenname sind inhaltslose Texte. Phrasen wie „Willkommen auf unserer Webseite“ oder gar ganze Unternehmenshistorien besitzen keinen relevanten Inhalt für den Besucher.

    Leere Heros: Ein text- und inhaltloser Hero ist besonders schwierig, wenn er flächendeckend ist. Wenn er also das komplette Sichtfeld der Webseite einnimmt. Der Besucher sieht folglich nur ein großes Bild. In gewissem Rahmen lässt sich hierdurch eine gezielte Botschaft übermitteln. Diese ist jedoch für den Besucher gleichermaßen uninteressant, wenn er nicht weiß, wie er damit interagieren soll. Im schlimmsten Fall weiß der Besucher nicht, ob er da gelandet ist, wo er hinwollte oder dort für ihn relevanten Inhalt vorfindet. So wird nicht nur die Bedienbarkeit der Webseite sondern die allgemeine Benutzererfahrung stark beeinträchtigt.

    Website-Hero im Gesamtkontext der Webseite

    Neben einer geeigneten Größe und optimalem Inhalt muss der Hero sich auch nahtlos in den Gesamtkontext jeder Seite einfügen. Ein durchdachtes, seiten-übergreifendes Hero-Konzept steigert Zugänglichkeit, Bedienbarkeit und Immersion der Besucher. Hierdurch erzielt man eine allgemein erhöhte Benutzererfahrung.

    Anpassung des Heros für Unterseiten: Was auf der Startseite noch hervorragend funktioniert muss nicht immer auch auf Unterseiten passen. Der Inhalt ist entscheidend. Er sollte auf den Kontext der jeweiligen Unterseite angepasst sein. Dazu ist es gegebenenfalls erforderlich einen individuellen Hero für einzelne Web- bzw. Unterseiten zu entwerfen. Der Aufwand kann sich dabei durchaus lohnen. Denn die meisten Besucher schauen sich nicht nur eine einzige Seite an. Viel mehr springen Sie zwischen verschiedenen Seiten hin und her. Jeder Klick stellt dabei eine Möglichkeit zum Absprung dar. Durch individuelle Heros mit angepassten Inhalten verringert sich diese Chance.

    Calls-To-Action: Mit CTAs im Hero lässt sich das Verhalten der Besucher teilweise steuern. Durch auffällige, anregende Aufforderungen können Besucher schnell auf spezifische Inhalte weitergeleitet werden. Beispiele hierfür sind besondere Merkmale eines Produktes oder einer Dienstleistung sowie auch Kontaktmöglichkeiten. Auf diese Weise muss der Besucher nicht erst nach diesen Inhalten suchen. Dies spielt vor allem im Gesamtkontext einer Webseite eine große Rolle. Für gewöhnlich sind Webseiten modular aus einzelnen Abschnitten und Sektionen aufgebaut. Sind CTAs zu relevanten Inhalten erst in Folgeabschnitten platziert, fördert das die Chance, dass der Besucher nicht auf die entsprechenden Inhalte zugreift. (Mehr zu CTAs und was dabei zu beachten ist finden Sie in unserem Artikel Call-to-Action: Wie verwende ich einen CTA?)

    Artikel Blog UIUX Hero-Image modularer Aufbau einer Website
    Zugänglichkeit der CTAs einer Webseite

    Es besteht die Gefahr, dass der Besucher die jeweiligen CTAs nicht wahrnimmt bzw. daran vorbei scrollt oder die Stelle gar nicht erst erreicht. Deshalb macht es durchaus Sinn, zentrale Inhalte direkt über den Website-Hero zugänglich zu machen. Denn auf diese Weise kann man Besucher gezielt steuern und sie mit überzeugenden Informationen für sich zu gewinnen.

    Visuelle Hierarchie: Sie spielt eine ebenso erhebliche Rolle bei der Gestaltung des Heros. Durch Farben, Größe des Inhalts und Animationen kann man die visuelle Hierarchie des Heros beliebig anpassen. Diese Hierarchie lässt sich nutzen, um die Wahrnehmung der Besucher gezielt zu beeinflussen. Auf diese Weise nimmt der Besucher zentrale Informationen, Argumente und Handlungsaufforderungen Schritt für Schritt und in der vorgegebenen Reihenfolge wahr. Der Inhalt sollte also visuell so ausgearbeitet sein, dass überzeugende Inhalte (USPs, Produktmarkmale) zuerst ins Auge stechen.

    Visuelle Hierarchie von zwei Hero-Konzepten
    Darstellung von zwei Hero-Konzepten mit unterschiedlicher visueller Hierarchie. Links: Fokus auf Text, rechts: Fokus auf Abbildung.

    Zusammenfassung

    Website-Heros sind heutzutage zentrale Elemente von modernen Webseiten. Sie erregen Aufmerksamkeit, ziehen Blicke auf sich und sind vielseitig einsetzbar. Aufgrund dieser zentralen Eigenschaften beherbergen sie ein großes Potenzial für Seitenbetreiber und Besucher. Vor allem hinsichtlich Benutzererfahrung und Bedienbarkeit einer Webseite sorgt ein passender Website-Hero für immense Vorteile und höhere Zufriedenheit auf Seiten der Besucher. Jedoch stellt sich der Optimierung des Heros eine Vielzahl von Herausforderungen entgegen. Es zahlt sich allerdings aus diese anzugehen und zu bewältigen. Denn durch eine exzellente Benutzererfahrung lässt sich nachhaltig die Absprungrate der Besucher senken. Und, unter uns Seitenbetreibern: Lieber behalten wir die Besucher doch nah bei uns.

    Lassen Sie uns über dieses Thema sprechen

    Jetzt kontaktieren
    Jetzt bei blauvoll anrufen E-Mail an blauvoll senden