I bring to your attention the translation of a very cool article on the animation of the interface.
 
The ultimate guide to proper use of animation in UX author of Taras Skytskyi.
 
 
 
 
Currently, it is difficult to impress or even surprise with the animation of the interface. It shows interaction between screens, explains how to use the application or simply directs the user's attention. While studying the animation articles, I learned that almost all of them describe only specific use cases or general facts about animation, but I did not come across any article where all the rules concerning the animation of interfaces would be clearly and practically described. But, in this article I will not write anything new, I just want to collect all the basic principles and rules in one place, so that other designers who want to run animated interfaces do not need to look for additional information.
 
Numerous studies showed that the optimal animation speed of the interface is from 200 to 500 ms. These figures are based on the specific qualities of the human brain. Any animation shorter than 100 ms is instantaneous and will not be recognized at all. If the animation lasting more than 1 second will give a sense of delay and, therefore, will be boring for the user.
 
 
 
 
The duration of the animation, which is better to have in their interfaces
 
 
On mobile devices, Material Design Guidelines Also suggests limiting the duration of the animation to 200-300 ms. As for tablets, the duration should be more by 30% - about 400-450 ms. The reason is simple: the screen size is larger, so objects overcome a longer path when they change position. On gadgets, the duration should be respectively 30% shorter - about 150-200 ms, because on a smaller screen the distance traveled is shorter.
 
 
 
 
The size of mobile devices affects the duration of the animation
 
 
Web animation works differently. Since we are used to the almost instantaneous opening of web pages in the browser, we also expect a quick transition between different states. Thus, the duration of web transitions should last about 2 times shorter than on mobile devices - from 150 to 200 ms. In other cases, the user inevitably thinks that the computer hangs or has problems with connecting to the Internet.
 
 
But. Forget these rules if you create a decorative animation on your website or try to attract the user's attention to certain elements. In these cases, the animation may be longer.
 
 
 
 
Large computer screen = Slow animation? Never!
 
 
It should be remembered that regardless of the platform, the duration of the animation should depend not only on the distance traveled, but also on the size of the object. Smaller elements or animation with small changes should move faster. Accordingly, animation with large and complex elements looks better when it lasts a little longer.
 
 
Among moving objects of the same size, the object that traveled the shortest distance should first stop.
 
 
Small objects in comparison with large objects move more slowly, since they make large displacements.
 
 
 
 
The duration of the animation differs depending on the size of the object and the distance traveled
 
 
When objects collide, the collision energy should be evenly distributed between them in accordance with physical laws. Thus, it is better to exclude the rebound effect. Use it only in exceptional cases, when it makes sense.
 
 
 
 
Avoid using the bouncing effect, as it distracts the attention of
 
 
The movement of objects should be clear, so do not use motion blur (yes, After Effects users, but not this time). It is difficult to reproduce the effect even on modern mobile devices, and it is not used at all in the animation of the interface.
 
 
 
 
Do not use the blur effect in the animation
 
 
List items (news cards, email lists, etc.) Should have very little display delay. Each occurrence of a new element should last from 20 to 25 ms. The slower appearance of items can irritate the user.
 
 
 
 
Animation for list items should last 20-25 msec
 
 

Softening of

 
Mitigating helps make the movement of the object more natural. This is one of the basic principles of animation , which is described in detail in book "The illusion of life: Disney Animation" , written by two key animators of Disney - Olli Johnston and Frank Thomas.
 
To prevent the animation from appearing mechanically and artificially, the object must move with some acceleration or deceleration - just like all living objects in the physical world.
 
 
 
 
Animation with weakening looks more natural compared to linear
 
 

Linear motion

 
Objects that are not subject to any physical force move linearly, in other words, at a constant speed. And only because of this they look very unnatural and artificial for the human eye.
 
 
All animation applications use animation curves. I will try to explain how to read them and what they mean. The curve shows how the position of the object (y axis) changes over the same time intervals (x axis). In the current case, the motion is linear, so the object moves to the same distance at the same time
 
 
 
 
Curve of linear motion.
 
 
Linear motion can, for example, be used only when an object changes its color or transparency. As a rule, we can use it for states when the object does not change its position.
 
 

The gain or acceleration curve is

 
We can see on the curve that in the beginning the position of the object changes slowly, and the speed increases gradually. This means that the object moves with a certain acceleration.
 
 
 
 
The acceleration curve is
 
 
This curve should be used when objects fly out of the screen at full speed. These can be system notifications or only interface cards. But keep in mind that this type of curve should only be used when objects leave the screen forever, and we can not either return or recall them.
 
 
 
 
Acceleration curve for ejecting the map from the screen.
 
 
The animation curve helps to express the right mood. In the example below, we see that the duration and distance for all objects are the same, but even small changes in the curve give you the ability to influence the mood of the animation.
 
 
And, of course, by changing the curves, you can move the object as close as possible to reality.
 
 
 
 
Same length and distance, but different moods
 
 

The attenuation or deceleration curve

 
This is the opposite of the gain curve, so the object quickly covers a large distance, and then slowly loses speed until it stops.
 
 
 
 
The deceleration curve is
 
 
This type of curve should be used when the element appears on the screen - it flies on the screen at full speed, gradually slows down until it stops completely. This can also be applied to various maps or objects that appear outside the screen.
 
 
 
 
The deceleration curve for clarity
 
 

