Animated Transitions

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.

 


Image from giphy.com.

 

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.

 

 

Слишком сложная анимация

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

 

 

Types of Animations

Depending on the purpose, we can select several types of animations.


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 Image from useyourinterface.com.

 

 

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. Image from useyourinterface.com.

 

 

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. Image from uimovement.com.

 

 

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. Image from uimovement.com.

 

 

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 from useyourinterface.com.

 

 

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 Princile 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  :)

Забота
Image from giphy.com.

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