Was bewirken gute Fotos auf Landingpages? Wir beschäftigen uns heute mit dem „Hero“ bzw. *“Heroshot“ auf Websites. Was das genau ist und wie ihr ihn optimiert, erfährt ihr in diesem Beitrag.

Mit größeren Bandbreiten des Internets sind auch bessere und größere Fotos im Web Standard geworden. Doch was bewirken gute und professionelle Fotos tatsächlich? Wir beschäftigen uns heute mit dem „Hero“ bzw. „Heroshot“ auf Websites. Was das genau ist und wie ihr ihn optimiert, erfährt ihr in diesem Beitrag.

Was ist der Hero-Bereich oder Hero Shot?

Der sogenannte Hero Shot ist ein meist relativ großes Bild auf einer Landing Page, das die Benutzer als erstes sehen, wenn sie zugreifen. In Verbindung mit Headline und Call to Action soll vermittelt werden, um was es auf der Landing Page geht, was es dem Nutzer bringt und ob er hier richtig ist. Der Heroshot zeigt also ein Produkt oder Angebot bzw. unterstützt die Wirkung davon.

Das Foto sollte gut zur Headline passen und die Aussage verstärken. Menschen auf Fotos wirken auf die Kunden meist emotionaler und idealerweise findet sich der User sogar selbst im Foto wieder. Das wiederum verstärkt nämlich den Bezug und das Vertrauen zum Produkt oder der Leistung.

Das Bild sollte außerdem klar und ruhig sein. Ich habe einige Beispiele angefügt, die verdeutlichen, was damit gemeint ist. Ist das Foto zu unruhig oder zusätzlich mit viel Text und weiteren Elementen gestaltet, kann es schnell für Verwirrung sorgen. Der User weiß nicht, wo er zuerst hinsehen soll und wichtige Botschaften oder Call to Actions gehen möglicherweise unter.

Landingpage Heroshot auf www.vigeovit.com

Blicke lenken Blicke. Auch auch Webseiten.

Im Bereich von Neuromarketing geht man sogar soweit, dass nicht nur ein Mensch am Foto die Emotionen verstärkt, sondern auch die Blicke der User lenkt oder anzieht. Call-to-actions sollten also in Blickrichtung oder nahe dem Gesicht platziert werden. Dazu gibt es ein bekanntes Beispiel, welches ihr sehr einfach auf Google findet („Baby Heatmap„). Ein starkes Bild als Heroshot kann also viel bewirken.

Heroshot auf www.kremsmueller.com

Stockfotos als Hero Shot oder nicht?

Stockfotos die gekauft oder kostenlos verfügbar sind können sich auch perfekt für die Landing Page eignen.

Neben den verschiedenen Lizenzierungen sollte man auch auf Authentizität und Austauschbarkeit achten. 

Wirkt ein Foto nicht authentisch, ist es auch weniger vertrauenswürdig. Einige Stockfotos werden sehr oft benutzt oder wirken durch Motiv, Model oder Bildstil nicht authentisch.

Ein Experte in diesem Bereich kann hier helfen, um das zu beurteilen.

Ich möchte viele Bilder und Botschaften, ein Slider muss her!

Ein Slider verbirgt möglicherweise wichtige Botschaften auf Slides, die erst viel später angezeigt werden. Kaum jemand wartet so lange. Fokussiere dich auf die wichtigste Aussage und lenke die Aufmerksamkeit auf den Call to Action. Scrollt der User weiter, kannst du immer noch wichtige Informationen darstellen. Auch Videos sind hier eine gute Möglichkeit, um komplexere Produkte zu erklären.

Welches Foto ist perfekt für meine Landing Page?

Das wissen nur deine Nutzer und deine Conversion-Rate. Es gibt natürlich viele Faktoren, die für oder gegen ein Foto sprechen. Welches Foto auf deiner Website tatsächlich zu mehr Interaktion oder Käufen führt, kann im besten Fall ein A/B-Test bestätigen.

Damit werden zwei verschiedene Versionen an zwei fiktive Gruppen deiner Nutzer ausgespielt. Die Version mit den besseren Ergebnissen gewinnt und kann künftig verwendet werden. Solche Tests machen aber nur dann Sinn, wenn genügend Nutzer deine Landing Page besuchen.

