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.
How animations can enhance the user experience
Now, let’s discuss how animations can enhance a user’s experience.When used appropriately, animations can add to the overall user experience. In general, animations can improve the user experience in two ways: by helping the user complete a task (functional animations) or by adding delight to an already great experience with clear content and clear goals (fun animations). Let’s explore each.
FUNCTIONAL animations help a user complete a task
Functional animations can enhance the overall usability of an app or website by helping the user complete a task. They can communicate subtle feedback for micro interactions and state changes that:
- prevent disorientation, especially when switching between views and
- help users understand how to interact with UI elements (acceptable actions)
Here are a few examples:
- Submission indicator: when a user completes a form on a website, a small animation can indicate that their submission was successful. This provides feedback and lets the user know that their action was registered.
- Hover animations: provide users with more information about a particular element on the page. When a user hovers over an image or icon, additional details or context can appear, providing a more immersive experience.
- Button Feedback: Animations can provide feedback to users that their actions have been registered. For example, a button press could trigger a small animation indicating that the button has been activated. This gives the user a sense of control and satisfaction.
- Hamburger icon / Menu: Animations can help users understand the function of the hamburger icon and make it more intuitive. An animation can transform the hamburger icon into an “X” to indicate the closing of the menu.
- Loading icon: Animations can help users understand that a process is underway and that they should wait for the completion of that process. Loading icons can be used to entertain users while they wait.
- Pulsing Shopping cart icon: Animations can help users recognize that the cart icon is a button, and that it can be clicked. A pulsing animation can indicate that the user has added something to the cart.
- Material design edit mode/ state to add new mode/state: Animations can help users understand that they have entered a new mode or state, and that certain actions are now available or not available.
- Hipmunk – switch between data views: Animations can help users understand the impact of their actions and make it clear what’s happening when they switch between data views.
- Spatial metaphors and navigation: Animations can help users understand where they are in the information architecture of a website or app, using spatial metaphors and navigation animations.
- Supplemental cues for navigation: Animations can help users understand how they can navigate a complex information architecture, using cues that are intuitive and easy to follow.
- Zooming – ios photos: Animations can help users understand the relationship between different elements of a design, by using zooming animations to connect two elements that are otherwise unrelated.
- Slide over – amtrak checkout: Animations can help users understand how they can interact with a design, using slide-over animations that reveal hidden menus or options.
- Accordions: Animations can help users understand the impact of their actions, using accordion animations to show and hide content as needed.
- Anchor links, scroll to top: Animations can help users understand where they are on a page, and how they can navigate to different parts of the page using anchor links and scroll to top animations.
- Strengthen signifiers – Apple Music for iPhone: the Now Playing card animates up: Animations can help users understand the relationship between different parts of a design, by using signifiers that highlight and connect different elements.
- Strengthen signifiers – Car2Go for iPhone: A short bounce animation is a signifier that swiping across the list item reveals options: Animations can help users understand how they can interact with a design, using signifiers that make it clear what actions are available and how to access them.
FUN animations add delight to an already great experience
According to NNGroup, “user delight” is “any positive emotional affect that a user may have when interacting with a device or interface. User delight may not always be expressed outwardly, but can influence the behaviors and opinions formulated while using a website or application.” Animations that add surprise and delight to a user experience are those that are unexpected, playful, and add a touch of personality to the design. Animations can also enhance storytelling in UX design by providing visual cues, creating a sense of movement and progression, and making an emotional connection with the user.
When introducing “fun” animations, it’s important to remember that they are supplemental. These types of animations only provide surface-level delight, and the joy they bring can quickly fade. Therefore, they should only be added after a great user experience has been established.
Examples of animations that are “fun” and create delight:
- Confetti animation: A simple animation that triggers when a user completes a task or achieves a goal, such as making a purchase or signing up for a newsletter. The confetti animation can add a fun and celebratory touch to the experience.
- Micro-interactions: Small animations that occur in response to a user’s action, such as hovering over a button or scrolling down a page. Micro-interactions can add personality and playfulness to a design.
- Animated illustrations: Animated illustrations are a great way to add humor and charm to a user interface. They can also help explain complex ideas or processes in a fun and engaging way.
- Easter eggs: Hidden animations or interactions that are not immediately obvious to the user. Easter eggs can add an element of surprise and delight to the experience, and can also create a sense of loyalty or affinity towards the brand.
- Loading animations: Animations that occur while content is loading, such as a progress bar or spinning wheel. Loading animations can make the wait time more bearable for the user and add a touch of whimsy to the experience.
Examples of animations that can be used for story telling.
- Animated Progress Bars: Progress bars are commonly used to show the progress of a task. But why not make them more engaging and entertaining? Animated progress bars can help tell a story by using creative and fun animations to show the progress of a task. For example, a progress bar for a cooking app could show a little chef character adding ingredients to a pot as the progress bar fills up.
- Animated Transitions: Transitions can help guide users through a story or process by providing visual cues that indicate how one step is connected to the next. For example, a weather app could use an animated transition to show a storm cloud moving across the screen to indicate that the weather is changing.
- Animated Characters: Animated characters can be used to tell a story and make an emotional connection with the user. For example, an educational app for kids could use an animated character to guide them through the learning process and make it more engaging
- Parallax Scrolling: Parallax scrolling is a technique that creates the illusion of depth by moving the background and foreground layers at different speeds. This can be used to tell a story by creating a sense of movement and progression. For example, a travel app could use parallax scrolling to show a panoramic view of a destination and give users a sense of what it would be like to be there.
- Animated Icons: Icons can be used to tell a story by conveying information in a more engaging way. For example, a fitness app could use an animated icon to show a little runner running across the screen to indicate that the user has completed a workout.
Final Thoughts
Animations can be a great addition to any user interface. When used correctly, they can enhance the overall user experience. However, it’s essential to consider the context and purpose of the animation to ensure that it adds value to the user and doesn’t detract from their experience. By keeping these considerations in mind, designers can use animations to their full potential and create engaging and delightful user interfaces.
<aside> 
Hi there! My name is Tiffany and I am a UX and Technology leader who helps large enterprises build profitable digital products and high-performing digital teams. From time to time, I share helpful resources that address common challenges on my website at www.MsTiffanyBritt.com.
</aside>
<aside> 
Want to learn more?
- User Delight https://www.nngroup.com/articles/theory-user-delight/
- Examples of good (and not so good) use of UX/UI animations here: https://www.nngroup.com/articles/animation-purpose-ux/