Micro-Interactions
The Four Parts
- Trigger: User action or system event
- Rules: What happens
- Feedback: What the user sees/feels
- Loops & Modes: Ongoing behavior
Essential Micro-Interactions
| Interaction | Feedback | Duration |
|---|---|---|
| Button click | Scale down 95%, opacity change | 100ms |
| Toggle switch | Slide + color change | 200ms |
| Checkbox | Scale + checkmark draw | 150ms |
| Like/heart | Scale up + color + particle | 300ms |
| Delete | Slide out + height collapse | 250ms |
| Add to cart | Item flies to cart icon | 400ms |
| Copy to clipboard | Tooltip confirms | 200ms |
| Error shake | Horizontal shake 3x | 300ms |
Rules
- Every user action gets feedback (even if subtle)
- Feedback is immediate (under 100ms for direct manipulation)
- Match the energy: destructive actions feel different from creative ones
- Don't animate things that happen frequently (typing, scrolling)
- Delight sparingly: if every interaction is delightful, none are