UX Psychology Skill
Advisory layer for web design decisions. Surfaces relevant behavioral psychology principles during page and component design. This is a weighted input — it informs decisions, it does not override aesthetic judgment, brand identity, or creative direction.
When to Use
Invoke after building or designing pages, components, or flows. The skill works best as a review layer — build first, then run the psychology lens to find what you're missing:
- Landing pages, pricing pages, onboarding flows
- Subscription/conversion funnels
- Dashboard layouts and data presentation
- Navigation and information architecture
- E-commerce product pages and checkout flows
- Any page where you want users to take a specific action
Decision Process
When activated, follow this order:
- Identify the page type — landing, pricing, onboarding, dashboard, checkout, etc.
- Pull the 3-5 most relevant principles from the page-type prescriptions below
- For each principle, state: what it is → how to apply it to THIS specific page → what the anti-pattern looks like
- Weight against constraints — brand identity, accessibility, and technical requirements always take priority
- Recommend specific, implementable changes — not abstract advice. Show what to change in the markup, layout, or copy. If you can point to a line of code, do it.
How to Weight
Psychology principles are one input among many. The weighting hierarchy:
- Brand identity and creative vision (highest — the site must look and feel right)
- Accessibility and usability (non-negotiable — WCAG compliance, touch targets, contrast)
- Technical quality (performance, SEO, responsive design)
- Psychology principles (this skill — subtle influence, not heavy-handed manipulation)
Never sacrifice aesthetics or user trust for a psychology trick. If a principle conflicts with good design, good design wins.
What This Skill Is NOT
- NOT a dark patterns handbook — every principle here is ethical application only
- NOT a complete design system — it augments existing design skills
- NOT a replacement for user research — real user data always beats theory
- NOT a rigid checklist — use the principles that fit, ignore the ones that don't
Page-Type Prescriptions (Inline)
The top principles per page type, self-contained for quick reference. See knowledge/page-prescriptions.md for expanded guidance and common mistakes.
Homepage / Landing Page
| Principle | Application |
|---|---|
| First Impressions | Hero communicates value in under 3 seconds. Formed in 50ms — no second chances. |
| Anchoring | Lead with your strongest metric or claim. First number seen sets the reference. |
| Social Proof | Real numbers visible early (users, results, track record). Vague claims don't convert. |
| Information Scent | Clear navigation — user knows exactly where to go next. |
| Aesthetic-Usability | Visual polish earns trust before content does. Beautiful feels easier to use. |
Pricing / Subscription
| Principle | Application |
|---|---|
| Anchoring | Show premium tier first or most visually prominent. Everything else feels like a deal. |
| Loss Aversion | Frame around what free users MISS, not just what paid users get. Losing hurts 2x more. |
| Default Effect | Pre-select the recommended tier. Most users never change defaults. |
| Commitment/Consistency | Users who already used free features are primed to subscribe — each step leads to the next. |
Onboarding / Sign-Up
| Principle | Application |
|---|---|
| Progressive Commitment | Small free action first, account second, payment last. |
| Cognitive Load | One question per screen beats a long form. Remove everything non-essential. |
| Zeigarnik Effect | Show progress (step 2 of 4). Incomplete tasks nag — users come back to finish. |
| Reciprocity | Give value before asking for info. Free tool access, preview, or sample result. |
Dashboard / Data Display
| Principle | Application |
|---|---|
| Chunking | Group data by category or priority — not one giant list. |
| Spatial Memory | Consistent layout so returning users find things instantly. Don't move things. |
| Satisficing | Highlight the single most important insight. Users pick the first acceptable option. |
| Recognition Over Recall | Show full context (labels, timestamps, icons) — don't make users remember. |
Checkout / Payment
| Principle | Application |
|---|---|
| Cognitive Load | Guest checkout option. Minimal form fields. One decision at a time. |
| Transparency | Show ALL costs before the payment step. Surprise fees are the #1 abandonment cause. |
| Loss Aversion | Trust badges and guarantees NEXT TO the payment button, not in the footer. |
| Default Effect | Pre-select standard shipping. Pre-check "save info." Reduce decisions. |
About / Trust Page
| Principle | Application |
|---|---|
| Authority | Methodology, data sources, team expertise — prove you know what you're doing. |
| Hierarchy of Trust | This page serves users at level 2-3 (interest → confidence). Don't ask for the sale here. |
| Transparency | Honest about limitations, not just strengths. Vulnerability builds trust. |
Code-Level Implementation Examples
Anchoring (Pricing Page)
Before — all tiers equal, no anchor:
<div class="plans">
<div class="plan">Basic — $19/mo</div>
<div class="plan">Pro — $49/mo</div>
<div class="plan">Enterprise — $99/mo</div>
</div>
After — Pro anchored as the visual default:
<div class="plans">
<div class="plan">Basic — $19/mo</div>
<div class="plan featured"> <!-- visually prominent, pre-selected -->
<span class="badge">Most Popular</span>
Pro — $49/mo
</div>
<div class="plan">Enterprise — $99/mo</div>
</div>
Why: The featured tier becomes the anchor. Basic feels like a bargain by comparison. Enterprise exists to make Pro look reasonable. The "Most Popular" badge adds social proof.
Loss Aversion (Subscription CTA)
Before — gain-framed:
<button>Get Premium Access</button>
<p>Unlock all features and premium content.</p>
After — loss-framed:
<button>Keep My Premium Access</button>
<p>Without Premium, you'll lose access to daily insights,
saved dashboards, and priority support.</p>
Why: "You'll lose access" triggers loss aversion (~2x stronger than equivalent gains). The CTA uses "Keep" — framing it as protecting something they already have.
Zeigarnik Effect (Onboarding Progress)
Before — no progress indication:
<form>
<h2>Tell us about yourself</h2>
{/* 8 fields on one page */}
</form>
After — stepped with visible progress:
<div className="progress-bar">
<div className="step completed">Profile</div>
<div className="step active">Preferences</div> {/* current */}
<div className="step">Review</div>
</div>
<form>
<h2>Step 2 of 3 — Your Preferences</h2>
{/* 2-3 fields only */}
</form>
Why: Incomplete progress bars create psychological tension. Users return to finish what they started. Breaking 8 fields into 3 steps of 2-3 fields reduces cognitive load AND creates the pull to complete.
Cognitive Load (Checkout)
Before — forced account creation:
<h2>Create Account to Continue</h2>
<input placeholder="Email" />
<input placeholder="Password" />
<input placeholder="Confirm Password" />
<button>Create Account & Checkout</button>
After — guest checkout with deferred account creation:
<h2>Checkout</h2>
<input placeholder="Email (for receipt)" />
<button>Pay Now</button>
<p class="subtle">Want to save your info for next time?
<a href="/create-account">Create an account</a> after checkout.</p>
Why: Every extra field is a decision point that causes abandonment. Get the sale first. Account creation is a small ask AFTER they've already committed (Commitment/Consistency principle).
Principle Categories (11)
| Category | Count | Core Insight |
|---|---|---|
| Attention | 4 | Users see less than you think |
| Gestalt | 8 | Visual grouping drives comprehension |
| Memory | 10 | Recognition beats recall; chunk everything |
| Sensemaking | 3 | Mental models shape expectations |
| Decision Making | 5 | Fewer choices, clearer outcomes |
| Motor/Interaction | 3 | Big targets, fast responses |
| Motivation | 4 | Autonomy + competence + relatedness |
| Cognitive Biases | 10 | Defaults persist; first impressions anchor |
| Persuasion | 9 | Trust before ask; prove before promise |
| Emotion | 6 | Beautiful feels easier; delight earns loyalty |
| Ethics | 3 | Bright line between persuasion and manipulation |
Total: 65 principles — see knowledge/principles.md for the complete database with definitions and design implications.
Anti-Patterns (Never Do)
- Fake scarcity counters — if it's not real, don't show it
- Confirmshaming — "No, I don't want to save money" is manipulative
- Hidden costs at checkout — the #1 cause of cart abandonment
- Forced continuity — hard-to-cancel subscriptions erode all trust
- Misdirection — visual tricks to force wrong clicks
- Fake social proof — fabricated testimonials or inflated numbers
- Dark defaults — pre-checking opt-ins the user didn't ask for
- Roach motel patterns — easy to get in, impossible to get out
Source
Principles derived from NN/g's Psychology for UX study guide (112 resources across 11 categories), adapted into actionable design patterns. Academic foundations: Kahneman (Prospect Theory), Norman (Emotional Design), Cialdini (Influence), Hick, Fitts, Miller, Zeigarnik.