0.1s
a response feels instantaneous — nothing to report
⚡ Motion & Micro-interaction · Part 1 of 6
Meaning, or noise
Every moving thing on a screen is either telling somebody something, or getting in their way.
Two gates · information, then costThe test · the 50th useReduced motion · from the start
What you’ll be able to do
- Name the job of any animation in one sentence — or delete it without arguing about taste.
- Run two gates on a motion candidate: does it carry information, and what does it cost.
- Spot the motions almost every product ships that carry nothing at all.
- Judge an interaction by its fiftieth use rather than its first.
The whole argument
A screen that moves is saying something
Motion in a product is not a finish. Motion is a sentence the interface speaks while a person is busy doing something else, and every sentence either helps them or interrupts them. There is no neutral animation, because attention is not free — anything that moves gets looked at, whether or not it deserved to be.
That gives a hard line to work from. If an animation makes a change easier to understand, it is meaning. If it does not, it is noise wearing the costume of craft. Nothing sits in between, and the reason products end up feeling busy is that teams keep pretending there is a third category called polish.
The law
Motion is product behaviour, not visual garnish.
Feel it first
When everything moves, nothing does
Six numbers refresh. One of them actually changed. Find it — first in a product that animates every tile on every refresh, then in one that animates only the tile whose number moved.
Find the change
Refresh the numbers, then click the tile you think changed. Five rounds each way.
▶ Start on Everything moves and notice yourself hunting. Then switch to Only the change.
Five rounds. Your hunt is being timed.
The animation in both modes is identical — the same 340ms scale, the same curve. The only difference is how many elements are allowed to use it. Animating the whole set is what a dashboard does when nobody asked which change mattered; animating one is what a dashboard does when somebody did.
The law
Animate the change, not the screen the change happened on.
1s
the limit for uninterrupted thought — acknowledge, no bar
10s
the limit of attention — past this, real progress or they leave
The method
Two gates, in this order
The first gate asks what the motion tells somebody. What changed? Does moving it make that change easier to understand? Would a static swap leave a person hesitating, hunting, or repeating an action they already did? A motion that cannot answer those has already failed, and no amount of easing rescues it.
The second gate only runs on survivors, and it asks the awkward questions. Does this delay the task? Does it move something a thumb was already travelling toward? Does it hold up on a slow phone, at 200% text, with reduced motion switched on? Would it still be welcome on the fiftieth use today?
Score 0
The part nobody measures
Judge it on the fiftieth use
A bouncing confirmation is charming once. The person who runs your tool for a living meets it forty times before lunch, and by then the charm has become a wait they cannot skip. Frequency decides the budget: the more often an interaction repeats, the less time and attention it is allowed to take.
Repetition is the failure that never shows up in a review, because a review is always somebody’s first use.
Mark fifteen things done
Same task, same confirmation, two speeds. The clock runs while you work.
0.0selapsed · 0/15
The law
Frequency sets the budget. Importance buys reliability, never pixels.
Where you already feel this
Four products, four positions
Issue moved to In Progress
Linearstatus changed · nothing animated
Speed instead of spectacle
State changes land immediately and optimistically. A tool people live inside all day treats the fast response as the reward, which is the strongest argument that restraint is not the absence of craft.
Instagram
Motion that holds still
The frame for an image is reserved before the image exists, so nothing below it ever jumps. The most valuable motion decision here was the decision to let nothing move.
Apple Maps
Where the surface came from
A sheet rises from the bottom edge because that is where it lives. The direction of travel is the explanation, and it costs one transition to teach a whole spatial model.
Duolingo
Celebration, and its limit
A finished lesson earns a real moment. The same energy applied to every tap would turn a daily habit into a daily delay — which is exactly the line a learning product has to hold.
Say it plainly
What people get wrong
Four beliefs that survive design review because nobody prices them. Each one is true enough to sound reasonable, and wrong at the point where somebody has to live with it.
Motion makes it feel premium
Speed is what actually feels expensive.
Myth · Latency
Where it shows up: dashboards, admin tools, checkout
Motion that arrives instead of a fast response is waiting with better manners. In a screen somebody works in, a 500ms transition is not luxury — it is a delay they sit through several hundred times a day.
Delete most product motion
The overcorrection costs as much as the excess.
Myth · Feedback
Where it shows up: rewrites, design-system resets
Strip out feedback and state changes and people re-tap, lose their place, and stop trusting the screen. The honest version is narrower: delete most unnecessary motion — and be able to say which is which.
Reduced motion means motion off
It asks for a second design, not an absence.
Myth · Accessibility
Where it shows up: the media query added last
Feedback, hierarchy, orientation and status all still have to arrive; what goes is travel, bounce, shimmer and repetition. A screen that turns confusing under Reduce Motion was leaning on movement to carry meaning that belonged in words.
We’ll tune the animation at the end
By then the decision is already made.
Myth · Process
Where it shows up: polish week, handoff, QA
Whether a change is explained, whether space is reserved for it, whether the control stays under the finger — those are structural, and they get settled while the screen is laid out. Tuning at the end is decoration on top of a decision.
Say who
The real references
Nielsen Norman Group
Animation Purpose in UX Design
The categories an animation is allowed to belong to — and what to do with one that belongs to none.
Read →
Apple · Human Interface Guidelines
Motion
Add motion purposefully; avoid it on frequently repeated interactions; never let it be the only carrier of meaning.
Read →
Google · Material Design
Understanding Motion
Motion as the thing that explains a state change, and the spatial logic that makes a transition legible.
Read →
Jakob Nielsen · NN/g
Response Times: The 3 Important Limits
0.1s, 1s and 10s — the thresholds that decide whether feedback is needed at all.
Read →
The words
The Motion glossary
Micro-interaction
- What it means
- One small loop: a trigger, a rule, a piece of feedback, and the state it leaves behind.
- Why it matters
- It is the unit a product is judged on, because it is the unit people repeat.
- Key question
- What started it, and what does the person know now that they did not before?
The information test
- What it means
- The first gate: does moving this make a change easier to understand than not moving it?
- Why it matters
- It turns an argument about taste into a question with an answer.
- Key question
- If this were an instant swap, what exactly would somebody miss?
Straight answers
Questions you actually ask
How can a designer tell whether an animation in an interface is carrying information or only decorating it?
Describe out loud what changed on the screen, then ask whether the movement made that change easier to follow than an instant swap would have. Motion that explains a state change, shows where a surface came from, confirms an action was received, or reports progress is carrying information. Movement that runs on page load, repeats forever, or applies the same treatment to every element on a screen is decorating. If the sentence explaining the animation is about how it looks rather than what somebody now understands, it is decoration.
Should all animation be removed when a user has switched on the reduce-motion setting in their operating system?
No. Reduce Motion asks for a different motion policy, not for silence. Feedback, hierarchy, status and orientation still have to arrive, so a pressed state, a selected tab, an error message and a progress reading all remain. What gets replaced is travel, scale, spring, parallax, looping shimmer and auto-advancing content, usually with an instant state change or a short opacity fade. A screen that becomes confusing under Reduce Motion was leaning on movement to carry meaning that belonged in words, position or colour.
What is a reasonable duration for interface animation, and why do published numbers vary so widely?
They vary because duration follows scope. Acknowledging a press is near-instant, a local transition such as a menu or a tab indicator sits in the low hundreds of milliseconds, and a whole surface arriving — a sheet, a dialog, a detail view — earns somewhat more because it travels further. Enterprise systems run shorter than consumer ones on purpose, because their interactions repeat far more often. Part 3 of this series takes the published scales apart properly; the rule that matters here is that a number should be chosen from what the motion is doing, never from preference.
Does animation slow a product down, or does it only feel that way?
Both, in different ways. Any animation that must finish before somebody can act adds real waiting, and that cost multiplies by how often the interaction repeats. Separately, animation that changes an element’s geometry makes the browser recalculate layout on every frame, which can cause visible stutter on ordinary phones even when the animation itself is short. Part 5 covers that second half in detail. The practical version: if a person cannot tap, scroll or type while it runs, it is not decoration — it is a queue.
Where should a team keep its decisions about motion so different screens do not drift apart?
In the same place the colour and spacing decisions live. Motion becomes consistent when durations, easing curves, travel distances, entry and exit patterns, loading behaviour and reduced-motion substitutes are named values that components refer to, rather than numbers each screen invents. Without that, every surface gets its own idea of how fast a menu opens, and the product stops feeling like one thing. The names matter as much as the values, because a name is what makes a review possible.
Is it ever right to celebrate something with expressive animation in a product people use every day?
Yes, when the moment is rare and genuinely consequential — a course finished, a first post published, a payment that went through. The conditions are that it happens seldom, ends quickly, can be skipped, and does not block the next action. The failure is applying that energy to routine actions, which converts a daily habit into a daily delay. Proportion is the whole skill: the size of the celebration should match what the achievement actually cost.
Train the judgment
Meaning, or noise?
Ten questions in seven formats — multiple choice, multi-correct, fill-in, match, order, read-think-connect and write-your-own — each with layered hints: a nudge, the reasoning, then a deeper connection. Served from the question bank, never hardcoded.
Loading the question bank…
The road from here
Six parts, one promise
meaningor noise
triggerfirst 100ms
scaletime & easing
stillnessreserved space
costpaint & jank
reducedthe other build
Six parts, one promise: you will be able to say, out loud, what each animation in your product is for.
Keep going