How Can You Tell if an Animation is Bad For Your UX?
Today it’s hard to imagine an interface without an animation. To impress or even surprise your users, the animation is an excellent means. It shows the interaction between the screens, explains how to use the application, engages the user’s attention, etc. But how can you tell if it’s bad or not? Let’s find that out.
Animation Design Principles
Authority studies have shown that the optimal speed of the interface animation is from 200 to 500 ms. These figures are based on the specific qualities of the human brain. Any animation that is shorter than 100 ms will hardly be perceived at all. If animation lasts more than 1 second, it will convey the feeling of delay and, therefore, will be tedious for the user. So, if you want to succeed with the top animated design for your product, you’d better watch out and mind the top quality animation criteria. here are a couple of principles to mind during the animation design process.
1. Duration & speed of animation
When the elements change their condition or position, the duration of the animation should be slow enough to allow users to notice the change, but at the same time fast enough to not cause expectation. So, set the correct duration of the animation. Do not make it too fast and do not leave the user a lot of time for boredom.
Thus, mobile devices are also proposed to limit animation duration up to 200-300 ms. As for tablets, the time should be 30% more-about 400-450 ms. The reason is simple: the screen size is larger, so the objects overcome a long way when they change their position. On other gadgets, the duration should be 30% shorter-about 150-200 ms, because, on a smaller screen, the distance is shorter.
2. Motion blur
Careful with the effect. The point is that such elements as list items (news cards, email lists, etc.) should have very little display latency. Each new element appearance should last between 20 and 25 ms. A slower appearance of elements can annoy the user.
3. Anticipation
Softening helps to move the object more naturally and organic. So if you don’t want your animation to look mechanical and artificial, the object must proceed with some acceleration or deceleration – just like all living objects in the physical world.
4. Choreography in animation interfaces
As in ballet choreography, the main idea is to direct the user’s attention to change during the transition from one state to another. Thus, for good animation, the user attention should be directed in one direction at a time, but for the table views. Here, it’s a bit more complicated, and the user’s focus should be diagonal – showing elements one after the other is a bad idea.
5. Linear movement
Objects that are not subject to any physical strength move linearly, in other words, with constant speed. And only because of this they may look very unnatural and artificial to the human eye.
That’s why a linear movement is better to use, for example, only when the object changes its color or transparency. As a rule, we may use it in cases when the object does not change its position.
In the case, you need profound help with any other animation effect, style, or UX design principle for your design projects, feel free to contact us for a detailed consultation in no time.
Conclusion
All the above principles are the least but not the last to tell if your animation is bad or not. Generally, good animation in the interface should reflect the movements that we know from the physical world – friction, acceleration, etc. By imitating the behavior of objects from the real world, we may create a sequence that will allow users to understand what to expect from the interface. It will tell if it’s great because when the animation is built correctly, then it is unobtrusive and does not distract users from achieving their goals. This also means that animation should not slow down the user’s work or prevent the task.
