In a design system's motion guidelines, how do you tell whether an animation explains a state change or is only decoration?
answer
- what would the learner lose
- cut it to an instant swap
- where from, where to, what changed
- orientation, causality, relationship
- decoration spends time and attention
basics
~20 sRemove the motion and ask what the user loses. If they can no longer tell where something came from, went or what changed, the motion is functional; if they lose only a moment, it is decoration.
solid answer
~40 sFunctional motion answers a question the before and after frames leave open: where did this panel come from, where did the removed lesson go, which item did my action change, how are these two views related. My test is subtraction: replace the animation with an instant swap and check whether a first-time learner can still follow the change. If they can, the animation is decoration. Decoration is not forbidden, but it costs time, attention and battery, so it should be rare, brief and never delay input. A system makes the test repeatable by writing its motion purposes down (orient, show cause and effect, show relationship, keep continuity) and asking every proposed animation which purpose it serves.
go deeper
Recall the subtraction test: swap the animation for an instant change and ask what the user would no longer understand. Give one functional and one decorative example.
Explain the purposes functional motion serves (orientation, cause and effect, relationship, continuity) and why decoration still costs time and attention even when it looks good.
Show how you would run a motion review on a real product: classify each animation, cut or budget decoration, and keep the information when a reduced alternative replaces travel.
Discuss how a system encodes motion purposes so dozens of teams make consistent calls, and where brand expression legitimately earns a decorative budget.
## Two kinds of motion Every interface change has a **before** frame and an **after** frame. Motion is whatever the user sees in between. It falls into two broad kinds: - **Functional motion** carries information that the two static frames do not. It tells the user where a new surface came from, where a removed item went, which element their action affected, or how the new view relates to the old one. - **Decorative motion** carries no information about the change. A logo that spins while a page appears, cards that wobble on arrival or a background that drifts are decoration: they may express the brand, but they explain nothing. The distinction matters because motion is never free. It costs the user **time** (they wait for it), **attention** (moving things pull the eye away from what they were reading) and, on phones, **battery**. Functional motion repays that cost with understanding. Decorative motion has to be justified on other grounds. ## The subtraction test The most reliable check is to take the motion away: 1. Replace the animation with an **instant swap** from the before frame to the after frame. 2. Show the swap to someone who has not seen the screen before. 3. Ask what changed, where the new thing came from and where the old thing went. If they can answer, the animation was decoration. If they hesitate, look for a missing item, or cannot tell which of several elements changed, the animation was doing real work. This is close in spirit to how WCAG 2.3.3 Animation from Interactions (Level AAA) treats motion: it lets interaction-triggered motion be disabled unless it is **essential**, and WCAG defines essential as something whose removal would fundamentally change the information or functionality and that cannot be achieved another way. Note the last clause: much orienting motion is functional in the design sense yet **not** essential in the WCAG sense, because the same information could be carried another way. The reduced alternative for it belongs to the vestibular-safety rules. ## Worked examples on a learning platform | Animation | Question it answers | Verdict | |---|---|---| | A completed lesson moves from the "in progress" list into the "completed" group | Where did my lesson go? | Functional | | A notes panel slides in from the edge it docks to and slides back out | Where is this panel, and is it a new place or a layer? | Functional | | A course card grows into the course page | Is this page the thing I tapped? | Functional | | A progress ring fills from the old percentage to the new one | How much did that lesson move me forward? | Functional | | Every course card bounces slightly when the catalogue loads | Nothing | Decorative | | A confetti burst plays each time a quiz is submitted, pass or fail | Nothing (and misleading on a fail) | Decorative, and harmful | The progress ring is a useful edge case: the animation shows the **delta**, which the final frame alone does not. Remove it and the learner sees 60% but not that they were at 45% a moment ago. ## Decoration has a budget, not a ban A system that forbids all decorative motion usually ends up looking lifeless, and teams add it back ad hoc. A better rule is a **budget**: - Reserve expressive motion for **moments that deserve it**: finishing a course, earning a certificate, a first-run welcome. - Keep it **short** and **non-blocking**: the learner must be able to act while it plays. - Never let it **repeat on routine actions**; what delights once irritates on the fortieth lesson. - Never let it **contradict** the state: celebration on a failed quiz teaches the wrong thing. ## Writing the rule into the system The subtraction test works in a review, but it scales only when the motion guidelines name the purposes explicitly. A typical list: - **Orientation**: where a surface lives in space (a sheet belongs to the bottom edge). - **Cause and effect**: which element the user's action changed. - **Relationship**: the new view is a detail of, a sibling of, or a layer over the old one. - **Continuity**: the same object persists across two views. Each proposed animation in a design review then states which purpose it serves. If the answer is "none", it is decoration and is judged against the budget. This also helps engineers: functional motion is part of the specification and must survive refactors, while decoration can be dropped under performance pressure without losing meaning. ## Common mistakes - Judging motion by whether it **looks polished** rather than by what it explains. - Assuming that because motion is functional it must stay at full strength for every user; the vestibular-safety rules still apply. - Animating **everything that changes**, which makes it harder, not easier, to see what the important change was. - Treating feedback on a single control (a press, a toggle) as the same subject; that is the interaction-design principles' subject, while this rule is about state changes and transitions between states and views.
- Can the same animation be functional on one screen and decorative on another?Yes, because function depends on the relationship the motion describes. A sideways slide between lesson 3 and lesson 4 tells the learner the lessons sit in order. The same slide between the catalogue and the profile invents an order that does not exist, so there it is at best decoration and at worst misleading.
- A stakeholder insists on a celebratory animation after every quiz. How do you respond?Accept the goal, limit the scope. Celebration is decoration with a budget: tie it to milestones such as finishing a module, keep it short and non-blocking, and never play it on a failed attempt, where it contradicts the state. Offer a functional alternative for routine submissions, such as animating the score or progress from its old value to its new one.
saying these in an interview costs you the question
- Judges an animation by how polished it looks, not what it explains.
- Says every state change in the interface should be animated.
- Believes decorative motion is always wrong and should be banned outright.
- Keeps a celebration animation even when it contradicts the state, such as a failed quiz.
- Cannot say what information would be lost if the animation were removed.