Hero Image

Was ist ein Hero Image?

Hero Image ist ein Begriff aus dem Webdesign, der das vollbildschirmgroße Video, Foto, die Illustration oder das Banner beschreibt, das Besucher auf einer Webseite willkommen heißt. Das Bild hat immer einen prominenten Platz nahe dem oberen Bereich einer Webseite, manchmal erstreckt es sich über die gesamte Breite des Bildschirms. 

Auch als Hero Header oder Hero Section bekannt, dient es nicht nur als erster Eindruck eines Benutzers von Ihrem Unternehmen, sondern auch als wichtiger Bestandteil der User Experience Ihrer Website.

Das ideale Hero Image wird:

• Die Aufmerksamkeit des Benutzers auf sich ziehen
• Ihren Mehrwert visuell demonstrieren
• Dem Benutzer helfen, genau zur richtigen Information zu navigieren

Quelle: Optimizely

Neben einer hochauflösenden Grafik kann und sollte ein Hero Image den Alleinstellungsmerkmal (USP) Ihres Unternehmens enthalten. Sie können es auch mit einem Conversion-Ziel verknüpfen, wie z. B. einem Anmeldeformular oder einem Call-to-Action-Button. 

Tauchen Sie tiefer in das „Was“, „Warum“ und „Wie“ von Hero Images ein, einschließlich: 

• Warum Webdesign Hero Images priorisieren sollte

• Die verschiedenen Typen von Hero Images

• 3 (wichtige) Dinge, die Sie beim Erstellen von Hero Images beachten sollten

• Großartige Hero Image Beispiele

• So testen Sie verschiedene Hero Images mit A/B-Testing 

• Hero Image Testideen

Warum sollten Hero Images im Webdesign priorisiert werden?

Menschen sind sehr visuell veranlagt, daher kann ein qualitativ hochwertiges Vollbild-Bild am oberen Rand der Seite einen positiven ersten Eindruck erzeugen. 

Die Wahl des richtigen Hero Images – ob es sich um ein hochwertiges Foto, Video oder eine Illustration handelt – lässt Ihre Besucher sofort wissen, dass sie am richtigen Ort sind. Hero Images auf Medienseiten und Blogs können auch verwendet werden, um die Aufmerksamkeit der Besucher zu fesseln und sie dazu zu bringen, die Artikel auf der Seite zu lesen. 

Zusätzlich zu einem Muss für eine ansprechende User Experience (UX), fügt ein Hero Image auch Wert hinzu, indem es Benutzer zu einem gewünschten Link oder  Call-to-Action leitet oder die  Value Proposition Ihres Unternehmens am oberen Rand der Webseite präsentiert.

Was sind die verschiedenen Typen von Hero Images?

Ihre Hero Images helfen dabei, Ihre Value Proposition für Ihre Zielgruppe hervorzuheben, sobald diese auf der Seite landen. 

Durchstöbern Sie Ihre Lieblingsseiten und Sie werden diese Typen von Hero Images sehen: 

1. Produktfotografie: Für viele Direct-to-Consumer-Marken und E-Commerce-Unternehmen ist Produktfotografie oder ein Karussell die richtige Wahl, da es Ihren Besuchern sofort zeigt, was auf Ihrer Website verfügbar ist. 
2. Sizzle Reels: Für neue Produkte oder Unternehmen, die Dienstleistungen anbieten, ist ein Vollbild-Video, bekannt als Sizzle Reel, die richtige Wahl. Sizzle Reels sind die perfekte Ergänzung für eine Landing Page, da sie sowohl Informationen als auch Emotionen mit sehr wenig Platz auf der Seite vermitteln. 
3. Produktvorteil- und emotionale Bilder: Wenn Sie einen Vorteil oder ein Gefühl verkaufen, das mit Ihrem Produkt oder Ihrer Dienstleistung verbunden ist, könnte Ihr Hero Image emotional sein: Es könnte Menschen, Orte zeigen. 
4. Informationsgetriebene Bilder: Hero Images und Karussells sind auch eine großartige Möglichkeit, Informationen über neue Produkte und Funktionen, zeitlich begrenzte Angebote und Verkäufe zu teilen. Typografie-only Hero Images können auch verwendet werden, um wichtige Statistiken über Ihr Produkt, Ihre Kunden oder Ihre Branche zu teilen. 

