Micro-interactions are the small, subtle animations and responses that make interfaces feel alive and responsive. They're the difference between a functional interface and a delightful one.
What Are Micro-Interactions?
A micro-interaction is a contained product moment that revolves around a single use case. Examples include:
- A button that changes color when you hover over it
- A heart icon that animates when you like a post
- A loading spinner that appears while content loads
- A subtle bounce when you pull to refresh
The Four Parts
Every micro-interaction has four parts:
- Trigger - What initiates the interaction
- Rules - What happens during the interaction
- Feedback - How the user knows what's happening
- Loops & Modes - What happens over time
Design Principles
Be Subtle
The best micro-interactions are almost invisible. They should enhance the experience without drawing attention to themselves.
Provide Feedback
Users need to know their actions have been registered. A button press, a form submission, a file upload—all should provide immediate visual feedback.
Consider Performance
Animations should run at 60fps. Anything less feels janky and unprofessional. Use CSS transforms and opacity for the smoothest animations.
Implementation Tips
Use CSS transitions for simple state changes and JavaScript for more complex animations. Keep durations short—usually between 200-400ms.
button { transition: all 200ms ease-out; } button:hover { transform: translateY(-2px); }
Conclusion
Micro-interactions are the polish that separates good interfaces from great ones. Pay attention to the details, and your users will notice.