Skip to content
Documentation

UX Heuristics — Nielsen's 10 and Cognitive Principles

FieldValue
TypeSkill Resource
Source~/.copilot/skills/ux/references/ux-heuristics.md
DescriptionNot specified

Source Content

UX Heuristics — Nielsen’s 10 and Cognitive Principles

Usability evaluation checklist grounded in Nielsen’s 10 Usability Heuristics and cognitive psychology. Use this when reviewing UI, flows, copy, forms, and accessibility.

Nielsen’s 10 Usability Heuristics

#HeuristicWhat It MeansUI Copy Example
1System status visibilityUsers always know where they are and what’s happening.Show current step in a multi-step form; display progress bar; confirm actions with clear feedback.
2Match between system and real worldUse user language, not internal jargon. Labels, messages, and concepts match how users think.”Billing” not “Manage your subscription”; “Save progress” not “Persist state to database”.
3User control and freedomUsers can undo, redo, exit, or go back without friction.”Cancel” button always present; don’t require form fields marked “optional”; confirm destructive actions.
4Consistency and standardsFollow platform conventions. Users shouldn’t wonder if different words mean the same thing.Tab title = page heading = nav label; “Delete” is always red; email inputs accept + addresses.
5Error preventionPrevent problems before they happen. Better than good error messages is no error.Disable “Submit” until form is valid; show real-time validation feedback; default to safe choice.
6Error messagesWhen things break, be helpful. Tell users what happened, why, and how to fix it — in plain language.❌ “Error 402” → ✅ “Your card was declined. Try another payment method or contact support.”; link to help.
7Flexibility and efficiencyProvide shortcuts for power users without cluttering the interface for casual users.Keyboard shortcuts; bulk actions; saved searches; customizable dashboards.
8Aesthetic and minimalist designEvery visual element should justify its presence. Remove clutter.Delete redundant copy; cut UI after the first draft by 20%; one button per primary action.
9Error recoveryHelp users recover gracefully when things go wrong.Show undo for 5 minutes after delete; let users retry with helpful guidance; never lose unsaved data.
10Help and documentationProvide help that is task-focused, not system-focused.Link help inline (“What’s this?”); show examples; focus on goals (“How do I reset my password?”) not system functions.

Cognitive Principles

PrincipleDefinitionDesign Implication
Miller’s 7±2Working memory holds 5–9 chunks.Cap each navigation level at 7–9 items. Chunk larger lists deliberately.
Cognitive Load (Sweller)Extraneous cognitive load blocks comprehension. Intrinsic load is the task itself.Reduce noise: consistent labels, progressive disclosure, clear parent-child relationships. Strip clutter.
Mental Models (Norman)Users have an internal model of how the system works. If it doesn’t match the UI, users blame themselves.Match the UI’s model to the user’s model. Label and organize to match how users already think.
Hick’s LawDecision time grows with the number of options.Reduce visible options; hide advanced settings; use progressive disclosure.
Fitts’s LawTarget size and distance affect interaction time.Buttons ≥44×44px; place frequent actions nearby; use edges (corners are fastest).
Jakob’s LawUsers prefer familiar patterns from other sites and apps.Follow platform conventions; don’t invent new UI patterns.

Applying Heuristics to UI Copy

Labels

  • Use user language, not org-chart terms. Test against real search queries and support tickets.
  • Be consistent. Nav label = page heading = tab title. A concept has one name.
  • Prefer gerunds for actions. “Send email” beats “Email sending functionality.”
  • Avoid negation. “Show advanced options” beats “Hide simple options.”

Error Messages

Format: [What happened] + [Why] + [What to do]

❌ "Invalid input"
✅ "We don't recognize that email. Double-check the spelling or use another address."


❌ "Error 500"
✅ "Something went wrong on our end. We've logged it. Try again in a few minutes or contact support."


❌ "Must be 8+ characters"
✅ "Password must be at least 8 characters. Use a mix of letters, numbers, and symbols for security."

Empty States

  • Be helpful, not cute. “No projects yet” is clearer than “Looks like your plate is clean!”
  • Show next steps. “Create your first project” (link or button) beats “No projects.”
  • Use a reassuring tone. “You’re all caught up” beats “Nothing to see here.”

Forms

  • Label every field. <label for="email">Email</label> — never placeholder-only labels.
  • Mark required fields clearly. Either * with legend, or “required” text. Never force users to guess.
  • Inline validation. Show errors immediately and help fix them. Never wait until submit.
  • Progressive disclosure. Hide optional fields; show them only if the user needs them.
  • Clear calls-to-action. “Create account” beats “Submit” or “OK.”

Onboarding

  • Meet users where they are. Don’t force a tutorial; show contextual help at the moment of need.
  • One first-win fast. Users need a small success before they trust you with their data.
  • Show, don’t tell. Interactive guidance beats walls of text.

Accessibility (WCAG 2.2 AA)

  • Color is never the only signal. Pair red error borders with text: “This field is required.”
  • Every interactive element is keyboard-accessible. Tab order, focus visible (focus-visible:ring), no outline: none without a replacement.
  • Screen-reader friendly. Form labels are associated with inputs; icons have aria-label; landmarks (<main>, <nav>) are present.
  • Touch targets ≥44×44px. Mobile and assistive-tech users need room to hit buttons.
  • Avoid motion unless essential. prefers-reduced-motion is respected.

Stress Cases (Always In Scope)

Test your UI with:

  • Low literacy (8th-grade reading level; avoid jargon)
  • Low bandwidth (dial-up speed; no heavy animations or large assets)
  • Assistive tech (screen readers, switch control, voice input)
  • Mobile devices (small screens, touch, no hover)
  • Dyslexia (sans-serif, high contrast, readable line height)
  • Colorblindness (never color-alone signal; always pair with icon or text)
  • Older users (larger text, clear hierarchy, patience for slow tech)

Quick Usability Audit Checklist

  • Visibility. Can users tell what page they’re on and what options are available?
  • Language. Are labels and messages in user language, not jargon?
  • Control. Can users undo, exit, or go back without friction?
  • Consistency. Do labels, headings, and tab titles match? Do conventions hold?
  • Error prevention. Are risky actions protected (confirm dialogs, disabled buttons)?
  • Error messages. If something breaks, does the message explain why and how to fix it?
  • Power-user paths. Are shortcuts available for frequent actions?
  • Clarity. Is the interface stripped of clutter? Does every element justify its space?
  • Recovery. Can users undo, retry, or recover gracefully?
  • Help. Is task-focused help inline and available?
  • Accessibility. Does it work with keyboard only? Screen reader? Mobile? 200% zoom?

Scoring Findings

When you have multiple usability issues, prioritize by:

Priority = (Frequency + Severity + Breadth) × Solvability

  • Frequency: How often does this occur? (1=rare, 5=constant)
  • Severity: How much does it hurt? (1=cosmetic, 5=blocks the task)
  • Breadth: How many users affected? (1=one persona, 5=everyone)
  • Solvability: Can we fix this? (0.5=hard, 1=easy)

Fix high-priority items first; defer cosmetic bugs.

References