Interface motion that serves a purpose
Use motion to explain transitions and state changes while protecting responsiveness, accessibility and the ability to use a calmer interface.
ecomvision editorial team
2 min
Published
Updated
Key takeaways
- 01Give every movement a clear purpose.
- 02Prioritise feedback over decorative introductions.
- 03Preserve meaning and usability when motion is reduced.
State the purpose
Motion can explain where a panel comes from, connect states or confirm an action. If its purpose is hard to express, check whether it merely adds waiting.
A short menu reveal can explain its connection to a button. Making every paragraph animate before reading rarely improves comprehension.
Show an immediate response
Clicks need visible feedback through state changes, progress or confirmation. Motion should not conceal an unclear operation.
Transitions must handle interruption. Try opening and closing quickly, changing a filter mid-transition and navigating back.
Provide a calmer experience
Respect prefers-reduced-motion by removing unnecessary movement, parallax and loops. Preserve feedback through understandable text and states.
CSS does not automatically stop JavaScript timelines or WebGL. Check these separately and ensure focus returns correctly when a panel closes.
Measure the effect’s cost
Test on an ordinary phone. Large blurs, transparent layers and continuous 3D can interfere with input and scrolling. Stop work that is no longer visible.
Review interaction, not just a still image. Repeat the task without animation and reconsider effects that make the journey less clear.
- The task never waits for decoration to finish.
- Rapid repeated actions do not break the state.
- Keyboard navigation and focus work during transitions.
- Reduced motion actually removes unnecessary movement.