Dunckelfeld

Artikel schließen

06

Worauf Designer und Developer bei Hero-Videos achten

„Pow!“, „Uff“, „BAM!“ Look up in the sky! It’s a bird! It’s a plane! Ohne Superheld keine Competition. Isso! Ein übertragbares Prinzip. Hero-Videos als displayfüllende Videosequenzen sind im Webdesign mittlerweile mehr als etabliert. Doch wie sinnvoll nutzen? Unser Digitaldesigner und unser Technischer Leiter parlierten in der PAGE 07/2017 über ihre hauseigenen Rezepte.

 

Die Zauberformel unseres Digitaldesigners Michael Fuchs:

1: Relevante Bilder auswählen.

Die Nutzer wollen schnell verstehen, worum es auf ihrer Seite geht. Entsprechend wichtig ist eine sauber abgestimmte und für den User-Case relevante Bildsprache, sonst hat das Hero-Video lediglich dekorativen Charakter. Erscheint der Clip gepaart mit einer Textinformation, erhält der Nutzer einen unmittelbaren Einstieg und weiß schnell, ob er auf der Seite finden wird, was er sucht.

2: Kontraste zwischen Video und Interface-Elementen schaffen.

Meist werden Hero-Videos vollflächig in den Header eingebaut, sodass die Schrift und die User-Interface-Elemente wie eine separate Ebene auf dem Bild liegen. Hier sorgen Kontraste zwischen Video, Schrift und Call-to-Action-Elementen für gute Lesbarkeit. Dabei ist es egal, ob man das Video mit einem Layer abdunkelt, aufhellt oder einfärbt – Hauptsache Designkonzept und Lesbarkeit sind miteinander vereinbar. Verzichten Sie auf Animationen im Hintergrund und setzen Sie lieber auf einfache Elemente. Besteht Ihr Video aus unruhigen und kleinteiligen Aufnahmen, setzen Sie Buttons und andere Interface-Elemente auf opake Flächen. Handelt es sich eher um ruhige Detailaufnahmen, können Sie auch Transparenz nutzen.

3: Video, Foto, Illustration im Wechsel platzieren.

Bewegtbild-Backgrounds sollte man immer sinnvoll dosieren und als Highlight nutzen. Mehrere Hintergrundvideos direkt untereinander überladen die Seite und überfordern den Nutzer. Achten Sie stattdessen auf einen organischen Wechsel von Videos, Fotos und Illustrationen.

 

 

Die „entscheidenen Fünf“ unseres technischen Leiters Jan Henckel:

1: Codec auswählen.

Das Format MPEG-4/H.264 unterstützen die meisten aktuellen Browser – daher ist es unser Favorit. Nach Möglichkeiten sollte man den Browser aber auch moderne Containerformate wie das zukunftsträchtige, von Google entwickelte Open-Source-Format WebM zur Verfügung stellen, das auf dem Matroska Media Container basiert und trotz kleinerer Dateigrößen eine bessere Videoqualität bietet, was die Datenlast für mobile Devices verringert. Damit ist es fürs Onlinestreaming geradezu prädestiniert.

2: Auflösung responsiv anpassen.

Neben dem Quotienten aus bestmöglicher Qualität und geringstmöglicher Datenlast hängt die richtige Auflösung von weiteren Faktoren ab: Wird das Video full-screen gezeigt oder nur im kleinen Frame? Wird es zusätzlich verfremdet, beispielsweise mittels Blur-Effekt? Bei viel Bewegung oder vielen Details wird auch ein höher aufgelöstes Video schnell pixelig. Meist bieten 1280 mal 720 Pixel einen guten Kompromiss. Ebenso gilt es, die Bitrate für das Videomaterial auszutarieren. Hier liegt der Mittelweg in der Regel bei einer variablen Bitrate zwischen 3 und 8 Megabit pro Sekunde.

3: Framerate definieren.

25 bis 30 oder auch 60 Frames pro Sekunde sind je nachdem ob viel oder wenig Bewegung im Video stattfindet, die ideale Wahl, damit ein Clip flüssig läuft.

4: Fallback-Lösung anlegen.

Legen Sie auch in Vorschaubild an, damit bereits Content angezeigt wird, während das Video lädt. Dieses Bild dient auch als Fallback-Lösung für den Fall, dass der Browser das Video nicht anzeigt.

5: Sonderfall iOS berücksichtigen.

Auf mobilen Devices sind Hintergrundvideos immer eine Herausforderung- und dies insbesondere bei Apple-Devices. Zwar ist Inline Video Playback seit iOS 10 möglich, sodass man Clips seither auch auf iPhones im Browserfenster anschauen kann. Doch ist Autoplay nur für Videos ohne Tonspur oder mit dem HTML-Attribut <muted> möglich. Umso wichtiger ist es, dass Sie an die Fallback-Lösung in Punkt vier denken.

Gerade erklärungsbedürftige Dienstleistungen und Produkte profitieren von diesem intuitiven Ansatz – ein Beispiel ist hierfür unser Projekt MOODBOARD über das wir berichteten.

Auf den Punkt:

Hero-Videos kreieren Atmosphäre und sorgen für Perspektive in orientierungsbedürftigen Branchen. Sie ermöglichen das Erleben von Unternehmenskultur und publikumswürdigen Showcases. Somit: schickt Superman durch die Leitung!

P.S.: weitere Beispiele findet ihr bei Expedia und Meet the Greek oder auch hier!

  • Quelle: meetthegreek.com.au
  • Foto: MOODBOARD
  • Foto: Expedia