3 Dinge, die Sie bei der Verwendung von Hero Images beachten sollten 

Angesichts ihrer Bedeutung möchten Sie, dass Ihre Hero Images hart für Sie arbeiten. Aber es gibt ein paar Dinge, an denen Sie zuerst hart arbeiten müssen. 

1) Stellen Sie sicher, dass Ihre Bilder die richtige Größe haben

Wenn Bilder nicht die richtige Größe in Ihrem Hero-Bereich haben, wird es ehrlich gesagt schlecht aussehen. Angesichts der meisten Bildschirmgrößen auf dem heutigen Markt sollte ein Vollbild-Hero Image 1280px mal 720 Pixel bei einem Seitenverhältnis von 16:9 haben, um sicherzustellen, dass es die Ladezeit nicht beeinträchtigt. Sie sollten auch sicherstellen, dass sie auf einem schnellen CDN gehostet werden. Bei der Auswahl Ihrer mobiloptimierten Bilder sollten Sie auf 800 x 1.200 Pixel abzielen.

Aber es geht nicht nur darum, wie es auf der Seite aussieht. Die Ladezeit, sowohl für Mobilgeräte als auch für Desktop, ist ebenfalls sehr wichtig für die User Experience. Basierend auf Googles Forschungsergebnissen wurde nachgewiesen, dass eine Erhöhung der Seitenladegeschwindigkeit von 0,4 auf 0,9 Sekunden den Traffic um 20 % reduzieren kann. Die gesamte Wirkung Ihres Hero Images geht verloren, wenn es letztendlich Traffic ablenkt, bevor es überhaupt geladen ist.

Erwägen Sie, dass Ihr Designteam Hero Image Vorlagen erstellt, in denen Sie bei jedem Bild „zwischen den Linien ausmalen“ können. 

2) Wählen Sie Visuals, die dem Kunden Mehrwert bieten

Ob Sie Produktbilder, ein Sizzle Reel Video oder ein Stockfoto wählen, Ihr Bild sollte die Botschaft vermitteln, die Ihre Kunden am meisten empfangen sollen. Versuchen Sie, irrelevante oder mehrdeutige Bilder zu vermeiden.

Wenn Sie jemals unsicher sind oder sich mit Ihren Kollegen nicht einigen können, ist der beste Weg, um festzustellen, ob Sie die richtigen Produktbilder gewählt haben, sie zu testen. Das werden wir gleich behandeln.

3) Lassen Sie Ihr Hero Image herausstechen

Ihr Hero Image sollte visuelles Interesse auf einer Seite wecken. Es soll die Menschen, die es sehen, etwas fühlen lassen. Welches Medium Sie auch wählen, Ihre Bilder sollten auf der Seite herausstechen und Ihre Website von Ihren Mitbewerbern abheben.

Eine einfache Möglichkeit dazu ist, sicherzustellen, dass Sie Overlays, Farbverläufe und Typografie verwenden, um zu verhindern, dass ein Bild „flach“ auf der Seite liegt. Aber es gibt immer Raum, die Extrameile zu gehen, egal wie hoch Ihr Budget ist.

Denken Sie daran, dass ein sehr hohes Budget keine Voraussetzung für ein hochwertiges Hero Image ist. Auch wenn Sie Stockfotos möglichst vermeiden möchten, disqualifiziert deren Verwendung Ihre Website nicht für die Attraktivität bei Kunden. Sie könnten sogar Adobe Photoshop verwenden, um auch den einfachsten Stockfotos einen kreativen Touch zu verleihen. Selbst etwas so Einfaches wie das Hinzufügen von Filtern zu den von Ihnen ausgewählten Stockfotos wird ein kohärenteres Erscheinungsbild auf Ihrer gesamten Website erzeugen, als wenn Sie diese Bilder so verwenden, wie sie sind – und Sie können dies sogar in einem einfachen Tool wie Canva tun. 

5 großartige Hero Image Beispiele

Wenn Ihnen die Inspiration fehlt, haben wir einige großartige Hero Image Beispiele ausgewählt, um Ihnen zu zeigen, wie andere Unternehmen es machen. Schauen Sie sie sich an!

Target 

