In this article · 11 sections
When you tap “like” and the heart pops, when a pull-to-refresh spinner stretches and snaps, when a toggle slides with a subtle click, you are experiencing micro-interactions. They are tiny moments that acknowledge what you did, tell you what is happening and make an interface feel responsive and alive. Individually they are easy to overlook. Together they separate a product that feels crafted from one that feels merely functional.
What is a micro-interaction?
A micro-interaction is a small, contained moment built around a single task. Designer Dan Saffer describes four parts:
- Trigger: what starts it. This can be user-initiated (a tap or swipe) or system-initiated (a new message arrives).
- Rules: what happens once it is triggered
- Feedback: how the user knows something happened (animation, sound, haptic, text change)
- Loops and modes: whether it repeats, changes over time or behaves differently in special states
Think of changing a setting, sending a message, uploading a file or completing a step.
Why they matter
- Feedback: they confirm that the system received the action
- Guidance: they show what is possible and what comes next
- Orientation: transitions explain where something came from and went
- Error prevention and recovery: inline validation and gentle warnings reduce mistakes
- Delight and brand personality: a touch of character makes products memorable
- Perceived performance: well-designed loading states make waits feel shorter
Practical examples
| Moment | Good micro-interaction |
|---|---|
| Button tap | Slight press state and immediate visual response |
| Form field | Inline validation as the user finishes, with clear, kind messages |
| Toggle switch | Smooth slide with a clear on/off state |
| Pull to refresh | Visible progress and a satisfying completion cue |
| Adding to cart | Item animates toward the cart, and the badge updates |
| Loading | Skeleton screens or progress indicators instead of a blank page |
| Success | Brief, positive confirmation such as a checkmark |
| Empty state | Friendly illustration with a clear next action |
| Swipe actions | Reveal options with resistance and snap |
Principles for good ones
Be purposeful
Every animation should communicate something: confirm, explain, guide or delight. If you cannot say what it is for, remove it.
Respond instantly
Feedback should begin within about 100 milliseconds so the interface feels connected to the user’s action. Delays make an app feel broken.
Keep durations short
Most interface transitions work best between roughly 150 and 400 milliseconds. Faster feels abrupt, and slower feels sluggish, especially for actions repeated often. Use easing (ease-out for entering, ease-in for exiting) so motion feels natural instead of mechanical.
Be consistent
Use the same motion language everywhere: similar durations, easing and behaviours. Define them in your design system as motion tokens.
Stay subtle with repeated actions
Delight is great the first time and annoying the hundredth. The more frequent the action, the quieter the feedback should be.
Combine senses thoughtfully
Visual feedback, haptics and sound can reinforce each other. Never rely on one alone. See sound design for apps.
Accessibility and inclusion
Motion can cause problems for some users.
- Respect the reduced motion setting at the system level. Replace large movements with fades or no animation.
- Avoid flashing content
- Do not convey essential information only through animation or color
- Ensure screen reader users get equivalent feedback, for example announcing “message sent”
- Do not make users wait for animations to finish before continuing
See accessibility basics.
Performance matters
Animations should run smoothly, ideally at 60 frames per second or more.
- Animate cheap properties like transform and opacity on the web
- Avoid animating layout-triggering properties where possible
- Test on low-end devices
- Use native platform animation APIs or well-optimised libraries
- Keep Lottie or video assets lightweight
Janky animation is worse than none. See app performance optimisation.
Design and handoff
- Prototype interactions in your design tool or code so the team can feel them, not just see static frames
- Specify duration, easing, delay and properties for developers
- Document states: default, hover, pressed, loading, success, error, disabled
- Review the real build on a device and refine the details together
Test with users
Watch whether people notice and understand the feedback, and whether anything feels slow or distracting. Include micro-interactions in your usability testing and review analytics for abandoned flows that might hide unclear feedback.
Common mistakes
- Decorative animation with no purpose
- Slow, long transitions
- Inconsistent motion across screens
- No feedback for important actions
- Ignoring reduced motion settings
- Heavy effects that drop frames
Checklist
- Each micro-interaction has a clear purpose
- Feedback begins almost immediately
- Durations and easing are consistent and short
- Frequent actions kept subtle
- Reduced motion and screen reader support
- Smooth on low-end devices
- Specs documented for developers
- Tested with real users
Final thoughts
Micro-interactions are where craft shows. Keep them purposeful, quick and accessible, and they will make your product feel responsive and human. For help designing refined interaction details, see our UI/UX design service or contact us.
