von Sven In Bewegung (Teil 1): Videos im Web­design

Kein Tag vergeht, an dem nicht die wachsende Bedeutung von Videoinhalten für das Web durch die (Online-)Schlagzeilen geht. Und das zu Recht: Videoinhalte werden dank der massiven Verbreitung von mobilen Endgeräten mit schnellem Internet heute rund 40% öfter angeschaut, als noch vor 4 Jahren. Aber wo spielen Videos eigentlich eine wichtige Rolle und was macht (gute) Videos heute aus?

Videos im Webdesign

Keine Website sollte heute guten Gewissens auf Videos verzichten. Als gestalterisches Element sind sie mittlerweile fest im Repertoire der Webdesigner verankert und das hat nicht nur technische Gründe. Durch HTML5 und CSS3, die mittlerweile Standards im Webdesign sind und sozusagen der Werkzeugkoffer des Webdesigners, wurden Videos einfach zu integrieren und tauchen deswegen seit einigen Jahren immer häufiger auch in Elementen auf, die vorher (starren) Bildern vorbehalten waren.

Auch das Einbetten von Videoplayern wie YouTube oder Vimeo ist mittlerweile weit verbreitet – auch wenn das, insbesondere im Fall YouTube (respektive Google), seit der DSGVO auch ein datenschutzrechtlich relevantes Thema ist. Aber dazu lassen wir uns an dieser Stelle mal nicht aus. Wichtig ist nur: Videos sind einfach zu verwenden im Webdesign und können praktisch in jeder Form eingesetzt werden: als eigenes Inhaltselement (z. B. als eingebetteter Player in einem Blogartikel), als fester Bestandteil der Gestaltung (z. B. in einem Header als großformatiger Hintergrund) oder auch als Animation für einzelne Elemente (z. B. diese wunderbare Steuerleiste auf der Sommeraktions-Seite von Bang&Olufsen)

Videos haben mehrere große Vorteile im Webdesign, wenn es um die Aufbereitung von Informationen geht:

Videos als Türöffner: Einstieg

Als Nutzer entscheide ich mich in der Regel aktiv für das Abspielen eines Videos. Selbst dort, wo ein Autoplay das Video beim Aufruf der Seite startet, habe ich die Möglichkeit durch Scrollen diesen Inhalt zu überspringen. Das schafft im Webdesign die Gelegenheit, tiefere Einstiege in ein Thema oder einen Seiteninhalt zu bieten – ohne dafür mehr vertikalen Platz zu benutzen!

Ein Videoplayer verhält sich wie jedes andere Gestaltungselement responsiv und passt sich dem jeweiligen Endgerät an. Für das Webdesign mit Blick auf Mobile first heißt das aber auch: wenn der tiefe Einstieg durch das Video wegfällt, etwa weil es bei mobiler Nutzung durch ein Bild ersetzt wird, sollte ich darauf achten, dass keine Informationslücken entstehen.

Videos schaffen Verständnis: Inhaltstiefe

Videos sind, je nach Länge, hervorragende Mittel, um komplexe oder in Textform zu ausführliche Informationen visuell auf den Punkt zu bringen. Denken wir an Video-Einführungen in eine neue Software, in denen bestimmte Abläufe gezeigt und erklärt werden: dieselbe Anleitung wäre lang zu lesen, müsste ausführlich bebildert sein und würde spätestens auf einem mobilen Endgerät ewiges Scrollen garantieren.

Außerdem habe ich durch interaktive Schaltflächen in Videos die Möglichkeit, weitere Videos mit dem jeweils aktiven zu verknüpfen (siehe YouTube). Das bedeutet, dass ich den Inhalt oder das Thema meines Videos beliebig vertiefen kann, ohne mehr Seiten dafür zu bauen. Die Tiefe eines Videoinhalts auf meiner Website ermöglicht es mir also, in der Seitenstruktur trotzdem relativ flach zu bleiben

Videos machen Lust auf mehr: Aktivierung

Videos sind nicht nur deswegen so beliebt, weil sie einfach zu konsumieren sind (schließlich muss ich nur zusehen, nicht unbedingt aktiv lesen). Weil wir in einer extrem visuellen Medienwelt leben, sind wir außerdem auf sich bewegende visuelle Reize programmiert und schenken wechselnden Bildern länger unsere (schwindende) Aufmerksamkeit. Deswegen sind Videos perfekt, um die Aufmerksamkeit von Seitenbesuchern auf sich zu ziehen, zu bündeln und dann für die weitere Reise auf der Website zu nutzen.

Call-to-Actions lassen sich deswegen nicht nur in Texten wunderbar platzieren, sondern eben auch in Videos. Das ist der Grund, warum YouTuber generell einen Hinweis auf das Abonnement-Feature in ihren Videos platzieren und auf die Kommentare verweisen. Am besten sind solche CTAs mit einer unmittelbaren Belohnung verknüpft, wie einer Mikrointeraktion oder einem weiteren (Video-)Inhalt, der die Aktion mit einem emotionalen Bonus abschließt. Gerne auch so liebevoll, wie das High Five Minigame von MailChimp:

Auf Wiederlesen!

Nach diesem eher technischen und theoretischen Einstieg in die bunte Bewegtbildwelt geht es im zweiten Teil um die richtigen und beliebtesten Videoformate.

Zurück

Wie können wir helfen?

Internet Explorer? Ernsthaft? Aufgrund Ihres Browsers sehen Sie hier nichts! Spätestens seitdem Microsoft selbst vor der Nutzung des Internet Explorers warnt, haben wir uns entschlossen diese Webseite nicht für eine "Kompatibilitätslösung für ältere HTML-Anwendungen" (Zitat Microsoft) zu optimieren.

Wer mehr wissen will findet hier mehr Infos, oder Sie laden sich einfach einen echten Browser herunter (einfach auf die Icons klicken) und genießt die Möglichkeiten des Internets im Jahr 2019.