SKILL·A615EE

ux-heuristics

wondelai
更新于 Yesterday
1,896
193
1,896
在 GitHub 上查看
设计design

关于

This skill performs heuristic usability evaluations to identify and fix interface problems using established frameworks like Nielsen's principles and Krug's laws. It's triggered when reviewing designs, improving forms, or solving navigation issues, and it covers severity ratings, dark patterns, and accessibility. Use it for general usability audits, not for visual design tweaks or conversion optimization.

快速安装

Claude Code

推荐
主要方式
npx skills add wondelai/skills -a claude-code
插件命令备选方式
/plugin add https://github.com/wondelai/skills
Git 克隆备选方式
git clone https://github.com/wondelai/skills.git ~/.claude/skills/ux-heuristics

在 Claude Code 中复制并粘贴此命令以安装该技能

技能文档

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:

ContextApplicationExample
Navigation labelsSelf-evident names"Get directions" not "Calculate route to destination"
CTAsAction verbs users understand"Sign in" not "Access your account portal"
Error statesTell 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:

ContextApplicationExample
Checkout flowsMake each step obviousClear step indicators with descriptive labels
SettingsClear categories over flat lists"Account > Security > Change password" (3 confident clicks)
OnboardingSmall, clear stepsWizard 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:

ContextApplicationExample
Landing pagesCut welcome copy, lead with valueRemove "Welcome to..." paragraphs
Error messagesState problem and fix, nothing more"Password too short (min 8 chars)"
Empty statesAction-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:

SeverityRatingDescriptionPriority
0Not a problemDisagreement, not usability issueIgnore
1CosmeticMinor annoyance, low impactFix if time
2MinorCauses delay or frustrationSchedule fix
3MajorSignificant task failureFix soon
4CatastrophicPrevents task completionFix 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

MistakeWhy It FailsFix
Mystery meat navigationIcons without labels force guessingAdd text labels alongside icons
Too many choicesDecision paralysis slows usersReduce to 7 plus/minus 2 items
No "you are here" indicatorUsers feel lost in the hierarchyHighlight current section in nav and breadcrumbs
No inline validationSubmit, error, scroll cycle frustratesValidate on blur with specific messages
Unclear required fieldsUsers confused about what's mandatoryMark optional fields, not required
Wall of textNobody reads dense paragraphsBreak up with headings, bullets, whitespace
Jargon in labelsUsers don't speak your internal languageUser-test all labels, use plain language
No loading indicatorsUsers think the system is brokenShow spinner, progress bar, or skeleton screen
Tiny tap targetsMobile users misclick constantlyMinimum 44x44 px touch targets
Hover-only informationMobile and keyboard users miss itDon't hide critical info behind hover
No undoUsers afraid to take any actionProvide undo for all non-destructive actions
Poor error messages"Invalid input" tells users nothingExplain what's wrong and how to fix it
Low contrast textUnreadable for many usersWCAG AA minimum (4.5:1 contrast)
Inconsistent nav locationUsers can't find navigationFixed position, same place on every page
Broken back buttonViolates the browser contractNever 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

QuestionIf NoAction
Can I tell what site/page this is immediately?Users are lostAdd clear logo, page title, breadcrumbs
Is the main action obvious?Users don't know what to doVisual hierarchy, single primary CTA
Is the navigation clear?Users can't find their wayApply the Trunk Test, add "you are here" indicators
Can I find the search?Goal-driven users are blockedVisible search box in header
Does the system show what's happening?Users lose trust and re-clickLoading states, confirmations, progress
Are error messages helpful?Users get stuckPlain language with a specific fix
Can users undo or go back?Users are afraid to actUndo, cancel, and back options everywhere
Does it work without hover?Mobile/keyboard users excludedVisible alternatives to hover interactions
Are all interactive elements labeled?Users guess at iconsText labels or descriptive tooltips
Does anything make me stop and think "huh?"Cognitive load too highSimplify — 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

MethodWhenTimeFindings
Heuristic evaluationBefore user testing1-2 hoursMajor violations
User testingAfter heuristic fixes2-4 hoursReal behavior
A/B testingWhen optimizingDays-weeksStatistical validation
Analytics reviewOngoing30 minPatterns 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."

GitHub 仓库

wondelai/skills
路径: plugins/wondelai-skills/skills/ux-heuristics
0
agent-skillsai-skillsbusinessclaude-codeclaude-code-marketplaceclaude-code-plugin
FAQ

常见问题

什么是 ux-heuristics Skill?

ux-heuristics 是一个 Claude Skill,作者为 wondelai。Skill 将 Claude 按需加载的说明和资源打包,让 Claude 无需额外提示即可执行与 ux-heuristics 相关的任务。

如何安装 ux-heuristics?

使用本页的安装命令:将 ux-heuristics 作为插件添加到 Claude Code,或将其仓库克隆到 skills 目录,然后重启 Claude 以加载该 Skill。

ux-heuristics 属于哪个分类?

ux-heuristics 属于设计分类。

ux-heuristics 可以免费使用吗?

可以。ux-heuristics 已收录在 AIMCP,可免费安装。

相关推荐技能

executing-plans
设计

该Skill用于当开发者提供完整实施计划时,以受控批次方式执行代码实现。它会先审阅计划并提出疑问,然后分批次执行任务(默认每批3个任务),并在批次间暂停等待审查。关键特性包括分批次执行、内置检查点和架构师审查机制,确保复杂系统实现的可控性。

查看技能
requesting-code-review
设计

该Skill可在完成任务、实现主要功能或合并代码前自动调度代码审查子代理,确保实现符合需求和计划。它支持通过指定git SHA范围进行精准的代码变更审查,帮助开发者在关键节点及时发现潜在问题。核心原则是"早审查、勤审查",适用于开发流程的各个关键阶段。

查看技能
connect-mcp-server
设计

这个Skill指导开发者如何将MCP服务器连接到Claude Code,支持HTTP、stdio和SSE三种传输协议。它涵盖了从安装配置到认证安全的完整流程,适用于集成GitHub、Notion、数据库等外部服务。当开发者需要添加集成、配置外部工具或提及MCP相关功能时,这个Skill能提供实用的操作指南。

查看技能
web-cli-teleport
设计

该Skill帮助开发者根据任务特性选择Claude Code的Web或CLI界面,并指导如何在两种环境间无缝迁移会话。它能分析任务复杂度、迭代需求等要素,推荐最优工作界面和工作流。关键特性包括会话状态管理、环境切换指导和上下文优化建议。

查看技能