UX Heuristics Framework: a usability audit Claude runs on your interface

by wondelai · MIT license · ★ 2,235 on GitHub · updated Sep 10

UX Heuristics Framework cover

UX Heuristics Framework is a free Claude skill by wondelai for usability audits. Claude reviews a screen, form or navigation against Krug's laws and Nielsen's ten heuristics, grades each issue from 0, not a problem, to 4, catastrophic, and scores the interface out of 10 with the fixes needed to reach 10.

---
name: ux-heuristics
description: 'Evaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "users are confused", "form usability", "navigation problems", "Nielsen heuristics", "cognitive walkthrough", or "is this easy to use". Also trigger when reviewing a design for usability issues, improving form-completion rates, or evaluating information architecture and navigation. Covers Krug''s laws, Nielsen''s 10 heuristics, severity ratings, dark-pattern recognition, and accessibility. For visual design fixes, see refactoring-ui. For conversion-focused audits, see cro-methodology.'
license: MIT
metadata:
  author: wondelai
  version: "1.6.0"
---

# 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. Users have limited patience and cognitive bandwidth, so design for the scanning, satisficing, and muddling-through behavior described above.

## Scoring

Overview

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.

Manual install (npx, ZIP)
Claude Codenpx skills add wondelai/skills --skill ux-heuristics -g -a claude-code
Claude Code (manual)mkdir -p ~/.claude/skills && curl -sL https://codeload.github.com/wondelai/skills/tar.gz/c172996495be \ | tar -xz -C ~/.claude/skills --strip-components=4 skills-c172996495be/plugins/ux-design/skills/ux-heuristics
Windows (PowerShell)New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null; Invoke-WebRequest "https://m.agentalley.io/zip/423f224c76624f8ce7a1/ux-heuristics.zip" -OutFile "$env:TEMP\ux-heuristics.zip"; Expand-Archive "$env:TEMP\ux-heuristics.zip" -DestinationPath "$HOME\.claude\skills" -Force
Claude.ai / desktopDownload the ZIP and upload it under Settings → Capabilities → Skills.
Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

  • SKILL.md16.1 KB
  • references/7 files · 65.2 KB
Read the files here
wondelai/c1729968 files
SKILL.md
Show the full text242 lines

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. Users have limited patience and cognitive bandwidth, so design for the scanning, satisficing, and muddling-through behavior described above.

Scoring

Goal: 10/10. Audit the interface, rate every issue on the severity scale below, then score the interface from its Quick Diagnostic results: start at 10 and subtract per failed diagnostic row, weighted by the worst severity it triggers (catastrophic/major rows cost ~2, minor/cosmetic ~1). Bands: 9-10 = no severity-3+ issues and ≤1 failed diagnostic 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 specific fixes needed to reach 10/10.

Krug's Usability Principles

Laws 1-3 are Krug's Three Laws of Usability; #4, the Trunk Test, is his navigation orientation check.

1. Don't Make Me Think

Core concept: Every question mark that pops into a user's head adds cognitive load and distracts from the task.

Why it works: Users are on a mission — they don't want to puzzle over labels or decode clever marketing language. The less thinking required, the more likely they complete the task.

Key insights:

  • Clever names lose to clear names every time
  • Marketing-speak creates friction; plain language removes it
  • Unfamiliar categories force users to stop and interpret
  • Ambiguous links and buttons cause hesitation

Product applications:

Context Application Example
Navigation labels Self-evident names "Get directions" not "Calculate route to destination"
CTAs Action verbs users understand "Sign in" not "Access your account portal"
Error states Tell users what to do next "Check your email format" not "Validation error"

Copy patterns:

  • Action-oriented buttons: verb + noun ("Create account", "Download report")
  • Avoid jargon: "Save" not "Persist", "Remove" not "Disassociate"
  • If a label needs explanation, simplify the label

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

See: references/krug-principles.md when you need the full Krug method — scanning/satisficing/muddling psychology, the goodwill reservoir, homepage and tagline guidance, and the $0 usability-testing protocol (how many users, the test script).

2. It Doesn't Matter How Many Clicks

Core concept: The myth says "users leave after 3 clicks." In reality users don't mind clicks if each one is painless, obvious, and confidence-building.

Why it works: Cognitive effort per click matters more than click count. Users abandon when they lose confidence, not when they run out of patience for clicking.