The amplification and attenuation curve or the standard curve

 
This curve causes the objects to gain speed at the beginning, and then slowly resets it to zero. This type of motion is most often used in the animation of the interface. Whenever you are in doubt about what type of motion to use in your animation, use the standard curve.
 
 
 
 
The standard curve is
 
 
According to Material Design Guidelines , it is better to use an asymmetric curve to make the movement more natural and realistic. The end of the curve should be more emphasized than its beginning, so that the acceleration time is shorter than the deceleration rate. In this case, the user will pay more attention to the final movement of the element and, consequently, to its new state.
 
 
 
 
See the difference between the symmetrical and asymmetric standard curve
 
 
A standard curve is used when objects are moved from one part of the screen to another. In this case, animation avoids an attractive and dramatic effect.
 
 
 
 
Moving the element on the screen and the corresponding asymmetric curve
 
 
The same type of movement should be used when the item disappears from the screen, but the user can return it to the previous location at any time. This applies in particular to the navigation bar.
 
 
 
 
The navigation bar is hidden from the screen using the standard curve
 
 
From these examples follows a fundamental rule, which many beginners neglect - the initial animation is not equal to the final animation. As with the navigation bar, it appears with a slowing curve and disappears from the standard curve. In addition, according to Google Material Design , the time of appearance of the object should be greater to attract more attention.
 
 
 
 
Appearance and disappearance of the side menu is performed with the deceleration and the standard curve, respectively,
 
 
To describe the curves, the function is used. cubic-bezier () . It is called cubic, because it is based on four points. The first point with coordinates 0; 0 (bottom left) and the latter with coordinates 1; 1 (upper right) are already defined on the chart.
 
 
Proceeding from this, we need to describe only two points on the graph, which are given by four arguments of the function cubic-bezier () : the first two are the coordinates of x and y the first point, and the second are the coordinates x and y second point.
 
 
To simplify the work with curves, I suggest using the sites easings.net and cub-bezier.com . The first contains a list of the most commonly used curves, the parameters of which you can copy into the prototyping tool. The second source gives you the ability to play with different curve parameters and immediately see how the objects will move.
 
 
 
 
Different types of curves and their parameters for the function
 
 
cubic-bezier ()

 

Choreography in animation interfaces

 
As in ballet choreography, the basic idea is to direct the user's attention to the change during the transition from one state to another.
 
 
There are two types of choreography - equal and subordinate interaction.
 
 

Equal interaction

 
Equal interaction means that the appearance of all objects obeys one particular rule.
 
 
In this case, the appearance of all elements is perceived as a single thread, which directs the user's attention in one direction, namely from the top down. If we do not follow the order, the user's attention will bem is scattered. The appearance of all elements will immediately look bad.
 
 
 
 
The user's attention should be directed in one direction
 
 
As for the table view, this is a bit more complicated. Here the focus of the user should be diagonally directed, so showing the elements one by one is a bad idea. Identifying each element one by one will make the animation too long, and the user's attention will be zigzag, which is incorrect.
 
 
 
 
Diagonal view for table display of elements
 
 

The subordinate interaction

 
Subordinate interaction means that we have one central object that attracts the attention of all users, and all other elements are subordinate to it.
 
Vanilla Thunder.
 
This type of animation gives a sense of order and attracts more attention to the main content.
 
 
In other cases, it would be very difficult for the user to understand what kind of object to observe, so his attention would be scattered. Therefore, if you have several elements that you want to animate, you need to clearly define the sequence of their movement and revive as few objects as possible at a time.
 
 
 
 
It is worth reviving only one central object and all the others subordinate to it. Otherwise, the user will not know which object to pay attention to.
 
 
According to Material Design , when moving objects disproportionately transform, they must move along an arc, and not along a straight line. This helps make the movement more natural. "Proportional", I mean that the height and width of an object are changed by increasing /decreasing asymmetrically, that is, at different speeds (for example, a square element turns into a rectangle).
 
 
 
 
The movement of an object that disproportionately changes its size must be along the arc
 
 
Movement along the line is used when the object changes its size proportionally. Since the implementation of such a movement is much easier, the rule of disproportional arc motion is often ignored. Considering real examples of applications, you will see the dominance of linear motion.
 
 
 
 
Proportional resizing is performed in a straight line
 
 
Movement along the curve can be achieved in two ways: the first is called Vertical output The object begins to move horizontally and ends with a vertical movement; the second one is horizontal output The object begins to move vertically and ends with a horizontal movement.
 
 
The path of the object along the curve must coincide with the main axis of the scroll interface. For example, in the following image, we can scroll the interface up and down, and accordingly, the object rotates vertically - first to the right and then down. Movement in the opposite direction is carried out in the opposite way, that is, the object first rises vertically and ends up moving horizontally.
 
 
 
 
The direction of deployment /collapse of the object must coincide with the axis of the interface
 
 
If the paths of moving objects intersect with each other, they can not pass through each other. Objects should leave enough space for another object to move, slowing or accelerating its own speed. Another option is that they simply repel other objects. Why is that? Since we assume that all objects in the interface are in the same plane.
 
 
 
 
While moving, objects should not pass through each other, but leave space for moving another object
 
 
In another case, a moving object can rise above other objects. But again they do not intersect with other objects. What for? Since we believe that the elements of the interface behave in accordance with the laws of physics, and no solid objects in the real world are able to do this.
 
 
 
 
Objects can climb over other objects, and then move
 
 

Conclusions

 
So, if we sum up all the above rules and principles, the animation in the interface should reflect the movements that we know from the physical world - friction, acceleration, etc. Simulating the behavior of objects from the real world, we can create a sequence that will allow users to understand what to expect from the interface.
 
 
If the animation is built correctly, it is unobtrusive and does not distract users from their purposes. If so, you need to either mitigate or delete it altogether. This means that the animation should not slow down the user or interfere with the task.
 
 
But do not forget that animation is more of an art than a science, so it's better to experiment and test your solutions on users.
 
 
Source: The ultimate guide to proper use of animation in UX
 
Author: Taras Skytskyi.