A small, contained interaction that accomplishes a single task — such as toggling a switch, pulling to refresh, or seeing a 'like' animation. Microinteractions provide feedback, prevent errors, and add personality, making interfaces feel alive and responsive.
Common contexts
- Designing the four states of a toggle — off, transitioning, on, disabled — as a complete interaction unit rather than two visual snapshots
- Adding a pull-to-refresh animation that communicates progress and completion rather than just spinning indefinitely
- Reviewing a feature's microinteractions in prototype to ensure each one has a trigger, rule, feedback, and loop/mode defined
Use when
Define microinteractions at the component design stage, before handoff — specifying trigger, feedback, and loop explicitly prevents engineers from improvising behavior that breaks consistency across the product.
Avoid when
Don't design microinteractions that prioritize delight over clarity — an animation that users find charming the first time becomes a source of frustration when they need to complete a task quickly on the tenth.
Microinteractions are where product personality lives or dies — a product full of generic system behaviors feels assembled, while one with considered microinteractions feels built.
Real-world examples
- Facebook's Like button expands into emotion reactions on long-press — a microinteraction that doubled emotional expression options without adding any visible buttons to the default state.
- Duolingo's XP progress bar fills with an elastic bounce animation after each lesson correct answer, providing variable-ratio reinforcement that keeps streak motivation high.
- The iOS toggle switch uses a satisfying spring animation and green-to-grey colour shift to confirm state change — the microinteraction is precise enough that users can confirm a setting change without re-reading the label.