Why use micro-animations in your design?

Evelien Mooij-Gebler - 23 December 2015

Animations have existed for a long time. But because of the increasingly better browsers and mobile processors it gets more and more important to spend some time on animations in your interfaces. They can enrich interaction and clarify interfaces. But what are micro-animations anyway? And what should we think of when we want to use them?

Micro-animations are small, preferably functional animations that support the user by giving visual feedback and displaying changes more clearly. With micro-animations it’s possible to explain a lot without using a word.

Intuitive interfaces

By using micro-animations the user gets support in understanding the hierarchy so elements are placed in context. This creates focus. The user gets a sense of direct manipulation, because it sees something happen directly.

Clarify change and context

Especially with small screens and flat design it’s an art to show all necessary information. Because of this we sometimes hide elements. For instance, to clarify how to navigate, micro-animations can be the solution.

 

Take a hamburger-menu. If it expands without animation, it’s a lot less clear where it comes from. An animation supplies context, making sure the user doesn’t get lost

Evelien Mooij-Gebler

Visual designer

Crazy about animations!

More about UI Design

Event

We talked about UX design and UI-animations

26 January 2018 - Matthijs Collard
Event

Our hike through KIKK festival 2017

27 November 2017 - Myrthe Geldof
Event

Our top 4 talks at the Service Design Days 2017

16 October 2017 - Danny Groenen