Animation Guidelines
10/10
Begleitende Animation
Auf den Punkt gebracht
Umliegende Elemente eines animierten Elements reagieren auf dessen Animation.
Grundlagen
In Interfaces kann es vorkommen, dass zwei Aktionen gleichzeitig ablaufen. Das ist zum Beispiel der Fall, wenn die umliegenden Elemente eines animierten Elements auf dessen Animation reagieren. Die Nebenaktionen finden parallel zur Hauptaktion statt, bleiben aber immer untergeordnet und im Hintergrund.
Beispiele
Drag and Drop
Drag and Drop-Aktionen sind Vorgänge, bei denen begleitende Animationen häufig angewendet werden. Die umliegenden Elemente des Elements, das bewegt wird, reagieren auf dessen Bewegungen. Sie machen Platz für das neue Element oder verändern ihre Farbe.
Slider
Ebenfalls ein typischer Anwendungsfall für begleitende Animationen sind Slider. Häufig wird der sich verändernde Wert zweimal dargestellt. Als Zahl und als individuelles Objekt. Beide verändern sich in Abhängigkeit vom Regler. Dabei sind die Zahlen meist die Hauptaktion. Die individuellen Objekte begleiten diese Aktion nur.
Quellen
Animation principles for UX and UI designers
The illusion of life – Disney animation
Übertreibung
Animationen besonders wichtiger Elemente werden übertrieben dargestellt, um die Aufmerksamkeit des Nutzers zu erhalten.
Grund
Animationen dienen der Verbesserung der User Experience. Deshalb muss jede Animation einen funktionalen Grund haben.