Bekannt für sauberes Design in allen Bereichen, ist es keine Überraschung, dass Targets Hero Images auf seiner Webpräsenz alle Anforderungen für starkes Design und klare Kommunikation erfüllen. 

Wir lieben dieses Hero Image, weil es ausgewogen, einfallsreich und klar markenkonform ist. Indem es die Möglichkeiten echter Spielzeuge, die in den Angeboten enthalten sind, mit einem klaren Call-to-Action in der Mitte präsentiert, weckt es Aufmerksamkeit und konvertiert zweifellos. 

Tatsächlich fesselt dieses Bild die Aufmerksamkeit des Betrachters so gut, dass das Target-Webdesign-Team direkt darunter eine gesponserte Leiste von Starbucks einfügte. Das Design ergänzt sogar das Hero Image und ist unserer Meinung nach noch wirkungsvoller. 

Chase 

Traditionelle Banken sind nicht bekannt für herausragendes UX-Design oder besonders kreatives Webdesign, aber manchmal ist Funktionalität alles. In diesem Sinne erfüllt das Hero Image auf Chases Homepage alle Anforderungen, auch wenn es bedeutet, einige überzeugende Designtrends hinter sich zu lassen. 

Die Value Proposition ist klar; das Bild ist sauber. Es ist auch ein großartiges Beispiel für ein Overlay, indem der Anmeldebereich für bestehende Kunden sichtbar bleibt. Obwohl dies eine erwartete Funktion ist (wer möchte schon scrollen, um sich anzumelden?), ist es auch eine großartige Idee, sie für Conversions nachzuahmen. Beispielsweise könnten bestehende Mono-Line-Kunden den Wert dieses Angebots erkennen und ihr Girokonto zu Chase verlagern. 

Dies ist auch ein großartiges Beispiel zum Nachahmen, wenn Sie mit begrenzten Bildern oder Videos arbeiten und Stockfotos einfach nicht ausreichen. 

Delta 

Deltas Homepage-Hero Image weicht ebenfalls von den neuesten Designtrends ab, folgt aber einem ähnlichen Weg wie Chase. 

Die Value Proposition ist hier klar: Delta hat sein Produkt aufgewertet und möchte Kunden konvertieren und Kunden zurückgewinnen, die vielleicht in der Vergangenheit entschieden haben, dass das Produkt nicht genug Mehrwert bietet. 

Obwohl das Bild den Blick vom geschriebenen Text ablenkt, ist das nicht unbedingt ein Nachteil, da es Ihre Aufmerksamkeit direkt auf all den Beinraum lenkt – eine Seltenheit außerhalb der Business Class. Ihr Aufmerksamkeitsverlauf bewegt sich vom Beinraum zum Bild und ist emotional, auch wenn das Bild nicht offen manipulativ ist. Es bringt Sie dazu, an Ihren letzten Flug zurückzudenken und innezuhalten, um es erneut zu versuchen. Der CTA-Button „Jetzt buchen“ ist fast eine List, da er der Button ist, der zum Buchen eines beliebigen Fluges verwendet wird, aber Sie sind bereits in der Stimmung, das neue Premium-Angebot auszuprobieren. 

Roxy 

Mit unserem letzten Bild betrachten wir eine kleinere, aber fokussierte Marke: Roxy. Für diejenigen, die damit nicht vertraut sind: Roxy ist Teil der Boardriders Group, einer globalen Einzelhandelsdynastie, die aus sieben Marken mit unterschiedlichen Identitäten besteht. 

Das von uns ausgewählte Hero Image ist ein kraftvolles Bild, das dem zuvor beschriebenen Trend entspricht: Der Fokus liegt auf der Mitte der Seite. Auf den ersten Blick scheint es geschäftig, aber die Ränder des Bildes lenken den Blick zurück in die Mitte, um auf ein kraftvolles Produktbild mit einem klaren Call-to-Action zu fokussieren, der Seitenbesucher einlädt, die Kollektion zu shoppen. 

Es ist eine mutige Wahl für ein Bild und wird Designer sicherlich spalten, aber es ist interessanter und emotionaler als ein typisches Produktbild, und manchmal kann diese Art von Verwundbarkeit den Tag gewinnen. 

Atlassian 

