Animation and Motion for UX Design

Motion design was once just a fancy addition to improve the aesthetics of your website. However, now, motion is an essential element in web design to make a user’s experience with your site more streamlined and intuitive.


Motion and animation can be helpful and communicative for UX but only if used with restraint. Motion is most appropriate as a form of subtle feedback for micro-interactions (trigger-feedback pairs) instead of a way to entertain users.

One of the significant advantages of UI motion is how easily it can attract the user’s attention; however, this can also be a drawback. Thanks to our peripheral vision, we can detect motion outside the center of our field of vision; this allows us to detect danger and protect ourselves. However, this also means that we can be easily distracted by any motion, even if it is not meaningful or relevant. Because of this, motion in user interfaces can easily distract users and become annoying. Furthermore, it can leave the user with an unenjoyable experience if it is an irrelevant motion to your task. Think of a moving advertisement; super annoying, right?

Animations can be helpful but should be used lightly and primarily as a tool for providing users with smooth feedback.


When used subtly, animations can help users create mental models about how a system works to understand how to interact with it. However, animations are less essential for UX when they are just stimulations designed to fill time. Instead of using animation to entertain or delight users for a short period, utilize animations to show your user what is currently happening within the system and as signifiers for how the UI elements will act. You can also use them as spatial metaphors for the user’s location in the space.


Animations prove to be extremely useful for feedback to show that the system has recognized an action the user made. A common example of this is the animation of a navigation menu sliding across the page when the hamburger menu icon is clicked on. Since our visual systems are so accustomed to processing motion, short animations ensure that users see the feedback.

Change blindness is the tendency for humans to overlook or miss things that change outside their focus. This can cause static visual feedback to be ignored. For example, people may overlook a shopping cart badge update after adding something to their cart but adding an animation increases the likelihood that the user will notice the feedback.


Motion can help indicate that an interface has been switched to a different state. Modes can be a complicated concept to communicate to your users, but animation can help. It first can make the mode change noticeable and also provides a conceptual metaphor of the transition. For example, a pencil icon morphing into a disk after it is clicked on signals to users that they have transitioned from edit to save mode.


A complex information space structure is typically challenging to communicate to users without taking up too much screen space and using too many cognitive resources. Figuring out where you are in the information hierarchy by scanning through navigation menus, tree diagrams, etc., is complex cognitive work your users want to avoid. Animation cannot be used alone to substitute for visible navigation; however, it can signal to them the direction they are moving in within a hierarchy. Animated supplemental cues make it possible to navigate through a complex information architecture easily.


Animations guide users and help them understand how they should interact with UI elements. The direction of the motion signals the types of acceptable actions. Take a card that expands from the bottom to the top of the screen, for example. It signals that the user can close the card by pulling it down. Or, a card that comes from the left side of the screen signals that a user can close it by swiping to the left.

When UI animations are brief and subtle, they can improve the user experience. Users enjoy well-designed and placed animations, and it is now becoming a crucial element of user interfaces. They help communicate feedback, state changes, prevent disorientation and strengthen signals. As always, though, too much of a good thing can be bad, so don’t overdo your animations!

A global team of digerati with offices in Washington, D.C. and Southern California, we provide digital marketing, web design, and creative for brands you know and nonprofits you love.

Follow us to receive the latest digital insights:

An intuitive interface aligns with user expectations, functioning in a way that feels natural to them. Consider a button on a screen; users instinctively understand that clicking it will lead...

Video marketing is transforming how brands connect with their audience and showcase their products or services. In an era where consumer attention is the ultimate currency, videos have become the...

Be Prepared to Adjust Marketing Strategies Just as a basketball team must be ready to reassess its strategy during halftime, marketers too must be prepared to evaluate and adjust marketing...

Your Brand Needs a Sixth Man Community marketing goes beyond traditional advertising techniques and has as its goal the building of a loyal and engaged community around a brand. In...

Ready for more?

Subscribe to our newsletter to stay up to date on the latest web design trends, digital marketing approaches, ecommerce technologies, and industry-specific digital solutions.