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:

1. Read the detailed pattern from reference file
2. Identify specific UI elements to apply it to
3. 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