UX Psychology Skill

Name: UX Psychology Skill
Availability: InStock
Author: Nuclear-Marmalade

Free Verified 224 lines By Nuclear-Marmalade CRO Design

Description

> 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.

What Claude Learns

→ When to Use
→ Decision Process
→ How to Weight
→ What This Skill Is NOT
→ Page-Type Prescriptions (Inline)
→ Homepage / Landing Page

Installation

1. Visit the GitHub repository: https://github.com/Nuclear-Marmalade/ux-psychology-skill
2. Copy the SKILL.md file contents
3. Save to ~/.claude/commands/skill-name.md
4. Restart Claude Code to load the new skill

Stack & Dependencies

React HTML

Use Cases

Landing pages, pricing pages, onboarding flows

Subscription/conversion funnels

Dashboard layouts and data presentation

Navigation and information architecture

When to Use

Using React and HTML

Decision Process

Using React and HTML

Related Skills

Frequently Asked Questions

What technologies does UX Psychology Skill require?

This skill works with React and HTML. Make sure these are available in your project before using the skill with Claude Code.

How detailed is the UX Psychology Skill skill?

UX Psychology Skill contains 224 lines of structured instructions covering 6 key areas. It provides comprehensive guidance including specific implementation patterns, not just surface-level tips.

Is UX Psychology Skill free to use?

Yes u2014 UX Psychology Skill is free. Install it directly with one command (`npx mkt-skills install ux-psychology-skill`) or download the SKILL.md file and drop it into your `~/.claude/skills/` directory. No account, no sign-up, no license fee.

What will Claude Code learn from this skill?

Claude Code will gain expertise in: When to Use; Decision Process; How to Weight; and 3 more areas.

Download SKILL.md GitHub

# 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:
```html
<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:
```html
<div class="plans">
  <div class="plan">Basic — $19/mo</div>
  <div class="plan featured">        
    <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:
```html
<button>Get Premium Access</button>
<p>Unlock all features and premium content.</p>
```

**After** — loss-framed:
```html
<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:
```jsx
<form>
  <h2>Tell us about yourself</h2>
  {/* 8 fields on one page */}
</form>
```

**After** — stepped with visible progress:
```jsx
<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:
```html
<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:
```html
<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.