Apply psychological principles to create more effective, engaging user interfaces.
Workflow
1. Identify Design Goal
Determine the primary objective:
- Conversion: Pricing, signup, checkout
- Engagement: Retention, time-on-site, repeat visits
- Usability: Task completion, error reduction
- Trust: Credibility, security perception
2. Select Relevant Concepts
Based on goal, consult the appropriate reference file:
| Goal | Reference File | Key Concepts |
|---|---|---|
| Conversion | references/cognitive-biases.md |
Anchoring, Loss Aversion, Framing |
| Engagement | references/engagement.md |
Gamification, Variable Reward, Social Proof |
| Usability | references/behavioral-patterns.md |
Cognitive Load, Progressive Disclosure, Default Effect |
| Visual Appeal | references/visual-design.md |
Aesthetic-Usability, Visual Hierarchy |
3. Apply Concepts to Design
For each selected concept:
- Read the detailed pattern from reference file
- Identify specific UI elements to apply it to
- Implement with code examples provided
Quick Reference: 43 Concepts
Cognitive Biases (→ references/cognitive-biases.md)
Anchoring Effect, Confirmation Bias, Expectation Bias, Familiarity Bias, Framing Effect, Halo Effect, Loss Aversion, Sunk Cost Effect, Survey Bias
Behavioral Patterns (→ references/behavioral-patterns.md)
Cognitive Load, Decision Fatigue, Default Effect, Foot-in-the-Door, Goal Gradient Effect, Intentional Friction, Nudge Effect, Progressive Disclosure, Reactance, Reactive Onboarding, Selective Attention, Temptation Bundling, Zeigarnik Effect
Visual Design (→ references/visual-design.md)
Aesthetic-Usability Effect, Banner Blindness, Visual Hierarchy, Visual Anchor, Skeuomorphism, Serial Position Effect, Priming Effect
Engagement (→ references/engagement.md)
Curiosity Gap, Decoy Effect, Doherty Threshold, Empathy Gap, Endowment Effect, Gamification, Hawthorne Effect, Labor Illusion, Peak-End Rule, Pygmalion Effect, Scarcity, Social Proof, User Delight, Variable Reward
Common Design Patterns
Pricing Page
Applied concepts:
- Anchoring: Show highest-priced plan first
- Decoy Effect: Make middle plan look like best value
- Social Proof: "Most Popular" badge
- Visual Anchor: Highlight recommended plan visually
Signup Flow
Applied concepts:
- Foot-in-the-Door: Start with email only, ask details later
- Cognitive Load: One task per screen
- Goal Gradient: Show progress bar
- Default Effect: Pre-select recommended options
E-commerce Product Page
Applied concepts:
- Scarcity: "Only 3 left in stock"
- Social Proof: Reviews and ratings
- Loss Aversion: "Don't miss out..."
- Aesthetic-Usability: High-quality product images
Ethical Guidelines
Dark Patterns to Avoid
- False scarcity claims
- Hidden fees
- Difficult cancellation flows
- Manipulative loss aversion messaging
- Forced opt-ins
Ethical UX Design
- Prioritize user benefit
- Provide transparent information
- Respect user choice
- Build trust over tricks