# Motion Functions

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.&#x20;

## Identifying Function

<figure><img src="/files/ecRnkdPGjbG4QRiLEn4M" alt=""><figcaption></figcaption></figure>

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

## Structural Function

<figure><img src="/files/eRrsls5V16FIjYNRqE5e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/gUHgyM6xS7ARJyiWZhsP" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/TsjBUPwsP7qTsUg4zxwV" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/JQM5e3TSuHaVx6kW0QM6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/b37lbuony1UF6sDzbSOa" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/29jxgacsUCdrpjk64OzK" alt=""><figcaption></figcaption></figure>

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://abhishekshankar.gitbook.io/uxm/criterion/motion-functions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
