Animations in interface design: Find out how to improve the UX

The Importance of Animations in Interface Design

When we design interfaces, we have to take into account that users will interact with them, they are not a unidirectional channel. Digital products or services have to give a response to the actions the user takes on them. To achieve a better user experience, it is ideal to have animations in your digital product or service:

  • They help the user understand what is happening when acting.
  • They make it easier to locate the elements or screens that change.
  • They help to know if there is a task in progress and that it has not been frozen.
  • Emotional and aesthetic function.

There are different types of animations:

Feedback

Feedback animations are those that happen to let the user know that their interaction has been successful. For example, having an animation in which the state of the button being clicked changes will help the user know that the button is working and that their action has been successful. In this prototype you can click a button and see how it reacts:

PROTOTYPE

Hovers, the change of state when the mouse is hovered over, without clicking, can also be included in this category.

In this type of animation, it is important that the clickable element does not move so much that it loses focus with the mouse or disappears from view once it is activated, as this can confuse and frustrate users.

Progress

Progress animations are those that indicate that a long action is in progress and that the user has to wait for it to complete. Common in this category are progress bars, which are used for long waits such as downloads or installations. If we also include the time remaining, we have a great progress animation.

PROTOTYPE

Charge

A good option for loading a page, especially pages with a lot of content, is to have an animation that indicates to the user that the web is loading. There are two main options, spinners and skeletons.

Spinners (circles or discs that spin) are suitable for very short waits of a few seconds.

Skeletons are structures (usually in the form of grey rectangles) that are placed where the content will go before it loads. They are slightly better than spinners because they give the perception that the page loads sooner and give us information about the structure before it finishes loading. It is especially suitable for pages with a lot of content, such as newspapers, social networks, etc, which take more than a couple of seconds to load.

PROTOTYPE

Call to action

These types of animations respond to a need for attention from the user and are usually used mainly for commercial messages such as “Buy now”, “Register now”, etc.

They are animations that do not respond to a previous user action or process in progress (such as clicks, hovers, or loads of any kind), but are animations that want to capture attention to direct the user towards a specific action or convey a message. If they are too flashy, they can give a feeling of intrusion and provoke rejection, so it is advisable not to overdo it.

PROTOTYPE

Transition

In applications or programmes, there can be transition animations between different screens, to give users a sense of continuity with the previous screen and give them context about where they are.

For example, in the prototype we have prepared, there are three product options. Clicking on one of them extends the window over the rest and additional information appears, but without the previous information the user has clicked on ever disappearing.

In addition to providing context, a good transition animation will be perceived as visually pleasing, which will create positive feelings in users. Let’s not forget that visually pleasing applications are also perceived as easier to use.

PROTOTYPE

Notifications

This is somewhat similar to call-to-action animations, as it is an element that wants to capture the user’s attention, although the difference is that they do not contain commercial messages, but important notices that require attention, such as a new message, a notice that changes have been saved, etc. However, there are also pages that use these types of animations and elements to display commercial messages and incite an action or purchase. For example “A user bought this item 5 minutes ago” or fake notifications that open a chat with a bot or with technical support or a company’s sales team.

PROTOTYPE

Decoratives

Decorative animations have no function beyond aesthetics. They do not respond to user actions, nor do they respond to calls to action or to direct the user to a specific action. But they liven up screens and are a perfect opportunity to give personality to the product or service and make it more memorable and enjoyable for users. They are quite common in process or error screens.

PROTOTYPE

Although they offer many benefits, a poorly executed animation can have the opposite effect.

  • Animations need to have just the right amount of movement. An element that moves too much can be disorienting, distracting or frustrating. This also happens if there are too many things moving at the same time.
  • It also has to have the right speed or timing. If it is too slow or too fast the user will get frustrated.
  • An option should be given to disable or pause the movement of automatic animations, such as carousels. In the case of notifications, they should be dismissed manually and not over time.
  • Beware of unnatural movement. If an element moves in a direction that is unexpected, different from the direction of navigation or unnatural, it will annoy the user.
  • It is not recommended to use distracting animations when the user is performing a process that requires attention, such as filling out a form.

Whatever your project needs are, you can contact us and we will help you with the design of your product or service.

Subscribe to our newsletter

    How can we help you?