In short
A micro-interaction is a contained moment in an interface that accomplishes a single task and gives feedback about it: a switch sliding on, a heart filling, a field showing a green tick, a pull-to-refresh spinner, a button briefly confirming a copy. Dan Saffer's model breaks each into a trigger, rules, feedback and loops or modes. They matter because they tell users the system heard them, guide them toward correct use, and give a product its character. They should be fast, subtle, purposeful, and disabled for users who prefer reduced motion.
The definition
Dan Saffer's 2013 book gave the term its current meaning: a micro-interaction is a product moment that revolves around a single use case, has one main task, and is over quickly. Turning something on or off. Liking. Saving. Adjusting a setting. Refreshing a feed. Copying to the clipboard. Each is small enough to be designed completely, and together they are most of what using a product feels like.
Saffer's model has four parts. The trigger starts it: a tap, a gesture, a system event such as a message arriving. The rules decide what happens: the toggle switches state, the copy goes to the clipboard, the like is recorded. The feedback tells the user what happened: the switch slides, the icon changes, a brief label says "Copied". Loops and modes cover what happens over time or on repetition: the interaction that changes after the tenth use, the state that persists.
The feedback part is what people usually mean by the term, and it is where design and motion meet.
What they do
Acknowledge. The most basic job: the system heard you. A button that changes on press, a switch that moves, a message that appears in the thread. Without acknowledgement, users tap again, and double submissions and duplicated messages follow.
Communicate state. Is it on, saved, loading, done, failed? A micro-interaction that shows the transition, not just the end state, makes the change legible: a switch sliding from off to on is understood; a switch that teleports is checked twice.
Guide. A field that validates as the user types, a password meter that fills, a form section that opens when the relevant option is chosen. Feedback at the moment of action prevents errors rather than reporting them later.
Reward, sparingly. The confetti on a completed task, the satisfying pull-to-refresh. A moment of delight at a point of accomplishment. This is the job most often overdone.
Express character. The particular way a product's toggles move, its loaders spin and its lists reorder is much of what distinguishes it from a template. Motion patterns chosen deliberately become a signature.
Examples that work
A button that darkens on press and returns on release. A "Copy" button whose label becomes "Copied" for a second and then reverts. A toggle that slides with a slight overshoot. A like that fills with a quick scale. A field border turning green with a tick as a valid email is completed. A list item that slides out when deleted, with an undo bar. A refresh gesture with a spinner tied to the pull distance. A password field revealing strength as you type. A save indicator that says "Saving…" and then "Saved" quietly in a corner.
Each is short, tied to an action, informative, and unobtrusive.
The constraints
Speed. Feedback should begin within about 100 milliseconds of the trigger and finish within a few hundred. Micro-interactions that take a second to play delay the user every time; the animation is confirming, not performing.
Subtlety. Small movements, gentle easing, minimal colour change. The interaction should be noticed on the first use and unnoticed thereafter.
Purpose. Every micro-interaction should answer a question the user has at that moment: did it work, what state is it in, what happens next. Motion with no answer in it is decoration, and decoration on every tap is noise.
Accessibility. Users who set prefers-reduced-motion should get instant state changes without animation; users of screen readers need the state change announced, since they cannot see the toggle slide; feedback must not rely on colour alone. A micro-interaction that only works visually is half an interaction.
Performance. Animate transforms and opacity, which the browser composites cheaply, rather than layout properties. A micro-interaction that stutters on a phone communicates the opposite of quality.
Consistency. The same kind of action should produce the same kind of feedback everywhere in the product. A design system should define micro-interactions alongside components.
When to leave one out
When the state change is already obvious without it. When the interaction is repeated hundreds of times a session and any animation becomes friction. When the moment is serious, such as an error or a payment, and playfulness would read as flippant. When the team cannot make it fast and smooth, in which case an instant change beats a janky animation. And when it exists because a stakeholder liked it in a demo rather than because it answers a user's question.
Specifying them
Micro-interactions are usually lost between design and development because they are not in the mockup. Specify each one: the trigger, the states, the timing in milliseconds, the easing, what is announced to assistive technology, and the reduced-motion behaviour. A prototype in Figma or a short recording communicates it; a line in the handoff makes it happen. The best products are not the ones with the most micro-interactions but the ones where every one was decided. If yours feel either dead or overdone, book a call; an audit of the interaction states is usually a short exercise.
Common questions
What is an example of a micro-interaction?
A toggle switch sliding from off to on, a heart icon filling when tapped, a 'Copy' button briefly changing to 'Copied', a form field showing a green tick as a valid email is entered, a list item sliding out when deleted with an undo option, or a pull-to-refresh spinner. Each is a single small action with immediate feedback.
What are the four parts of a micro-interaction?
From Dan Saffer's model: the trigger that starts it, such as a tap or a system event; the rules that determine what happens; the feedback that shows the user what happened; and the loops and modes that govern how it behaves over time or on repetition. Feedback is the part most associated with the term.
Why are micro-interactions important?
They confirm that the system registered an action, which prevents repeated taps and duplicate submissions; they make state changes legible; they guide users toward correct input at the moment of action; and they give a product its character. Without them an interface feels unresponsive and users lose confidence in what happened.
How long should a micro-interaction animation be?
Feedback should begin within about 100 milliseconds of the action and complete within roughly 200 to 400 milliseconds. Longer animations delay the user on every repetition and shift from confirming to performing. Users who prefer reduced motion should see an instant state change with no animation.
Are micro-interactions bad for accessibility?
Only when built carelessly. They should respect the prefers-reduced-motion setting by switching to instant changes, announce state changes to screen readers since a sliding toggle is invisible to them, and never convey the result by colour alone. Built with those rules, they help every user understand what happened.
