Micro-animations can change product perception, user behavior, and increase conversion rates. Let’s explore where and how to apply them.
Animations have been around for a long time. But now that browsers and mobile processors are getting better, animations are starting to play an increasingly important role in interfaces. Animations make the interface more understandable and the interaction process more intense. But what are micro-animations? And what do we need to consider if we want to use them?
Micro-animations are small, primarily functional animations that support the user: they provide visual feedback and more clearly reflect the changes taking place. Micro-animations can explain a lot without words.
Micro-animations make it easier for users to understand the hierarchical structure of the interface because they see elements in context. This creates focus. Users understand each operation because they can see it happening right before their eyes.
Clarifying changes and context
Displaying all the necessary information on the screen is an art, especially when it comes to small screens and flat design. These often force us to hide certain elements. However, micro-animations can be used to make navigation more intuitive.
Take the hamburger menu, for example. If it opens without animation, it will be much more difficult for the user to understand where it came from. Animation provides context so that the user does not get lost in the interface.
Take the hamburger menu icon and add animation so that the icon changes shape when clicked. This will explain to the user what will happen if they click on the icon again.
You can go even further. For example, transform the “Leave a comment” button (in this case, in Dutch: “reageer”) into a form. Context is provided by stretching and expanding the element.
Animations can be used to show progress and answer questions such as “Did I click this button?” or “Has the download started?” A static progress indicator also works, but its animated version gives the user much more — it focuses attention on how far along the process is. Users especially appreciate being able to see their progress when filling out forms.
Hierarchy and focus
Creating focus is one of the main reasons for using micro-animations. Animation moves and attracts attention, which means we can use it to focus the user’s attention on a particular element. This can be especially useful during onboarding (i.e., the user’s initial immersion into the essence of the application). Emphasize the button that the user needs to press to start a process on the page.
But be careful: too many animations will “blur” your hierarchy, and the message you want to convey will lose its weight.
“You wouldn’t make every sentence in your document a headline. The same can be said about animations. Consider each animated interface element to be as important as a document headline. Animation, like a headline, should emphasize the importance of the element.”
You can significantly improve your interface by thinking ahead and predicting how the user will behave. A menu item that appears and works only in a specific context can subtly hint to the user about its presence at the moment when they are likely to need that particular function.
When the user closes a section, you can use animation to show where they can find that section when they need it again.
You can use animations in forms to help users move forward. Once the user selects an option, the form can automatically scroll to the next question. Or, sometimes, selecting a certain option automatically expands or collapses the list of further questions. Animation can clarify such moments by expanding or collapsing the form to display only the necessary questions.