Motion

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.

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.

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.

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.

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.

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.