UI Animations

Why do we need UI animations

 

Let's look at the world around us. Movements in nature are not linear. We understand how objects are transformed and each of them has physical characteristics that affect motion.

Now let’s look at the interfaces. Elements are abstract, they don’t have physical characteristics. Designers often forget about their animation.

Static transitions between screens and elements leave an unpleasant impression because of the blinking effect, our brain is constantly trying to understand what is happening at these intervals.

Thoughtful designers know this and think about how the interface will respond to user's actions.

Quality animations not only "liven up" the interface, but also clearly indicate state of a system and relationships of objects on the screen. At the same time poorly designed transitions can confuse users and complicate an interface. Therefore, for each animation you need to clearly understand its goals.

Beautiful, but too difficult for a real interface of an application:

 

Difficult animation

An example of an unnecessarily complex animation. Image from interaction-design.org.

To make a good UI animation, you need to understand what they are, find inspiration and choose the right tool. In this article, we’ll take a closer look at the first part — the types of animations.

 

Types of Animations

Depending on the purpose, we can select several types of animations (for more details, read Creating Usability with Motion).


Feedback

When in real life we interact with objects, for example, press a button, we expect a response. So the system should provide instant visual confirmation for user.

 

Feedback in the interface by Kévin Gautier.

 

 

Function Changes

This type of animation shows how the elements are transformed when the user interacts with them.

 

An example of functional changes in the interface by Andrew Larin.

 

 

Hierarchy of elements and their interaction

With the help of animations, we can show how the elements on the screen correlate with each other, which are the main ones, and which are secondary. For example, using the different speed of elements appearance in the list, we show priority.

 


Hierarchy in the interface by Isobar Greece.

 

 

System Status

Shows the user in real time where he is and what happens with the system. It is especially important to use in progress bars during the loading or processing of data.

 


Progress bar as system status by Joshua Thorley.

 

 

Meaningful Transitions

Smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.

 

Ориентация пользователя в приложении
Orientation in the application. Image from www.dribbble.com.

 

 

Delightful Details

The only purpose of this animation is to leave a pleasant impression. Usually used for small details and allows to achieve empathy.

 


Image by UI8.

 

 

Principles

There are many principles that allow you to create friendly interactions between users and interface. One of the most important is easing, that responsible for the speed of the animation, making it more realistic. The main types:

Linear

Animations without any kind of easing. Linear animation seems unnatural, so we strongly advise you not to use it. The team of Principle absolutely agrees with us and suffers when someone uses it.




Ease-in

This animation starts slowly and ends fast. Because of abrupt end may seem unusual.

Ease-out

Starts more quickly than linear ones, and it also has deceleration at the end. Easing out is typically the best for user interface work as it seems most familiar and natural.

Ease-in-out

Union of the last two types. It looks good on short animations.

Bounce or elastic effects

Look interesting, but they overload the animation, so it should be applied pointwise and only if this effect is suitable.

 

Примеры анимации
More examples easings.net.

 

 

In conclusion

For natural users communication with app interface or site don’t forget to design the animated transitions. They will help create a friendly interface and attractive microinteractions, your site or application will be much more pleasant.
Take care of your users

 

 

Resources: 
www.justinmind.com 
www.uxplanet.org 
www.yalantis.com