How motion design affects UX

#49: Motion design is not just about pretty animations

Welcome to Fundament, a weekly product design newsletter where we share actionable tips and insightful stories with the worldwide design community.

How motion design affects UX

Motion has always been part of our lives. It’s something completely natural. We almost instantly notice how things around us move and change, conveying information and triggering emotions. We see trees swaying in the wind, animals on the move, people, cars, and even everyday objects in motion. Everything is constantly moving.

So it’s no surprise that these principles have found their way into the digital world. For years, designers have been bringing natural mechanics to the screen, creating animations and microinteractions that not only grab our attention but also enhance the message and build an emotional connection with the user.

Well-designed motion can significantly improve the usability of an interface and increase user engagement. Poorly designed motion, on the other hand, can be distracting, frustrating, and make users abandon the product altogether.

To make the most of what motion can offer, it’s important to understand how it affects users and when its use actually makes sense.

The role of motion design in user experience

Motion in user interfaces is more than just decoration or moving elements. It plays a key role in improving product usability by helping users understand how the interface works and what state it’s in after they take action.

It provides feedback, shows transitions between screens, and is often used in microinteractions. For example, when an element moves from one place to another, like a card being dragged between columns, the animation reveals the transformation and helps users understand the relationship between the starting and ending state. Motion also clarifies connections between elements. Enlarging an image after clicking a thumbnail or reordering a list after applying filters makes it clear that the interface has responded to the user's input.

Motion is also effective in communicating state changes in UI elements. Toggles, buttons that change appearance when clicked, or real-time form validation use movement to draw attention and signal that something has changed.

It also shapes how users perceive the fluidity and speed of a system. When the interface displays a loading animation, the wait time feels shorter even if it is objectively the same, because the animation keeps the user visually engaged.

Motion design can also be used to guide the user's attention to key elements. Since movement naturally draws the eye, it can highlight important information. Subtle pulsation on buttons that require attention or animated cues during onboarding help users focus on what matters most at a given moment.

In addition, motion design plays a role in shaping product identity and personality. When thoughtfully designed, it complements websites and marketing materials, making the experience more memorable without compromising usability. A great example is the latest website for the tool Jitter.

The principles of good motion design in UX

It’s not enough to simply add animations to an interface. Even a well-designed animation might have no impact at all on the user, or worse, it could actually harm their experience.

That’s why, when considering animations in our interfaces, we should start by asking the most important question: what is the purpose of adding this animation? Animations should serve a clear function. Often that function is to improve usability, for example by providing feedback, but sometimes it can also be about creating the right emotional response. Motion in a design should always be intentional, never added just for the sake of animation or to make things appear cool. I wrote more about the importance of purpose in design in this article.

It is also essential that animations do not dominate the interface, distract from the most important content, or become overly complicated. They should support and enhance the experience, not become the main focus that pulls users away from their goal. Just because motion can be valuable does not mean every component needs to include it.

Animations should be consistent as well. Users should not be surprised by entirely different ways of animating the same or similar elements. It is also worth referring to mental models and animation patterns found in other familiar products.

Good animations are also those that are feasible to implement. Not everything you can create in animation tools will be achievable in your actual product. Always check more complex ideas with developers. For more standard animations, use tools like ProtoPie, Principle or even Figma. These help you create animations that are easier to implement and stay within technical constraints. Animations should also be smooth and fast so they do not slow down the interface or affect performance negatively.

It is also important to remember that some animations can have a negative impact on neurologically sensitive users, such as flashing or overly intense movement. This is why motion should be selected carefully. When possible, offer an option to reduce it, for example by respecting system-level “reduce motion” settings.

If you want to use animation, think about it from the very beginning of the design process. Do not wait until everything is finalized and then try to figure out how to animate the elements. Plan for motion early so the final result feels thoughtful and consistent, not like something added as an afterthought. It is also crucial that each animation fits the context of use. It should not feel too slow, too fast, or unnatural, such as with overly sharp acceleration or awkward pauses.

When motion hinders instead of helping

Animations don’t always enhance the user experience. When poorly designed, they can actually harm both the product and the user.

Overly long animations can make an interface feel slow and unresponsive, especially when they appear frequently. Instead of supporting the flow, they interrupt it and create unnecessary friction.

Too many animations, especially if they are flashy, distracting, or overly elaborate, can introduce visual noise and chaos. This makes it harder for users to focus on what matters or can cause them to lose focus entirely.

Heavy animations can also overload user devices. If your product only runs smoothly on high-end hardware, it risks becoming unusable for many people. This includes users on mobile devices, older browsers, or slower internet connections.

In some products, animation might simply be unnecessary or even harmful to usability. This applies to interfaces in critical systems like emergency response platforms or point-of-sale terminals.

So when should you avoid using animation in your interface?

• When the animation adds no meaningful information

• When it delays access to content or actions

• When it appears too frequently and becomes irritating

• When you can't ensure consistency across the system

• When it could negatively affect users who are sensitive to motion

---

How did you like this episode of Fundament?

😍 ・ 🙂 ・ 😐 ・ 🫤 ・ 😡