@ericrisco/rsc 3.3.1 → 3.5.0

package/skills/ux/upstream/ux-designer/references/20-emotional-design.md

@@ -0,0 +1,382 @@
+# Emotional Design & Trust
+
+Emotional design goes beyond usability to create meaningful, trustworthy, and delightful experiences. This reference covers Don Norman's three levels of design, trust-building patterns, microinteraction delight, error empathy, and brand personality in UI.
+
+---
+
+## Contents
+
+- Don Norman's Three Levels of Design
+- Building Trust
+- Delight Through Microinteractions
+- Error Empathy
+- Brand Personality in UI
+- Key Metrics
+- Anti-Patterns
+- Sources
+
+---
+
+## Don Norman's Three Levels of Design
+
+### 1. Visceral Level — "I want it"
+The immediate, instinctive reaction to appearance before any interaction.
+
+**Design for first impressions:**
+- Clean, polished visual design creates instant credibility
+- Color, imagery, and typography set emotional tone
+- Animation and motion create sense of quality
+- Professional aesthetic increases perceived trustworthiness
+
+**Implementation:**
+```
+First 50ms: User forms aesthetic impression
+First 3s:   User decides to stay or leave
+First 30s:  User evaluates overall credibility
+
+Priority:
+  1. Visual cleanliness (whitespace, alignment)
+  2. Professional typography
+  3. High-quality imagery
+  4. Consistent color palette
+  5. Smooth loading experience (skeleton screens, not spinners)
+```
+
+### 2. Behavioral Level — "I can use it"
+The experience of using the product — functionality, usability, and feel.
+
+**Design for confidence:**
+- Predictable, responsive interactions build trust
+- Clear feedback on every action
+- Forgiving design that handles mistakes gracefully
+- Performance that matches expectations
+
+**Implementation:**
+```
+Every interaction should feel:
+  ✅ Responsive  — Feedback within 100ms
+  ✅ Predictable — Consistent behavior across contexts
+  ✅ Forgiving   — Easy to undo, hard to make irreversible errors
+  ✅ Efficient   — Minimum steps to accomplish goals
+  ✅ Clear       — No ambiguity about what happened or what to do next
+```
+
+### 3. Reflective Level — "I love it"
+The conscious assessment — does this product reflect my identity and values?
+
+**Design for meaning:**
+- Brand storytelling through design decisions
+- Personalization that feels thoughtful, not creepy
+- Social proof and community belonging
+- Sustainable and ethical design choices
+
+**Implementation:**
+```
+Reflective design elements:
+  - "About" pages that share mission and values
+  - Sustainability indicators (carbon-neutral badge, etc.)
+  - Customization that lets users express identity
+  - Community features that create belonging
+  - Transparent business practices visible in UI
+```
+
+---
+
+## Building Trust
+
+### Trust Signals by Context
+
+| Context | Trust Signals |
+|---------|--------------|
+| **E-commerce** | Secure checkout badge, return policy, real reviews, price guarantee |
+| **SaaS** | Uptime status, security certifications, data location, customer logos |
+| **Healthcare** | Credentials display, HIPAA badge, privacy assurance, medical review |
+| **Financial** | Encryption indicators, regulatory compliance, insurance/FDIC badges |
+| **Social** | Verification badges, community guidelines, moderation transparency |
+
+### Social Proof Patterns
+
+```
+Customer logos (B2B):
+┌──────────────────────────────────────────┐
+│  Trusted by 10,000+ teams including:    │
+│  [Logo] [Logo] [Logo] [Logo] [Logo]     │
+└──────────────────────────────────────────┘
+
+Testimonials:
+┌──────────────────────────────────────────┐
+│  ⭐⭐⭐⭐⭐                                │
+│  "This tool transformed our workflow."  │
+│  — Alex Chen, CTO at Acme Inc           │
+│    [photo]                               │
+└──────────────────────────────────────────┘
+
+Activity indicators:
+┌──────────────────────────────────────────┐
+│  🟢 1,234 people using this right now   │
+│  📊 50,000+ projects created this month │
+└──────────────────────────────────────────┘
+
+Reviews:
+┌──────────────────────────────────────────┐
+│  4.8/5  ⭐⭐⭐⭐⭐  (2,341 reviews)       │
+│  ████████████████████░ 5★  (1,890)      │
+│  ████░░░░░░░░░░░░░░░░ 4★  (312)        │
+│  █░░░░░░░░░░░░░░░░░░░ 3★  (89)         │
+│  ░░░░░░░░░░░░░░░░░░░░ 2★  (31)         │
+│  ░░░░░░░░░░░░░░░░░░░░ 1★  (19)         │
+└──────────────────────────────────────────┘
+```
+
+**Best practices:**
+- Use real names, photos, and company names (not "User123")
+- Show negative reviews too — 4.8 stars is more credible than 5.0
+- Include specific details ("saved 40% on costs" > "great product")
+- Verified purchase/user badges
+- Recent reviews weighted more heavily in display
+
+### Security Indicators
+
+```
+Checkout:
+┌──────────────────────────────────────────┐
+│  🔒 Secure checkout                     │
+│  Your payment info is encrypted          │
+│                                          │
+│  Card: [                              ]  │
+│                                          │
+│  [Pay $42.00]                           │
+│                                          │
+│  [🔒 SSL] [PCI DSS] [Visa] [Mastercard]│
+└──────────────────────────────────────────┘
+```
+
+- Lock icon near sensitive input fields
+- "Secure" or "encrypted" labels during data entry
+- Security certification badges (SSL, PCI, SOC 2)
+- Payment provider logos (Stripe, PayPal)
+- Don't overdo it — too many badges reduces credibility
+
+### Transparent Pricing
+
+- Show all costs upfront (no hidden fees)
+- Clear feature comparison between plans
+- "No credit card required" for free trials
+- Money-back guarantee prominently displayed
+- Annual vs. monthly pricing clearly compared
+
+---
+
+## Delight Through Microinteractions
+
+### When to Add Delight
+
+```
+Good moments for delight:
+  ✅ Task completion (confetti on milestone)
+  ✅ First-time achievement (badge unlock)
+  ✅ Loading waits (playful animation)
+  ✅ Empty states (friendly illustration)
+  ✅ Easter eggs (hidden surprises for power users)
+
+Bad moments for delight:
+  ❌ During errors (not the time for jokes)
+  ❌ In critical workflows (checkout, payment)
+  ❌ Repeated actions (animation fatigue)
+  ❌ When it slows the user down
+```
+
+### Celebration Animations
+
+```
+Achievement unlocked:
+┌──────────────────────────────────────────┐
+│                                          │
+│           🎉 Congratulations!            │
+│                                          │
+│      You completed your first project    │
+│                                          │
+│            [🏆 View Badge]               │
+│                                          │
+└──────────────────────────────────────────┘
+  + confetti particle animation (1.5s)
+  + Scale-up entrance (300ms, ease-out)
+  + Respect prefers-reduced-motion
+```
+
+- Use sparingly — delight loses effect through repetition
+- Always respect `prefers-reduced-motion`
+- Keep animations short (< 2 seconds)
+- Make them dismissible (click anywhere to close)
+- Tie to meaningful achievements, not trivial actions
+
+### Personality in Details
+
+```
+Pull-to-refresh:       Custom animation matching brand
+Loading state:         Playful tip or quote instead of generic spinner
+404 page:              Illustrated, on-brand, with helpful navigation
+Empty inbox:           "All caught up! 🎉" instead of "No messages"
+Hover states:          Subtle, satisfying micro-animations
+Sound design:          Optional, subtle interaction sounds
+```
+
+### Easter Eggs
+
+- Hidden features discovered through exploration (Konami code, etc.)
+- Fun but never affect core functionality
+- Discoverable through word-of-mouth and community
+- Must not interfere with accessibility or usability
+
+---
+
+## Error Empathy
+
+### Blame-Free Language
+
+```
+❌ "Error 403: Forbidden. You do not have permission."
+❌ "Invalid input. Try again."
+❌ "You entered an incorrect password."
+
+✅ "You don't have access to this page. Contact your admin for access."
+✅ "That didn't match what we expected. Here's what we're looking for..."
+✅ "That password doesn't match our records. Reset your password?"
+```
+
+**Principles:**
+- Never blame the user ("you failed", "invalid", "wrong")
+- Explain what happened in plain language
+- Suggest a clear next step
+- Use "we" language ("We couldn't process..." not "You failed to...")
+- Maintain the same brand voice even in errors
+
+### Error Recovery Assistance
+
+```
+┌──────────────────────────────────────────┐
+│  ⚠️ We couldn't save your changes        │
+│                                          │
+│  Your internet connection was lost.      │
+│  Your changes are saved locally and      │
+│  will sync when you're back online.      │
+│                                          │
+│  [Try again now]  [Work offline]         │
+└──────────────────────────────────────────┘
+```
+
+- Preserve user's work (never lose data due to errors)
+- Offer specific recovery actions
+- Auto-retry where appropriate (with indication)
+- Provide alternative paths ("Save locally", "Try different method")
+- Show progress recovery: "You were on step 3 of 5. Continue?"
+
+### 404 / Error Pages
+
+```
+┌──────────────────────────────────────────┐
+│                                          │
+│        🗺️ Page Not Found                │
+│                                          │
+│  We couldn't find what you're looking    │
+│  for. It may have been moved or          │
+│  removed.                                │
+│                                          │
+│  [Go to Homepage]  [Search]              │
+│                                          │
+│  Popular pages:                          │
+│  • Dashboard                             │
+│  • Documentation                         │
+│  • Support                               │
+│                                          │
+└──────────────────────────────────────────┘
+```
+
+- On-brand illustration (not generic)
+- Clear explanation without technical jargon (no "404" as primary message)
+- Navigation options (home, search, popular pages)
+- Report option if user expects the page to exist
+
+---
+
+## Brand Personality in UI
+
+### Voice Consistency
+
+| Brand Trait | UI Voice Examples |
+|-------------|-------------------|
+| **Professional** | "Your report is ready for download." |
+| **Friendly** | "All done! Your report is ready." |
+| **Playful** | "Ta-da! Fresh report, hot off the press." |
+| **Technical** | "Report generated. 42 pages, 3.2MB." |
+
+**Voice should be consistent across:**
+- Button labels and CTAs
+- Error messages and empty states
+- Onboarding copy and tooltips
+- Email notifications
+- Loading and success messages
+
+### Illustration Style
+
+```
+Consistent illustration system:
+  ├── Same color palette as brand
+  ├── Consistent line weight and style
+  ├── Diverse, inclusive character representation
+  ├── Used at key moments (empty states, onboarding, errors)
+  └── Not overused (illustration fatigue)
+
+Usage:
+  ✅ Empty states, error pages, onboarding, feature highlights
+  ❌ Every single screen, decorative-only placements
+```
+
+### Animation Character
+
+- Motion should match brand energy (corporate = subtle, consumer = playful)
+- Consistent easing curves across all animations
+- Interaction sounds (if any) match brand tone
+- Loading animations can carry brand personality
+- All motion must respect `prefers-reduced-motion`
+
+---
+
+## Key Metrics
+
+| Metric | Target | Context |
+|--------|--------|---------|
+| Net Promoter Score (NPS) | > 50 | User sentiment |
+| Customer satisfaction (CSAT) | > 4.2/5 | Post-interaction rating |
+| Trust score | > 80% | Survey: "I trust this product" |
+| Error recovery rate | > 85% | Users who recover from errors |
+| Brand recognition | Track | Consistent design = recall |
+| Return visitor rate | > 40% | Users who come back voluntarily |
+| Support ticket rate | < 2% | Low = fewer frustrations |
+
+---
+
+## Anti-Patterns
+
+1. **Forced delight** — Animation or personality where users expect efficiency
+2. **Inconsistent voice** — Professional in one area, casual in another
+3. **Trust badge overload** — 15 security badges that look like spam
+4. **Fake social proof** — Made-up testimonials or inflated numbers
+5. **Error blame** — "You did something wrong" instead of helping
+6. **Animation fatigue** — Same celebration on every save
+7. **Dark delight** — Using personality to distract from deceptive patterns
+8. **Ignoring negative emotions** — Only designing for happy paths
+9. **Generic stock imagery** — Breaking brand consistency with off-brand photos
+10. **Humor in critical moments** — Jokes during payment failures or data loss
+
+---
+
+## Sources
+
+- Norman, D. (2004). "Emotional Design: Why We Love (or Hate) Everyday Things"
+- Walter, A. (2011). "Designing for Emotion" — A Book Apart
+- [Nielsen Norman Group: Trust in UX](https://www.nngroup.com/topic/trust/) — Trust research
+- [Baymard Institute: Trust & Credibility](https://baymard.com/blog/categories/trust) — E-commerce trust
+- [Lottie Animations](https://lottiefiles.com/) — Microinteraction library
+- [Laws of UX: Peak-End Rule](https://lawsofux.com/peak-end-rule/) — Emotional experience design
+- [Material Design: Motion](https://m3.material.io/styles/motion/overview) — Animation personality