@musashishao/agent-kit 1.0.0

package/.agent/skills/frontend-design/ux-psychology.md

@@ -0,0 +1,541 @@
+# UX Psychology Reference
+
+> Deep dive into UX laws, emotional design, trust building, and behavioral psychology.
+
+---
+
+## 1. Core UX Laws
+
+### Hick's Law
+
+**Principle:** The time to make a decision increases logarithmically with the number of choices.
+
+```
+Decision Time = a + b × log₂(n + 1)
+Where n = number of choices
+```
+
+**Application:**
+- Navigation: Max 5-7 top-level items
+- Forms: Break into steps (progressive disclosure)
+- Options: Default selections when possible
+- Filters: Prioritize most-used, hide advanced
+
+**Example:**
+```
+❌ Bad: 15 menu items in one nav
+✅ Good: 5 main categories + "More" 
+
+❌ Bad: 20 form fields at once
+✅ Good: 3-step wizard with 5-7 fields each
+```
+
+---
+
+### Fitts' Law
+
+**Principle:** Time to reach a target = function of distance and size.
+
+```
+MT = a + b × log₂(1 + D/W)
+Where D = distance, W = width
+```
+
+**Application:**
+- CTAs: Make primary buttons larger (min 44px height)
+- Touch targets: 44×44px minimum on mobile
+- Placement: Important actions near natural cursor position
+- Corners: "Magic corners" (infinite edge = easy to hit)
+
+**Button Sizing:**
+```css
+/* Size by importance */
+.btn-primary { height: 48px; padding: 0 24px; }
+.btn-secondary { height: 40px; padding: 0 16px; }
+.btn-tertiary { height: 36px; padding: 0 12px; }
+
+/* Mobile touch targets */
+@media (hover: none) {
+  .btn { min-height: 44px; min-width: 44px; }
+}
+```
+
+---
+
+### Miller's Law
+
+**Principle:** Average person can hold 7±2 chunks in working memory.
+
+**Application:**
+- Lists: Group into chunks of 5-7 items
+- Navigation: Max 7 menu items
+- Content: Break long content with headings
+- Phone numbers: 555-123-4567 (chunked)
+
+**Chunking Example:**
+```
+❌ 5551234567
+✅ 555-123-4567
+
+❌ Long paragraph of text without breaks
+✅ Short paragraphs
+   With bullet points
+   And subheadings
+```
+
+---
+
+### Von Restorff Effect (Isolation Effect)
+
+**Principle:** An item that stands out is more likely to be remembered.
+
+**Application:**
+- CTA buttons: Distinct color from other elements
+- Pricing: Highlight recommended plan
+- Important info: Visual differentiation
+- New features: Badge or callout
+
+**Example:**
+```css
+/* All buttons gray, primary stands out */
+.btn { background: #E5E7EB; }
+.btn-primary { background: #3B82F6; }
+
+/* Recommended plan highlighted */
+.pricing-card { border: 1px solid #E5E7EB; }
+.pricing-card.popular { 
+  border: 2px solid #3B82F6;
+  box-shadow: var(--shadow-lg);
+}
+```
+
+---
+
+### Serial Position Effect
+
+**Principle:** Items at the beginning (primacy) and end (recency) of a list are remembered best.
+
+**Application:**
+- Navigation: Most important items first and last
+- Lists: Key info at top and bottom
+- Forms: Most critical fields at start
+- CTAs: Repeat at top and bottom of long pages
+
+**Example:**
+```
+Navigation: Home | [key items] | Contact
+
+Long landing page:
+- CTA at hero (top)
+- Content sections
+- CTA repeated at bottom
+```
+
+---
+
+## 2. Emotional Design (Don Norman)
+
+### Three Levels of Processing
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  VISCERAL (Lizard Brain)                                    │
+│  ─────────────────────                                      │
+│  • Immediate, automatic reaction                            │
+│  • First impressions (first 50ms)                          │
+│  • Aesthetics: colors, shapes, imagery                      │
+│  • "Wow, this looks beautiful!"                            │
+├─────────────────────────────────────────────────────────────┤
+│  BEHAVIORAL (Functional Brain)                              │
+│  ─────────────────────────────                              │
+│  • Usability and function                                   │
+│  • Pleasure from effective use                              │
+│  • Performance, reliability, ease                           │
+│  • "This works exactly how I expected!"                    │
+├─────────────────────────────────────────────────────────────┤
+│  REFLECTIVE (Conscious Brain)                               │
+│  ─────────────────────────────                              │
+│  • Conscious thought and meaning                            │
+│  • Personal identity and values                             │
+│  • Long-term memory and loyalty                             │
+│  • "This brand represents who I am"                        │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Designing for Each Level
+
+**Visceral:**
+```css
+/* Beautiful first impression */
+.hero {
+  background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
+  color: white;
+}
+
+/* Pleasing microinteractions */
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+```
+
+**Behavioral:**
+```javascript
+// Instant feedback
+button.onclick = () => {
+  button.disabled = true;
+  button.textContent = 'Saving...';
+  
+  save().then(() => {
+    showSuccess('Saved!');  // Immediate confirmation
+  });
+};
+```
+
+**Reflective:**
+```html
+<!-- Brand story and values -->
+<section class="about">
+  <h2>Why We Exist</h2>
+  <p>We believe technology should empower, not complicate...</p>
+</section>
+
+<!-- Social proof connecting to identity -->
+<blockquote>
+  "This tool helped me become the designer I wanted to be."
+</blockquote>
+```
+
+---
+
+## 3. Trust Building System
+
+### Trust Signal Categories
+
+| Category | Elements | Implementation |
+|----------|----------|----------------|
+| **Security** | SSL, badges, encryption | Visible padlock, security logos on forms |
+| **Social Proof** | Reviews, testimonials, logos | Star ratings, customer photos, brand logos |
+| **Transparency** | Policies, pricing, contact | Clear links, no hidden fees, real address |
+| **Professional** | Design quality, consistency | No broken elements, consistent branding |
+| **Authority** | Certifications, awards, media | "As seen in...", industry certifications |
+
+### Trust Signal Placement
+
+```
+┌────────────────────────────────────────────────────┐
+│  HEADER: Trust banner ("Free shipping | 30-day    │
+│          returns | Secure checkout")               │
+├────────────────────────────────────────────────────┤
+│  HERO: Social proof ("Trusted by 10,000+")        │
+├────────────────────────────────────────────────────┤
+│  PRODUCT: Reviews visible, security badges         │
+├────────────────────────────────────────────────────┤
+│  CHECKOUT: Payment icons, SSL badge, guarantee     │
+├────────────────────────────────────────────────────┤
+│  FOOTER: Contact info, policies, certifications    │
+└────────────────────────────────────────────────────┘
+```
+
+### Trust-Building CSS Patterns
+
+```css
+/* Trust badge styling */
+.trust-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #F0FDF4;  /* Light green = security */
+  border-radius: 2px; /* Sharp for trust = precision feel */
+  font-size: 14px;
+  color: #166534;
+}
+
+/* Secure form indicator */
+.secure-form::before {
+  content: '🔒 Secure form';
+  display: block;
+  font-size: 12px;
+  color: #166534;
+  margin-bottom: 8px;
+}
+
+/* Testimonial card */
+.testimonial {
+  display: flex;
+  gap: 16px;
+  padding: 24px;
+  background: white;
+  border-radius: 16px; /* Friendly = larger radius */
+  box-shadow: var(--shadow-sm);
+}
+
+.testimonial-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;  /* Real photos > initials */
+}
+```
+
+---
+
+## 4. Cognitive Load Management
+
+### Three Types of Cognitive Load
+
+| Type | Definition | Designer's Role |
+|------|------------|-----------------|
+| **Intrinsic** | Inherent complexity of task | Break into smaller steps |
+| **Extraneous** | Load from poor design | Eliminate this! |
+| **Germane** | Effort for learning | Support and encourage |
+
+### Reduction Strategies
+
+**1. Simplify (Reduce Extraneous)**
+```css
+/* Visual noise → Clean */
+.card-busy {
+  border: 2px solid red;
+  background: linear-gradient(...);
+  box-shadow: 0 0 20px ...;
+  /* Too much! */
+}
+
+.card-clean {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
+  /* Calm, focused */
+}
+```
+
+**2. Chunk Information**
+```html
+<!-- Overwhelming -->
+<form>
+  <!-- 15 fields at once -->
+</form>
+
+<!-- Chunked -->
+<form>
+  <fieldset>
+    <legend>Step 1: Personal Info</legend>
+    <!-- 3-4 fields -->
+  </fieldset>
+  <fieldset>
+    <legend>Step 2: Shipping</legend>
+    <!-- 3-4 fields -->
+  </fieldset>
+</form>
+```
+
+**3. Progressive Disclosure**
+```html
+<!-- Hide complexity until needed -->
+<div class="filters">
+  <div class="filters-basic">
+    <!-- Common filters visible -->
+  </div>
+  <button onclick="toggleAdvanced()">
+    Advanced Options ▼
+  </button>
+  <div class="filters-advanced" hidden>
+    <!-- Complex filters hidden -->
+  </div>
+</div>
+```
+
+**4. Use Familiar Patterns**
+```
+✅ Standard navigation placement
+✅ Expected icon meanings (🔍 = search)
+✅ Conventional form layouts
+✅ Common gesture patterns (swipe, pinch)
+```
+
+**5. Offload Information**
+```html
+<!-- Don't make users remember -->
+<label>
+  Card Number
+  <input type="text" inputmode="numeric" 
+         autocomplete="cc-number" 
+         placeholder="1234 5678 9012 3456">
+</label>
+
+<!-- Show what they entered -->
+<div class="order-summary">
+  <p>Shipping to: <strong>John Doe, 123 Main St...</strong></p>
+  <a href="#">Edit</a>
+</div>
+```
+
+---
+
+## 5. Persuasive Design (Ethical)
+
+### Ethical Persuasion Techniques
+
+| Technique | Ethical Use | Dark Pattern (Avoid) |
+|-----------|-------------|----------------------|
+| **Scarcity** | Real stock levels | Fake countdown timers |
+| **Social Proof** | Genuine reviews | Fake testimonials |
+| **Authority** | Real credentials | Misleading badges |
+| **Urgency** | Real deadlines | Manufactured FOMO |
+| **Commitment** | Progress saving | Guilt-tripping |
+
+### Nudge Patterns
+
+**Smart Defaults:**
+```html
+<!-- Pre-select the recommended option -->
+<input type="radio" name="plan" value="monthly">
+<input type="radio" name="plan" value="annual" checked>
+  Annual (Save 20%)
+```
+
+**Anchoring:**
+```html
+<!-- Show original price to frame discount -->
+<div class="price">
+  <span class="original">$99</span>
+  <span class="current">$79</span>
+  <span class="savings">Save 20%</span>
+</div>
+```
+
+**Social Proof:**
+```html
+<!-- Real-time activity -->
+<div class="activity">
+  <span class="avatar">👤</span>
+  <span>Sarah from NYC just purchased</span>
+</div>
+
+<!-- Aggregate proof -->
+<p>Join 50,000+ designers who use our tool</p>
+```
+
+**Progress & Commitment:**
+```html
+<!-- Show progress to encourage completion -->
+<div class="progress">
+  <div class="progress-bar" style="width: 60%"></div>
+  <span>60% complete - almost there!</span>
+</div>
+```
+
+---
+
+## 6. User Persona Quick Reference
+
+### Gen Z (Born 1997-2012)
+
+```
+CHARACTERISTICS:
+- Digital natives, mobile-first
+- Value authenticity, diversity
+- Short attention spans
+- Visual learners
+
+DESIGN APPROACH:
+├── Colors: Vibrant, hypercolor, bold gradients
+├── Typography: Large, variable, experimental
+├── Layout: Vertical scroll, mobile-native
+├── Interactions: Fast, gamified, gesture-based
+├── Content: Short-form video, memes, stories
+└── Trust: Peer reviews > authority
+```
+
+### Millennials (Born 1981-1996)
+
+```
+CHARACTERISTICS:
+- Value experiences over things
+- Research before buying
+- Socially conscious
+- Price-sensitive but quality-aware
+
+DESIGN APPROACH:
+├── Colors: Muted pastels, earth tones
+├── Typography: Clean, readable sans-serif
+├── Layout: Responsive, card-based
+├── Interactions: Smooth, purposeful animations
+├── Content: Value-driven, transparent
+└── Trust: Reviews, sustainability, values
+```
+
+### Gen X (Born 1965-1980)
+
+```
+CHARACTERISTICS:
+- Independent, self-reliant
+- Value efficiency
+- Skeptical of marketing
+- Balanced tech comfort
+
+DESIGN APPROACH:
+├── Colors: Professional, trustworthy
+├── Typography: Familiar, conservative
+├── Layout: Clear hierarchy, traditional
+├── Interactions: Functional, not flashy
+├── Content: Direct, fact-based
+└── Trust: Expertise, track record
+```
+
+### Baby Boomers (Born 1946-1964)
+
+```
+CHARACTERISTICS:
+- Detail-oriented
+- Loyal when trusted
+- Value personal service
+- Less tech-confident
+
+DESIGN APPROACH:
+├── Colors: High contrast, simple palette
+├── Typography: Large (18px+), high contrast
+├── Layout: Simple, linear, spacious
+├── Interactions: Minimal, clear feedback
+├── Content: Comprehensive, detailed
+└── Trust: Phone numbers, real people
+```
+
+---
+
+## 7. Emotion Color Mapping
+
+```
+┌────────────────────────────────────────────────────┐
+│  EMOTION          │  COLORS           │  USE       │
+├───────────────────┼───────────────────┼────────────┤
+│  Trust            │  Blue, Green      │  Finance   │
+│  Excitement       │  Red, Orange      │  Sales     │
+│  Calm             │  Blue, Soft green │  Wellness  │
+│  Luxury           │  Black, Gold      │  Premium   │
+│  Creativity       │  Teal, Pink       │  Art       │
+│  Energy           │  Yellow, Orange   │  Sports    │
+│  Nature           │  Green, Brown     │  Eco       │
+│  Happiness        │  Yellow, Orange   │  Kids      │
+│  Sophistication   │  Gray, Navy       │  Corporate │
+│  Urgency          │  Red              │  Errors    │
+└───────────────────┴───────────────────┴────────────┘
+```
+
+---
+
+## 8. Psychology Checklist
+
+### Before Launch
+
+- [ ] **Hick's Law:** No more than 7 choices in navigation
+- [ ] **Fitts' Law:** Primary CTAs are large and reachable
+- [ ] **Miller's Law:** Content is chunked appropriately
+- [ ] **Von Restorff:** CTAs stand out from surroundings
+- [ ] **Trust:** Security badges, reviews, policies visible
+- [ ] **Emotional:** Design evokes intended feeling
+- [ ] **Cognitive Load:** Interface is clean, not overwhelming
+- [ ] **Familiar Patterns:** Standard conventions used
+- [ ] **Feedback:** All actions have clear responses
+- [ ] **Accessibility:** Inclusive for all users