Author: fdlkjeo

Translation of material by UX designer Taras Skitsky about how to correctly use animation in UX.

Nowadays, it is difficult to impress anyone with interface animation. It shows interactions between screens, explains how to use the application or simply directs the user’s attention.

Almost all articles about animation describe only specific use cases or general facts about animation. Nowhere are all the rules regarding interface animation clearly and practically described.

There is nothing new in this article, it just contains all the basic principles and rules of ux animation. So other designers who want to launch animated interfaces will not have to look for additional information.

Animation Duration and Speed ​​in UX

When elements change state or position, the animation duration should be slow enough for users to notice the change, but fast enough to avoid creating a wait.

Animation duration
Use the right animation duration. Don’t make it too fast, but don’t make the user yawn.

Numerous studies have shown that the optimal interface animation speed is between 200 and 500 ms. These figures are based on specific properties of the human brain.

Any animation shorter than 100ms is instantaneous and will not be recognized at all. And animation longer than 1 second will convey a sense of delay and therefore will be boring for the user.

Animation duration in seconds
The duration of animation that is correct to use in your interfaces.

On mobile devices, material.io also guatemala phone number library suggests limiting animation duration to 200-300ms.
For tablets, the duration should be 30% longer – around 400-450 ms. The reason is simple: the screen size is larger, so objects travel a longer distance 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

Mobile device size affects animation duration

Web animations are handled differently. Since we are used to web pages opening almost instantly in the browser, naturally we expect the same from animations.
Thus, the duration of web transitions should be approximately 2 times shorter than on mobile devices – from 150 to 200 ms. Otherwise, the adjust assignments and assessments user begins to think that the computer is freezing or has problems connecting to the Internet.
But. Forget about these rules if you are creating decorative animations on your website or trying to draw the user’s attention to certain elements. In these cases, the animation can be longer.
animation on the big screen
Big computer screen does not equal slow animation!
You should remember that regardless of the platform, the duration of the animation should depend not only on the distance traveled, but also job data on the size of the object.
Smaller elements or animations with small changes should move faster. Accordingly, animations with large and complex elements look better when they last a little longer.