Micro-interactions
Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Ideal for landing pages, saas. AI-ready template.
Use case: Landing pages, SaaS
Historical Context
Dan Saffer literally wrote the book on this in 2013. 'Microinteractions: Designing with Details' gave us the vocabulary — triggers, rules, feedback, loops. Before that, we were just calling them 'little animations' and hoping for the best. The framework mattered because it forced designers to think about *why* something moves, not just *how*. Then mobile happened. iOS 7's physics-based animations, Android's Material Motion — suddenly users expected every tap to respond, every swipe to feel weighted. The smartphone trained an entire generation to notice when feedback is missing. A button that doesn't acknowledge your press? Broken. A toggle that just snaps? Cheap. Here's the tension though: there's a razor-thin line between 'this feels alive' and 'this is wasting my time.' By 2026, the conversation has shifted from 'should we add microinteractions?' to 'how do we keep them from becoming noise?' Every design system ships them as primitives now. The debate isn't whether — it's how much.
When to Use
Add them where users need confirmation that something happened. Form submissions, state changes, destructive actions — moments of uncertainty. They earn their keep when they reduce cognitive load: a loading spinner tells you to wait, a checkmark tells you it worked, a shake tells you it didn't. Pull back when speed matters more than delight. Data-heavy dashboards, rapid-fire workflows, power-user tools — these contexts punish unnecessary motion. If your user repeats an action fifty times a day, that 300ms animation becomes a prison. Test with real usage patterns, not demo scenarios.
Design Principles
- Duration under 400ms or it stops feeling like feedback and starts feeling like a wait — 200-300ms is the sweet spot for most state transitions
- Match the interaction's importance to the animation's intensity — a toggle flip gets subtle easing, a successful payment gets celebration
- Never block user input during an animation — the interface should remain interactive even while transitioning, or you've traded delight for frustration
- Use consistent motion language across your system — if buttons scale down on press, all buttons scale down on press, no exceptions
- Design the unhappy path first — error states, failed loads, timeout recoveries need more attention than success states because that's where users actually need guidance
Technical Specs
Colors
Primary
Effects
Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic
Light/Dark
✓ Full / ✓ Full
Related
Last synced: 4/1/2026