Microinteraction
Definition
Small, contained interactions that accomplish a single task while providing feedback, like toggling a switch or liking a post.
What is a Microinteraction?
A microinteraction is a small, single-purpose interaction that helps users accomplish a task while providing immediate feedback. They're the tiny details that make interfaces feel responsive and human.
Examples include: the heart animation when you like a tweet, the toggle switch sliding when you change a setting, or the pull-to-refresh animation on mobile apps.
Anatomy of a Microinteraction
Trigger
What initiates the interaction. User action (clicking, swiping) or system event (notification arrives).
Rules
What happens during the interaction. The logic that determines the response.
Feedback
What the user sees, hears, or feels. The visual or audio confirmation that something happened.
Loops and Modes
What happens over time or in different states. How the interaction changes with repeated use.
Common Microinteractions
| Action | Microinteraction |
|---|---|
| Clicking a button | Visual press and colour change |
| Submitting a form | Checkmark animation confirming success |
| Adding to cart | Item flying to cart icon |
| Hovering over link | Underline or colour transition |
| Toggling a switch | Smooth slide with colour change |
| Scrolling | Progress indicator updating |
Why They Matter
Microinteractions provide feedback that tells users their action worked. Without them, clicking a button feels uncertain—did anything happen? With them, the interface feels alive and responsive.
Design Principles
- Keep them fast (under 400ms typically)
- Make them purposeful, not decorative
- Ensure they work on all devices
- Don't overdo it—too many feels chaotic
- Test with real users for clarity