ux-psychology
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".
When & Why to Use This Skill
The UX Psychology skill for Claude empowers developers and designers to integrate 43 core psychological principles into frontend development. By leveraging cognitive biases, behavioral patterns, and visual design techniques, this tool helps create intuitive user interfaces that significantly boost conversion rates, increase user engagement, and streamline the decision-making process in UI/UX design.
Use Cases
- Optimizing pricing pages: Applying the Anchoring Effect and Decoy Effect to strategically position high-value plans and influence user choice.
- Streamlining signup flows: Utilizing Progressive Disclosure and the Goal Gradient Effect to reduce cognitive load and minimize user drop-off during registration.
- Boosting e-commerce conversions: Implementing Social Proof, Scarcity, and Loss Aversion patterns on product pages to drive urgency and trust.
- Improving interface usability: Applying Visual Hierarchy and the Aesthetic-Usability Effect to create more engaging and accessible frontend components.
- Ethical design auditing: Reviewing UI designs to identify and remove 'dark patterns' while ensuring transparent and user-centric experiences.
| 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