Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. In this article, we want to collect all the main principles and rules in one place and share with you great tips on animation in UX design.
When elements change their state or position, the duration of the animation should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.
- On the mobile devices, Material Design Guidelines also suggests limiting the duration of animation to 200–300 ms. As for tablets, the duration should be longer by 30% — around 400–450 ms. The reason is simple: the size of the screen is bigger so objects overcome the longer path when they change position.
- You need to remember that regardless of the platform the duration of the animation should depend not only on the traveled distance but also on the size of the object.
- When objects collide, the energy of collision must be evenly distributed between them according to physical laws. So, it’s better to exclude the bounce effect.
- The movement of the objects should be clear and sharp so do not use motion blur.
- For the animation not to look mechanical and artificial, the object should move with some acceleration or deceleration — just like all live objects in the physical world.
- Objects that are not affected by any physical force move linearly, in other words with constant speed.
Many more other tips can be found here.
Syndicode is an expert in UI/UX design!