| name | ux-psychology |
| description | Apply UX psychology principles to frontend design. Use when designing UI components, improving user experience, increasing conversion, or making design decisions. Covers 43 psychological concepts including cognitive biases, behavioral patterns, visual design principles, and engagement techniques. Triggers on requests like "design a pricing page", "improve signup flow", "increase engagement", or "apply psychology to UI". |
UX Psychology for Frontend Design
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
Source
Based on: https://www.shokasonjuku.com/ux-psychology