Wenn du wenig Nutzer auf der Seite hast, kann auch Mousetracking und Heatmap Software helfen, den Einsatz von Heroshots und Call to actions zu optimieren.

Landingpage Heroshot auf www.holzplatte-online.com

Fazit für Hero Shots

Fotos können Vertrauen schaffen und dafür sorgen, dass Nutzer das Produkt oder die Leistung sofort erkennen. Sie sollen authentisch sein und deine Aussage unterstützen. Oft können externe Berater, Agenturen oder auch Menschen aus dem Umfeld noch besser beurteilen, ob dein Hero Shot für die Landing Page geeignet ist. Um sicher zu gehen, verwende Analyse- und Tracking-Software, denn wie immer gilt: Deine Nutzer haben immer recht.

Animation und Motion Design auf Websites ist kein neuer Trend. Schon mit Adobe Flash wurden Webseiten animiert. Es gibt unzählige Tools und Bibliotheken die bei der Umsetzung animierter Grafiken unterstützen – die meisten davon arbeiten mit SVG und CSS. Ein wiederkehrendes Problem das sich für uns beim produktiven Einsatz gezeigt hat, war der fehlende Workflow zwischen Grafiker und Entwickler.

Um zu einen für uns gut funktionierenden Workflow zu gelangen benötigten wir einige Schritte die wir im folgenden zeigen möchten.

Logoanimationen als SVG mit JavaScript programmieren

Angefangen hat es mit der Idee das Logo einer Kundenseite zu animieren. Die Animation war großartig und begeisterte alle Beteiligten.

Der Nachteil: die Umsetzung erfolgte mit eingebettetem JavaScript und der Bibliothek SVG.js, welches genau auf diese Seite abgestimmt war. Somit konnten wir das fertig animierte Logo nicht einfach in unsere eigene Portfolioseite mit aufnehmen. Diese Art der Umsetzung erschwert auch Änderungswünsche des Designers, die programmatisch umgesetzt werden müssen.

SVG Animationen mit Adobe After Effects und Bodymovin (Lottie)

Adobe After Effects wurde als Kompositions- und Animationstool für Video und Filmaufnahmen entwickelt. Erst mit dem von Airbnb entwickelten Plugin Bodymovin lassen sich erstellte Animationen im dafür vorgesehenen JSON-Lottie-Format als Vektorgrafiken für Websites und Apps exportieren.

Die Animation im Web erfolgt mittels eingebundener JavaScript-Bibliothek. Im Gegensatz zur mit SVG.js implementierten Variante, ist das Lottie-File portabler. Dieser Umstand erweist sich auch im praktischen Einsatz als wesentlich komfortabler – Änderungen lassen sich vom Designer direkt in After Effects umsetzen und müssen anschließend nur noch exportiert und auf den jeweiligen Server übertragen werden.

Leider gab es zum Zeitpunkt unseres Einsatzes auch gravierende Nachteile im Funktionsumfang des Bodymovin-Plugins. Viele der erstellten Animationen konnten nicht eins zu eins exportiert werden. Hier macht sich bemerkbar, dass es sich um ein – dennoch sehr mächtiges – Plugin für eine Anwendung handelt, die nicht für vektorbasierte Webanimationen entwickelt wurde.

SVG Animationen mit Keyshape

Bei der Recherche zu weiteren Alternativen entdeckten wir durch Zufall das nicht sehr bekannte Keyshape für Mac. Im Gegensatz zu Bodymovin werden bei diesem Tool native SVG mit CSS Keyframes generiert. Einfache animierte Vektorgrafiken lassen sich damit ressourcenschonend ohne Notwendigkeit zur Einbindung einer Drittbibliothek erstellen. Mit Keyshape ist sogar der Import von Lottie-Dateien möglich. Die zuvor mit After Effects für Bodymovin erstellten Grafiken können wir damit mit wenig Aufwand wiederverwenden.

Für uns ist es aktuell das Tool der Wahl um Animationen für Logos, Icons oder Illustrationen als SVG zu exportieren und in unseren Web- und Softwareprojekten einzusetzen. Der schlanke Aufbau ermöglicht ein schnelles Einlernen und bietet dennoch alle Funktionen die benötigt werden.