Web animation – using moving digital imagery to supplement a digital design – is very popular on websites and mobile apps. When UX/UI animations are subtle, unobtrusive, and brief, they can make a website or app more dynamic and interactive, leading to a better user experience. However, there is a downside to web animations: when used incorrectly, they can overwhelm and distract users.

So, when should you use animations in UX design? This resource will explore this topic. In this resource we will explore when it is appropriate to use animations to elevate designs. We will do this by discussing ways that poor use of animation might adversely impact results, and exploring scenarios when it is beneficial to use animations.

How animations can harm a user’s experience

First, let's discuss how animations can harm a user's experience. Despite good intentions, bad animations are all too common. Here are two ways that animations can negatively affect a user experience.

Animations can be harmful when they are unnecessarily distracting

As human beings, our visual system is very sensitive to motion. Evolutionarily, detecting movement outside the center of our field of vision is an advantage since it allows us to discern danger and protect ourselves. However, this also means that we are prone to be distracted by any type of motion, whether it is meaningful or not. That's why motion in user interfaces can easily become annoying. It's hard to stop attending to it, and if irrelevant to the task at hand, it can substantially degrade the user experience.

For example, Refinery29, a women's media company, embeds a poll in the middle of a story. While this may seem like a creative way to engage users, it can also be incredibly distracting. When a user is in the middle of reading an article, the last thing they want is a poll popping up and demanding their attention.

Another example is the moving squiggle on Outline's content. This animation is meant to draw users' attention to a particular part of the page. However, it can also be incredibly distracting and take away from the content itself.

Animations are harmful when they evoke negative emotions

Sometimes animations are used to hijack users' attention and create fear or anxiety. This is an example of a dark UX pattern: an unethical application of user-experience principles and cognitive psychology to get users to do something they ordinarily wouldn't.

For example, a flashing countdown clock on a website can create a fear of loss, encouraging users to take a certain action quickly. This type of animation can be particularly harmful to users who may be prone to anxiety or other mental health issues.