Motion for UX: Designing Time, Change, and Attention

A useful motion decision answers a question. What changed? Where did it go? Did the action work? What matters now? What happens next?

Figma's Principles in motion frames motion as designing with time. Rhythm, pacing, transformation, easing, anticipation, overshoot, follow-through, holds, and settling are not merely animation vocabulary. They are ways of controlling when information appears, how strongly it is felt, and whether separate moments read as one coherent experience.

For UX, the standard is stricter than making something feel alive. Motion should improve orientation, causality, hierarchy, comprehension, or confidence. When it does none of those things, it is usually a tax on attention and time.

Before choosing a duration or easing curve, name the interaction problem. A motion specification should be reviewable in product language, not only visual language.

Duration should reflect distance, complexity, platform conventions, input method, and how much attention the transition needs. The ranges below are HAAM starting points, not universal laws. Test them on real devices and with real content.

Fast does not automatically mean responsive. An instant layout jump can be harder to understand than a short transition. Slow does not automatically mean elegant. A transition that blocks the next action is still latency, even when it looks polished.

MDN documents prefers-reduced-motionas the browser-facing signal for a person's device-level preference to remove, reduce, or replace non-essential movement. W3C's guidance on animation from interactions says non-essential motion triggered by interaction should be disable-able unless it is essential to the information or functionality.

Large scaling, panning, parallax, and unexpected spatial movement can trigger discomfort for people with vestibular disorders. The responsible pattern is not to abandon motion completely. It is to separate essential state communication from optional spatial spectacle.

/* Start with the essential state change. */
.motion-card {
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1),
              opacity 180ms ease-out;
}

/* Preserve meaning while removing most spatial movement. */
@media (prefers-reduced-motion: reduce) {
  .motion-card {
    transition: opacity 120ms linear;
    transform: none;
  }
}

Some changes are clearer when they are immediate. A destructive error, an urgent security warning, a text correction, or a simple color-state change may not benefit from spatial movement. Motion also becomes counterproductive when it delays expert workflows, repeats on every visit, causes layout instability, or competes with reading.

Ask the brutal question: if this animation disappeared, would the person understand less? If the answer is no, the animation is decoration. That can still be valid for brand expression or delight, but it should be treated as optional, lightweight, and easy to reduce.