Animations are an important part of the visual language of the product, so we spend a great deal of time on them. It's important that animations do the trick and look impressive.
The animation is poor if:
- its necessity is difficult to explain;
- it interferes with the interface;
- it makes users wait where unnecessary.
A good interface is clear to the user, so any user action should have visual feedback.
Animations can display the status of a user action.
The human brain makes an effort when a person looks at a moving object. This is why animation helps highlight the elements that are important right now.
For example: animation draws user's attention to notifications.
The response principle
Interactive elements dialogue with the user as a single living organism and react to interactions with them. This principle reflects the height of the elements along the z-axis, clicking on the elements, as well as the principle of inertia in relation to the user's actions.
Normally, we train users via interface promos and tutorials that are not related to the interface.
In the interface promos, we show elements that the user can interact with. During that, it is important not to block the main content.
In the tutorials, we talk about interface updates or show new features. When interface promos are not suitable or difficult to develop, we resort to using tutorials.
The basic principles are equal to front-end animations and emotional promo animations.
The animation should take just enough time to do the task and have the user see it. The animation should not be too long, so as not to create a sense of a slow interface.
Usually, a duration of 200-500 ms is appropriate for front-end animation. Animations shorter than 100 ms remain unnoticed.
Dependency on distance
Short-distance animations are faster than animations in which an object travels a longer distance. This principle works for choosing the timing of animations of large or small objects.
An animation looks natural if it follows the laws of physics. This is why it is important to use curved animations.
The exception is animations showing infinite motion or any other infinite process.
To look natural and avoid confusing the user, the animation should follow one main direction.
We do not recommend animating objects in several different directions as such animations are difficult to perceive.
Using accent animations on frequently repeated actions is not recommended. For example: using the bounce effect on the selection of elements might be a bad idea because this can cause negative emotions in users who select many elements at a time. The more often the action is repeated, the simpler the animation should be.
When an animation is triggered by a user action, then easy-out animations should be used to enhance the feeling of the speed of interaction.
Animations should be used to enhance the feeling of the speed of interaction.
It is important to create a sense of a fast product that gives lightning-fast feedback on an action whenever possible. The fastest animation is no animation. The lack of animation makes the interface less clear and contemporary. This task is solved by fast changes.
The interface responds quickly to the user's action. After the main noticeable part of the animation is shown, the animation can continue.
For example: the user clicks on the input, the background and stroke are recoloured with no animation, and then the text animation appears.
When you need to show an object, a medium duration animation is used. During this, the object is hidden quickly or without animation.
Aside from solving the problem of the product, it is important that the animation gives the right feel. We have identified some of the most important emotions that animation should evoke.
A modern and technologically advanced product reacts quickly to user actions and does not overload with unwanted visual effects, especially on frequently repeated actions.
Front-end promos (tutorials, animated illustrations, and so on) and animations in entertainment products solve completely different tasks, so they should generate different sensations. Through emotional animations, we broadcast the characteristics of products.
Such animations should be milder and may take a little longer.
While the main task of a product animation is to show the change of state as quickly and clearly as possible, in emotional animations, we seek a compromise between efficiency and speed.
It is important that animations do not block user actions. Therefore, animations that do block the interface should not last more than 200 ms.
Animation development guidelines
Designers can use any tool to make animations. Front-end animation design focuses on creating interactive prototypes that can be tested in the focus group of the internal team.
After Effects is great for creating non-interactive animations where the animation is not triggered by a user’s actions. For example, for front-end animations.
Principle or Protopie are good for interactive prototypes. Often the animation that looks great on a video turns out to be unsuccessful in the product. Such may be the animations that are too long or do not work as planned. The closer the prototype logic is to the actual product, the more errors can be corrected at the design stage.