nw-ux-emotional-design

# Emotional Design and Delight

Patterns for creating interfaces that feel good to use. Use during discovery to map emotional arcs and during requirements to specify delight moments.

## Walter's Hierarchy of User Needs

Four layers satisfied in order (bottom to top):

```
        /\
       /  \
      / PL \     4. PLEASURABLE - Delight, surprise, emotional connection
     /------\
    / USABLE \    3. USABLE - Easy to learn, intuitive, efficient
   /----------\
  / RELIABLE   \   2. RELIABLE - Consistent, dependable, no crashes
 /--------------\
/ FUNCTIONAL     \  1. FUNCTIONAL - It works, serves its purpose
------------------
```

**Key insight**: Delight only works if product is usable. Beautiful animations on buggy, confusing interface make things worse. Invest in foundation before polish.

### Applying the Hierarchy in Requirements
- Phase 1 stories: functionality works correctly
- Phase 2 stories: reliability (error handling, edge cases, recovery)
- Phase 3 stories: usability (simplify flows, reduce steps)
- Phase 4 stories: delight (only after above are solid)

## Surface Delight vs Deep Delight

### Surface Delight (momentary, contextual)
Playful animations | witty microcopy | surprising easter eggs | visually pleasing illustrations

### Deep Delight (sustained, holistic)
Interface anticipates user needs | complex tasks feel effortless | users achieve flow state | tool becomes extension of thinking

**Prioritization rule**: Deep delight generates loyalty and return usage. Surface delight creates momentary reactions but cannot compensate for usability failures. Invest in deep delight first.

### Requirements Implications
- "System suggests most likely next action" (deep) is higher priority than "Save button has satisfying animation" (surface)
- Stories reducing steps, anticipating needs, removing friction are delight stories even if they don't feel "fun"

## Empty States

Empty states (no data, first use, zero results) are opportunities, not dead ends.

### Good Empty State Design
- Explain what will appear when there is content
- Clear call to action to create first item
- Illustration or visual interest making state feel intentional
- Guidance or templates for first-time users

### Anti-Pattern
Blank page with no guidance, or "No results found" with no suggested next step.

### Empty State Checklist for Requirements
- [ ] First-time empty state has onboarding guidance
- [ ] Search empty state suggests alternative queries or filters
- [ ] Error empty state explains what happened and how to recover
- [ ] Each empty state has primary call to action

## Onboarding and First-Run Experience

### Progressive Onboarding (preferred)
- Let users start real work immediately
- Introduce features in context, when relevant
- Tooltips and inline hints dismissing after first use
- "Skip" option for experienced users
- Celebrate first successful action

### Anti-Pattern
Mandatory 8-step walkthrough blocking users from doing anything before completion.

### Onboarding Patterns by Platform

**Web**: Inline hints | contextual tooltips | sample data to explore | "getting started" checklist widget

**Desktop**: First-run wizard for essential setup only (account, preferences), then contextual hints during use

**CLI**: First command outputs welcome message with 2-3 example commands. `--help` is comprehensive. Config file created with sensible defaults and comments.

## Tone of Voice in UI Copy

### Principles
Clear first, clever second | active voice, present tense | address user as "you" | instructions in 1-2 sentences | consistent voice builds trust

### Matching Tone to Context

| Context | Tone | Example |
|---------|------|---------|
| Error message | Empathetic, helpful | "We could not save your changes. Check your connection and try again." |
| Success message | Encouraging, brief | "Project created. You are ready to start." |
| Empty state | Inviting, guiding | "No projects yet. Create your first one to get started." |
| Destructive action | Clear, serious | "This will permanently delete 3 files. This cannot be undone." |
| Loading/waiting | Reassuring | "Setting things up. This usually takes about 30 seconds." |
| Neutral action | Straightforward | "Select a template." |

### When Personality Helps vs Annoys

**Helps when**: user not stressed (onboarding, success, empty states) | low-stakes moment | brand voice well-established

**Annoys when**: user frustrated (errors, failures) | user in a hurry (critical workflows) | humor forced or inconsistent | cleverness obscures message

## Microinteractions That Create Delight

### High-Value Microinteractions
Pull-to-refresh with satisfying animation | skeleton screens instead of blank loading | smooth state transitions (not abrupt swaps) | smart defaults reducing typing | autocomplete learning from usage | undo toast after destructive actions ("Deleted. Undo?")

### Low-Value Microinteractions (skip these)
Decorative loading animations adding no information | sound effects for routine actions | excessive bounce/wobble animations | easter eggs interfering with workflow

### Requirements Pattern for Microinteractions
Specify: trigger (what user does) | feedback (what user sees/feels) | purpose (why this matters for experience)

Example: "When user drags card to new column, card smoothly animates to new position and column header count updates, confirming move was successful."

## Emotional Arc Integration

When mapping emotional arcs during journey discovery:

| Journey Phase | Target Emotion | Design Lever |
|--------------|----------------|--------------|
| First encounter | Curious, welcomed | Clear value proposition, inviting empty state |
| Setup/config | Confident, guided | Progressive onboarding, sensible defaults |
| First success | Accomplished, delighted | Celebration moment, clear confirmation |
| Regular use | Efficient, in flow | Shortcuts, anticipation, minimal friction |
| Error/failure | Supported, not blamed | Empathetic copy, clear recovery path |
| Completion | Satisfied, proud | Summary of accomplishment, next steps |

Use this table when asking emotional arc questions during discovery. Map each journey step to target emotion and identify design lever that achieves it.