ux-heuristics

---
name: ux-heuristics
description: Use when auditing UI usability, reviewing navigation or form design, or when users report confusion. Applies Krug's laws, Nielsen's 10 heuristics, severity ratings, dark patterns, and WCAG checks.
category: Design
version: 1.0.0
tools: []
---

# UX Heuristics Framework

Practical usability principles for evaluating and improving user interfaces. Users don't read, they scan; they don't make optimal choices, they satisfice; they don't figure out how things work, they muddle through.

## Core Principle

**"Don't Make Me Think"** — every page should be self-evident; if something requires thinking, it's a usability problem. Design for scanning, satisficing, and muddling-through, not careful reading. Users build up a reservoir of goodwill from good experiences and spend it down when frustrated. Test early: even 3-5 users in a think-aloud session surfaces most usability issues.

## Scoring

**Goal: 10/10.** Rate every issue on the severity scale below, then score from the Quick Diagnostic results: start at 10, subtract per failed row, weighted by worst severity triggered (catastrophic/major rows cost ~2, minor/cosmetic ~1). Bands: **9-10** = no severity-3+ issues, ≤1 failed row; **6-8** = some major issues or several failed rows; **3-5** = a catastrophic issue or many failed rows; **≤2** = core tasks blocked. Always state the current score, the highest-severity issues, and the fixes needed to reach 10/10.

## Krug's Three Laws of Usability (+ the Trunk Test)

### 1. Don't Make Me Think

Every question mark that pops into a user's head adds cognitive load and distracts from the task. Clear names beat clever names; marketing-speak creates friction, plain language removes it; unfamiliar categories and ambiguous links force users to stop and interpret.

Apply: self-evident nav labels ("Get directions" not "Calculate route to destination"); action-verb CTAs ("Sign in" not "Access your account portal"); errors that say what to do next ("Check your email format" not "Validation error"). Avoid jargon ("Save" not "Persist") — if a label needs explaining, simplify it instead.

Ethical boundary: clarity should serve users — never use plain language as a veneer to hide unfavorable terms.

### 2. It Doesn't Matter How Many Clicks

The myth says "users leave after 3 clicks." In reality users don't mind clicks if each is painless, obvious, and confidence-building — effort per click matters more than click count. Three mindless clicks beat one deliberation-requiring click; shallow nav with clear labels beats deep nav with vague ones.

Apply: obvious checkout steps with descriptive indicators; clear categories over flat settings lists ("Account > Security > Change password" — 3 confident clicks); small, clear onboarding wizard steps. Copy patterns: "Step 2 of 4: Shipping details"; "View all running shoes" not "Click here".

Ethical boundary: never use extra steps to bury cancellation flows — every click should move users toward their goal, not away from it.

### 3. Get Rid of Half the Words

Remove half the words on each page, then half of what's left. Brevity makes useful content prominent. Happy-talk ("Welcome to our website!") wastes space; unread instructions and "Please"/"Kindly" fluff add noise; shorter pages scan faster.

Apply: cut welcome copy, lead with value; errors state the problem and fix only ("Password too short (min 8 chars)"); empty states stay minimal ("No results. Try a different search."). Example: "Please kindly note that you will need to enter your password in order to proceed." → "Enter your password to continue."

Ethical boundary: brevity must not omit critical information — concise disclosures for pricing, terms, and data usage are a user right.

### 4. The Trunk Test

Drop a user on any random page (like being released from a car trunk at a random spot) — they should instantly answer six orientation questions: What site is this? What page? What are the major sections? What are my options here? Where am I in the hierarchy? Where's search?

Good navigation gives constant orientation; users who can't tell where they are feel lost and leave. Apply as a check: page titles must match the link clicked, a "you are here" indicator (highlighted nav item, bold breadcrumb) must be present, and headings must orient ("Your Account > Billing" not just "Settings").

Ethical boundary: navigation labels must honestly represent site structure — never use misleading labels to funnel users into marketing pages.

## Nielsen's 10 Usability Heuristics

