interaction-design

# Interaction Design

Design interactions that help real people accomplish real goals with minimum friction and maximum meaning.

## The Fundamental Question

Before any pattern or timing value, ask: **What is the user trying to accomplish, and how does this interaction help or hinder that goal?**

Interaction design is not about mechanisms. It is about helping specific people achieve specific purposes while respecting their time, attention, and humanity.

## Output Contracts

### Interaction Specification

```markdown
## Interaction Spec: [Component Name]

### User Goal
What is the user trying to accomplish? What are the stakes?

### Conceptual Model
How should users understand this interaction? What mental model should they form?

### States & Transitions
| State | Appearance | Transition | Emotional Tone |
|-------|------------|------------|----------------|
| Default | [appearance] | — | [calm/ready/inviting] |
| Hover | [changes] | 150ms ease-out | [responsive/acknowledged] |
| Active | [pressed] | 50ms | [committed/engaged] |
| Loading | [feedback] | — | [progressing/patient] |
| Success | [confirmation] | 200ms | [accomplished/closure] |
| Error | [clear indication] | — | [recoverable/guided] |

### Keyboard & Input
- Tab: [focus behavior]
- Enter/Space: [activation]
- Escape: [reversal/dismissal]
- Touch: [gesture, target size]

### Error Prevention & Recovery
- How does design prevent errors?
- What happens when errors occur?
- How does user recover?

### Accessibility
- Screen reader announcement
- Focus management
- Reduced motion behavior
```

### Flow Analysis

```markdown
## Flow Analysis: [Journey Name]

### User Goal & Stakes
What does success mean? What does failure cost?

### Dramatic Arc
- Setup: How does user enter this flow?
- Rising action: What builds toward the goal?
- Climax: The moment of commitment/completion
- Resolution: Confirmation and next steps

### Steps
1. [Step] → [Interaction] → [User feeling]

### Friction Analysis
- Necessary f