Key insights:

  • Each click should be painless, obvious, and confidence-building
  • Three mindless clicks beat one click that requires deliberation
  • Shallow nav with clear labels beats deep nav with vague ones

Product applications:

Context Application Example
Checkout flows Make each step obvious Clear step indicators with descriptive labels
Settings Clear categories over flat lists "Account > Security > Change password" (3 confident clicks)
Onboarding Small, clear steps Wizard with one clear action per step

Copy patterns:

  • Progress indicators: "Step 2 of 4: Shipping details"
  • Confirmations at each step: "Great, your email is verified. Now let's set up your profile."
  • Clear link text: "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

Core concept: Remove half the words on each page, then half of what's left. Brevity makes useful content prominent and respects the user's time.

Key insights:

  • Happy-talk ("Welcome to our website!") wastes space
  • Instructions nobody reads should be removed
  • "Please" and "Kindly" and polite fluff add noise
  • Shorter pages mean less scrolling and faster scanning

Product applications:

Context Application Example
Landing pages Cut welcome copy, lead with value Remove "Welcome to..." paragraphs
Error messages State problem and fix, nothing more "Password too short (min 8 chars)"
Empty states Action-oriented, minimal "No results. Try a different search."

Copy patterns:

  • Before: "Please kindly note that you will need to enter your password in order to proceed to the next step." → After: "Enter your password to continue."
  • Before: "We've received your message and will get back to you as soon as possible." → After: "Message sent. We'll reply within 24 hours."

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

4. The Trunk Test

Core concept: 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?

Why it works: Good navigation gives constant orientation. Users who can't tell where they are feel lost and leave.

Apply it as the navigation check: page titles must match the link the user clicked, a "you are here" indicator (highlighted nav item, bold breadcrumb) must be present, and section 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.

See: references/krug-principles.md when running the Trunk Test or designing navigation — it maps each of the six questions to the page element that answers it, plus breadcrumb and permanent-navigation rules.

Nielsen's 10 Usability Heuristics

1. Visibility of System Status

Keep users informed through timely feedback. Every action needs acknowledgment — progress bars for uploads, confirmations for submissions, skeleton screens for loading. Silent failures destroy trust. Copy pattern: "Saving..." → "Saved".

2. Match Between System and Real World

Speak users' language: "Sign in" not "Authenticate", "Search" not "Query." Follow real-world metaphors (trash bin, shopping cart) and natural ordering (street → city → state → zip).

3. User Control and Freedom

Provide clear "emergency exits." Undo beats "Are you sure?" dialogs — users click through confirmations without reading. Every flow needs cancel/exit, and back buttons must never break.

4. Consistency and Standards

Same words, styles, and behaviors mean the same thing throughout. Internal consistency (your app) plus external consistency (platform conventions: logo top-left, search top-right). One term per concept — "Projects" everywhere, never mixed with "Workspaces."

5. Error Prevention

Prevent problems before they occur: 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

Minimize memory load — show options, don't require memorization. Breadcrumbs, recent searches, pre-filled fields, dropdowns with decoded values. Working memory holds ~7 items; recognition is far easier than recall.

7. Flexibility and Efficiency of Use

Serve both novices and experts: keyboard shortcuts, bulk actions, saved searches, command palettes (Cmd+K). Progressive disclosure keeps it simple for beginners while experts access full power.

8. Aesthetic and Minimalist Design

Every element must earn its place — when everything screams for attention, nothing stands out. Show what matters now, hide what doesn't. One primary CTA per page.

9. Help Users Recognize, Diagnose, and Recover from Errors

Error messages need three parts: what happened, why, and how to fix it. Plain language ("Connection failed" not "ECONNREFUSED"), specific ("Password must be 8+ characters" not "Invalid"), never blame the user, preserve their input.

10. Help and Documentation

Help should be searchable, task-focused ("How to..." not technical reference), and contextual (tooltips, inline hints, guided tours).

See: references/nielsen-heuristics.md when auditing against a specific heuristic — it expands each of the 10 into good-implementation / common-violation / severity tables with copy patterns and ethical boundaries.

Severity Rating Scale

Rate each issue found in an audit:

Severity Rating Description Priority
0 Not a problem Disagreement, not 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: frequency (how often it occurs), impact (how severe when it occurs), persistence (one-time or ongoing).

