The 200ms Principle
Dan Saffer, in his seminal book Microinteractions, defines them as "the small moments that define a product." But what makes a microinteraction great vs forgettable?
The answer is often timing. 200ms is the sweet spot for feedback animations — fast enough to feel immediate, slow enough for the user to register that something responded.
The Anatomy of a Great Micro-Interaction
Every effective micro-interaction has four parts:
1. Trigger: What initiates it (a tap, a hover, a system event) 2. Rules: What happens in response 3. Feedback: How the user knows the rules are executing 4. Loops & Modes: Does it loop? Does it change behavior in different contexts?
Most designers nail triggers and feedback. Most forget about rules and loops.
Examples That Move the Needle
The Loading State as a Brand Moment Stripe's loading dots don't just tell you something is happening — they pulse in Stripe's signature gradient. Two birds, one stone: feedback and brand reinforcement.
The Error State as Empathy Duolingo's error animation — the screen shaking and going red — is designed to feel like a gentle disappointment rather than a harsh failure. The follow-up encouragement is immediate, turning a negative moment into a motivational one.
The Success State as Celebration Figma's multiplayer cursor colors, which linger briefly after a collaborator leaves, create a sense of shared presence. It's a microinteraction that builds emotional connection to a collaborative tool.
Implementation Principles
- Never animate just to animate. Every animation should have a semantic purpose.
- Respect user preferences. Always respect `prefers-reduced-motion`.
- Ease in, ease out. Linear animations feel mechanical. Use `ease-in-out` or spring-based physics for anything that should feel alive.
