These days, it’s hard to impress anyone with interface animation. It shows the interaction between screens, explains how to use the application, or simply directs the user’s attention.
Almost all articles about animation only describe specific uses or general facts about animation. Nowhere are all the rules regarding interface animations clearly and practically described.
This article won’t be anything new, just a collection of all the basic principles and rules of ux animation. So other designers who want to run animated interfaces will not have to look for more information.
Duration and speed of animation in UX
When elements change state or position, the duration of the animation should be slow enough that users have time to notice the change, but also fast enough to not cause anticipation.
Use the right animation duration. Do not make it too fast, but do not let the user to yawn.
Numerous studies have shown that the optimal speed of the interface animation is 200 to 500 ms . These figures are based on the specific properties of the human brain.
Any animation shorter than 100 ms is instantaneous and will not be recognized at all. And animations longer than 1 second will convey a sense of delay and therefore will be boring to the user.
Duration of the animation in seconds
The duration of the animation, which is correct to use in their interfaces.
On mobile devices, material.io also suggests limiting the duration of animations to 200-300 ms.
As for tablets, the duration should be longer by 30% – about 400-450 ms. The reason is simple: the size of the screen is larger, so objects take a longer path when they change their position.
On accessories, the duration should be correspondingly 30% shorter – about 150-200 ms, because on a smaller screen the distance to the end point is shorter.
animation on mobile devices
The size of mobile devices affects the duration of the animation
Web animations are handled differently. Since we’re used to web pages opening almost instantly in a browser, we naturally expect the same from animations.
Thus, the duration of web transitions should last about 2 times shorter than on mobile devices – from 150 to 200 ms. Otherwise, the user begins to think that the computer hangs or has problems with Internet connection.
But. Forget about these rules if you’re creating decorative animations on your website or trying to draw the user’s attention to certain elements. In those cases, the animation can be longer.
A large computer screen does not equal slow animation!
You must remember 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 animations with small changes should move faster. Accordingly, the animation with large and complex elements looks better when it lasts a little longer.
Among moving objects of the same size, the first object that has traveled the shortest distance stops
Small objects, compared to the large objects move slower, as they make more displacements.
The duration of the animation differs depending on the object size
When objects collide, the collision energy must be evenly distributed between them according to the laws of physics. Therefore, it is better to exclude the rebound effect. Use it only in exceptional cases, when it makes sense.
It is better not to use the effect of bouncing, because it is distracting.
The movement of objects should be clear and sharp, so do not use motion blur (an appeal to users of After Effects).
This effect is difficult to reproduce even on modern mobile devices, and is not used in interface animation at all.
Blur effect in animation
Do not use the blur effect in animation
List elements such as news cards, email lists, etc. should have very little delay between changes in their appearance.
Each appearance of a new element should last between 20 and 25 ms. Slower appearance of elements can irritate users.