See: references/audit-template.md when running a full heuristic evaluation — a structured per-screen template that captures issues, severity, and recommended fixes in a consistent format.

Common Mistakes

Mistake Why It Fails Fix
Mystery meat navigation Icons without labels force guessing Add text labels alongside icons
Too many choices Decision paralysis slows users Reduce to 7 plus/minus 2 items
No "you are here" indicator Users feel lost in the hierarchy Highlight current section in nav and breadcrumbs
No inline validation Submit, error, scroll cycle frustrates Validate on blur with specific messages
Unclear required fields Users confused about what's mandatory Mark optional fields, not required
Wall of text Nobody reads dense paragraphs Break up with headings, bullets, whitespace
Jargon in labels Users don't speak your internal language User-test all labels, use plain language
No loading indicators Users think the system is broken Show spinner, progress bar, or skeleton screen
Tiny tap targets Mobile users misclick constantly Minimum 44x44 px touch targets
Hover-only information Mobile and keyboard users miss it Don't hide critical info behind hover
No undo Users afraid to take any action Provide undo for all non-destructive actions
Poor error messages "Invalid input" tells users nothing Explain what's wrong and how to fix it
Low contrast text Unreadable for many users WCAG AA minimum (4.5:1 contrast)
Inconsistent nav location Users can't find navigation Fixed position, same place on every page
Broken back button Violates the browser contract Never hijack or break browser history

See: references/wcag-checklist.md when auditing accessibility (contrast, keyboard, screen-reader, focus) — a complete WCAG 2.1 AA checklist with testing tools. See references/cultural-ux.md when designing for global audiences — RTL layouts, color meanings, form/name/date conventions, and localization pitfalls.

Quick Diagnostic

Question If No Action
Can I tell what site/page this is immediately? Users are lost Add clear logo, page title, breadcrumbs
Is the main action obvious? Users don't know what to do Visual hierarchy, single primary CTA
Is the navigation clear? Users can't find their way Apply the Trunk Test, add "you are here" indicators
Can I find the search? Goal-driven users are blocked Visible search box in header
Does the system show what's happening? Users lose trust and re-click Loading states, confirmations, progress
Are error messages helpful? Users get stuck Plain language with a specific fix
Can users undo or go back? Users are afraid to act Undo, cancel, and back options everywhere
Does it work without hover? Mobile/keyboard users excluded Visible alternatives to hover interactions
Are all interactive elements labeled? Users guess at icons Text labels or descriptive tooltips
Does anything make me stop and think "huh?" Cognitive load too high 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

See: references/heuristic-conflicts.md when two heuristics pull in opposite directions and the four rules above don't settle it — resolution frameworks with worked trade-off examples.

Dark Patterns Recognition

Dark patterns violate heuristics deliberately to manipulate users: forced continuity (hard to cancel), roach motel (easy in, hard out), confirmshaming (guilt-based options), hidden costs (surprise fees at checkout).

See: references/dark-patterns.md when you suspect a design manipulates rather than serves users — the complete taxonomy, ethical alternatives, and relevant regulations.

When to Use Each Method

Method When Time Findings
Heuristic evaluation Before user testing 1-2 hours Major violations
User testing After heuristic fixes 2-4 hours Real behavior
A/B testing When optimizing Days-weeks Statistical validation
Analytics review Ongoing 30 min Patterns and problems

Further Reading

Based on usability principles developed by Steve Krug and Jakob Nielsen:

About the Author

Steve Krug is a usability consultant whose Don't Make Me Think (2000, revised 2014) is the most widely read book on web usability. He demonstrated that usability testing doesn't require a lab or large budget — just watching a few real users try to accomplish tasks.

Jakob Nielsen, PhD is co-founder of the Nielsen Norman Group and author of the 10 Usability Heuristics (1994), still the most-used framework for heuristic evaluation worldwide. The New York Times called him "the guru of Web page usability."

