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:

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