Unser letztes Hero Image Beispiel stammt von B2B-SaaS-Innovator und Optimizely-Kunden Atlassian. 

Atlassians Hero Image ist tatsächlich ein Marketingvideo. Atlassian hat den emotionalen, produktvorteilorientierten Weg gewählt, um seine Marke als den Ort für Teamzusammenarbeit zu positionieren. Es ist ein beeindruckendes Video, das Atlassians gesamtes Portfolio und die Marken-Value-Proposition abdeckt. 

Ist es ansprechend? Das könnte sein! Aber die einzige Möglichkeit, Gewissheit zu haben, ist es mit A/B-Testing zu testen.

So testen Sie verschiedene Hero Images mit A/B-Testing 

Woher wissen Sie, ob Ihre Hero Images eine Wirkung auf Ihre Website haben? Kurze Antwort: Sie testen sie. 

Die Ergebnisse dieser Tests sind einige der reichhaltigsten Daten, die Sie von Ihrer Website erhalten können, aufgrund ihrer prominenten Platzierung. Daher empfehlen wir, A/B-Testing zu verwenden, um die Stärke eines beliebigen Hero Images zu bestimmen. 

A/B-Testing ist eine Methode zum Testen von Websites, bei der 50 % Ihres Traffics die Originalversion Ihrer Seite angezeigt wird und 50 % die neue Variation. Indem Sie einer zufälligen Stichprobe Ihrer Besucher verschiedene Versionen Ihrer Seite zeigen, können Sie anhand von Daten bestimmen, welche Version Ihrer Seite besser konvertiert. 

Wenn eine Herausforderer-Seite eine Originalseite nicht übertrifft, können Sie immer neue Hypothesen testen, mit Variationen in Bildern, Text und Call-to-Action. Sie können Ihre Erfahrungen auch personalisieren, indem Sie verschiedenen Segmenten Ihrer Besucher unterschiedliche Hero Images anzeigen. 

Durch kontinuierliches Testen verschiedener Bilder können Sie Ihre Conversion Rate und Website-Erfahrung im Laufe der Zeit verbessern. 

Hero Image Testideen 

Sind Sie bereit loszulegen? Einige Ideen zur Optimierung von Hero Images umfassen: 

• Standbild vs. bewegtes Bild: Es könnte wertvoll sein zu entdecken, ob Benutzer Ihre Visuals als ansprechend, ästhetisch ansprechend oder informativ empfinden, oder ob sie sie ablenkend finden. Das Testen einer statischen Grafik gegen eine bewegte Grafik, wie ein .gif oder HTML5-Visual, könnte Einblicke in die Präferenzen Ihrer Benutzer liefern. 
• Interaktives Play-Video vs. Autoplay-Video: Es wird online immer häufiger, eingebettetes Audio zu hören, das ohne Aktivierung abspielt. Es ist nützlich für Websites, die Video-Messaging verwenden, um die Bedeutung von Videoinhalten zu messen, indem getestet wird, ob Benutzer klicken, um den Inhalt zu aktivieren, oder ob das automatische Abspielen von Videos der richtige Weg ist. 

• Value Proposition: Erzeugen verschiedene Bilder unterschiedliche Emotionen bei Ihren Benutzern und lassen sie sich auf Ihrer Website anders verhalten? Sie könnten von der Antwort überrascht sein. E-Retailer Missguided nutzte Experimente, um zu sehen, ob ein Bild Kunden dazu bringen würde, den Look zu shoppen, 360-Grad-Ansichten zu sehen oder über Bilder zu hovern. Ihre Daten halfen ihnen, einen signifikanten Anstieg der Conversions zu erzielen.

• Objekt-Fokus: Erzeugt das Hauptmotiv Ihres Bildes ein positives Gefühl bei Benutzern, das Aktionen auslöst, die zum endgültigen Geschäfts-Conversion-Ziel beitragen? Oder ist es abschreckend? Warum nicht testen! Dies ist ein großartiges Experiment, das mit Bildern wie dem Roxy-Beispiel oben durchgeführt werden kann. 

Tipp: Denken Sie daran, dass Sie auch verschiedene Versionen Ihrer ausgewählten Hero Images in sozialen Medien testen können, um dem bereits reichen Datensatz noch mehr Tiefe zu verleihen.