Animationen als Erfolgsfaktor guter UX
Animationen machen brrrrrrrrrrrrrrrrrrrrrt.
Wenn wir wissen, dass wir in 2 Sekunden überzeugen müssen, dann muss man sich ins Zeug legen. Geht das mit Text? Nein! Geht das mit einem Bild? Vielleicht. Geht das mit einem Überraschungseffekt? Ganz bestimmt! Gute Animationen machen Spaß und überraschen den Nutzer. Das ist für viele Dinge gut, vor allem aber um den Nutzer zu überzeugen und bei Laune zu halten. Wie das geht? Zeigen wir euch hier.
Illustrationen sind sowas von angesagt
Bewegte Illustration sogar noch viel mehr.
Illustration werden heute gerne genommen, besonders dann, wenn das Bildmaterial knapp oder das Produkt abstrakt ist. Es gibt einfach nicht für alles passende Bilder und zu metaphorisch sollte es dann ja auch nicht werden. Illustration geben UX-Designern viel Gestaltungsspielraum, können gekauft, angepasst als auch animiert werden und werten einen modernen Internetauftritt auf.
Verweildauer & Joy of Use erhöhen
Zentraler Bestandteil von gutem UX-Design ist der Joy of Use. Der Nutzer soll Spaß an der Bedienung der Website oder App haben. Interaktive Elemente schaffen positive Erlebnisse und machen Lust auf mehr (Seitenaufrufe). Das Gehirn begreift Bilder deutlich schneller als Texte und ist bei Bewegtbildern noch viel aufmerksamer. Somit sind SVG-Animationen das Ideale Stilmittel um Nutzer zu begeistern und länger auf der eigenen Website zu halten.
Eine höhere Verweildauer und mehr Seitenaufrufe haben eine höhere Chance die Ziele der Website (Lead, Sale) zu erreichen und tragen somit auch zum Unternehmenserfolg bei.
Wie animiert man richtig?
Physik matters: Reibung, Masse & Schwerkraft
Animation ist nicht gleich Animation. Es gibt ruckeligen Krempel und es gibt wirklich gute, organische und hochauflösende SVG-Animationen. Einer der entscheidenden Faktoren von gelungen SVG-Animationen ist das richtige Easing der jeweiligen Elemente. In der Natur starten oder stoppen Objekte nicht sofort. Stattdessen brauchen diese Objekte eine bestimmte Zeit, um zu beschleunigen oder zu verlangsamen. Easing ist eine Technik, die dafür sorgt, dass sich Elemente so bewegen, als ob natürliche Kräfte wie Reibung, Schwerkraft oder Masse eine Rolle spielen.
Einmal mit und einmal ohne Easing
Die linke Illustration benutzt ein Easing (Ease In Out Quart), die rechte Illustration nutzt kein Easing. Die rechte Illustration wirkt dadurch weniger dynamisch und fühlt sich nicht echt an. Wenn Elemente animiert werden, dann sollte man das auch richtig machen. Google gibt klare Empfehlungen und Richtlinien vor, die jeder nachlesen kann: Understanding Motion.
Bedienelemente animieren
Neben visuellen Stilmitteln wie Illustrationen lassen sich auch Dinge des User Interface (UI) animieren und damit grundlegend optimieren. Neben normalen Hover-Effekten nehmen auch komplexere Morph-Animationen Einzug in die Gestaltung moderner, digitaler Anwendungen.
Welchen Benefit bietet die Animation von Komponenten des User Interfaces?
Animationen schaffen Begeisterung, verleihen gewöhnlichen Interaktionen einen besonderen Charakter, können den Stil einer Marke emotional und subtil zum Ausdruck bringen. Zudem bringen Animationen eine natürliche Haptik in digitale Anwendung und sorgen für ein Wohlfühl-Klima, indem Nutzer deutlich besser konvertieren.
Fazit
Heute kommt man eigentlich nicht mehr um Animationen rum. Klar, so Dinge können aufwändig sein und auch mal mehrere Tage pro Illustration an Arbeitszeit kosten, zahlen aber unglaublich nachhaltig auf das Nutzererlebnis ein. Und eine gute User Experience ist zentraler Bestandteil erfolgreicher, digitaler Lösungen die mehr verkaufen oder mehr Leads generieren.
Artikel teilen:
