Web Design Trend: Videos als Hintergrund

Den Trend der Fullscreen-Hintergrundbilder kennen wir nun schon einige Zeit. Flash, alte Browser und langsame Ladezeiten haben die flüssige Implementierung von Videos auf Webseiten bisher verhindert. Videos können einer Webseite Dynamik und Atmosphäre geben. Sie ermöglichen Emotionen und die richtige Stimmung aufzubauen und damit eine individuelle Markenidentität zu schaffen. Durch sich immer weiter entwickelnde Technologien wie HTML5, CSS3 und JavaScript ist es mittlerweile möglich, Videos im Web einfach und schnell zu implementieren.

Der (nicht mehr ganz) neue Trend der Designindustrie ist es nun browsergroße Videos als Hintergrundbild einzusetzen. Im Jahr 2014 sah man schon einige interessante und schöne Beispiele – 2015 scheint es damit weiterzugehen. Werden die Hintergrund-Videos richtig umgesetzt, so kann das visuelle Erlebnis überwältigen und extrem eindrucksvoll sein und für eine ganze Weile im Gedächtnis der Besucher bleiben.

Visuelle Stimmungsmacher und Eye-Catcher

Als dynamisches Medium können Video-Hintergründe die Aufmerksamkeit auf sich ziehen und durch immersive, interaktive Erlebnisse die User Experience positiv beeinflussen und dazu einladen, eine Seite weiter und tiefer zu explorieren. Sie können aber auch Produkte aufwerten und in realistischen Nutzungsszenarien zeigen und Begeisterung und Spannung für neue Produkte aufbauen.

Bevor man nun loslegt und ein stimmungsvolles Video dreht, sollte man sich als Designer und Konzepter jedoch zuerst fragen, wie relevant es im Verhältnis zu den Informationen der Webseite oder den Produkten ist. Kann durch das Video die Aussage der Webseite amplifiziert oder ein bestimmtes Gefühl ausgelöst werden? Oder lenkt es vielleicht zu sehr vom eigentlichen Inhalt ab oder ist gar nervig?
Auch sollten natürlich Qualität und Ladezeiten des Videos stimmen. Qualitativ hochwertige Bilder und Bewegtbilder geben dem Besucher der Seite automatisch das Gefühl auf der Webseite einer qualitativ hochwertigen Marke zu sein. Minderwertige Videos erreichen genau das Gegenteil. Und langsame Ladezeiten können dazu führen, dass der Besucher die Geduld verliert und die Seite verlässt, bevor er sich die Hauptinhalte überhaupt anschauen konnte.

So sollte das Video nie Fokus der Webseite sein, sondern das Design und den Inhalt unterstützen und dem Gesamtauftritt mehr Tiefe und Aussagekraft geben. Es gelten also auch hier weiterhin minimalistisches und sauberes Design, ein aufgeräumter Seitenaufbau und einfache und kurze, aber effektive Filme.

Was es schon gibt

Natürlich haben wir uns auch einmal ein paar Beispiele angeschaut und drei – wie wir finden – positive Beispiele herausgesucht:

Wirklich schön umgesetzt hat airbnb.com das im Hintergrund laufende Video. Schöne, entspannte Szenen, die Lust auf Reisen, Urlaub und neuen Menschen begegnen machen. In den Bildern ist kaum Bewegung und die Kameraeinstellung ist fixiert – es kommen lediglich hier und da mal Menschen ins Bild gelaufen oder eine Frau liegt schlafend im Bett und bewegt sich dabei zwischendurch ein wenig. Das schafft Ruhe und Gemütlichkeit, baut Emotion und Spannung auf und bringt die Message „Sei es eine Wohnung für eine Nacht, ein Schloss für eine Woche oder eine Villa für einen ganzen Monat – Airbnb führt Menschen in einzigartigen Reiseerlebnissen zusammen…“ rüber, ohne dabei vom weiteren Inhalt und der Suchmaske abzulenken. Einen Pause-Button gibt es jedoch nicht. Fühlt sich ein Besucher also doch gestört, so hat dieser keine Möglichkeit das Video anzuhalten. In Verbindung mit dem immer sichtbaren Slogan „Willkommen zu Hause“, fühlt man sich mit dem Video im Hintergrund tatsächlich fast so, wie als würde man sich gerade ein gemütliches Zuhause aussuchen.


Auch die Headline des Videos „Willkommen zu Hause“ unterstreicht die Message von Airbnb

Auch die Headline des Videos „Willkommen zu Hause“ unterstreicht die Message von Airbnb

Weitaus mehr Detailinformationen transportiert Skype mit dem Hintergrund-Video auf der Startseite. Zwar schafft es das Video auch Gefühle und Emotionen rüberzubringen, erklärt dabei aber auch noch nebenbei, was Skype eigentlich ist, was man damit machen kann und auf welchen Geräten die Software genutzt werden kann. Durch die vielen unterschiedlichen Menschen wird außerdem deutlich, dass Skype alle Altersgruppen mit seiner Software ansprechen möchte. Auf Ton verzichtet wird hier trotzdem, was dem Video aber in keiner Weise schadet – die Bilder allein sprechen für sich. Und obwohl insgesamt mehr Bewegung auf der Seite ist, fühle ich mich durch die trotzdem relativ ruhigen Kamerabewegungen und Übergänge nicht abgelenkt und genervt. Allerdings gibt es auch hier nicht die Möglichkeit das Video zu stoppen.


