Stats
Actions
Tags
Evaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "UX review", "users are confused", "heuristic evaluation", "form usability", or "navigation problems". Covers Nielsen''s 10 heuristics, severity ratings, and information architecture. For visual design fixes, see refactoring-ui. For conversion-focused audits, see cro-methodology. Trigger with 'ux', 'heuristics'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wondelai-ux-heuristics:ux-heuristicsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Practical usability principles for evaluating and improving user interfaces. Based on a fundamental truth: users don't read, they scan.
Practical usability principles for evaluating and improving user interfaces. Based on a fundamental truth: users don't read, they scan.
"Don't Make Me Think" - Every page should be self-evident. If something requires thinking, it's a usability problem.
The foundation: Users have limited patience and cognitive bandwidth. The best interfaces are invisible -- they let users accomplish goals without ever stopping to wonder "What do I click?" or "Where am I?" Every question mark that pops into a user's head adds to cognitive load and increases the chance they'll leave. Design for scanning, satisficing, and muddling through -- because that's what users actually do.
Goal: 10/10. When reviewing or creating user interfaces, rate them 0-10 based on adherence to the principles below. A 10/10 means full alignment with all guidelines; lower scores indicate gaps to address. Always provide the current score and specific improvements needed to reach 10/10.
Core concept: Every question mark that pops into a user's head adds to their cognitive load and distracts from the task.
Why it works: Users are on a mission. They don't want to puzzle over labels, wonder what a link does, or decode clever marketing language. The less thinking required, the more likely they complete the task.
Key insights:
Product applications:
| Context | Application | Example |
|---|---|---|
| Navigation labels | Use self-evident names | "Get directions" not "Calculate route to destination" |
| CTAs | Use action verbs users understand | "Sign in" not "Access your account portal" |
| E-commerce | Match user mental models | "Add to cart" not "Proceed to purchase selection" |
| Form labels | Describe what's needed plainly | "Email address" not "Electronic correspondence identifier" |
| Error states | Tell users what to do next | "Check your email format" not "Validation error" |
Copy patterns:
Ethical boundary: Clarity should serve users, not obscure information. Never use plain language as a veneer to hide unfavorable terms.
See: references/krug-principles.md for full Krug methodology.
Core concept: The myth says "users leave after 3 clicks." The reality is 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. Three mindless, confident clicks are far better than one click that requires deliberation. Users abandon when they lose confidence, not when they run out of patience for clicking.
Key insights:
Product applications:
| Context | Application | Example |
|---|---|---|
| Information architecture | Prioritize clarity over depth | Shallow nav with clear labels over deep nav with vague ones |
| Checkout flows | Make each step obvious | Clear step indicators with descriptive labels |
| Settings | Organize into clear categories | "Account > Security > Change password" (3 confident clicks) |
| Search results | Let users drill down confidently | Category filters that narrow results progressively |
| Onboarding | Guide with small, clear steps | Wizard with one clear action per step |
Copy patterns:
Ethical boundary: Don't use extra steps to bury cancellation flows or make opting out harder. Every click should move users toward their goal, not away from it.
See: references/krug-principles.md for Krug's click philosophy and scanning behavior.
Core concept: Get rid of half the words on each page, then get rid of half of what's left. Brevity reduces noise, makes useful content more prominent, and shows respect for the user's time.
Why it works: Users scan -- they don't read. Every unnecessary word competes with the words that matter. Removing fluff makes important content more discoverable and pages shorter.
Key insights:
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)" not a paragraph |
| Tooltips | One sentence max | "Last 4 digits of your card" not a full explanation |
| Empty states | Action-oriented, minimal | "No results. Try a different search." |
| Onboarding | One instruction per screen | "Choose your interests" not a wall of explanatory text |
Copy patterns:
Ethical boundary: Brevity must not mean omitting critical information. Concise disclosures for pricing, terms, and data usage are a user right.
See: references/krug-principles.md for Krug's word-cutting methodology.
Core concept: A test for navigation clarity: if users were dropped on any random page (like being locked in a car trunk and released at a random spot), could they instantly answer six key questions?
Why it works: Good navigation gives users constant orientation. If users can't identify where they are and what their options are, they feel lost and leave.
Key insights:
Product applications:
| Context | Application | Example |
|---|---|---|
| Global nav | Persistent site ID and sections | Logo top-left, main nav always visible |
| Page headers | Clear, descriptive page titles | "Running Shoes - Men's" not just "Products" |
| Breadcrumbs | Show hierarchy on all inner pages | "Home > Products > Shoes > Running" |
| Mobile nav | Maintain orientation in hamburger menus | Highlight current section, show breadcrumbs |
| Search | Visible search on every page | Search box in header, not buried in footer |
Copy patterns:
Ethical boundary: Navigation should honestly represent site structure. Don't use misleading labels to funnel users into marketing pages.
See: references/krug-principles.md for the full Trunk Test methodology.
Keep users informed about what's happening 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" (immediate state transitions).
Speak users' language, not system language. Use "Sign in" not "Authenticate", "Search" not "Query." Follow real-world metaphors (trash bin, shopping cart) and natural ordering (street → city → state → zip). One term per concept, everywhere.
Provide clear "emergency exits." Undo beats "Are you sure?" dialogs every time — users click through confirmations without reading. Every flow needs cancel/exit, back buttons must never break, and soft delete with undo beats permanent deletion.
Same words, styles, and behaviors should mean the same thing throughout. Internal consistency (your app) and external consistency (platform conventions: logo top-left, search top-right). Pick one term per concept — "Projects" everywhere, never mixing with "Workspaces."
Prevent problems before they occur. Constrained inputs (date pickers over text fields), autocomplete, sensible defaults, and "unsaved changes" warnings. Two error types need different prevention: slips (accidental wrong action) and mistakes (wrong intention).
Minimize memory load — show options, don't require memorization. Breadcrumbs, recent searches, pre-filled fields, dropdowns with decoded values (country names, not codes). Human working memory holds ~7 items; recognition is far easier than recall.
Serve both novices and experts. Keyboard shortcuts, touch gestures, bulk actions, saved searches, and command palettes (Cmd+K) speed up power users. Progressive disclosure keeps it simple for beginners while experts access full power.
Every element must earn its place. Signal-to-noise ratio determines usability — when everything screams for attention, nothing stands out. Show what matters now, hide what doesn't. One primary CTA per page, not five competing ones.
Error messages need three parts: what happened, why, and how to fix it. Plain language always ("Connection failed" not "ECONNREFUSED"), specific ("Password must be 8+ characters" not "Invalid"), never blame the user, and preserve their input.
Help should be searchable, task-focused ("How to..." not technical reference), and contextual (tooltips, inline hints). Types: inline help, contextual "?" icons, searchable knowledge base, guided tours, live support.
See: references/nielsen-heuristics.md for detailed examples, product applications, copy patterns, and ethical boundaries for all 10 heuristics.
When auditing interfaces, rate each issue:
| 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 |
Consider all three:
| 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 (most fields should be 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 entirely | Don't hide critical info behind hover states |
| 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 ratio) |
| Inconsistent nav location | Users can't find navigation | Fixed position, same location on every page |
| Broken back button | Fundamental browser contract violated | Never hijack or break browser history |
Audit any interface:
| Question | If No | Action |
|---|---|---|
| Can I tell what site/page this is immediately? | Users are lost and disoriented | Add clear logo, page title, and breadcrumbs |
| Is the main action obvious? | Users don't know what to do | Create 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? | Users with specific goals are blocked | Add visible search box in header |
| Does the system show me what's happening? | Users lose trust and re-click | Add loading states, confirmations, progress indicators |
| Are error messages helpful? | Users get stuck on errors | Rewrite in plain language with specific fix |
| Can users undo or go back? | Users are afraid to act | Add undo, cancel, and back options everywhere |
| Does it work without hover? | Mobile and keyboard users are excluded | Replace hover-only interactions with visible alternatives |
| Are all interactive elements labeled? | Users guess at icon meanings | Add text labels or descriptive tooltips |
| Does anything make me stop and think "huh?" | Cognitive load is too high | Simplify -- if it needs explanation, redesign it |
Heuristics sometimes contradict each other. When they do:
See: references/heuristic-conflicts.md for resolution frameworks.
Dark patterns violate heuristics deliberately to manipulate users:
See: references/dark-patterns.md for complete taxonomy and ethical alternatives.
| 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 |
This skill is based on usability principles developed by Steve Krug and Jakob Nielsen:
Steve Krug is a usability consultant who has been helping companies make their products more intuitive since the 1990s. His book "Don't Make Me Think" (first published in 2000, revised 2014) is the most widely read book on web usability and is considered essential reading for anyone involved in designing interfaces. Known for his accessible, humorous writing style and his advocacy for low-cost usability testing, Krug demonstrated that usability doesn't require a lab or a large budget -- just watching a few real users try to accomplish tasks.
Jakob Nielsen, PhD is co-founder of the Nielsen Norman Group (NN/g) and is widely regarded as the "king of usability." His 10 Usability Heuristics for User Interface Design, published in 1994, remain the most-used framework for heuristic evaluation worldwide. Nielsen has been called "the guru of Web page usability" by The New York Times and has authored numerous influential books on usability engineering. His research-driven approach to interface design helped establish usability as a recognized discipline in software development.
Evaluate and improve interface usability using heuristic analysis.
See ORM implementation details for output format specifications.
| Error | Cause | Resolution |
|---|---|---|
| Authentication failure | Invalid or expired credentials | Refresh tokens or re-authenticate with ORM |
| Configuration conflict | Incompatible settings detected | Review and resolve conflicting parameters |
| Resource not found | Referenced resource missing | Verify resource exists and permissions are correct |
Basic usage: Apply ux heuristics to a standard project setup with default configuration options.
Advanced scenario: Customize ux heuristics for production environments with multiple constraints and team-specific requirements.
npx claudepluginhub nickloveinvesting/nick-love-plugins --plugin wondelai-ux-heuristicsEvaluates user interfaces using Nielsen's 10 usability heuristics to identify violations like poor system status visibility, inconsistency, and error-prone designs. Reports severity, location, and fixes for UX reviews.
Evaluates digital interfaces using Nielsen's 10 usability heuristics to identify issues, rate severity (0-4), and recommend fixes.
Audits usability of existing front-end code or live websites using 15 principles, identifies component/system issues, rates severity, and suggests fixes.