Micro-Interaction Design Patterns for Delightful UX
Micro-interactions are subtle animations that respond to user actions — a button bounce on click, a toggle slide, a checkmark draw. They make interfaces feel alive and provide immediate feedback.
Key Takeaways
- A successful micro-interaction has four parts: a trigger (user action or system event), rules (what happens), feedback (what the user sees), and loops/modes (what happens on repeat or over time).
- A button that snaps down 2px on click and returns on release simulates physical button behavior.
- Some users experience motion sickness from screen animations.
- Always wrap animations in a `prefers-reduced-motion` media query and provide a static fallback.
Color Palette Generator
What Makes a Good Micro-Interaction
A successful micro-interaction has four parts: a trigger (user action or system event), rules (what happens), feedback (what the user sees), and loops/modes (what happens on repeat or over time). Each part should be intentional, not decorative.
Common Patterns
Button Feedback
A button that snaps down 2px on click and returns on release simulates physical button behavior. Add a subtle scale transform (0.97) for a satisfying press effect. Duration: 100-150ms with ease-out easing.
Toggle Switches
The thumb slides from left to right while the track color transitions. Use a spring easing for the thumb movement and a linear transition for the color change. Duration: 200-300ms.
Loading Indicators
Replace static spinners with skeleton screens that match the layout of incoming content. A subtle shimmer animation (a moving linear-gradient highlight) communicates that content is loading without the anxiety of a spinner.
Form Validation
Shake the input field gently (translateX 3px oscillation, 3 cycles, 300ms) on validation error. Combine with a red border transition and an error message that slides in from above. For success, draw a checkmark SVG path with stroke-dashoffset animation.
Performance Guidelines
| Rule | Reason |
|---|---|
| Duration under 400ms | Longer feels sluggish |
| Animate transform/opacity only | GPU-composited, no layout thrashing |
| Respect prefers-reduced-motion | Accessibility for vestibular disorders |
| No animation on page load | Let content appear instantly |
The Reduced Motion Imperative
Some users experience motion sickness from screen animations. Always wrap animations in a prefers-reduced-motion media query and provide a static fallback. This is not optional — it is an accessibility requirement.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}