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:

1. Identify the page type — landing, pricing, onboarding, dashboard, checkout, etc.
2. Pull the 3-5 most relevant principles from the page-type prescriptions below
3. For each principle, state: what it is → how to apply it to THIS specific page → what the anti-pattern looks like
4. Weight against constraints — brand identity, accessibility, and technical requirements always take priority
5. 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:

1. Brand identity and creative vision (highest — the site must look and feel right)
2. Accessibility and usability (non-negotiable — WCAG compliance, touch targets, contrast)
3. Technical quality (performance, SEO, responsive design)
4. 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.