Der unvergängliche Charme der Web-Animation

Was genau steckt jedoch hinter dem Erfolg dieser Inhalte und, vor allem, wie können wir sie auf unseren Websites oder in sozialen Netzwerken effizient nutzen, um unsere eigene Online-Präsenz oder unsere Unternehmenstätigkeit zu fördern?

Damit beschäftigen wir uns in diesem Artikel.

Haben Sie sich das auch schon einmal gefragt? Es mag seltsam klingen, aber die Antwort ist in unserem Ur-Hirn zu suchen.

Vielleicht nagt das jetzt etwas an unserem Selbstbewusstsein, weil wir uns ja gern als zivile und hoch entwickelte Lebewesen sehen. Dennoch tragen wir auch heute noch die Instinkte des Urmenschen in uns, der erbarmungslos und heimtückisch um sein Überleben kämpft.

Die Neurowissenschaft gliedert unser Gehirn in drei Regionen:

Dieses Ur-Hirn hat sechs wichtige Eigenschaften:

Damit ist auch schon erklärt, warum wir uns von Videos und Animationen angezogen fühlen. Sie liefern bewegte Bilder und unser Ur-Hirn ist darauf programmiert, auf solche Reize sofort zu reagieren. Denn wenn sich in der Urzeit etwas plötzlich bewegte, konnte dies nur zwei Dinge bedeuten:

In jedem Fall bedeutete es aber: „Achtung! Du musst reagieren. Greife an oder fliehe.“

Auch heute verhält es sich ähnlich. Bewegung weckt sofort unsere Aufmerksamkeit und regt eine Reaktion an. Wenn wir diesen Mechanismus verstanden haben, können wir ihn bei der Erstellung von Websites und Werbekampagnen zu unserem Vorteil nutzen.

Die Faszination, die bewegte Bilder auf uns ausüben, ist so groß, dass ihre Entstehung viel weiter zurückliegt, als Sie vielleicht denken.

Das älteste bekannte Beispiel ist eine mehr als 5.200 Jahre alte Terrakotta-Schale, die im Iran gefunden wurde. Wird diese Schale um sich selbst gedreht, stellen die fünf Szenen, mit denen sie dekoriert ist, eine Ziege dar, die springt, um Blätter von einem Zweig zu ergattern.

Ein weiteres Beispiel sind die Schattenspiele, die im antiken Ägypten und China an Wände projiziert wurden.

Zum Ende des 17. Jahrhunderts kam dann die Laterna Magica, deren Funktionsprinzip über Geräte mit fantasievollen Namen wie Thaumatrop, Zoetrop oder Kinetoskop zum berühmtesten  Kinematograph der Brüder Lumière führte, bei dem die optische Illusion nicht mehr durch gezeichnete Linien, sondern mit Hilfe des fotografischen Films erzeugt wurde.

Ende des 19. Jahrhunderts: Von hier war es nur noch ein kurzer Schritt, mit dem sich die Animation in den Kinos und in jüngerer Vergangenheit im Web etablierte.

Gegen Ende der 1990er-Jahre war der Enthusiasmus groß und es wimmelte im Web geradezu von Flash-Animationen, die damals als echte Sinnbilder der Modernität wahrgenommen wurden. Nach diesem ersten Hype begann man dann jedoch, mehr auf die Performance von Websites zu achten und die Nutzbarkeit wurde wichtiger als die Spektakularität. Die Flash-Animationen waren zu datenintensiv und nur unzureichend kompatibel mit Mobilgeräten, was die weitere Entwicklung bestimmte.

Da uns heute unzählige Tools und Methoden für die Entwicklung zur Verfügung stehen, nutzen viele Website-Betreiber nun wieder Animationen, um die Aufmerksamkeit ihrer Besucher zu fesseln, allerdings tun sie es bewusster und wählen im Vergleich zu früher schlichtere Designs.

Aus dem bisher Gesagten ging bereits hervor, dass Animationen unterschiedliche Zwecke haben können. Es gibt Animationen, mit denen eine Funktion erklärt, ein Feedback gegeben oder ein Verhalten angekündigt werden soll, während andere einfach das Surferlebnis angenehmer gestalten. Erstere werden als Funktionsanimationen bezeichnet und gehören zum Interaktionsdesign. Zweitere hingegen sind emotive Animationen und betreffen das Motion Design.

Beispiele für Funktionsanimationen auf Websites sind die Übergänge zwischen den einzelnen Seiten oder auch die sogenannten Mikrointeraktionen. Eine typische Mikrointeraktion ist zum Beispiel eine Schaltfläche, die sich etwas vergrößert, wenn der Mauszeiger darüber geführt wird.

Oder denken wir kurz an all die Apps, die wir am Smartphone nutzen. Hier sind die Funktionsanimationen besonders zahlreich, vom Pull-down zum Aktualisieren über Ladeanzeigen bis hin zum Wischen, um zum nächsten Inhalt zu gelangen.

Die Gemeinsamkeit dieser Animationen besteht darin, dass sie nicht nur Deko sind, sondern ein Konzept oder einen Prozess optimieren.     

Alle anderen sind emotive Animationen, die zwar nicht denselben Zweck erfüllen, aber dennoch nützlich sein können.

Zum Beispiel können sie die Identität einer Marke untermauern und das Surfen für Nutzer angenehmer gestalten.

Emotive Animationen können mehr oder weniger komplex sein. Sie erleichtern das Storytelling und unterstreichen eine Botschaft schnell und effizient. Darum eignen sie sich nicht nur für Websites, sondern auch für Blogbeiträge oder die Kommunikation in sozialen Netzwerken, wo alles eine schnelle Wirkung erzeugen sollte.

Der Ausgangspunkt für alle, die professionell Animationen erstellen möchten, ist nicht das Erlernen der Bedienung eines bestimmten Tools. Beginnen Sie am besten damit, sich die Grundlagen der klassischen Animation anzueignen, zum Beispiel mit dem 1986 erschienenen Buch „The Illusion of Life“ der zwei berühmtesten Animationsdesigner von Disney, Frank Thomas und Ollie Johnston.

Johnston und Thomas zufolge haben Animationen so viel Potenzial, weil sie die „Illusion von Leben“ erzeugen. Damit dieser Effekt aber auch wirklich erzielt wird, müssen die folgenden 12 Grundsätze: beachtet werden.

Werden beim Erstellen einer Animation die Grundsätze der Physik, wie Schwerkraft, Reaktionen und Zeit, berücksichtigt, wirkt sie realistischer und erzählt nicht nur eine Geschichte besser, sondern kann auch:

... und vieles mehr.

In all diesen Fällen führen uns Animationen durch verschiedene Interaktionen und helfen uns so, Beziehungen, Strukturen und das Verhältnis zwischen Ursache und Wirkung zu erkennen. Mit anderen Worten, Animationen bereichern die Sinneswahrnehmung, sodass wir Situationen besser verstehen und auf diese Weise angemessen handeln.

Aus diesem Grund sind Animationen weitaus mehr als Verzierungen, mit denen wir unsere Websites schmücken können. Wenn wir sie gut planen und sorgfältig umsetzen, können Animationen unsere Kommunikation erheblich bereichern sowie attraktiver und effizienter gestalten.