interaction design
Microinteractions
What are microinteractions, and why do they matter?
A microinteraction is a single small moment built around one task - a toggle flipping, a like animating, a field confirming it saved. Each is tiny, but they're where an interface answers "did that work?" in the instant after you act, and where a product feels responsive and considered rather than dead and uncertain.
Also known as: microinteraction, micro-interactions, micro interactions
Prefer to watch?
Watch the recap 0:46
The demo
Three ordinary controls. Turn the microinteractions off, use them, then turn them back on - and notice how much the little moments of feedback were telling you.
What this demo shows (text version)
Three small controls - a "like" heart, an on/off switch, and a "copy link" button - can be used with their microinteractions on or off. With them on, each action gives immediate feedback: the heart fills and gives a little pop, the switch slides and changes colour, the copy button briefly confirms "Copied". You always know what just happened.
With them off, the controls still work but say nothing - the state swaps silently, with no motion and no confirmation, so you're left unsure whether your tap registered. That uncertainty is what microinteractions remove: their first job is feedback (did it work, what's the state now), with delight a bonus on top. When reduced-motion is requested, the animations drop but the state change and confirmation still happen instantly.
Microinteractions are the small feedback moments that confirm an action landed, show its new state, and add a little life - their absence doesn't break a UI, it just leaves people unsure whether anything happened. Make them fast and meaningful (feedback first, delight second), and always respect reduced-motion so the confirmation survives even when the animation doesn't.
With the microinteractions off, you tapped and... wondered. Did it register? Is it on now? With them on, each action answered itself the instant you made it - the state changed visibly, the feedback was immediate, and the thing felt alive under your finger. Same buttons; one version just kept talking back.
A microinteraction's first job is feedback, not flourish. The moment you act, it confirms the system heard you and shows the new state - on or off, saved or not, liked or not. Strip that away and even a working interface feels uncertain, because the user is left guessing whether their tap did anything at all.
Delight is the second job, and it's real - a well-judged bit of motion or a satisfying toggle is part of what makes a product feel crafted. But it's seasoning on top of clarity. A flashy animation that delays or obscures the actual state change has put the garnish before the meal.
Keep them quick and respectful. A microinteraction that drags makes the interface feel slower, not richer, so favour short, snappy feedback. And honour prefers-reduced-motion: when motion is off, the state change and confirmation must still happen instantly - the information can never depend on the animation.