1. **Visibility of System Status** — timely feedback for every action: progress bars, confirmations, skeleton screens. Silent failures destroy trust. Copy pattern: "Saving..." → "Saved".
2. **Match Between System and Real World** — speak users' language ("Sign in" not "Authenticate"); real-world metaphors (trash bin, shopping cart), natural ordering (street → city → state → zip).
3. **User Control and Freedom** — clear "emergency exits." Undo beats "Are you sure?" dialogs — users click through confirmations without reading. Back buttons must never break.
4. **Consistency and Standards** — same words/styles/behaviors mean the same thing throughout; internal plus external (platform) consistency, e.g. logo top-left, search top-right. One term per concept.
5. **Error Prevention** — constrained inputs (date pickers over text fields), autocomplete, sensible defaults, "unsaved changes" warnings. Slips (accidental wrong action) and mistakes (wrong intention) need different prevention.
6. **Recognition Rather Than Recall** — show options instead of requiring memorization (breadcrumbs, recent searches, pre-filled fields). Working memory holds roughly 7±2 items; recognition beats recall.
7. **Flexibility and Efficiency of Use** — keyboard shortcuts, bulk actions, saved searches, command palettes (Cmd+K); progressive disclosure keeps beginners simple while experts get full power.
8. **Aesthetic and Minimalist Design** — every element must earn its place; when everything competes for attention, nothing stands out. One primary CTA per page.
9. **Help Recognize, Diagnose, and Recover from Errors** — what happened, why, how to fix: plain language ("Connection failed" not "ECONNREFUSED"), specific ("Password must be 8+ characters" not "Invalid"), never blame the user, preserve input.
10. **Help and Documentation** — searchable, task-focused ("How to..." not technical reference), contextual (tooltips, inline hints, guided tours).

## Severity Rating Scale

Rate each issue found in an audit:

| Severity | Rating | Description | Priority |
|----------|--------|-------------|----------|
| **0** | Not a problem | Disagreement, not a usability issue | Ignore |
| **1** | Cosmetic | Minor annoyance, low impact | Fix if time |
| **2** | Minor | Causes delay or frustration | Schedule fix |
| **3** | Major | Significant task failure | Fix soon |
| **4** | Catastrophic | Prevents task completion | Fix immediately |

Weigh three factors when rating: **frequency** (how often it occurs), **impact** (how severe when it occurs), and **persistence** (one-time or ongoing).

## Common Mistakes

| Mistake | Fix |
|---------|-----|
| Mystery meat navigation (icons, no labels) | Add text labels alongside icons |
| Too many choices → decision paralysis | Reduce to 7±2 items |
| No "you are here" indicator | Highlight current section in nav and breadcrumbs |
| No inline validation | Validate on blur with specific messages |
| Unclear required fields | Mark optional fields, not required ones |
| Wall of text | Break up with headings, bullets, whitespace |
| Jargon in labels | User-test all labels, use plain language |
| No loading indicators | Show spinner, progress bar, or skeleton screen |
| Tiny tap targets | Minimum 44x44 px touch targets |
| Hover-only information | Don't hide critical info behind hover |
| No undo | Provide undo for all non-destructive actions |
| Poor error messages ("Invalid input") | Explain what's wrong and how to fix it |
| Low contrast text | WCAG 2.1 AA minimum: 4.5:1 contrast for normal text |
| Inconsistent nav location | Fixed position, same place on every page |
| Broken back button | Never hijack or break browser history |

## Accessibility (WCAG 2.1 AA)

Check: text contrast ≥4.5:1 for normal text (3:1 for large text ≥18pt/14pt-bold); all functionality keyboard-operable; visible focus indicators; alt text on informative images; programmatic labels/ARIA on form fields; never convey meaning by color alone; touch targets ≥44x44 px; captions/transcripts for audio-video. Verify with a screen-reader pass (VoiceOver/NVDA) and a keyboard-only pass.

For global audiences, also check cultural UX: RTL mirroring for Arabic/Hebrew, color meanings that vary by culture, and localized name/address/date formats.

## Quick Diagnostic

| Question | Action if No |
|----------|--------|
| Can I tell what site/page this is immediately? | Add clear logo, page title, breadcrumbs |
| Is the main action obvious? | Visual hierarchy, single primary CTA |
| Is the navigation clear? | Apply the Trunk Test, add "you are here" indicators |
| Can I find the search? | Visible search box in header |
| Does the system show what's happening? | Loading states, confirmations, progress |
| Are error messages helpful? | Plain language with a specific fix |
| Can users undo or go back? | Undo, cancel, and back options everywhere |
| Does it work without hover? | Visible alternatives to hover interactions |
| Are all interactive elements labeled? | Text labels or descriptive tooltips |
| Does anything make me stop and think "huh?" | Simplify — if it needs explanation, redesign it |

## Heuristic Conflicts

Heuristics sometimes contradict each other. When they do:
- **Simplicity vs. Flexibility**: use progressive disclosure
- **Consistency vs. Context**: consistent patterns, contextual prominence
- **Efficiency vs. Error Prevention**: prefer undo over confirmation dialogs
- **Discoverability vs. Minimalism**: primary actions visible, secondary hidden

## Dark Patterns Recognition

Dark patterns violate heuristics deliberately to manipulate users. Flag and call these out in any audit:
- **Forced continuity**: signing up is easy but canceling a subscription is deliberately hard to find or requires calling support
- **Roach motel**: easy to get into a situation (subscribe, add to cart) but disproportionately hard to get out of it