Animation is an important part of user experience. When it comes to transitions in mobile apps, you can convey a wealth of information through detailed animations. Sending messages, opening settings, clicking checkboxes, navigating to other pages - these are moments of change, and animating transitions is a great way to reinforce user behavior.
In this post, we'll cover common situations when functional animation complements visual design and supports interactions.
1. Provide the status of the system
When the user triggers some action, they expect a visual feedback, and the system needs to clearly indicate that it has received the action request and is running.
Here are some examples of animated feedback that benefit the user experience:
1. Confirm user operation
The user gets the confirmation of the operation by the system, and when the user can get effective visual feedback, this can prevent the user from clicking the operation element again.
Notify users of the results of their actions. Image: Colin Garven
2. Use pull-down refresh to b2b data update the content of the page
The visual feedback of the loading prompt helps the user understand that the system is processing the user's request.
Subtle animation helps users understand what is going on. Image: Ramotion
3. Wait for the content to load
Loading doesn’t have to be boring, and almost all mobile apps can take advantage of subtle animations when the page loads to keep users from leaving. The loading animation can continue to occupy the user's visual feedback, and the result is that the user feels less waiting time.
Animation can keep the user engaged even before the app fully loads. Image: UI8
2. Connect different steps in a task flow
Sometimes users need a series of steps to complete an action, and these steps need to be clearly marked that they are closely connected, animation can help you connect different steps to create a complete experience.
Here is an excellent example of how to use animation to create continuous linear events:
Image: Jakub AntalÃk
Animation can help designers create progressive presentations, which make interfaces easier to learn by reducing the amount of information presented at the same time.
Here are two great examples of using progressive presentation to provide meaningful chunks of information.