Wie wird ein Bild zum Leben erweckt?
Zunächst sollten wir wissen, was eine Animation ist, bevor wir uns mit ihrer Verwendung im Webdesign beschäftigen. Einfach ausgedrückt, ist eine Animation eine Abfolge von Einzelbildern, die ein bewegtes Bild ergeben. Um eine flüssige Bewegung zu erhalten, sind etwa 20 Einzelbilder pro Sekunde erforderlich. Im Fachjargon nennt man dies FPS, was so viel wie «frame per second» bedeutet. Der Inbegriff einer Animation ist das bekannte Daumenkino, das den meisten Menschen wohl vertraut sein mag.
Das Medium der Animation steht für den Ausdruck von Kreativität und die künstlerische Freiheit, surreale und fantasievolle Geschichten zu erzählen. Ob sprechende Tiere, umherfliegende Häuser oder sogar neu erfundene Figuren, die zum Leben erweckt werden. Das Medium fasziniert und überzeugt nicht nur Kinder, sondern auch Erwachsene. Zeichentrickserien wie «Family Guy», «die Simpsons» oder «Rick and Morty» sprechen für sich.
Konkrete Vorteile für die Verwendung von bewegten Bildern
Wir wissen nun, dass Animationen besonders unterhaltsam sind und einen neuen kreativen Spielraum eröffnen. Doch was sind die konkreten Vorteile einer interaktiven Webseite und des Einsatzes von Animationen?
- Die Aufmerksamkeit einer Person richtet sich zuerst auf ein bewegtes Bild und nicht auf statische Objekte.
- Durch richtig eingesetzte Animationen, werden die Nutzenden im Vorfeld angeleitet, wie sie eine Homepage richtig nutzen können.
- Animationen erzählen emotionale Geschichten besser und einfacher, indem sie den Betrachtenden visuell fesseln.
- Komplexe Themen lassen sich einfacher durch Bilder erklären, anstatt von komplizierten und langen Texten.
- Nutzende einer Seite können die Kontrolle über das Geschehen übernehmen.
- Gezielt eingesetzt, erhöhen sie den Besucheraufruf, was ausgedehnte und komplizierte Texte weniger gut können.
- Inhalte werden mit einer Wahrscheinlichkeit von 2/3 angeklickt, weil die Neugierde der Nutzenden durch ein aktives Bild gesteigert wird.
- Die durchschnittliche Verweildauer auf einer Webseite beträgt, abhängig vom Inhalt, eine Minute. Kreative und interaktive Animationen erhöhen diese Zeit auf bis zu 15 Minuten.
- Die Wahrscheinlichkeit erhöht sich, dass Besuchende die Seite teilen und wieder besuchen.
- die Absprungrate minimiert sich, da der Inhalt betrachtende nicht langweilt. Der Anreiz die Homepage so gut wie möglich zu erkunden, wird gesteigert.
- Die Glaubwürdigkeit, Qualität und der Gesamteindruck steigen an.
- Wichtige Informationen und Botschaften, die visuell vermittelt werden, können besser verarbeitet und wahrgenommen werden.
- Ein Besuch einer Seite wird zu einem Erlebnis
- Und nicht zuletzt sind Animationen dekorativ und machen Spass beim Betrachten oder bei der Interaktion.
Kurzum: Richtig eingesetzte Animationen und Interaktivität verbessern die Funktion einer Webseite. Sie zeigen den Nutzenden schnell, effektiv und visuell, wie sie eine Seite nutzen können. Ausserdem wird ein Aufenthalt zu einem Erlebnis, der länger dauern kann und zu guter Letzt länger im Gedächtnis verleibt. Es ist wichtig, nicht zu vergessen, dass jede Aktion eine Reaktion auslöst. Genau dieses Wissen können Sie gezielt nutzen, um bei Ihrem Gegenüber die gewünschten Emotionen zu wecken. Schliesslich nimmt unser Gehirn Informationen zu 60 % rein über das Sehen wahr.
Zahlreiche Möglichkeiten, um kreativ zu werden
Jetzt kennen wir die Vorteile der interaktiven Webanimation und sind bereit, das Wissen in die Tat umzusetzen. Es gibt verschiedene Konzepte und Elemente, die Sie in Ihre Webseite einbauen können. Ich werde nun die beliebtesten Möglichkeiten vorstellen, um einen kurzen Überblick zu schaffen. Das sind aber bei Weitem nicht alle Möglichkeiten, die Sie haben; der Kreativität sind keine Grenzen gesetzt.
Motion Graphics; animierte Grafik Elemente
Die einfachste Erklärung für «Motion Graphics» sind Grafiken, die sich bewegen. Sie haben die gleiche Funktion wie gewöhnliche Animationen; grafische Elemente wie ein Logo werden zum Leben erweckt. Sie sind einfach zu implementieren und lassen ihre Homepage sofort ein wenig aufregender aussehen. Mit der gleichen Absicht, das Interesse eines Publikums zu wecken, etwas klar und verständlich zu machen, zu unterhalten und gut auszusehen.
Fortlaufende Geschichten
Die meisten «Scrollytelling»-Seiten sind One-Pager Seiten, in denen eine Geschichte durch lineares Scrollen mit einem Anfang und einem Ende erzählt wird. Dadurch werden Navigationselemente, Banner, Seitenleisten und andere Elemente überflüssig und lenken nicht von der Geschichte ab. Text, Bild und Video werden zu einem einzigen grossen Konzept. Durchs Scrollen werden Betrachtende Stück für Stück durch die Handlung geführt.
Moderierende Charaktere sind unsere Freunde
Die sprechenden Charaktere, welche Handlungen moderieren, sind ein Animationselement, welches das Gegenüber an der Hand durch den Inhalt führt. Er kann direkt ansprechen oder beiläufig Dinge erwähnen oder erklären. Dabei fühlt man sich begleitet und nicht im Stich gelassen. Komplexe Abläufe können gemeinsam Schritt für Schritt durchlaufen werden und sorgen dafür, dass jeder versteht, worum es geht. Ein weiterer Vorteil ist, dass man eine besondere Bindung aufbaut und eine Art persönliche Beziehung entsteht.
Parallaxen Bildlauf, was ist das?
Beim «Parallaxen Bildlauf» befinden sich die Objekte im Vorder- und Hintergrund nicht auf der gleichen Ebene. Eine Aktion durch eine Person bewirkt, dass sich die Elemente mit unterschiedlicher Geschwindigkeit bewegen. Meistens ist der Hintergrund langsamer als das Element im Vordergrund. Ein 2-dimensionales Bild erscheint sofort als losgelöst und dreidimensional. Der Auslöser einer Bewegung kann durch Scrollen oder Mausbewegungen des Nutzenden erfolgen und bezieht die Interaktivität zwischen der Webseite und des Betrachters wieder mit ein.
Sind Erklärvideos nach wie vor relevant?
Komplexe Themen, Botschaften und Informationen lassen sich mithilfe einem kurzen Erklärvideo oft leichter visuell erklären. Inhalte können Betrachtenden spielerisch und interessant präsentiert werden. Ausserdem ist die Aufmerksamkeit für ein kurzes und informatives Erklärvideo wesentlich höher als für einen komplizierten und langen Text. Der Nachteil eines Erklärvideos ist, dass es die beliebteste Art ist, Animationen in Webdesigns zu implementieren. Deshalb rate ich Ihnen, einen einzigartigen und angemessenen Animationsstil zu wählen und damit eine fesselnde und emotionale Geschichte zu erzählen.
Wieso fliessende Übergänge äusserst relevant sind
Das menschliche Auge ist darauf ausgelegt, fliessende Übergänge als angenehm zu empfinden. Abgehackte oder stockende Übergänge sollten so weit wie möglich vermieden werden, da sie irritieren oder das Gefühl eines Fehlers vermitteln. Übergänge wie Wischen, verblassende Farbverläufe, Verkleinerung von Elementen verbessern das Nutzererlebnis und lassen die Webseite als gelungen und angenehm erscheinen. Je fließender alles abläuft, desto geringer ist die Gefahr, den Blick auf den gewünschten Teil zu verlieren.
Die Feinheiten der Mikro Interaktionen
Um ein optionales Benutzererlebnis für ein Webdesign zu erreichen, bleiben oft kleine Lücken, durch die sich die Seite unvollständig anfühlt. Mikroanimationen wie ein blinkender Call-to-Action-Button oder ein einfliegendes Bildelement können diese Lücken füllen. Es ist wichtig, die Balance zwischen zu wenig und zu viel zu finden. Oft hilft es, Aussenstehende zu fragen, wie die Homepage für sie aussieht.
Unterstützende Klänge
Ein weiteres wesentliches Element ist der Ton einer Animation. Für mich persönlich ist das optional, aber das Tüpfelchen auf dem i. Mit dem richtigen Ton kann man das Beste aus einer Animation herausholen und die visuelle Botschaft unterstützen. Sie können damit völlig frei kreativ sein, und es ist ideal, um das Nutzererlebnis so grossartig wie möglich zu gestalten.
Ladezeiten mal anders
Beim Laden einer Seite kann es, je nach Datenmenge, zu langen Wartezeiten kommen. Gerade in dieser Zeit sollten Sie das Zielpublikum und ihr Interesse an der Homepage gewinnen. Sobald sich Menschen langweilen, besteht die Gefahr, dass man die Internetseite verlässt. Niemand langweilt sich gerne, deshalb sollte selbst das Warten zu einem Erlebnis werden. Es besteht die Möglichkeit, die eigene Markenpersönlichkeit zu präsentieren und Betrachtende je nach Situation sogar zu einem Lächeln verleiten.
Meine letzten Worte
Ich persönlich könnte mich stundenlang mit interaktiven Webseiten mit Animationen und «Motion Graphics» beschäftigen und ewig darüber reden/schreiben. Doch nun ist es an der Zeit, einen Schlussstrich unter dieses riesige Spektrum zu ziehen. Technischer Wandel und Fortschritt halten uns alle auf Trab, so auch Storytelling, Animation und Interaktion auf Webseiten. Deshalb möchte ich Sie ermutigen, einen Schritt in diese Welt zu machen. Die künstlerische Freiheit und die Kreativität sind grenzenlos, und es macht Spass, sie im World Wide Web auszuleben.
