Website Animationen eröffnen und stärken neue Interaktionsmuster, schaffen Aufmerksamkeit und fördern den spielerischen Umgang mit digitalen Services & Produkten. Wir erklären, was Sie beachten müssen und welche modernen Tools Sie nutzen können.
Nutzen von Website Animationen
Was bedeutet Animation? Der Begriff leitet sich vom lateinischen animare ab, wobei anima Seele bedeutet. Demnach heißt animieren so viel wie “beseelen” oder “zum Leben erwecken”. Für digitale Produkte bedeutet das: Animationen beleben die eigene UI und schaffen ein interaktives Gesamterlebnis.
Website Animationen sind keine reinen Dekorationselemente, sondern sollten dazu beitragen, ein lebendiges & nutzerfreundliches Produkt zu liefern. Daher sollten Website Animationen sich drei wesentlichen Zielen unterordnen:Was bedeutet Animation? Der Begriff leitet sich vom lateinischen animare ab, wobei anima Seele bedeutet. Demnach heißt animieren so viel wie “beseelen” oder “zum Leben erwecken”. Für digitale Produkte bedeutet das: Animationen beleben die eigene UI und schaffen ein interaktives Gesamterlebnis.
Website Animationen sind keine reinen Dekorationselemente, sondern sollten dazu beitragen, ein lebendiges & nutzerfreundliches Produkt zu liefern. Daher sollten Website Animationen sich drei wesentlichen Zielen unterordnen:
Verbesserung der UX
Animationen tragen dazu bei, eine nahtlose und gute Benutzererfahrung zu schaffen. Zum Beispiel geben Ladeanimationen Nutzer:innen ein Feedback über den Ladeprozess.Gesteigerte Nutzerinteraktion
Animationen ermutigen Nutzer:innen dazu, mit einem digitalen Produkt zu interagieren. Hierbei helfen beispielsweise Micro-Animationen, wie animierte Schaltflächen den Nutzer:innen Funktionen und Features näherzubringen.Stärkung der Nutzerbindung
Gut gestaltete Website Animationen fesseln und lenken die Aufmerksamkeit der Nutzer:innen. Das schafft nicht nur Interesse, sondern hilft Nutzer:innen und ermutigt zur Auseinandersetzung mit dem Content. So lädt eine animierte Bildergalerie Nutzer:innen zum Erkunden ein.
Allgemein sind Animationen nicht mehr aus modernen digitalen Produkten hinauszudenken. Oftmals handelt es sich um kleine und dezente Animationen, die wir im Alltag selten bewusst wahrnehmen. Als visuelles Feedback runden sie das Produkt ab und sind essenzieller Bestandteil einer guten UX.
Best Practices: Was Sie bei der Umsetzung von Animationen beachten sollten
Um diese Ziele zu erreichen, sollten Animationen mit Bedacht eingesetzt werden. Setzen Sie also nicht nur auf Animationen, um Dynamik zu schaffen, sondern setzen Sie zielgerichtete Akzente. Ob Storytelling bei einer Marketing Kampagne, Produktseite oder App - Animationen sollten Ihren Content und Ihre Aussage unterstreichen.
Hierbei helfen einige allgemeine Kriterien:
Nicht überladen
Setzen Sie Animationen mit Bedacht ein, um Ihre Nutzer:innen nicht zu überlasten. Zu viele Animationen können sowohl die Performance als auch die Benutzerfreundlichkeit beeinträchtigen und Ihre Nutzer:innen von grundlegenden Funktionen ablenken.Mobilfreundlichkeit
Bei der Entwicklung sollte der reduzierte Platz auf mobilen Endgeräten berücksichtigt werden. Bestimmte Interaktionsformen, wie Hover-Effekte, sollten Mobile mangels eines Cursors entfallen.Barrierefreiheit
Einige Nutzer:innen reagieren empfindlich auf Bewegungen, folgen Sie daher Best Practices um Geräte- und Browsereinstellungen auszulesen oder bieten Sie Ihren Nutzer:innen die Option Animationen zu deaktivieren oder zu pausieren.Konsistenz
Bei der Entwicklung von Animationen sollten Sie darauf achten, eine konsistente Benutzererfahrung zu liefern, verschiedene Elemente und Seiten sollten sich möglichst für die Nutzer:innen vorausschaubar verhalten.Geschwindigkeit
Animationen sollten weder zu schnell noch zu langsam sein, in der Regel liegt ein guter Wert für die Animationsdauer zwischen 200 und 500 Millisekunden. Ist die Animationsdauer zu kurz, können Nutzer:innen sie nur schwer wahrnehmen, zu langsame Animationen hingegen verzögern die Interaktion und wirken sich negativ auf die UX aus.
Tools für die Entwicklung von Website Animationen
Bei der Gestaltung und technischen Entwicklung von Website Animationen steht eine große Auswahl an Tools und Libraries zur Verfügung.
Das Design-Tool Figma bietet beispielsweise von Haus aus ein Smart-Animation Feature. Zusätzlich gibt es eine Fülle an Plugins, die sie bei der Gestaltung und beim Export von Animationen unterstützen. Auch Adobe bietet eine ganze Palette an Tools für die Gestaltung von 2D- und 3D-Animationen. Eine kostenlose Alternative um 3D Modelle für Ihre Animationen zu rendern bietet das OpenSource Tool Blender.
Auch beim Development steht eine breite Auswahl an JavaScript Libraries zur Verfügung:
GSAP
ist eine leistungsstarke Animations-Library, die kommerzielle Nutzung erfordert eine Lizenz.Anime.js
ist eine Open Source Library, die die Umsetzung beeindruckender Animationen ermöglicht und unsere präferierte Go-to-Lösung.Three.js
ist ebenfalls Open Source und ermöglicht die Gestaltung von aufwändigen 3D-Animationen
Fazit: Animationen sind essenzieller Bestandteil moderner UX
Animationen ermöglichen intensivere Nutzererfahrungen. Eine gelungene Integration fördert die UX und schafft es, durch Effekte gezielt Aufmerksamkeit zu wecken. Indem Sie den Fokus und die Aufmerksamkeit von Nutzer:innen zielgerichtet lenken, unterstützen Animationen auch bei der Nutzerführung und ermöglichen es, die User Journey deutlich zu verbessern:
Ob es darum geht, komplexe Informationen nachvollziehbar zu vermitteln, Ihre UI spielerisch erlebbar zu gestalten, Ihr Marketing eindrucksvoll zu akzentuieren oder Ihr Produkt nahezu räumlich greifbar zu präsentieren – im Fokus steht Ihr digitales Produkt. Gelungene Animationen setzen Ihr Business und Ihr Produkt individuell und mit einem beeindruckenden Wow-Effekt in Szene.
Sauber umgesetzte Website Animationen sollten konsistent, barrierefrei und ganz im Dienste einer guten UX stehen. Das setzt ein tiefes Gesamtverständnis des Produkts voraus, um mit dem Blick fürs Detail ein starkes Gesamterlebnis zu schaffen.
Ihrem digitalen Produkt fehlt der letzte Feinschliff? Gerne beraten wir Sie zu sinnvollen Website Animationen und runden Ihre User Experience ab.
