ux-psychology

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:

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