Microinteraction
A small, focused animation or response to a single user action.
A microinteraction is a tiny, contained moment — a button's hover state, a toggle animating, a like bursting, a form field confirming success. Each one provides feedback, communicates state, and adds personality.
Done well, microinteractions make a product feel responsive and alive; overdone, they distract. The craft is in restraint and timing.
Key characteristics
- Small, single-purpose moments of feedback — a like animation, a toggle, a pull-to-refresh.
- Structured as trigger, rules, feedback and loops/modes.
- Confirm actions, communicate status and add personality without distraction.
- Should be quick and subtle; overdone motion becomes annoying.
Example
The heart that fills and bounces when you like a post confirms the action instantly and adds a moment of delight — a classic microinteraction.
Frequently asked questions
Why do microinteractions matter?
They give immediate feedback that an action worked, reduce uncertainty, and make a product feel responsive and polished. Small details compound into perceived quality.
Can microinteractions hurt usability?
Yes, if they're slow, excessive or block the user. Effective microinteractions are fast, purposeful and respect reduced-motion preferences for accessibility.
Related terms
Need this done, not just defined?
I design and build it — Framer sites, product UI/UX, and more.