Motion Functions

Motion can serve various functions to enhance the visual hierarchy, provide feedback, create a sense of place, communicate relationships, add personality, and simplify complex interactions.

The motion functions referred to in this guide are drawn from the work Communicative Functions in Human-Computer Interface Design: A taxonomy of Functional Animation (Avila-Munoz et al., 2021). The paper uses broad functions to classify differing animation styles seen in microinteractions. These functions can be used to understand the goals of implementing the microinteractions aim to achieve.

Identifying Function

This type of motion permits the identification of elements in an interface and their function.

Structural Function

The motion fulfills a structural function by highlighting the interface format, helping the user understand the information architecture and create a mental model of the system.

Guidance Function

The motion guides and orients the user during navigation, indicating where or how to interact with the interface elements. Likewise, the animation of the elements may indicate the order of the steps to follow during an interaction or indicate actions that require user intervention.

Feedback Function

The motion keeps the user informed about the status of the system or the progress of an operation, including responding to user input or other input devices. Perhaps this is one of the most evident and relevant animation functions. We would hardly understand any interaction if the system did not present any change on the screen.

Didactic Function

The motion provides instructions on the operation of the interface and the execution of tasks, helping users achieve the goal for which they use an application. This function may include tutorials that provide information on an app’s operation, either during the loading process or within the application itself, as well as showing how to achieve objectives.

Aesthetic Function

These elements add aesthetic or decorative value, provide visual coherence, and help define the visual style of an application. The importance of esthetic value should be considered, mainly to avoid the misunderstanding that an animation should be removed because it only performs a decorative function. Studies have shown that, when faced with two identically functioning systems that only differ in terms of their esthetics, subjects are not only attracted by the more visually pleasing system but also find it easier to use.

Emotive Function

How an element moves can represent and convey different sensations and emotional states. The appearance of a notification can make us feel the urgency or importance of a warning, as the speed and amplitude of the notification can prompt different degrees of tension or serenity.