UX glossary · engl. Microinteractions
Microinteractions
Microinteractions are small, self-contained moments in a product that do exactly one thing, like a like button or a toggle, and show you right away what just happened.
Imagine you tap the heart below a photo in an app. It fills with red, gives a little bounce, and the number next to it goes up by one. The whole thing takes less than a second, but you know right away: that worked. If the heart just stayed gray, you’d probably tap it twice more and wonder whether the app had frozen.
Small moments like these are called microinteractions.
Explained simply
Microinteractions are small, self-contained interactions that do exactly one thing: flip a switch, mark a message as read, set an alarm, type a password and see whether it meets the rules. Think of everyday objects: a light switch that clicks softly, or the button at a pedestrian crossing that lights up to confirm your request. They’re tiny details, but without them you’re never quite sure something happened.
The term was popularized by interaction designer Dan Saffer in his book “Microinteractions”, published by O’Reilly in 2013. His core idea: a product isn’t made good or bad only by its big features, but also by the many small details in between.
The four building blocks
Saffer breaks every microinteraction down into four parts:
- Trigger: What starts the interaction? It can be something a person does, like a tap, or something the system does, like a new message arriving.
- Rules: What happens next, and what’s allowed? For example, a second tap undoes a like.
- Feedback: How does the system show what’s going on? Through color, motion, sound or vibration.
- Loops and modes: What happens when it repeats or over a longer period, and are there settings that change its behavior? Think of an alarm that repeats every weekday.
For usability, feedback usually matters most. It answers the question people ask after every action: did that work? You can read more in What Are Microinteractions and How Can You Use Them?.
An example
Here’s an example: during sign-up, people type a password, submit the form and only then find out that a special character is missing. Many get annoyed, and some give up.
In the redesigned version, the rules appear right below the field. As people type, each rule they meet gets a check mark. The task is the same, but the microinteraction removes the uncertainty before an error happens.
Common misconceptions
Microinteractions aren’t decoration. An animation that only looks nice and delays every action by a second gets annoying by the tenth time at the latest. Good microinteractions are fast, unobtrusive and explain something. And they aren’t always visible: a short vibration or a sound can be a microinteraction too.
In practice
- Respond to every action. Check buttons, switches and forms to see whether they react visibly. A loading state beats silence.
- Keep animations short. Motion should help people find their way, not slow them down. Also respect the system setting for reduced motion.
- Let the words help. Often the best feedback is one clear sentence. Good microcopy and the right motion work well together.
Related terms
Microcopy, Affordance, Usability, Design System