Grundlagen

Durch Animationen involvieren wir unsere Nutzenden stärker in das Produkterlebnis und bauen Nähe auf. Interaktionen machen unsere Prozesse sichtbar und Funktionen erlebbar, was zu einer besseren Nutzerzufriedenheit führt. Dabei sind Interaktionen und Transitions immer nachvollziehbar und machen die digitale Erfahrung stimmig.

Varianten

Interaktionen

Interaktionen machen erlebbar, wie eine Anwendung funktioniert. Klar erkennbare Interaktionselemente wie Buttons und Links, die sich auch wie erwartet verhalten, machen eine Funktion vertrauenswürdig und leichter bedienbar. Mit unterschiedlichem visuellen Feedback wird die Aufmerksamkeit des Users gelenkt. Durch Interaktionen werden Unterschiede und Hierarchien z. B. in einer Liste, erlebbar.

Vorgänge

Eine gute Performance ist Grundvoraussetzung für ein angenehmes Erlebnis. Unvermeidliche Wartezeiten werden mit einer Statusanzeige kommentiert. Ladeanimationen helfen, Zusammenhänge zu verstehen. Damit bieten wir guten Service und zeigen Transparenz.

Übergänge

Mit Übergängen unterstützen wir Nutzende bei der Erledigung von Aufgaben. Wir setzen sie ein, um selbst komplexe Aufgaben als zusammenhängende Serie von einfachen, verständlichen Schritten zu lösen. Nutzende werden entlang ihrer Aufgabe begleitet und darin unterstützt, den Fokus auf ein erfolgreiches Erledigen der Aufgabe zu richten.

Unterstützende Übergänge reduzieren Fehler, indem Konsequenzen von Handlungen erläutert werden oder Nutzenden ermöglicht werden, Schritte rückgängig zu machen bzw. Fehler selbst zu beheben.

Dauer und Geschwindigkeit

Wenn Elemente ihr Aussehen oder ihre Position wechseln, sollte die Animation so langsam sein, dass Nutzende den Wechsel wahrnehmen, und gleichzeitig so schnell, dass er nicht darauf warten muss. Die ideale Dauer einer Animation liegt zwischen 100 und 500 Millisekunden (ms).

Die Dauer einer Animation steht im direkten Zusammenhang zur Komplexität der Veränderung. Minimale Veränderungen wie ein Farbwechsel auf einem Link haben eine kürzere Dauer als komplexe Animationen verschiedener Elemente.

Definierte Zeiten:

• Einfach: 100 ms (Buttons und Toggle)
• Fade: 200 ms (Ein- und Ausblenden von Elementen)
• Standard: 250 ms
• Morphing: 500ms (Formen und ganze Elemente werden verändert)

Easing

Das Easing macht Bewegungen und Übergänge natürlich. Damit Animationen nicht künstlich und mechanisch wirken, bewegen sich Elemente immer mit einer Beschleunigung oder einer Entschleunigung – so wie es Nutzende aus der physischen Welt kennen.

Standardbewegung

Ease-in-out ist der Bewegungstyp, den wir einsetzen, wenn sich ein Element in seiner Position oder Form bewegt. Wenn also aus sich heraus eine Bewegung angestossen, beschleunigt und dann wieder abgebremst wird. Sie wirkt am natürlichsten und ist neutral.

Dieser Bewegungstyp verwenden wir auch zum Ausblenden von Elementen (Flyouts), sofern das Element durch Nutzende wieder hervorgerufen werden kann.

Entschleunigung

Das Entschleunigen (ease-out) wird für Elemente verwendet, die eingeblendet werden. Das Element verlangsamt sich, bevor es komplett still steht und dargestellt bleibt. Diese Art der Bewegung wird auch für Ladeanimationen verwendet, bei denen die Elemente erst im sichtbaren Bereich geladen werden.

Beschleunigung

Elemente, die das Sichtfeld verlassen, animieren wir mit einer beschleunigten Kurve (ease-in). Dies ist meist beim Entfernen oder Löschen von Elementen der Fall. Die Animation beginnt langsam und endet im Maximaltempo. Elemente, die nur ausgeblendet werden, jedoch wieder aufrufbar sind, werden nicht mit einer Beschleunigung animiert.

Verwendung

Grosse Bewegungen vermeiden

Werden Übergänge gestaltet, z. B. bei Navigationselementen, sollen grosse Bewegungen minimiert werden. So wird das Element zuerst eingeblendet und nur über einen Teil seiner Grösse bewegt. Dadurch kann die Animationsdauer auch bei grossen Elementen kurz gehalten werden.

In Bewegungsrichtung

Die Animationsrichtung entspricht immer der natürlichen Bewegungsrichtung. Ladeanimationen, die in Abhängigkeit zur Scrollbewegung stehen, werden vertikal animiert. Elemente, die seitwärts navigiert werden, werden horizontal animiert.

Menschlich

Animationen sollen sich natürlich anfühlen. Ihr Verhalten hat immer eine Entsprechung in der physischen Welt. Damit Animationen nicht künstlich und mechanisch wirken, bewegen sich Elemente immer mit einer Beschleunigung oder einer Entschleunigung – so wie es Nutzende aus der physischen Welt kennen.

Zusammenhänge bilden

Was zusammen gehört, wird zusammen animiert. Gleichwertige Elemente, wie zum Beispiel Teaser, animieren wir mit denselben Regeln. Ein Button mit Icon wird als Einheit und daher mit der gleichen Geschwindigkeit animiert.