Best Practices für Heldenbilder: 6 Dinge, die Sie beachten sollten

Das Hero-Bild ist das Hauptbanner auf der Website, das normalerweise prominent platziert wird, „above the fold“ – vorne und in der Mitte.

Das Heldenbild ist das erste Bild, das Ihr Publikum sieht, wenn es Ihr Website-Universum betritt. Daher ist die Aufgabe, Ihr Heldenbild zu beschaffen und auszuwählen, keine Aufgabe, die Sie auf die leichte Schulter nehmen sollten.

In diesem Beitrag habe ich einige der wichtigsten Aspekte und Best Practices hervorgehoben, die Sie bei der Auswahl eines Heldenbildes berücksichtigen sollten.

1. Verwenden Sie relevante Bilder

Während wir mehr Zeit online verbringen als je zuvor, nimmt unsere Aufmerksamkeitsspanne rapide ab. Eine Studie der Technischen Universität Dänemark kommt zu dem Schluss, dass sich unsere kollektive Aufmerksamkeitsspanne verengt (sciencedaily.com). Während die durchschnittliche Verweildauer auf einer Seite branchenübergreifend durchschnittlich 62 Sekunden beträgt, verbrachten mehr als 50 % der Besucher weniger als 15 Sekunden aktiv auf einer Seite (time.com).

Ihr Heldenbild muss Ihr Wertversprechen verstärken – was Sie zu kommunizieren versuchen. Stellen Sie sich folgende Fragen:

• Welche Emotionen versuchst du auszulösen?
• Wie verbindet sich Ihr Image mit Ihrem USP / ESP?
• Kontextualisiert das Bild den Inhalt der Website?

Wir haben unten einige Beispiele zusammengestellt, um zu zeigen, wie ein Heldenbild dies tun kann.

HubSpot: Mit einer Illustration als Heldenhintergrund veranschaulicht HubSpot sowohl den Wachstumsaspekt als auch, dass sie sowohl auf KMUs als auch auf Großunternehmen ausgerichtet sind.

Save the Children: Verwenden Sie ein Bild eines Kindes in ihrem Heldenhintergrund, um eines der vielen Kinder zu veranschaulichen, die sie zu retten versuchen – und schaffen Sie so (hoffentlich) eine emotionale Verbindung zum Publikum.

Riverford Organic Farmers: Ein gutes Beispiel dafür, wie man ein authentisches produktbezogenes Bild von Bio-Gemüse nutzt. Das Image steht in engem Zusammenhang mit den Produkten und dem USP.

2. Kontrast ist der Schlüssel

Die Designelemente sollten sich voneinander abheben, um das wichtigste Element hervorzuheben. Daher sollten Sie neben der Auswahl eines guten Bildes auch überlegen, wie dieses Bild mit Ihrer gewünschten Schriftfarbe, Ihrem Call-to-Action und Ihrem Markenfarbschema harmonieren könnte.

Die Verwendung eines einfachen Overlays kann normalerweise einen großen Unterschied machen und Ihren Text hervorheben. Darüber hinaus kann die Optimierung von Sättigung, Temperatur und Kontrast mit einem Bearbeitungswerkzeug Ihr Bild zum Leben erwecken.

3. Verwenden Sie das richtige Format

Verwenden Sie keine Bilder von geringer Qualität. Verpixelte oder unscharfe Bilder können den ersten Eindruck ruinieren. Da das Hero Visual jedoch ein kritisches CX-Element ist, sollten Sie sicherstellen, dass das Bild so schnell wie möglich gerendert wird.

Verwenden Sie Bilder, die zwischen 1500 und 2500 Pixel breit sind, und komprimieren Sie Ihr Bild, um die Dateigröße zu reduzieren und damit die Ladegeschwindigkeit zu erhöhen.

Da das PNG-Format normalerweise eine große Dateigröße erzeugt, empfehlen wir Ihnen, dieses Format nur zu verwenden, wenn Sie scharfe Linien und klar getrennte Bereiche mit flachen Farben und Text haben.

Mehrere Online-Tools können Ihnen dabei helfen, Ihr Bild zu komprimieren:

• Tinyjpg.com: Bis zu 20 Bilder, jeweils max. 5 MB.
• Compressor.io: Unterstützt jpg, png, gif, svg, webp. Maximal 10 MB
• Imagify.io: Upload-Limit der Dateigröße von 2 MB
• Shortpixel.com: Bis zu 50 Dateien und maximal 10 MB.