Skype zeigt nur durch Bilder in einem Video worum es geht, welche Zielgruppe angesprochen wird und welche Gerätetypen von der Software unterstützt werden

Skype zeigt nur durch Bilder in einem Video worum es geht, welche Zielgruppe angesprochen wird und welche Gerätetypen von der Software unterstützt werden

Auch PayPal macht sich die neuen Technologien zu Nutze und begrüßt den Besucher mit einem schönen Video in dem Menschen in unterschiedlichen Lebenssituationen des Alltags gezeigt werden. Nicht in jeder Szene wird hier die Verbindung zu PayPal ganz deutlich. Trotzdem schaffen sie es mir mit Hilfe des Videos das Gefühl zu geben, das PayPal wesentlich näher, emotionaler und menschlicher ist als ich persönlich es bisher gesehen habe. Und auch das wieder ohne Ton. Positiv hervorzuheben ist bei PayPal, dass der Besucher hier die Möglichkeit hat das Video jederzeit zu stoppen und zu starten.


Fühlt sich ein Besucher gestört, so kann er das Video bei PayPal jederzeit stoppen, oder auch wieder starten.

Fühlt sich ein Besucher gestört, so kann er das Video bei PayPal jederzeit stoppen, oder auch wieder starten.

Fazit

Mit Video-Hintergründen kann man viel erreichen. Und auch wenn diese immer häufiger zu finden sind, erkennt man doch, dass sie meist nicht eingesetzt werden, um lediglich einem Web-Trend zu folgen. Und das ist auch gut so. Aus Erfahrung aus Usability-Tests kann ich nämlich sagen, dass Videos nicht immer gut beim Nutzer ankommen. Sie können sehr schnell nervig und anstrengend wirken und das Gesamterlebnis negativ beeinflussen. Vor allem wenn diese auch noch mit Ton abgespielt und nicht gestoppt werden können.
Die drei Beispiele haben gezeigt, dass Videos mit den richtigen Einstellungen, der richtigen Story und hoher Qualität das Markenimage stärken und vor allem Emotionen und Markenbindung schaffen können. Besonders wichtig ist dabei aber die Relevanz und Qualität des Videos.
(Zum Ende noch einmal ein besonders schönes Beispiel für sehr dezente Integration von Hintergrund-Videos, welches ich nicht vorenthalten möchte: mediaBOOM.)

Zum Projekt „Design im Wandel

eResult verfolgt und dokumentiert bereits seit mehreren Jahren die Entwicklung des Webdesigns von 50 verschiedenen Branchen. Die dokumentierten Screenshots werden regelmäßig ausgewertet und Erkenntnisse hier im Usabilityblog vorgestellt.

Portraitfoto: Jumana Al Issawi

Jumana Al Issawi

Senior Consultant

Open Reply Germany

Bisher veröffentlichte Beiträge: 9

6 Kommentare

  • Danke für den schönen Artikel.

    Konstruktive Kritik:

    Es wäre schön, wenn Sie Fremdwörter wie „explorieren“ oder „amplifiziert“ vermeiden bzw. eindeutschen. Das hat auch mit Benutzerfreundlichkeit (Usability) dem Leser gegenüber zu tun.

  • Jumana Al Issawi

    Hallo Anton,
    Danke für die konstruktive Kritik. Auch die Usability der Beiträge ist natürlich wichtig. 😉

  • Mir ist grad durch Zufall noch ein schönes Beispiel über den Weg gelaufen:
    https://www.toggl.com/

  • Beatrix

    Mir sind diese Hintergrund-Videos bisher nicht bewusst begegnet, erst nach Lesen dieses Artikels 😉
    Dabei ist mir aufgefallen, dass solche Videos mich (immer!) sehr irritieren, wenn ein Bild/Themen-Wechsel stattfindet. Dann denke ich IMMER: Ooops, was ist jetzt passiert? Bin ich auf einer neuen Seite gelandet? Habe ich versehentlich irgendwo geklickt? … und muss mich wieder neu orientieren…

  • Danke usabilityBLOG für das nette Kommentar! Wir von mediaBOOM fühlen uns sehr geehrt 🙂

  • Schöne Beispiele. Mir persönlich gefällt auch die Idee von E-Auto-Pionier Tesla (https://www.tesla.com/de_DE/?redirect=no) gut. Wobei mich persönlich ja mal speziell der Punkt Ladezeit interessieren würde. Bilder komprimiert man aus SEO-Gründen mittlerweile so stark wie möglich, da sind Videos doch eher kontraproduktiv?! Aber die Idee selbst ist schön. Wenn’s denn passt…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.