Functional Animation

Functional Animation

Functional animations perform various functions in the interface: they guide the user through a process, improve orientation and provide feedback on entries. They supplement the interaction with small details which improve usability as well as being fun and offering emotional appeal. As such they are very important for a high-quality, fascinating and brand-based user experience.

Everything can be animated – from views and components to individual icons. For a harmonious overall experience, the timing of all parameters should be precisely coordinated and the performance of different devices should be taken into account. All animations used in the interface are based on the animation basics. This ensures that every Audi application has a typically dynamic character.

Feedback

Interactive elements convey that an action has taken place by means of visual feedback. The feedback shows whether an interaction has started, how long it will last and whether a task has been successfully performed or not.

 

The response effect conveys clear visual feedback. Another example of the communication of different system states is the loader component.

Highlight

Animated visual cues can be used to direct the user’s attention to a certain element.

 

A badge notification generates interest by means of animation.

Meaning

Once the user has understood why a certain animation occurs, it can be used to convey new potential interactions.

 

List entries can be shifted by Drag & Drop. The movement of the entries indicates where the entry can be shifted to. Another example is form fields in which the label moves up after clicking on the field so as to create space for user text entry.

Position

By means of user interaction, certain elements are moved to a defined position or fixed in a position. In this way, the user can see where an element comes from or where it is accessible.

 

A sticky element can also change its position and layout by means of scrolling. Animated transition makes it easier for the user to understand the change in position and size.

Examples