Hero Shot: So findest du den perfekten Eyecatcher für deine Webseiten & Landing Pages
von Vladislav Melnik
“Ein Bild sagt mehr als 1.000 Worte.”
Haben wir alle schon mal gehört. Aber woher stammt der Satz eigentlich?
Im März 1911 veranstaltete der “Syracuse Advertising Men’s Club” ein Bankett, um über Journalismus und Werbung zu diskutieren.
Die Zeitung “The Post-Standard” berichtete darüber. Dort wurde eines der Mitglieder, Arthur Brisbane, mit folgenden Worten zitiert:
Verwende ein Bild. Es sagt mehr als tausend Worte.
Es war also ein Werbefachmann. Nicht Konfuzius oder ein anderer Philosoph. 😉
Über 100 Jahre später hat er immer noch recht behalten. Vor allem in der Welt der Webseiten & Landing Pages, wo deine Besucher mit einer kurzen Aufmerksamkeitsspanne unterwegs sind.
Ein verlockendes Bild macht eben den Unterschied. Nichts zieht mehr Aufmerksamkeit auf sich und animiert deine Besucher zum Handeln.
Den perfekten Hero Shot zu finden ist eine kleine Kunst und Wissenschaft für sich. Bringen wir deshalb jetzt ein bisschen Licht ins Dunkel. 🔦
Starten wir aber mal ganz am Anfang.
Ein Hero Shot ist eine visuelle Darstellung deines Angebots.
Es ist das Ding, das gut sichtbar – also Above the Fold – auf einer Webseite oder Landing Page platziert ist und sie regelrecht dominiert:
Quelle: Unbounce
In seiner einfachsten Form dient er nur als Eyecatcher und zeigt, was dein Angebot eigentlich ist. Er zeigt also auf, was für einen Lead-Magneten, was für ein Produkt oder was für eine Dienstleistung du eigentlich anbietest.
Für eine Landing Page mit Lead-Magneten könnte das schon ausreichen. Aber bei einer Sales Page, die ein Produkt oder eine Dienstleistung anbietet, solltest du noch weitergehen.
Dein Hero Shot sollte darstellen, wie deine Lösung funktioniert. Deine Besucher sollten es sich vorstellen, wie es ist, dein Angebot in Anspruch zu nehmen und die Vorteile zu ernten.
Das ist nämlich seine wahre Stärke:
Ein Hero Shot bringt den Nutzen deines Angebots auf den Punkt.
Ein richtig guter Hero Shot geht sogar noch weiter und demonstriert dein Alleinstellungsmerkmal (also deine Value Proposition).
Außerdem sollten sich deine Besucher in dem Hero Shot wiedererkennen und sich emotional damit auseinandersetzen. Er sollte Gefühle wecken.
Schaue dir mal folgendes Beispiel an:
Quelle: VWO
Wenn ich das Produktbild der Hängematte alleine sehe, dann habe ich gar keine Ahnung, was das eigentlich ist. Aber beim Hero Shot macht’s sofort Klick. Noch stärker greift es, wenn ich das Produkt in Action sehe:
Quelle: VWO
Jetzt bin ich hooked. Der Nutzen des Produkts ist auf den Punkt gebracht. Ich wusste bis vor Kurzem gar nicht, dass es so was gibt. Ich habe nicht mal einen Jeep. Jetzt will ich einen Jeep, diese Hängematte und damit zum See! 😆
Das Ganze geht dann auch schon in Richtung Storytelling. Dein Hero Shot hilft deinem Besucher oder deiner Besucherin, sich als Held oder Heldin der Geschichte zu sehen. Der Kern der Geschichte ist dann das Lösen der Probleme bzw. die Befriedung der Bedürfnisse.
War bei Super Mario so ähnlich:
Quelle: UserOnboard.com
Also ganz nach dem Motto: Deine Besucher sind aktuell “Durchschnittsmenschen” und deine Lösung transformiert sie zu Superhelden, die verrückte Sachen machen können. 😉
Abschließend sollte dein Hero Shot die gefesselte Aufmerksamkeit deiner Besucher auf den nächsten logischen Schritt weiterleiten: die Handlungsaufforderung. Also deinen Button.
Schauen wir uns zuerst mal an, welche konkreten Arten es gibt:
Quelle: Chimpify
Das ist ein einfaches Bild, das dein Angebot visuell beschreibt. Wenn möglich, sollte es die Funktionsweise und die Vorteile darstellen.
Quelle: Cleanshot
Animationen bringen Dynamik hinein und ziehen die Aufmerksamkeit auf sich. Damit kannst du auch gut aufzeigen, wie dein Angebot funktioniert.
Quelle: Johannes Bopp
Bewegtbilder geben dir super viel Raum, um zu kommunizieren. Dabei ist das erste Bild des Videos der eigentlich Hero Shot. Wähle hier einen Shot, der Neugierde weckt. Noch besser ist es, wenn es eine Animation ist.
Quelle: Digitale Safari
Du kannst auch den kompletten Hintergrund deiner Hero Section als Hero Shot betrachten (man spricht dann auch von einem “Hero Image”).
Manchmal wird “Hero Shot” und “Hero Section” gleichgesetzt. Das ist aber nicht ganz richtig.
Eine Hero Section ist der gesamte obere Abschnitt deiner Webseite oder Landing Page. Ein Hero Shot ist nur der Eyecatcher in dieser Sektion. Also das Bild, die Animation oder das Video.
Folgende Grafik bringt zeigt es genauer:
Quelle: Klientboost
Es sind also zwei Paar Schuhe. Das eine ist in dem anderen verschachtelt.
Wir Menschen nehmen über 80% der Informationen aus der Umgebung mit den Augen wahr. Daher dient dein Hero Shot als Eyecatcher. Es ist das Erste, was deine Besucher sehen.
Außerdem verarbeiten wir Bilder 60.000-mal schneller als Text. Deine Besucher landen auf deiner Seite, sehen deinen Hero Shot und entscheiden dann sofort, ob sie hier richtig sind oder nicht. Hinzu kommt noch, dass online nicht gelesen wird, sondern gescannt.
Wenn du online Produkte oder Dienstleistungen verkaufst, ist eines der größten Nachteile, dass deine Besucher dein Angebot nicht ausprobieren können. Außerdem haben wir es oft mit abstrakten Konzepten wie z.B. “E-Book”, “Kurs” oder “Newsletter” zu tun.
Genau hier kommen Hero Shots ins Spiel und machen die ganze Sache anfassbarer. Im Optimalfall kommunizieren sie auch noch die Vorteile.
Vor allem bei unsichtbaren Lösungen wie Dienstleistungen wird es schwierig, überhaupt etwas visuell darzustellen. Deshalb solltest du Bilder oder Videos verwenden, die Assoziationen auslösen und Emotionen wecken.
Wenn ich z.B. andere glückliche Menschen sehe, die so aussehen wie ich, dann bin ich hier wohl richtig:
Quelle: Marco Wölfel
Außerdem beziehe ich diese positiven Gefühle automatisch auf mich selbst. Daher bin ich offen für dein Angebot.
Wenn die Menschen dann auch noch meinen Traumzustand erreicht haben (z.B. einen athletischen Körper), dann bin ich gefesselt. Also ganz nach dem Motto: “Das wird aus dir werden.” Oder: “Das sind die Vorteile, die du erleben wirst.”
Theoretisch kannst du auch Webseiten und Landing Pages ohne Hero Shots erstellen. Aber dann musst du mit deinen Wörtern richtig gute Bilder malen können. Da macht ein guter Hero Shot dir das Leben viel einfacher. 😉
Ein Hero Shot erzählt deinen Besuchern also nicht, was sie bekommen werden, sondern er zeigt es ihnen. Deshalb auch die alte Regel:
Show. Don’t tell.
Wenn du auf der Suche nach dem perfekten Hero Shot bist, gehe zuerst folgende Kategorien entlang:
Quelle: Caroline Preuss
Wir Menschen machen gerne Geschäfte mit Menschen. Wenn du selbstständig bist, dann sollte ein professionelles und sympathisches Bild oder Video von dir immer die erste Wahl sein.
An dieser Stelle kannst du auch andere Personen wie Mitarbeiter oder Kunden verwenden:
Quelle: SPI
Oder du weckst ein Gemeinschaftsgefühl und stellst eine ganze Gruppe von Menschen dar:
Quelle: New Work Moms
Generell funktionieren hier lächelnde Menschen 😃, Babys 👶 (und natürlich süße Tiere 😻) am besten. Du kannst dir also merken: Das, was wir Menschen in der Realität lieben, das lieben wir auch auf Webseiten und Landing Pages. Muss natürlich nur zu deinem Angebot passen.
Quelle: Dollar Shave Club
Hier lenkst du das Spotlight auf das Produkt. Die simpelste Form ist, wenn du das Produkt einfach darstellst.
Richtig cool ist es aber, wenn dein Hero Shot einen WOW-Effekt auslöst:
Quelle: Digital Art That Rocks
Vielleicht gehst du auch einen Schritt weiter und stellst es in einem konkreten Anwendungsbereich dar. Noch besser ist es, wenn du einen Mensch darstellst, der dein Produkt benutzt:
Quelle: Fitradio
Bei einem E-Book kannst du z.B. das Cover verwenden:
Quelle: affenbuch
Bei einem Kurs z.B. einfach einen Screenshot vom Mitgliederbereich:
Quelle: Digitale Safari
Du kannst diese Grafiken selbst mit Canva, Visme oder Photoshop erstellen. Oder du beauftragst einfach jemanden über Fiverr oder Upwork damit.
Falls technisch möglich kannst du deinen Hero Shot sogar interaktiv machen:
Quelle: Spacedrive
Wie geil ist das denn bitte?!
Quelle: Hinge
Dieser Hero Shot zeigt nicht, wie deine Lösung aussieht, oder wie sie funktioniert, sondern zeigt das Endresultat nach der Transformation.
Bei einem Putzservice könnte es eine Person sein, die entspannt im sauberen Wohnzimmer sitzt und die Hände über den Kopf verschränkt. Im Hintergrund wäre dann vielleicht noch die Putzfrau abgebildet. Ist zwar ein blödes Beispiel, sollte aber klarmachen, was ich meine.
Hier solltest du dich also auf den Mehrwert fokussieren. Auf eine positive Art und Weise. Also nicht auf die Probleme. Eine Nachhilfeschule sollte also kein Kind zeigen, dass aufgrund seiner Noten traurig ist. Sondern ein glückliches Kind, das seine Leistung dank der Nachhilfeschule verbessern konnte.
Quelle: Digitale Safari
Dieser Hero Shot stellt den gewünschten Traumzustand dar, wenn sie dein Angebot in Anspruch nehmen. Es ist das gelobte Land. Noch besser ist es, wenn du oder deine Kunden in diesem Traum auftauchen.
Digitale Safari machen das großartig. Zwei coole Typen, die einen Surfer-Lifestyle leben. Ich bin hooked.
Wenn deine Kunden einen akuten Schmerz haben (z.B. Rückenschmerzen), dann wähle diesen Shot.
Negative Heros erfordern immer ein bisschen Mut, da man eigentlich immer eher positiv sein sollte. Aber über Schmerz können sich deine Besucher eben auch gut mit dir identifizieren.
Quelle: Specify
Dieser Hero Shot wird oft für Dienstleistungen oder Software verwendet. Er ist besonders geeignet, wenn man das Produkt schwer darstellen kann, weil es zu komplex ist. Anstelle dessen stellt er einfach den Prozess visuell dar.
Quelle: Armadillo
Illustrationen visualisieren den Wert deines Angebots auf eine grafische Art und Weise. Entweder in 2D oder 3D.
In dem Beispiel von oben umschlingt ein Gürteltier (passend zur Marke) schützend seinen Körper um das Haus. Und was ist ihr Angebot? Eine Hausratversicherung (oder so was Ähnliches).
Kostenlose bzw. günstige Illustrationen bekommst du hier:
Das sind abstrakte Formen und Muster. Es ist also einfach abstrakte Kunst, die schön aussieht. Ich liebe schöne Dinge.
Aber damit wird leider nicht wirklich etwas kommuniziert. Kunst liefert eben leider keine Ergebnisse. 🙂 Als Platzfüller immer gut. Aber alleinstehend eher schwierig.
Das ist die Frage der Fragen. Das Problem bei vielen Stockfotos und -videos ist, dass sie extrem künstlich wirken. Das baut kein Vertrauen auf. Dadurch können sich deine Besucher schwer in die Situation hineinversetzen. Sie wecken keine Emotionen.
Hier mal das ungünstigste Beispiel, das ich finden konnte:
Wir Menschen sind mittlerweile richtig gut darin geworden, Stockmedien ausfindig zu machen. Deshalb sollte du diese extrem künstlichen und typischen Fotos und Videos vermeiden. Marketing Experiments haben z.B. hier ein Stockfoto gegen eine echte Person ausgetauscht. Ergebnis? Conversion Rate um 35% erhöht.
Das Ding ist, wir vertrauen Menschen, Dingen und Erfahrungen mehr, wenn wir sie als echt wahrnehmen. Eben nicht inszeniert.
Deshalb ist Authentizität so wichtig.
Aber es gibt mittlerweile auch hochwertige, schöne und authentisch-wirkende Stockfotos und -videos. So wie das hier zum Beispiel:
Passend dazu einige gute Quellen für kostenlose bzw. günstige Stockfotos und -videos:
Trotzdem gilt hier auch: Je öfter sie benutzt werden und je öfter deine Zielgruppe sie sieht, desto weniger authentisch wirken sie. Deshalb ist die richtige Wahl hier entscheidend.
Wenn du mit Canva, Visme oder Photoshop fit bist, kannst du die Stockfotos in eigene Grafiken integrieren, die perfekt zu deiner Marke passen. Monday.com hat z.B. hier Stockfotos von Menschen verwendet, diese aber in ihre eigene Grafik und ihr eigenes Markendesign eingearbeitet:
Quelle: monday.com
Für Fotos von dir oder deinem Team solltest du auf jeden Fall einen professionellen Fotografen bzw. Fotografin beauftragen (Singular One macht z.B. sehr schöne, hochwertige und authentische Fotos). 500€ für professionelle Fotos, die du jahrelang verwenden kannst, sind immer ein gutes Investment.
67% sagen nämlich, dass hochwertige Bilder für ihre Kaufentscheidung “sehr wichtig” sind. Das solltest du berücksichtigen, oder? 🙂
Ein Bild oder Video auswählen, klingt leicht. Ist es irgendwie auch. Aber wenn du willst, dass dein Hero Shot richtig zieht, solltest du folgende Punkte beachten:
Dein Hero Shot und deine Hero Section sollten die Ursprungsquelle matchen. Also zueinander passen. Hier mal ein Beispiel:
Quelle: LeadPages
Wenn deine Besucher z.B. über Social Media auf deine Webseite oder Landing Page landen, dann sollte dein Social-Media-Bild und deine Hero Section (inklusive Hero Shot) gleich sein – optisch, aber auch vom Inhalt her.
Ein guter Hero Shot ist so stark, dass er ohne Text den Nutzen auf den Punkt bringt.
Achte also darauf, dass dein Produkt, oder die Ergebnisse, die deine Dienstleitung bringt, so nah wie möglich an der realen Welt dargestellt werden.
Außerdem sollte immer nur ein Produkt dargestellt werden, um Irritationen zu vermeiden. Und dass dein Hero Shot nicht pixelig sein sollte, ist klar, oder? 🙂
Räsoniert dein Hero Shot sofort mit deiner Zielgruppe? Und filtert gleichzeitig alle falschen heraus?
Wie hier bereits erwähnt, entscheiden sich deine Besucher innerhalb weniger Millisekunden. Sie fragen sich: Ist das relevant für mich? Passt der Style zu mir?
Hier mal ein Beispiel:
Sofort wird klar, dass es ein cooler Barber Shop ist. Wenn ich zur Zielgruppe gehöre, fühle ich mich angesprochen. Wenn nicht, dann nicht.
Deine Besucher wollen nicht nur dein Produkt sehen, sie wollen es in Action sehen. Bei einer Dienstleistung wollen sie die gewünschten Ergebnisse sehen. Im Kontext des echten Lebens.
Zeige deinen Besuchern also, was passiert, wenn sie dein Produkt benutzen oder deine Dienstleistung in Anspruch nehmen.
Wie gerade erwähnt, sollte ein guter Hero Shot für sich alleine stehen können. Aber in Wirklichkeit tut er es ja nicht.
Deshalb sollte dein Hero Shot mit deiner Überschrift, Unterüberschrift und deinem Button zusammenarbeiten. Sie alle zusammen müssen dein Versprechen auf den Punkt bringen.
(Generell sollte dein Hero Shot links oder zentriert platziert werden. Nicht rechts.)
Dein Hero Shot muss niemanden zu Tränen rühren. Aber er sollte ein positives Gefühl wecken. Wenn möglich, sollte er sogar begeistern und eine Geschichte erzählen.
Ein einfaches Beispiel sind glückliche Menschen. Wenn ich glückliche Menschen sehe, weckt das automatisch positive Gefühle in mir. Bin halt auch nur ein Mensch. 🙂
Außerdem hat die Wahl der richtigen Bilder und deren Qualität viel mit Emotionen zu tun. Auch die Körpersprache solltest du im Auge behalten.
Passt dein Hero Shot zu dir und deiner Marke? Gehörst du z.B. eher zu der Fraktion, die seriös mit hellblauen Hemd unterwegs sind? Oder eher zu denen, die locker T-Shirt tragen und Tattoos haben?
An dieser Stelle ist es auch gut, wenn dein Hero Shot Erinnerungswert hat. Also irgendwas, dass Hängen bleibt. Irgendwas Ausgefallenes. Vielleicht irgendwas Quirkiges?
Natürlich sollte dein Hero Shot zu deinem Logo, deinen Farben und deinem gesamten Markendesign passen.
Lenkt dein Hero Shot vielleicht zu sehr vom eigentlichen Geschehen ab? Wirkt dadurch deine gesamte Hero Section überladen? Lenkt er von der Überschrift – dem eigentlichen Ziel – ab?
Dein Hero Shot hat die Aufgabe, dass die Überschrift gelesen wird. Nicht umgekehrt.
Ein guter Hero Shot zieht nicht nur Aufmerksamkeit auf sich, er leitet diese gleich weiter.
Deshalb sollte dein Call-to-Action (CTA), also dein Button, in Blickrichtung oder in der Nähe des Gesichts platziert werden.
Wenn eine Person auf die Überschrift schaut, dann tun deine Besucher das auch. Hier mal ein Beispiel einer alten Studie:
Quelle: PubMed
Du siehst, in der Variante, in der das Baby auf die Überschrift schaut, schauen auch mehr der Besucher darauf.
An dieser Stelle kannst du auch Pfeile und Markierungen verwenden, die die Aufmerksamkeit auf deinen CTA lenken:
Quelle: Conversionlab
Hier solltest du noch eine Sache beachten: Für dein Social-Media-Bild oder deine Anzeige, sollte der Mensch in die Kamera schauen. Dadurch fühlen sich deine Besucher in ihrem Feed angesprochen. Auf deiner Webseite oder Landing Page dagegen, sollte der Mensch auf deinen CTA schauen.
Wie gesagt, einen guten Hero Shot zu finden, ist eine eigene kleine Kunst für sich.
Um deinen Shot zu testen, solltest du einen simplen 5-Sekunden-Test machen. Entferne also alles drumherum (Überschrift, Unterüberschrift, Button usw.). Zeige deinen Hero Shot danach für 5 Sekunden einem Freund oder einer Freundin (am besten ist er oder sie Teil deiner Zielgruppe und hat dein Angebot noch nie gesehen).
Kann er oder sie sagen, worum die Seite oder Landing Page geht? Noch besser: Kann sie oder er sagen, was deine Value Proposition ist? Falls ja, dann hast du es auf den Punkt gebracht! Wenn nicht, dann wieder ran da.
Aber wenn du wirklich den perfekten Shot suchst, dann ist das Geheimnis ganz einfach. Und langweilig:
Du musst A/B-Tests machen.
Das ist der wissenschaftliche Teil.
Das Problem ist nämlich, niemand weiß, wie dein perfekter Shot aussieht. Das wissen nicht mal deine Besucher oder Kunden, wenn du sie fragst. Dir bleibt also leider nichts anderes übrig, als einfach verschiedene Varianten gegeneinander zu testen (z.B. mit Google Optimize).
Nur so weißt du wirklich, welcher Hero Shot zieht, und welcher nicht.
Nachdem du diesen Beitrag gelesen hast, sollte dir klar sein, dass ein perfekter Hero Shot wirklich mehr als 1.000 Worte sagt. Ein verlockendes Bild macht eben den Unterschied. Arthur Brisbane lag und liegt richtig.
Dabei hat ein perfekter Hero Shot folgende Aufgaben:
Wichtig ist, dass dein Hero Shot zusammen mit deiner Überschrift, Unterüberschrift und Button ein harmonisches Gesamtbild ergeben, das überzeugt. Eine fesselnde Hero Section eben.
Wähle für den Hero Shot immer zuerst ein Bild von dir. Egal, ob für deinen Lead-Magneten, dein Produkt oder deine Dienstleistung. Damit machst du nichts falsch. Aber probiere auch mal ein Bild von deinen Mitarbeitern oder Kunden.
Falls du ein Produkt anbietest, stelle es direkt dar. Am besten, wie ein Mensch dein Produkt benutzt. Vielleicht auch, wie das Produkt funktioniert.
Oder du gehst einen anderen Weg und zeigst die Ergebnisse, die sie bekommen werden, wenn man dein Produkt oder deine Dienstleistung in Anspruch nimmt.
Dein Ziel sollte es sein, dass deine Besucher mit deinem Angebot connecten. Sie sollten sich selbst wiederfinden. Entweder in dir, einer anderen Person oder in einer Situation.
Sie müssen sich einfach aufgehoben fühlen. Sie müssen sich verstanden fühlen.
Und möchten wir das nicht alle?
11 Kommentare
danke für diesen Artikel. Einen Eyecatcher für die eigene Website ist, wie ich finde, ein must have, wenn man mit seinem Unternehmen Erfolg haben möchte. Ich habe den Text genau studiert und bin begeistert. :)
Liebe Grüße
Dominic H.
danke für diesen hilfreichen Artikel über Hero Shots. Sein Produkt direkt darzustellen, spricht Kunden an und weckt Gefühle. Eine positive Assoziation mit dem Produkt, regt zum Kauf an. :)
Liebe Grüße
Jens G.
1. Ist es nicht ziemlich das Gleiche, den Traum oder das Ergebnis zu zeigen? Oder ist das nischen-bezogen gemeint und kann daher sehr unterschiedlich sein?
2. Wenn der Blick bei der Anzeige in die Kamera geht und bei der Landingpage zum CTA zB rechts, ist das noch konsistent genug? Oder kann der CTA ggf auch drunter stehen?
Wenn bereits im ersten Satz das Wort "Berater*innen" Verwendung findet, kann der Rest des Textes nur intellektuelles Dünn-Pfeiffen bieten.
wieso gebt ihr so einen schwachsinnigen und inhaltlosen Kommentar frei? Das braucht wirklich niemand und Leute wie Charlie werden es eh niemals begreifen... 🙄
P.S. Sehr schöner Artikel, danke dafür.
Oft entscheidet nur das Bild allein über das Top oder Flop einer Hero-Section. Es gibt so viele Vorlagen und fertige Blocks, die man verwenden kann. Aber die meisten wirken nur mit dem Bild zusammen, das darin benutzt wird. Sobald man das Bild austauscht, ist es plötzlich nicht mehr stimmig. Die stundenlange Suche in den Stock Images ist frustrierend.
Ich glaube, dass ich nach diesem Artikel so einiges beschleunigen kann. Cool. Danke!
Was denkst du?