| name | interaction-design |
| description | Design meaningful interactions and microinteractions. Create delightful user experiences through thoughtful animation, feedback, and responsive interface design.
|
Interaction Design
Table of Contents
Overview
Interaction design focuses on how users engage with systems, creating intuitive and delightful experiences through feedback and responsiveness.
When to Use
- Designing user flows and touchpoints
- Creating animations and transitions
- Defining error and loading states
- Building microinteractions
- Improving usability and feedback
- Mobile interaction patterns
Quick Start
Minimal working example:
Common Interaction Patterns:
Swipe:
Use: Mobile lists, carousels
Feedback: Visual sliding, momentum
Accessibility: Keyboard alternative (arrows)
Tap & Hold:
Use: Context menus, drag prep
Feedback: Visual feedback after delay
Duration: ~500ms before trigger
Pinch & Zoom:
Use: Image viewing, maps
Feedback: Smooth zoom animation
Boundaries: Set min/max zoom levels
Drag & Drop:
Use: Reordering, moving items
Feedback: Visual during drag, drop confirmation
Fallback: Alternative method (buttons)
Double Tap:
Use: Zoom, favorite, select
Feedback: Immediate visual response
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
Best Practices
✅ DO
- Keep animations under 400ms
- Provide clear visual feedback
- Use animations to guide attention
- Respect motion preferences
- Make interactions reversible
- Test with keyboard and screen readers
- Provide multiple interaction methods
- Design for touch and mouse
- Use appropriate easing curves
- Document interaction behavior
❌ DON'T
- Animate for decoration only
- Use animations longer than 500ms
- Ignore motion-sensitive users
- Remove focus indicators
- Trap users in modals
- Use confusing animations
- Animate everything
- Ignore loading states
- Forget error states
- Skip accessibility testing