4. Schaffen Sie eine emotionale Verbindung

Eine kürzlich in Frontiers veröffentlichte Studie hat herausgefunden, dass emotionale Bilder Menschen mehr beeinflussen als emotionale Worte. Durch die Wahl eines Bildes mit hoher Emotionalität können Sie also beim Betrachter eine emotionale Reaktion auslösen.

Wenn wir einen emotionalen Gesichtsausdruck beobachten, ahmen wir ihn oft nach. Laut einem in der Zeitschrift Trends in Cognitive Sciences veröffentlichten Artikel sind nicht nur unser Lächeln oder Grinsen, sondern alle unsere Gesichtsausdrücke ansteckend.

Tatsächlich verarbeitet das Gehirn Bilder 60.000 Mal schneller als Text, und 90 Prozent der an das Gehirn übermittelten Informationen sind visuell (t-sciences.com). Wir sind visuelle Kreaturen und durch die Nutzung emotionaler Reize, einschließlich emotionaler Gesichter und eindrucksvoller Bilder, können wir nicht nur positive Gefühle und Assoziationen auslösen, sondern auch Ihrem Publikum helfen, Ihre gewünschte Botschaft schneller und genauer zu entschlüsseln.

5. Seien Sie authentisch und realistisch

Verbraucher werden mit Reizen, Werbung und Lärm überhäuft. Markenauthentizität kann helfen, den Lärm zu durchbrechen und Sie hervorzuheben. Echte Botschaften und realistische Bilder kommen bei den Menschen stärker an und helfen Ihnen, eine stärkere Verbindung zu Ihrem Publikum aufzubauen.

Immer mehr Unternehmen setzen „echte Menschen“ ein, um ihre Produkte zu vermarkten. Dove startete seine „Kampagne für echte Schönheit“ im Jahr 2004, um die natürlichen körperlichen Unterschiede zu feiern, die von allen Frauen verkörpert werden. Neben dem Gewinn zahlreicher Auszeichnungen schuf die Marke eine starke emotionale Bindung zu ihrer Zielgruppe, was zu einer deutlichen Umsatzsteigerung führte.

Marken wie Dove und später Target haben in den letzten Jahren erfolgreich „echte Menschen“ in ihrer Werbung eingesetzt und das aus gutem Grund: Es zahlt sich aus, authentisch zu sein.

Das bedeutet nicht, dass Sie alle Bilder selbst machen müssen, noch dass Sie Bilder und Videos mit einer niedrigen Auflösung verwenden sollten. Sie sollten jedoch Fotos von realen Menschen, Orten und Erlebnissen verwenden und eine Geschichte real vermitteln, anstatt Bilder zu verwenden, die inszeniert wirken.

6. Testen und optimieren

Die Auswahl eines (neuen) Heldenbildes sollte nicht als letzte Phase, sondern als Beginn Ihres Optimierungsprozesses betrachtet werden. Wie bereits erwähnt, ist das Heldenbild vielleicht eines der wichtigsten Designelemente auf der Website und kann einen erheblichen Einfluss auf Ihre Gesamtleistung haben.

Um sicherzustellen, dass Ihr Hero-Image wie beabsichtigt funktioniert, sollten Sie eine ordnungsgemäße Leistungsverfolgung implementieren, bevor Sie es live schalten. Erwägen Sie zu diesem Zweck den Einsatz eines A/B-Testing-Tools, um alternative Varianten zu testen und Ihre ursprüngliche Variante mit Ihrem neuen Image zu vergleichen.

In einem von Crazyegg durchgeführten Test steigerte die Siegerversion den Umsatz von Käufern weltweit um 29,7 %. In der Vergangenheit habe ich die folgenden Tools zum Testen von Bildvariationen verwendet:

• Google optimieren (kostenlos)
• Optimiert
• Verrücktes Ei

Denken Sie daran, dass Scheitern der erste Schritt zum Erfolg ist, und es nicht zu versuchen, ist schlimmer, als es zu versuchen und zu scheitern. Vielleicht gelingt es Ihnen nicht beim ersten Mal – aber testen, neue Varianten ausprobieren und weiter optimieren – und Sie werden entsprechend belohnt.