A skill for applying psychology effects to UI design.
Application Patterns
Landing page
| Section | Applied Effect | Implementation Example |
|---|---|---|
| Hero | Framing Effect | Emphasize positive outcomes |
| Social Proof | Authority Bias | Prominent customer logos, media coverage |
| CTA | Loss Aversion | "Don't miss out" |
| Pricing Table | Anchoring Effect | Display the high-priced plan first |
Onboarding
| Step | Effect | Implementation Example |
|---|---|---|
| First Time | Progressive Disclosure | One concept per screen |
| In Progress | Goal Gradient Effect | Display a progress bar |
| Complete | Peak-End Rule | Celebration animation |
Pricing Table
| Effect | Implementation |
|---|---|
| Anchoring Effect | Display Pro (high price) first |
| Decoy Effect | Make the middle plan the most attractive |
| Social Proof | "Most Popular" badge |
| Loss Aversion | "Save 2 months with annual billing" |
Key Psychology Effects
Effects Related to Cognitive Load
Hick's Law As the number of choices increases, decision time increases. → Limit choices to 3-5
Cognitive Load Theory Human working memory has limits. → One action per screen, chunking
Miller's Law 7±2 is the limit of memory capacity. → Limit menu items and number of steps
Effects Related to Behavior Promotion
Goal Gradient Effect Motivation increases as you get closer to the goal. → Progress bar, "X steps left"
Zeigarnik Effect Unfinished tasks are easier to remember. → Display "X% complete"
Gradual Commitment Starting with a small commitment leads to a larger commitment. → Micro-conversions
Effects Related to Trust Building
Social Proof The tendency to refer to others' behavior. → Number of users, reviews, logos
Authority Bias The tendency to trust experts' opinions. → Media coverage, qualifications, awards
Mere Exposure Effect People develop liking for things they see repeatedly. → Consistent branding
Effects Related to Decision Making
Framing Effect Even with the same information, the impression changes depending on how it is presented. → "90% success" vs "10% failure"
Anchoring effect The first number seen becomes the standard. → Display the high-priced plan first
Loss aversion Losses are felt more heavily than gains. → "Don't miss out"
Status quo bias The tendency to avoid change. → Make the default setting the recommended option
Dark patterns prohibited
The following areabsolutely to be avoided:
- False scarcity (lies such as "only 3 slots left")
- Concealment of forced recurring billing
- Intentional confusion (confusing buttons)
- Excessive notifications
- Copy that induces guilt
- Complicated cancellation
Application checklist
- Minimize cognitive load (one action per screen)
- Be mindful of the aesthetic-usability effect
- Place social proof appropriately
- Apply loss aversion to the CTA
- Use progress display for the goal gradient effect
- Confirm the elimination of dark patterns
Related skills
- ui-ux-pro-max: Visual implementation
- lp-optimizer: Page optimization
- marketing-psychology: Psychology from a marketing perspective
- copywriting: Applying psychology to copy