kokatsu/ux-psychology

UX Psychology Frontend Development Guide

Apply these 46 UX psychology principles to predict user behavior and design more effective interfaces. This skill provides actionable guidelines with code examples for frontend implementation.

Quick Reference

| Category | Key Concepts | When to Use | |----------|--------------|-------------| | Cognition | Cognitive Load, Selective Attention, Banner Blindness | Forms, information-dense pages | | Biases | Anchor, Confirmation, Expectation, Familiarity | Pricing, comparisons, navigation | | Behavioral | Nudge, Default, Decoy, Framing, Priming | Conversions, sign-ups, purchases | | Value | Loss Aversion, Scarcity, Endowment, Sunk Cost | Retention, urgency, personalization | | Engagement | Gamification, Variable Reward, Goal Gradient, Zeigarnik | Progress tracking, habit formation | | Experience | Peak-End Rule, User Delight, Labor Illusion | Loading states, completion flows | | UI Design | Doherty Threshold, Progressive Disclosure, Visual Hierarchy | Performance, layout, navigation | | Social | Social Proof, Halo Effect | Trust building, credibility | | Caution | Reactance, Decision Fatigue, Intentional Friction | Avoiding dark patterns | | Research | Hawthorne Effect, Survey Bias, Empathy Gap | User testing, research design |

Core Principles Summary

Reduce Friction

• Split complex forms into steps (Cognitive Load)
• Use skeleton UI for loads over 400ms (Doherty Threshold)
• Set smart defaults (Default Bias)
• Limit choices to reduce fatigue (Decision Fatigue)

Guide Behavior

• Show original price before discount (Anchor Effect)
• Frame positively: "90% success" not "10% failure" (Framing)
• Use progress bars near completion (Goal Gradient)
• Ask satisfaction before reviews (Priming)

Create Value

• Show what users lose on cancel (Loss Aversion)
• Display limited stock/time (Scarcity)
• Personalize the experience (Endowment Effect)
• Celebrate completions (Peak-End Rule)

Build Trust

• Show reviews, user counts, logos (Social Proof)
• Provide value before asking for payment (Reactance)
• Add confirmation for destructive actions (Intentional Friction)

Implementation Checklist

See checklist.md for a complete checklist to review your UI against these principles.

Detailed References

Each concept file contains:

• Definition and psychological basis
• Implementation guidelines
• Code examples (JSX/CSS)
• Common patterns

Browse by category:

• Cognition & Perception - Managing mental effort
• Biases - Leveraging cognitive shortcuts
• Behavioral Guidance - Influencing decisions
• Value Perception - Creating perceived value
• Engagement - Driving continued use
• Experience Design - Memorable moments
• UI Design Principles - Visual and interaction patterns
• Social Influence - Trust and credibility
• Effects to Watch - Avoiding pitfalls
• Research Considerations - Testing awareness

Source

Based on Shokasonjuku Inc. UX Psychology Concepts