15 KiB
15 KiB
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:
/* 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:
/* 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:
/* 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:
// Instant feedback
button.onclick = () => {
button.disabled = true;
button.textContent = 'Saving...';
save().then(() => {
showSuccess('Saved!'); // Immediate confirmation
});
};
Reflective:
<!-- 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
/* 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)
/* 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
<!-- 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
<!-- 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
<!-- 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:
<!-- Pre-select the recommended option -->
<input type="radio" name="plan" value="monthly">
<input type="radio" name="plan" value="annual" checked>
Annual (Save 20%)
Anchoring:
<!-- 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:
<!-- 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:
<!-- 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