Interaction Design

5 Dimensions of Interaction Design: 1. Words labels, button text, microcopy communicate actions and state 2. Visual representations icons, images, typography guide attention 3. Physical objects/space screen size, device orientation, input methods 4. Time animations, transitions, feedback timing 5. Behavior cause-and-effect rules

Key Interaction Patterns:
• Progressive Disclosure Show only what's needed now; hide advanced options. Reduces cognitive load.
• Inline Editing Click content to edit in place (Notion, Google Docs style)
• Drag and Drop Provide visual feedback during drag, highlight drop targets
• Empty States Blank screens are opportunities: illustration + message + primary action
• Error Recovery Make errors recoverable: undo, confirmation dialogs for destructive actions, clear error messages with fix suggestions

Microinteractions small, single-purpose interactions:
• Button press feedback (scale down on click)
• Form field validation (check/X as you type)
• Pull-to-refresh animation
• Like button heart animation

4 parts (Dan Saffer): 1. Trigger → what starts it 2. Rules → what happens 3. Feedback → visual/haptic/sound response 4. Loops & modes → repeat behavior

/* Easing conveys meaning */
ease-in:      gaining speed → "entering" from rest
ease-out:     slowing down → "coming to rest", completion
ease-in-out:  natural movement → acceleration + deceleration
linear:       constant speed → mechanical, progress bars

/* Duration guidelines */ < 100ms: Instant feedback (button states) 100-300ms: UI transitions, tooltips 300-500ms: Modal open/close, page transitions > 500ms: Use sparingly only for onboarding or emphasis ```

// Framer Motion
import { motion } from 'framer-motion';

```