A button that does nothing visually when clicked feels broken, even if the action completed successfully. A form that shakes when you submit invalid data communicates the error faster than any error message. A loading spinner that pulses rather than spins monotonously feels less dead. These are micro-interactions — tiny, purposeful moments of feedback that together determine whether a product feels crafted or cobbled together.
The Four Components
Dan Saffer's framework for micro-interactions: trigger (what initiates the interaction), rules (what happens), feedback (how users know what happened), and loops/modes (what happens next or over time). Working through all four for each micro-interaction produces more intentional design than jumping straight to the visual treatment.
When Animation Helps vs Hurts
Animation communicates relationships and direction: a panel that slides in from the right implies it came from the right (and will return there). It communicates state: a toggle that switches with a satisfying movement feels more reliable than one that snaps. It communicates progress: a progress bar that moves smoothly feels faster than one that jumps.
Animation hurts when it delays the user from completing tasks (loading animations longer than 200ms), when it's arbitrary (motion that doesn't communicate anything), or when it's repeated too often (an animation that plays the third time you complete an action becomes annoying).
Accessibility and Motion
Users with vestibular disorders can experience nausea from excessive animation. The prefers-reduced-motion media query lets you detect when a user has requested reduced motion system-wide. Honor it: swap animations for instant state changes or very subtle fades.