1---
2name: ux-heuristics
3description: 'Evaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "users are confused", "form usability", "navigation problems", "Nielsen heuristics", "cognitive walkthrough", or "is this easy to use". Also trigger when reviewing a design for usability issues, improving form-completion rates, or evaluating information architecture and navigation. Covers Krug''s laws, Nielsen''s 10 heuristics, severity ratings, dark-pattern recognition, and accessibility. For visual design fixes, see refactoring-ui. For conversion-focused audits, see cro-methodology.'
4license: MIT
5metadata:
6 author: wondelai
7 version: "1.6.0"
8---
9 
10# UX Heuristics Framework
11 
12Practical 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.
13 
14## Core Principle
15 
16**"Don't Make Me Think"** — every page should be self-evident. If something requires thinking, it's a usability problem. Users have limited patience and cognitive bandwidth, so design for the scanning, satisficing, and muddling-through behavior described above.
17 
18## Scoring
19 
20**Goal: 10/10.** Audit the interface, rate every issue on the severity scale below, then score the interface from its Quick Diagnostic results: start at 10 and subtract per failed diagnostic row, weighted by the worst severity it triggers (catastrophic/major rows cost ~2, minor/cosmetic ~1). Bands: **9-10** = no severity-3+ issues and ≤1 failed diagnostic 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 specific fixes needed to reach 10/10.
21 
22## Krug's Usability Principles
23 
24Laws 1-3 are Krug's Three Laws of Usability; #4, the Trunk Test, is his navigation orientation check.
25 
26### 1. Don't Make Me Think
27 
28**Core concept:** Every question mark that pops into a user's head adds cognitive load and distracts from the task.
29 
30**Why it works:** Users are on a mission — they don't want to puzzle over labels or decode clever marketing language. The less thinking required, the more likely they complete the task.
31 
32**Key insights:**
33- Clever names lose to clear names every time
34- Marketing-speak creates friction; plain language removes it
35- Unfamiliar categories force users to stop and interpret
36- Ambiguous links and buttons cause hesitation
37 
38**Product applications:**
39 
40| Context | Application | Example |
41|---------|-------------|---------|
42| **Navigation labels** | Self-evident names | "Get directions" not "Calculate route to destination" |
43| **CTAs** | Action verbs users understand | "Sign in" not "Access your account portal" |
44| **Error states** | Tell users what to do next | "Check your email format" not "Validation error" |
45 
46**Copy patterns:**
47- Action-oriented buttons: verb + noun ("Create account", "Download report")
48- Avoid jargon: "Save" not "Persist", "Remove" not "Disassociate"
49- If a label needs explanation, simplify the label
50 
51**Ethical boundary:** Clarity should serve users — never use plain language as a veneer to hide unfavorable terms.
52 
53See: [references/krug-principles.md](references/krug-principles.md) when you need the full Krug method — scanning/satisficing/muddling psychology, the goodwill reservoir, homepage and tagline guidance, and the $0 usability-testing protocol (how many users, the test script).
54 
55### 2. It Doesn't Matter How Many Clicks
56 
57**Core concept:** The myth says "users leave after 3 clicks." In reality users don't mind clicks if each one is painless, obvious, and confidence-building.
58 
59**Why it works:** Cognitive effort per click matters more than click count. Users abandon when they lose confidence, not when they run out of patience for clicking.
60 
61**Key insights:**
62- Each click should be painless, obvious, and confidence-building
63- Three mindless clicks beat one click that requires deliberation
64- Shallow nav with clear labels beats deep nav with vague ones
65 
66**Product applications:**
67 
68| Context | Application | Example |
69|---------|-------------|---------|
70| **Checkout flows** | Make each step obvious | Clear step indicators with descriptive labels |
71| **Settings** | Clear categories over flat lists | "Account > Security > Change password" (3 confident clicks) |
72| **Onboarding** | Small, clear steps | Wizard with one clear action per step |
73 
74**Copy patterns:**
75- Progress indicators: "Step 2 of 4: Shipping details"
76- Confirmations at each step: "Great, your email is verified. Now let's set up your profile."
77- Clear link text: "View all running shoes" not "Click here"
78 
79**Ethical boundary:** Never use extra steps to bury cancellation flows — every click should move users toward their goal, not away from it.
80 
81### 3. Get Rid of Half the Words
82 
83**Core concept:** Remove half the words on each page, then half of what's left. Brevity makes useful content prominent and respects the user's time.
84 
85**Key insights:**
86- Happy-talk ("Welcome to our website!") wastes space
87- Instructions nobody reads should be removed
88- "Please" and "Kindly" and polite fluff add noise
89- Shorter pages mean less scrolling and faster scanning
90 
91**Product applications:**
92 
93| Context | Application | Example |
94|---------|-------------|---------|
95| **Landing pages** | Cut welcome copy, lead with value | Remove "Welcome to..." paragraphs |
96| **Error messages** | State problem and fix, nothing more | "Password too short (min 8 chars)" |
97| **Empty states** | Action-oriented, minimal | "No results. Try a different search." |
98 
99**Copy patterns:**
100- Before: "Please kindly note that you will need to enter your password in order to proceed to the next step." → After: "Enter your password to continue."
101- Before: "We've received your message and will get back to you as soon as possible." → After: "Message sent. We'll reply within 24 hours."
102 
103**Ethical boundary:** Brevity must not omit critical information — concise disclosures for pricing, terms, and data usage are a user right.
104 
105### 4. The Trunk Test
106 
107**Core concept:** 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?
108 
109**Why it works:** Good navigation gives constant orientation. Users who can't tell where they are feel lost and leave.
110 
111Apply it as the navigation check: page titles must match the link the user clicked, a "you are here" indicator (highlighted nav item, bold breadcrumb) must be present, and section headings must orient ("Your Account > Billing" not just "Settings").
112 
113**Ethical boundary:** Navigation labels must honestly represent site structure — never use misleading labels to funnel users into marketing pages.
114 
115See: [references/krug-principles.md](references/krug-principles.md) when running the Trunk Test or designing navigation — it maps each of the six questions to the page element that answers it, plus breadcrumb and permanent-navigation rules.
116 
117## Nielsen's 10 Usability Heuristics
118 
119### 1. Visibility of System Status
120Keep users informed through timely feedback. Every action needs acknowledgment — progress bars for uploads, confirmations for submissions, skeleton screens for loading. Silent failures destroy trust. Copy pattern: "Saving..." → "Saved".
121 
122### 2. Match Between System and Real World
123Speak users' language: "Sign in" not "Authenticate", "Search" not "Query." Follow real-world metaphors (trash bin, shopping cart) and natural ordering (street → city → state → zip).
124 
125### 3. User Control and Freedom
126Provide clear "emergency exits." Undo beats "Are you sure?" dialogs — users click through confirmations without reading. Every flow needs cancel/exit, and back buttons must never break.
127 
128### 4. Consistency and Standards
129Same words, styles, and behaviors mean the same thing throughout. Internal consistency (your app) plus external consistency (platform conventions: logo top-left, search top-right). One term per concept — "Projects" everywhere, never mixed with "Workspaces."
130 
131### 5. Error Prevention
132Prevent problems before they occur: constrained inputs (date pickers over text fields), autocomplete, sensible defaults, "unsaved changes" warnings. Slips (accidental wrong action) and mistakes (wrong intention) need different prevention.
133 
134### 6. Recognition Rather Than Recall
135Minimize memory load — show options, don't require memorization. Breadcrumbs, recent searches, pre-filled fields, dropdowns with decoded values. Working memory holds ~7 items; recognition is far easier than recall.
136 
137### 7. Flexibility and Efficiency of Use
138Serve both novices and experts: keyboard shortcuts, bulk actions, saved searches, command palettes (Cmd+K). Progressive disclosure keeps it simple for beginners while experts access full power.
139 
140### 8. Aesthetic and Minimalist Design
141Every element must earn its place — when everything screams for attention, nothing stands out. Show what matters now, hide what doesn't. One primary CTA per page.
142 
143### 9. Help Users Recognize, Diagnose, and Recover from Errors
144Error messages need three parts: what happened, why, and how to fix it. Plain language ("Connection failed" not "ECONNREFUSED"), specific ("Password must be 8+ characters" not "Invalid"), never blame the user, preserve their input.
145 
146### 10. Help and Documentation
147Help should be searchable, task-focused ("How to..." not technical reference), and contextual (tooltips, inline hints, guided tours).
148 
149See: [references/nielsen-heuristics.md](references/nielsen-heuristics.md) when auditing against a specific heuristic — it expands each of the 10 into good-implementation / common-violation / severity tables with copy patterns and ethical boundaries.
150 
151## Severity Rating Scale
152 
153Rate each issue found in an audit:
154 
155| Severity | Rating | Description | Priority |
156|----------|--------|-------------|----------|
157| **0** | Not a problem | Disagreement, not usability issue | Ignore |
158| **1** | Cosmetic | Minor annoyance, low impact | Fix if time |
159| **2** | Minor | Causes delay or frustration | Schedule fix |
160| **3** | Major | Significant task failure | Fix soon |
161| **4** | Catastrophic | Prevents task completion | Fix immediately |
162 
163Weigh three factors: **frequency** (how often it occurs), **impact** (how severe when it occurs), **persistence** (one-time or ongoing).
164 
165See: [references/audit-template.md](references/audit-template.md) when running a full heuristic evaluation — a structured per-screen template that captures issues, severity, and recommended fixes in a consistent format.
166 
167## Common Mistakes
168 
169| Mistake | Why It Fails | Fix |
170|---------|-------------|------|
171| **Mystery meat navigation** | Icons without labels force guessing | Add text labels alongside icons |
172| **Too many choices** | Decision paralysis slows users | Reduce to 7 plus/minus 2 items |
173| **No "you are here" indicator** | Users feel lost in the hierarchy | Highlight current section in nav and breadcrumbs |
174| **No inline validation** | Submit, error, scroll cycle frustrates | Validate on blur with specific messages |
175| **Unclear required fields** | Users confused about what's mandatory | Mark optional fields, not required |
176| **Wall of text** | Nobody reads dense paragraphs | Break up with headings, bullets, whitespace |
177| **Jargon in labels** | Users don't speak your internal language | User-test all labels, use plain language |
178| **No loading indicators** | Users think the system is broken | Show spinner, progress bar, or skeleton screen |
179| **Tiny tap targets** | Mobile users misclick constantly | Minimum 44x44 px touch targets |
180| **Hover-only information** | Mobile and keyboard users miss it | Don't hide critical info behind hover |
181| **No undo** | Users afraid to take any action | Provide undo for all non-destructive actions |
182| **Poor error messages** | "Invalid input" tells users nothing | Explain what's wrong and how to fix it |
183| **Low contrast text** | Unreadable for many users | WCAG AA minimum (4.5:1 contrast) |
184| **Inconsistent nav location** | Users can't find navigation | Fixed position, same place on every page |
185| **Broken back button** | Violates the browser contract | Never hijack or break browser history |
186 
187See: [references/wcag-checklist.md](references/wcag-checklist.md) when auditing accessibility (contrast, keyboard, screen-reader, focus) — a complete WCAG 2.1 AA checklist with testing tools. See [references/cultural-ux.md](references/cultural-ux.md) when designing for global audiences — RTL layouts, color meanings, form/name/date conventions, and localization pitfalls.
188 
189## Quick Diagnostic
190 
191| Question | If No | Action |
192|----------|-------|--------|
193| Can I tell what site/page this is immediately? | Users are lost | Add clear logo, page title, breadcrumbs |
194| Is the main action obvious? | Users don't know what to do | Visual hierarchy, single primary CTA |
195| Is the navigation clear? | Users can't find their way | Apply the Trunk Test, add "you are here" indicators |
196| Can I find the search? | Goal-driven users are blocked | Visible search box in header |
197| Does the system show what's happening? | Users lose trust and re-click | Loading states, confirmations, progress |
198| Are error messages helpful? | Users get stuck | Plain language with a specific fix |
199| Can users undo or go back? | Users are afraid to act | Undo, cancel, and back options everywhere |
200| Does it work without hover? | Mobile/keyboard users excluded | Visible alternatives to hover interactions |
201| Are all interactive elements labeled? | Users guess at icons | Text labels or descriptive tooltips |
202| Does anything make me stop and think "huh?" | Cognitive load too high | Simplify — if it needs explanation, redesign it |
203 
204## Heuristic Conflicts
205 
206Heuristics sometimes contradict each other. When they do:
207- **Simplicity vs. Flexibility**: use progressive disclosure
208- **Consistency vs. Context**: consistent patterns, contextual prominence
209- **Efficiency vs. Error Prevention**: prefer undo over confirmation dialogs
210- **Discoverability vs. Minimalism**: primary actions visible, secondary hidden
211 
212See: [references/heuristic-conflicts.md](references/heuristic-conflicts.md) when two heuristics pull in opposite directions and the four rules above don't settle it — resolution frameworks with worked trade-off examples.
213 
214## Dark Patterns Recognition
215 
216Dark patterns violate heuristics deliberately to manipulate users: forced continuity (hard to cancel), roach motel (easy in, hard out), confirmshaming (guilt-based options), hidden costs (surprise fees at checkout).
217 
218See: [references/dark-patterns.md](references/dark-patterns.md) when you suspect a design manipulates rather than serves users — the complete taxonomy, ethical alternatives, and relevant regulations.
219 
220## When to Use Each Method
221 
222| Method | When | Time | Findings |
223|--------|------|------|----------|
224| Heuristic evaluation | Before user testing | 1-2 hours | Major violations |
225| User testing | After heuristic fixes | 2-4 hours | Real behavior |
226| A/B testing | When optimizing | Days-weeks | Statistical validation |
227| Analytics review | Ongoing | 30 min | Patterns and problems |
228 
229## Further Reading
230 
231Based on usability principles developed by Steve Krug and Jakob Nielsen:
232 
233- [*"Don't Make Me Think, Revisited"*](https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515?tag=wondelai00-20) by Steve Krug
234- [*"Rocket Surgery Made Easy"*](https://www.amazon.com/Rocket-Surgery-Made-Easy-Yourself/dp/0321657292?tag=wondelai00-20) by Steve Krug (DIY usability testing)
235- [*"10 Usability Heuristics for User Interface Design"*](https://www.nngroup.com/articles/ten-usability-heuristics/) by Jakob Nielsen (Nielsen Norman Group)
236 
237## About the Author
238 
239**Steve Krug** is a usability consultant whose *Don't Make Me Think* (2000, revised 2014) is the most widely read book on web usability. He demonstrated that usability testing doesn't require a lab or large budget — just watching a few real users try to accomplish tasks.
240 
241**Jakob Nielsen, PhD** is co-founder of the Nielsen Norman Group and author of the 10 Usability Heuristics (1994), still the most-used framework for heuristic evaluation worldwide. *The New York Times* called him "the guru of Web page usability."
242 
View all files on GitHub →

Details

Updated
Sep 10, 2026
License
MIT
Stars on the repo
★ 2,235
Checked
Source
wondelai/skills ↗
Creator
wondelai · 320 listings
View creator

Similar skills

See all →
SkillClick-engagement analyst that pulls element-level click dataHeatmap analystHumblytics/humblytics-marketing-skills · by HumblyticsClick-engagement analyst that pulls element-level click data, a page-level scroll proxy, and bounce/exit signals from Humblytics to surface UX friction and ignored CTAs. Generates prioritized, data-backed optimization recommendations. NOTE: Humblytics does NOT provide pixel-level click heatmaps, scroll-depth distributions, or rage-click detection — those need a dedicated heatmap tool. Use when auditing element-level click patterns, finding ignored CTAs, gauging scroll engagement, or diagnosing on-page friction. Triggers: click analysis, element clicks, ignored CTA, click engagement, scroll engagement, UX friction, interaction audit.★ 85 GitHub starsSkillResearch, design, implement, auditB0rk's UI/UX SKILLDrB0rk/Borks-uiux-skill · by DrB0rkResearch, design, implement, audit, and validate UI/UX in web, mobile, and developer tools. Use for frontend coding, interface design, redesigns, responsive layouts, design systems and tokens, component interactions, agent/chat interfaces, forms, accessibility, content design, keyboard usability, interaction state modeling, performance, and AI-generated UI quality review. Produce evidence-backed fixes, complete states, and practical verification rather than generic visual polish.★ 3 GitHub starsPromptGenerate a comprehensiveMake UI/UX better of an already Created Applicationf/prompts.chat · by Watson CharlieGenerate a comprehensive, actionable development plan to enhance the existing web application.New listingMCPYou need to design user research plansUX researcherdavila7/claude-code-templates · by davila7Use this agent when you need to design user research plans, analyze user-supplied data (interview transcripts, analytics, notes/transcripts from session recordings you provide), and generate actionable insights to validate design decisions and uncover user needs. Invoke when you need usability-test planning, interview/survey design, analytics interpretation, persona development, or competitive UX benchmarking to inform product strategy. Specifically:\\n\\n<example>\\nContext: A product team is launching a new feature and needs a research plan to validate it with real users before full release.\\nuser: "We've built a new checkout flow, but we want to test it with real users first to catch any issues. Can you help us plan usability testing?"\\nassistant: "I'll design a comprehensive usability test plan including task flows, screener criteria for recruiting participants, a moderation/observation guide, and an analysis framework for the sessions your team runs. Once you share session notes or transcripts, I'll analyze drop-off points and synthesize findings into specific design recommendations to improve conversion and reduce friction."\\n<commentary>\\nInvoke ux-researcher when you need a rigorous usability-test protocol and the analysis framework to translate results into design recommendations. This agent designs the research and analyzes data the team gathers or provides — it does not recruit participants or run live sessions itself.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: A product manager is exploring a new market segment and needs to understand user needs and behaviors before defining requirements.\\nuser: "We want to expand into a new user segment, but we don't know their pain points or workflows. How can we understand what they need?"\\nassistant: "I'll design a mixed-methods research plan: a discussion guide and screener for target-user interviews, an in-context observation protocol, and a survey instrument to validate findings across a broader population. Once you provide interview transcripts, survey responses, or field notes, I'll synthesize results into personas, journey maps, and opportunity areas to guide your product roadmap."\\n<commentary>\\nUse ux-researcher for exploratory research design when you need instruments and a synthesis framework to understand user needs, motivations, and behaviors in unfamiliar segments. The agent designs the protocols and analyzes the data you supply.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Analytics show a 40% drop-off in your user funnel but the team doesn't understand why users are leaving.\\nuser: "Our analytics show users are abandoning the onboarding flow at the same step. What's causing this and how do we fix it?"\\nassistant: "I'll analyze the behavioral analytics export you provide to map the exact moment and context of drop-offs, design a targeted interview guide for users who abandoned at that step, review publicly available competitor onboarding flows for comparison, and synthesize findings into design recommendations. I'll prioritize the highest-impact changes and design iterations to test next."\\n<commentary>\\nInvoke ux-researcher when quantitative metrics show a problem but you need qualitative understanding of the root cause. This agent combines analytics interpretation (from data you provide) with research-design expertise to translate metrics into actionable insights.\\n</commentary>\\n</example>★ 32.3k GitHub starsSkillUX research and design toolkit for Senior UXUX researcher designerdavila7/claude-code-templates · by davila7UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and research synthesis. Use for user research, persona creation, journey mapping, and design validation.★ 32.3k GitHub starsMCPUX research agent for research planning, persona generationCs UX researcheralirezarezvani/claude-skills · by alirezarezvaniUX research agent for research planning, persona generation, journey mapping, and usability test analysis. Use when product decisions need user evidence — e.g., planning interview scripts and recruiting criteria for a discovery study, or synthesizing usability-test sessions into prioritized findings and updated personas.★ 26.3k GitHub stars

More from wondelai

SkillManage software complexity through deep modulesA Philosophy of Software Design Frameworkwondelai/skills · by wondelaiManage software complexity through deep modules, information hiding, and strategic programming. Use when the user mentions "module design", "API too complex", "shallow class", "complexity budget", "strategic vs tactical", "deep module", "information leakage", "pass-through method", "this code is over-engineered", or "simplify this design". Also trigger when reviewing an interface for simplicity, evaluating whether an abstraction is pulling its weight, deciding whether a comment is worth writing, or choosing between general-purpose and special-purpose approaches. Covers deep vs shallow modules, red flags for complexity, and comments as design documentation. For code quality, see clean-code. For architecture boundaries, see clean-architecture.★ 2.2k GitHub starsSkillMetrics are the language of validated learningActionable metrics guidewondelai/skills · by wondelaiMetrics are the language of validated learning. The wrong metrics create the illusion of progress while the startup drifts toward failure.…★ 2.2k GitHub starsSkillAdvertising media is the vehicle that carries your messagewondelai/skills · by wondelaiAdvertising media is the vehicle that carries your message to your target market. Choosing the right media is not about what is trendy — it…★ 2.2k GitHub starsSkillAn affordance is a relationship between an objectAffordances: Designing for Actionwondelai/skills · by wondelaiAn affordance is a relationship between an object and a person that determines how the object could possibly be used. A chair affords…★ 2.2k GitHub starsSkillLean UX was designed to work inside Agile development teamsAgile integration for lean UXwondelai/skills · by wondelaiLean UX was designed to work inside Agile development teams, not alongside them. The central mechanism is dual-track agile, where a…★ 2.2k GitHub starsSkillThis reference translates the AMP framework from theoryAMP Applied: Practical Applications of Autonomy, Mastery, and Purposewondelai/skills · by wondelaiThis reference translates the AMP framework from theory into practice across six domains: product gamification, team management,…★ 2.2k GitHub stars