Motion spends the user's time. Every transition is a small tax on every use, forever, and the product can never feel faster than its transitions allow.
So motion has to earn its place. Useful motion does one of three jobs: it tells you the tap landed, it shows you where something came from or went, or it fills a wait you were going to sit through anyway. Anything else is decoration, and decoration costs most for the person who opens the product forty times a day — precisely the person you cannot afford to irritate.
Design motion for the hundredth time someone sees it, not the first.
- 20 Motion Design Principles with Examples for UI/UX Designers — article
- Motion UI & Interactive Design: Creating Engaging Animations and User Interfaces — article
Micro-interactions
A micro-interaction is the product answering. Press a button and it depresses. Flip a switch and the knob slides while the track fills. Drag a card and it lifts off the surface.
The job is feedback inside about 100 milliseconds, because beyond that the response stops feeling caused by the action. Which is why the press state matters more than whatever animates afterwards. People forgive a slow save; they re-tap a button that looked dead, and now you have two orders.
Cover the whole moment, not just the attractive part. A submit button needs three things: a pressed state, a loading state that blocks further presses, and a resolution that says plainly whether it worked. Get those right and whatever animates between them barely matters. Get them wrong and no amount of animation rescues the moment.
- 12 Micro-Interaction Examples That Reshape User Behavior in 2026 — article
- Microinteractions in User Experience — article
- Micro-interactions to delight your users: what, when and how — video
Motion Principles
Write down four things and motion stops being guesswork. Duration: most transitions belong between 150 and 300 milliseconds — under 100 reads as a cut rather than a move, over 400 as sluggish. That is the length of the movement, not the product's response time; the answer still has to start inside 100. Easing: things arriving decelerate, things leaving accelerate. Distance: a tooltip and a full-screen sheet should never share a duration. Direction: a panel that opened from the right closes to the right.
Keep the four in the token file, not a deck nobody reopens — every new feature arrives with a fresh opinion about how a panel should enter.
Then honour prefers-reduced-motion. Large sliding transitions and parallax cause real nausea and dizziness for people with vestibular sensitivity. Cross-fade rather than stripping the feedback out. Nobody turns that setting on to tell you about their taste in animation.
- Understanding motion — article
- When Motion Got Principled — article
- 10 Motion Design Principles Every Animator Needs — video