K Auf den Punkt gebracht

Elemente werden nicht alle auf einmal animiert, sondern mit kurzen Verzögerungen von ca. 20 Millisekunden (Richtwert).

K Grundlagen

Um den Nutzer zielgerichtet zu führen, ist es wichtig, dass vor allem die Hauptaktionen eines Interfaces hervortreten und klar präsentiert werden.

Beim Staffeln des Inhalts werden Objekte nicht alle auf einmal animiert, sondern mit kurzen Verzögerungen. Die Animationen überlappen. In der UI Animation ist dabei die Rede von Offsets. Sie helfen dem Nutzer den Inhalt besser zu verstehen und er kann sich schneller orientieren.

K Beispiele

List-Views

Diese Art von Animation kann auf einzelne Elemente angewendet werden, wie zum Beispiel Listenansichten. Zuerst ist der erste Listeneintrag zusehen und mit einer Verzögerung von wenigen Millisekunden (Richtwert 20 ms), erscheinen nach und nach die weiteren Listeneinträge.

Komplexe Seiten

Beim Laden von komplexen Seiten kann das Staffeln des Inhalts ebenfalls einen positiven Effekt erzielen. Durch Offsets, angewandt auf unterschiedliche Objekte, erscheint der Eindruck, als ob sich die Seite Stück für Stück aufbaut. Eine solche Abfolge von Animationen beginnt mit allen statischen Komponenten und dem Header, zum Schluss erscheinen Elemente, die am wichtigsten sind.

Fokus lenken

Das Element, das als letztes erscheint, erhält den Fokus des Nutzers. Deshalb bietet sich diese Guideline sehr gut für Call-To-Action-Buttons an.

K Quellen

Designing Interface Animation: Meaningful Motion for User Experience.

Motion Choreography

The illusion of life. Disney animation