Ux Psychology Skill

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:

  Basic — $19/mo
  Pro — $49/mo
  Enterprise — $99/mo

After — Pro anchored as the visual default:

  Basic — $19/mo
          
    Most Popular
    Pro — $49/mo
  
  Enterprise — $99/mo

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:

Get Premium Access
Unlock all features and premium content.

After — loss-framed:

Keep My Premium Access
Without Premium, you'll lose access to daily insights,
   saved dashboards, and priority support.

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:

  Tell us about yourself
  {/* 8 fields on one page */}

After — stepped with visible progress:

  Profile
  Preferences   {/* current */}
  Review

  Step 2 of 3 — Your Preferences
  {/* 2-3 fields only */}

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:

Create Account to Continue

Create Account & Checkout

After — guest checkout with deferred account creation:

Checkout

Pay Now
Want to save your info for next time?
   Create an account after checkout.

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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Nuclear-Marmalade
• Source: Nuclear-Marmalade/ux-psychology-skill
• License: MIT

Install and usage instructions live in the source repository linked above.