Animated transitions in mobile applications

Image: Ramotion

Animation plays an important role in interacting with users. For example, in mobile applications you can transfer a lot. When you send a message, open the settings section, put a check mark or go to another page, changes occur on the screen. Animation of such changes is a convenient way to display user actions.

In this article we will look at a few typical cases where functional animation complements the visual design and supports user interaction with the interface.

Caution: under the cat a lot of heavy gifs.

System Status Notifications

If the user performs some action in the system, he expects to see a clear and understandable confirmation that his request is accepted and processed. Here are some examples of how an animation can improve the quality of user interaction.

• Confirmation of action. Animation can be used to show the user that the system has received his request. Knowing this, he will not re-click on the control.

Notify users of the results of their actions. Image: Colin Garven

• Refreshing page content using the pull to refresh gesture. A visual response in the form of a loading indicator helps users understand that the system is processing their request.

Simple animation helps users understand what is happening. Image: Ramotion

• Waiting for content to load. This process does not have to be boring. In almost any application, you can brighten it up with simple animation, so that the waiting time does not seem very long. It will attract the user's attention so that he does not leave the application.

With the help of animation, you can start interacting with the user even before the application is fully downloaded. Image: UI8

Sequence of steps in multistage processes

Some actions require several steps. It is very important that these steps are linked to each other. Animation is a great tool that helps to connect each step with each other and creates a complete picture of what is happening.

Below is a great example of how a sequence of events can be displayed using animation.


Image: Jakub Antalik

Animation helps designers use the progressive disclosure method. It simplifies user interaction with the interface, because at the right moment only the necessary part of information is displayed. Below are two vivid examples of applying consistent disclosures when a user receives information in chunks.


Image: Ramotion


Image: Anton Skvortsov

Presentation of new items

When we present a new element on the page, we try to draw the user's attention to it and explain why it is needed. In such cases, the animation allows you to show the relationship between objects and their hierarchy.



With the help of animation you can show where the objects come from. Image: Virgil Pana

Navigation in the application

Animation facilitates in-app navigation. This is especially important for mobile devices. Being distracted all the time and working with the application on a small screen, the user may simply get confused in a huge number of different pages.

And here comes animation. She explains to the user how the transitions between the screens are interconnected. She does not let him get confused, explaining where he is at the moment.


Orientational animation allows you to determine where you are in relation to where you were before. Image: Jae-seong, Jeong

In the example below, the floating button (floating action button, FAB) turns into a title element, which allows the user to understand how the two objects are connected.


Animation visualizes the connections between elements. Image: Anish Chandran

Minimizing cognitive load

Cognitive load is the amount of mental effort required to use a product. It largely determines the usability of the application. As a rule, the more effort it takes to use the product, the less it will appeal to users.

Our goal is to create an easy-to-use and user-friendly interface. Animation, if used properly, reduces the amount of effort required to complete a task.

In almost every application, the user needs to fill out some forms. In many of these fields are marked with a tip-filler. When the user selects such a field, the prompt disappears. As a result, it becomes difficult to understand what information you need to enter. Floating tips (floating label) allow users not to lose context and provide convenience when filling out long forms.


When it comes to user input, do not rely on his memory. All critical information must be kept in plain sight. Image: MDS

Visualization of functional changes

After user interaction, an element can change its function. For example, after pressing the button, it starts to perform a new action. If you animate this change, it will be easier for the user to answer the question, what does this element now do?

A great example can be found in many mobile applications. Speech on the switch. Animation allows the user to understand the state of the element.


The animation is played when the button is pressed so that the changes are immediately noticeable. Image: Jurre Houtkamp

In some cases, a functional change of one element can completely "change the screen." An example is the menu button, which turns into X and turns on the new display mode.


Clearly show users that the feature function has changed. Image: Tamas Kojo

Conclusion

If you approach the use of animation thoughtfully, its possibilities will be truly enormous. With its help, you can revive the interfaces, making them truly “responsive” to user actions, and solve many functional problems. Whatever your application is intended for, it will work closely with the user. And it is the animation that will help make this interaction truly exciting and effective.

Thanks for attention!