nwave-ai/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.