Microinteractions: the small details that make interfaces feel alive
Microinteractions are small, focused moments of interaction, such as toggling a setting, liking a post or seeing a field validate, that give feedback and make interfaces feel responsive. Each has a trigger, rules, feedback and loops or modes. Good microinteractions are purposeful, quick, consistent and accessible, and they never slow users down.
What microinteractions are
Microinteractions are the small, single-purpose moments that happen as people use a product. Pressing a button and seeing it respond, sliding a toggle to turn on notifications, pulling down a list to refresh it, watching a password field show that a password is strong enough, or tapping a heart icon that briefly animates as it fills. Each moment is tiny, but together they shape how responsive, polished and trustworthy a product feels.
The term was popularised by designer Dan Saffer, who described microinteractions as contained product moments that revolve around a single use case. Most people never consciously notice them when they work well. They notice immediately when they are missing: a button that does nothing visible when pressed, a form that fails silently or a setting that changes without any confirmation.
The four parts of a microinteraction
Saffer describes four parts that every microinteraction shares. Thinking through each part helps designers create moments that are clear and consistent.
| Part | What it is | Example |
|---|---|---|
| Trigger | What starts the interaction | A user taps a toggle, or new mail arrives |
| Rules | What happens and in what order | The setting switches on and is saved |
| Feedback | How the user knows what happened | The toggle slides and changes colour |
| Loops and modes | What happens over time or in special states | The toggle is disabled while offline |
Why microinteractions matter
- Feedback: Confirm that an action was received and completed.
- Status: Show progress, loading or system state.
- Prevention: Warn before errors happen, such as a weak password.
- Guidance: Hint at what users can do next.
- Personality: Express brand character through small details.
- Delight: Make routine tasks slightly more pleasant.
Among these, feedback is the most important. When people take an action and nothing visible happens, they often repeat it, assume the product is broken or abandon the task. Clear, immediate feedback reduces uncertainty and the mental effort it creates, as explained in our post on cognitive load in UX design.
Common microinteractions and how to design them
| Microinteraction | Purpose | Design tip |
|---|---|---|
| Button press | Confirm the tap | A quick visual change within about 100ms |
| Toggle switch | Show state change | Animate position and colour together |
| Form validation | Prevent and explain errors | Validate after the user leaves the field, not on every keystroke |
| Pull to refresh | Load new content | Show progress and confirm when finished |
| Like or favourite | Acknowledge appreciation | Brief, satisfying animation, easily undone |
| Loading indicator | Show the system is working | Use skeleton screens for content-heavy views |
Principles for good microinteractions
Good microinteractions are purposeful. Each one should help the user understand something, not just decorate the interface. They are fast, usually lasting between about 100 and 400 milliseconds so they never make people wait. They are consistent, using the same timing, easing and visual language throughout the product. And they are proportionate: small actions get subtle feedback, while important or irreversible actions deserve more noticeable confirmation.
- Give every microinteraction a clear purpose
- Keep durations short and responsive
- Use consistent timing and easing across the product
- Match the strength of feedback to the importance of the action
- Make actions reversible where possible
Expressing brand personality
Microinteractions are one of the most effective places to express a brand’s character without getting in the way. A playful consumer app might use bouncy, energetic motion; a banking app might use calm, precise transitions. The key is to define this personality once, in motion guidelines within the design system, so every team applies it consistently. Our post on emotional design explores how small details shape how people feel about a product.
Accessible microinteractions
Not everyone experiences motion the same way. Some people find animation distracting or physically uncomfortable, so products should respect the reduced-motion setting available on most devices, replacing movement with simple fades or instant changes. Feedback should never rely on motion or colour alone; pair it with text, icons or state changes that screen readers can announce. Interactive elements also need clear focus states for keyboard users.
Keeping them fast
Microinteractions should feel instant, even on mid-range phones. Animating properties such as transform and opacity is usually smooth, while animating layout properties can cause stutter. Lightweight formats such as CSS transitions or Lottie animations keep file sizes small. Test on real devices, especially older ones, and simplify any interaction that feels sluggish.
Designing microinteractions in practice
- Find the moments: List key actions where users need feedback or reassurance.
- Define the parts: Write the trigger, rules, feedback and modes for each.
- Prototype: Build quick motion prototypes to test timing and feel.
- Test in context: Try them in real flows and on real devices.
- Document: Add specifications and code to the design system.
Small details add up. A product where every action responds clearly feels trustworthy and pleasant to use, even if users never notice why. Our UI animation tips offer more guidance on timing and easing.
Frequently asked questions
What is an example of a microinteraction?
Sliding a toggle to turn on notifications, with the switch moving and changing colour to confirm the new setting.
How long should a microinteraction last?
Most should last between about 100 and 400 milliseconds, quick enough to feel instant without being missed.
Are microinteractions just animations?
No. They include the trigger, rules and feedback. Animation is often part of the feedback, but sound, haptics and text changes also count.
Do microinteractions affect accessibility?
They can. Respect reduced-motion settings and pair visual feedback with text or announcements screen readers can read.
Should microinteractions include sound or haptics?
They can add useful feedback on mobile, but use them sparingly and let users turn them off.
How do we document microinteractions for developers?
Specify the trigger, states, duration, easing and reduced-motion alternative for each, and share prototype videos or code snippets.