März 2020
Animation im UX Design
Bereits mit einfachen Animationstechniken läßt sich die Nutzererfahrung wirksam verbessern. So funktioniert Animation im UX Design.
Von Markus Remscheid
1. Aufmerksamkeit steuern
Bewegte Objekte setzen starke visuelle Reize und ziehen die Blicke der Nutzer auf sich. Unser Auge nimmt Bewegung dabei besonders gut im peripheren Blickfeld, d.h. ausserhalb des gerade fixierten Bereichs, war. So kann mit Hilfe von Animation die Aufmerksamkeit gezielt auf bestimmte Elemente gelenkt werden. Auch wenn diese ausserhalb der gerade anvisierten Fläche liegen.
Typischer Anwendungsfall – ein Artikel wurde dem Wunschzettel hinzugefügt:
Um dem Nutzer zu verdeutlichen, das seine Aktion erfolgreich war, macht sich das Wunschzettel-Icon durch ein kurzes pulsieren im Header bemerkbar. Gleichzeitig zeigt ein kleines Badge am Wunschzettel Icon an, das ein Artikel hinzugefügt wurde.
2. Raumorientierung verbessern
Der Nutzer bewegt sich in unterschiedlichen Dimensionen durch eine Webseite. Meist springt er über Links von einer Seite zur nächsten. Aber ein Link kann auch zu einem anderen Bereich auf der gleichen Seite führen oder ein neues Fenster öffnen. Aufgrund der kleinen Displays verliert der User gerade auf mobilen Endgeräten schnell den Überblick.
Gute UX-Animation kommt hier helfend zur Hand, indem sie die Übergangsphase von einem Zustand zum nächsten für die Nutzer erlebbar macht. Z.B. durch Überblendung zwischen zwei Seiten oder indem sich ein Element über ein anderes schiebt, statt direkt zu erscheinen. Dies hilft dem Nutzer zu verstehen, wo er sich gerade befindet und wie Elemente zueinander stehen.
Typischer Anwendungsfall – eine „Sprungmarke“, wie z.B. ein „Zurück nach oben“-Button:
Ein animiertes Scrollen zum Sprungmarkenziel, verdeutlicht dem Nutzer, das er sich nach wie vor auf der gleichen Seite befindet. Ein schlagartiges Springen dagegen läßt den User im Unklaren darüber, ob er sich auf einer neuen oder noch auf der alten Seite befindet. So verliert der Nutzer schnell die Orientierung und kann beispielsweise Schwierigkeiten bekommen, wieder zurück zum Ausgangspunkt zu finden.
3. Emotionale Mehrwerte
Wie visuelles Design auch, ist Animation eine universal verständliche Sprache, die einem Interface eine emotionale Qualität verleiht. Je nachdem, wie Bewegung eingesetzt wird, kann sich die grafische Benutzeroberfläche für die User unterschiedlich anfühlen: ruhig, fließend, verspielt oder sachlich. Dagegen wirkt ein unanimiertes Interface schnell hart, abweisend und leblos. Aber bereits eine einfache Animation, wie beispielsweise ein Überblendeffekt zwischen zwei Zuständen, verbessert die emotionale Wirkung und erhöht den „Joy of use“.
Typischer Anwendungsfall – Hover-Effekte bei Buttons & Links:
Wird der Hovereffekt, wie z.B. eine Farbänderung, eingeblendet, statt direkt zu erscheinen, macht dies einen großen Unterschied. Das Interface „fühlt“ sich so natürlicher und lebendiger an.
Wann ist eine Animation gelungen?
UX-Animation sollte kein visuelles Beiwerk sein, sondern immer der Verbesserung der Nutzererfahrung dienen. Folgende Fragen helfen bei der Beurteilung, ob eine Animationsidee gelungen ist:
- Macht die Animation eine Interaktion besser nachvollziehbar?
- Erleichtert die Animation die Raumorientierung?
- Verbessert die Animation die Verständlichkeit?
- Haucht die Animation dem Interface Leben ein?
Wenn eine der Fragen mit Ja beantwortet werden kann, hat eine Animation das Potential die User Experience zu verbessern.
Wenn die Animation dann noch natürlich und unaufdringlich wirkt, zur Persönlichkeit der Marke passt und vom User gar nicht erst bewußt wahrgenommen wird, steht dem Einsatz der Animation nichts mehr im Weg. Immer vorausgesetzt, die Performance der Seite leidet nicht darunter. Denn auf keinen Fall sollte die Journey durch unnötige Wartezeiten verzögert oder gar unterbrochen werden.
Markus Remscheid ist Gründer und Geschäftsführer von H2D2 und bringt inzwischen mehr als 15 Jahre Erfahrung in der Gestaltung von Interface-Systemen für große und komplexe E-Commerce-Sites mit. markus.remscheid@h2d2.de, Telefon: 030. 78 89 03-21