ux-heuristics
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseUX Heuristics Framework
UX启发式评估框架
Practical usability principles for evaluating and improving user interfaces. Based on a fundamental truth: 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 Philosophy
核心理念
"Don't Make Me Think" - Every page should be self-evident. If something requires thinking, it's a usability problem.
"Don't Make Me Think" - 每个页面都应该是不言自明的。如果某个内容需要用户思考,那就是一个可用性问题。
Scoring
评分标准
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.
目标:10/10分。在评审或创建用户界面时,根据以下原则的符合程度为界面打0-10分。10分表示完全符合所有准则;分数越低说明存在需要改进的差距。评估时需给出当前分数以及达到10分所需的具体改进措施。
Krug's Three Laws of Usability
Krug的三条可用性法则
1. Don't Make Me Think
1. Don't Make Me Think
Every question mark that pops into a user's head adds to their cognitive load and distracts from the task.
Things that make users think:
- Clever names vs. clear names
- Marketing-speak vs. plain language
- Unfamiliar categories or labels
- Links that could go anywhere
- Buttons with ambiguous labels
Self-evident vs. self-explanatory:
| Self-evident | Self-explanatory |
|---|---|
| "Get directions" | "Calculate route to destination" |
| "Sign in" | "Access your account portal" |
| "Add to cart" | "Proceed to purchase selection" |
Goal: Self-evident. If that's impossible, self-explanatory.
用户脑海中浮现的每个疑问都会增加他们的认知负荷,分散完成任务的注意力。
让用户产生困惑的情况:
- 花哨的名称 vs 清晰的名称
- 营销话术 vs 平实语言
- 陌生的分类或标签
- 指向不明确的链接
- 标签模糊的按钮
不言自明 vs 清晰易懂:
| 不言自明 | 清晰易懂 |
|---|---|
| "获取路线" | "计算前往目的地的路线" |
| "登录" | "访问您的账户门户" |
| "加入购物车" | "继续购买所选商品" |
目标: 实现不言自明。如果无法做到,至少要达到清晰易懂。
2. It Doesn't Matter How Many Clicks
2. 点击次数无关紧要
The myth: "Users will leave if it takes more than 3 clicks."
Reality: Users don't mind clicks if each click is:
- Painless (fast, easy)
- Obvious (no thinking required)
- Confidence-building (they know they're on the right path)
Three mindless clicks > one confusing click
误区:"如果点击次数超过3次,用户就会离开。"
实际情况: 如果每次点击都满足以下条件,用户并不介意点击次数:
- 轻松(快速、简单)
- 明确(无需思考)
- 增强信心(用户知道自己走在正确的路径上)
三次无需思考的点击 > 一次令人困惑的点击
3. Get Rid of Half the Words, Then Half of What's Left
3. 先砍掉一半文字,再砍掉剩下的一半
Benefits of brevity:
- Reduces noise
- Makes useful content more prominent
- Makes pages shorter (less scrolling)
- Shows respect for user's time
What to cut:
- Happy-talk ("Welcome to our website!")
- Instructions that nobody reads
- "Please" and "Kindly" and polite fluff
- Redundant explanations
简洁的好处:
- 减少干扰
- 让有用内容更突出
- 缩短页面长度(减少滚动)
- 尊重用户的时间
需要删减的内容:
- 寒暄语(如"欢迎访问我们的网站!")
- 没人会看的说明
- "请"、"恳请"之类的客套话
- 冗余的解释
The Trunk Test
主干测试
A test for navigation clarity: can users answer these questions on any page?
| Question | User Should Know |
|---|---|
| What site is this? | Brand/logo visible |
| What page am I on? | Page title/heading clear |
| What are the major sections? | Navigation visible |
| What are my options at this level? | Links/buttons clear |
| Where am I in the scheme of things? | Breadcrumbs/hierarchy |
| How can I search? | Search box findable |
If users can't answer these instantly, navigation needs work.
一项用于检验导航清晰度的测试:用户能否在任意页面上回答以下问题?
| 问题 | 用户应能明确知晓 |
|---|---|
| 这是什么网站? | 品牌/Logo可见 |
| 我现在在哪个页面? | 页面标题/标题栏清晰 |
| 主要板块有哪些? | 导航栏可见 |
| 在此层级我有哪些选项? | 链接/按钮清晰明确 |
| 我在整体架构中的哪个位置? | 面包屑导航/层级结构清晰 |
| 如何进行搜索? | 搜索框易于找到 |
如果用户无法立即回答这些问题,说明导航需要优化。
Nielsen's 10 Usability Heuristics
Nielsen的10条可用性启发式原则
See: references/nielsen-heuristics.md for detailed explanations with examples.
详情请见:references/nielsen-heuristics.md,包含详细说明及示例。
Quick Reference
快速参考
| # | Heuristic | One-liner |
|---|---|---|
| 1 | Visibility of system status | Always show what's happening |
| 2 | Match between system and real world | Use user's language, not yours |
| 3 | User control and freedom | Easy undo and exit |
| 4 | Consistency and standards | Same words, same actions |
| 5 | Error prevention | Better than error messages |
| 6 | Recognition rather than recall | Show options, don't require memory |
| 7 | Flexibility and efficiency | Shortcuts for experts |
| 8 | Aesthetic and minimalist design | Remove everything unnecessary |
| 9 | Help users recognize, diagnose, recover from errors | Plain-language errors with solutions |
| 10 | Help and documentation | Searchable, task-focused, concise |
| 序号 | 启发式原则 | 一句话总结 |
|---|---|---|
| 1 | 系统状态可见性 | 始终向用户展示当前状态 |
| 2 | 系统与真实世界的匹配 | 使用用户的语言,而非专业术语 |
| 3 | 用户控制与自由 | 支持轻松撤销和退出 |
| 4 | 一致性与标准化 | 相同的文字对应相同的操作 |
| 5 | 错误预防 | 预防错误比错误提示更重要 |
| 6 | 识别而非回忆 | 展示选项,无需用户记忆 |
| 7 | 灵活性与高效性 | 为专家用户提供快捷方式 |
| 8 | 美观与极简设计 | 移除所有不必要的内容 |
| 9 | 帮助用户识别、诊断并恢复错误 | 用平实语言说明错误并提供解决方案 |
| 10 | 帮助与文档 | 可搜索、聚焦任务且简洁明了 |
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 heuristic-conflicts.md for resolution frameworks.
启发式原则有时会相互矛盾。出现冲突时:
- 简洁性 vs 灵活性:使用渐进式披露
- 一致性 vs 上下文:保持模式一致,突出上下文相关内容
- 高效性 vs 错误预防:优先支持撤销,而非确认对话框
- 可发现性 vs 极简性:核心操作可见,次要操作隐藏
详情请见heuristic-conflicts.md中的解决框架。
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 dark-patterns.md for complete taxonomy and ethical alternatives.
暗黑模式是故意违反启发式原则以操纵用户的设计:
- 强制连续性(难以取消订阅)
- 蟑螂陷阱(容易进入,难以退出)
- 确认羞辱(基于愧疚感的选项)
- 隐藏成本(结账时出现意外费用)
详情请见dark-patterns.md中的完整分类及伦理替代方案。
Severity Rating Scale
严重程度评级量表
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 |
审核界面时,为每个问题评级:
| 严重程度 | 评级 | 描述 | 优先级 |
|---|---|---|---|
| 0 | 无问题 | 仅为意见分歧,不属于可用性问题 | 忽略 |
| 1 | 视觉瑕疵 | 轻微困扰,影响极小 | 有时间再修复 |
| 2 | 轻微问题 | 导致延迟或受挫 | 安排修复 |
| 3 | 严重问题 | 导致任务显著失败 | 尽快修复 |
| 4 | 灾难性问题 | 阻止任务完成 | 立即修复 |
Rating Factors
评级考量因素
Consider all three:
- Frequency: How often does it occur?
- Impact: How severe when it occurs?
- Persistence: One-time or ongoing problem?
需综合以下三点:
- 频率:问题出现的频次?
- 影响:问题出现时的严重程度?
- 持续性:是一次性问题还是持续存在的问题?
Common Usability Violations
常见可用性违规情况
See: references/krug-principles.md for full Krug methodology.
详情请见:references/krug-principles.md,包含完整的Krug方法论。
Navigation
导航类
| Violation | Problem | Fix |
|---|---|---|
| Mystery meat navigation | Icons without labels | Add text labels |
| Too many choices | Decision paralysis | Reduce to 7±2 items |
| Inconsistent nav location | Users can't find it | Fixed position always |
| No "you are here" indicator | Lost users | Highlight current section |
| Broken back button | Frustration | Never break browser history |
| 违规情况 | 问题 | 修复方案 |
|---|---|---|
| 神秘肉导航 | 无标签的图标 | 添加文字标签 |
| 选项过多 | 决策瘫痪 | 精简至7±2个选项 |
| 导航位置不一致 | 用户无法找到 | 固定导航位置 |
| 无"当前位置"标识 | 用户迷路 | 高亮当前所在板块 |
| 返回按钮失效 | 用户受挫 | 切勿破坏浏览器历史记录 |
Forms
表单类
| Violation | Problem | Fix |
|---|---|---|
| No inline validation | Submit → error → scroll | Validate on blur |
| Unclear required fields | Confusion | Mark optional, not required |
| Poor error messages | "Invalid input" | Explain what's wrong + how to fix |
| Too many fields | Abandonment | Remove unnecessary fields |
| Unexpected format requirements | Frustration | Accept all formats, normalize |
| 违规情况 | 问题 | 修复方案 |
|---|---|---|
| 无实时验证 | 提交→错误→滚动查找 | 失焦时验证 |
| 必填字段不明确 | 用户困惑 | 标记可选字段,而非必填字段 |
| 错误信息模糊 | 仅显示"无效输入" | 说明错误原因及修复方法 |
| 字段过多 | 用户放弃填写 | 删除不必要的字段 |
| 格式要求不明确 | 用户受挫 | 接受所有格式,后台统一标准化 |
Content
内容类
| Violation | Problem | Fix |
|---|---|---|
| Wall of text | Nobody reads | Break up, add headings |
| Jargon | Confusion | Plain language |
| Missing labels | Ambiguity | Label all inputs and sections |
| Low contrast text | Unreadable | WCAG AA minimum (4.5:1) |
| Important info below fold | Missed | Move up or add anchor |
| 违规情况 | 问题 | 修复方案 |
|---|---|---|
| 大段文字 | 用户不会阅读 | 拆分内容,添加标题 |
| 专业术语过多 | 用户困惑 | 使用平实语言 |
| 缺少标签 | 内容模糊 | 为所有输入框和板块添加标签 |
| 文本对比度低 | 难以阅读 | 满足WCAG AA最低标准(4.5:1) |
| 重要内容在页面下方 | 用户容易错过 | 上移内容或添加锚点 |
Interactions
交互类
| Violation | Problem | Fix |
|---|---|---|
| No loading indicators | "Is it broken?" | Show progress/spinner |
| No confirmation on delete | Accidental loss | Confirm destructive actions |
| Tiny tap targets | Mobile frustration | Minimum 44×44 px |
| Hover-only info | Mobile users miss it | Don't hide critical info |
| No undo | Fear of acting | Provide undo for all actions |
| 违规情况 | 问题 | 修复方案 |
|---|---|---|
| 无加载提示 | 用户疑惑"是不是坏了?" | 显示进度条/加载动画 |
| 删除操作无确认 | 意外丢失数据 | 对破坏性操作添加确认步骤 |
| 点击目标过小 | 移动端用户操作受挫 | 最小尺寸设置为44×44 px |
| 仅悬停可见的信息 | 移动端用户无法看到 | 切勿隐藏关键信息 |
| 无撤销功能 | 用户不敢操作 | 为所有操作提供撤销选项 |
Quick Audit Checklist
快速审核清单
See: references/audit-template.md for full structured template.
详情请见:references/audit-template.md,包含完整的结构化模板。
5-Minute Scan
5分钟快速扫描
| Check | Pass? |
|---|---|
| Can I tell what site/page this is immediately? | [ ] |
| Is the main action obvious? | [ ] |
| Is the navigation clear? | [ ] |
| Can I find the search? | [ ] |
| Are there any dead ends? | [ ] |
| Does anything make me think "huh?" | [ ] |
| 检查项 | 是否通过? |
|---|---|
| 能否立即判断这是什么网站/页面? | [ ] |
| 核心操作是否明确? | [ ] |
| 导航是否清晰? | [ ] |
| 能否快速找到搜索功能? | [ ] |
| 是否存在死胡同页面? | [ ] |
| 是否有任何内容让你产生"嗯?"的困惑? | [ ] |
15-Minute Audit
15分钟全面审核
Run through Nielsen's 10 heuristics, rating each 0-4.
逐一对照Nielsen的10条启发式原则,每条打0-4分。
User Observation (Gold Standard)
用户观察(黄金标准)
Watch 3-5 users attempt key tasks:
- Where do they hesitate?
- Where do they click wrong?
- What do they say out loud?
- Where do they give up?
观察3-5名用户完成关键任务:
- 他们在哪里犹豫?
- 他们在哪里点击错误?
- 他们会说出什么?
- 他们在哪里放弃?
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 |
| 方法 | 适用时机 | 耗时 | 发现的问题 |
|---|---|---|---|
| 启发式评估 | 用户测试前 | 1-2小时 | 主要违规问题 |
| 用户测试 | 启发式修复后 | 2-4小时 | 用户真实行为 |
| A/B测试 | 优化阶段 | 数天至数周 | 统计层面的验证 |
| 数据分析评审 | 持续进行 | 30分钟 | 行为模式与问题 |
Common Excuses (And Reality)
常见借口(及真相)
| Excuse | Reality |
|---|---|
| "Users will figure it out" | They won't. They'll leave. |
| "We need to show everything" | Prioritize. Hide complexity. |
| "It tested well with the team" | Team knows too much. Test with real users. |
| "Adding help text will fix it" | Nobody reads help text. Simplify the UI. |
| "Power users need all these options" | 95% of users never need them. Progressive disclosure. |
| "It's industry standard" | Bad standards are still bad. |
| 借口 | 真相 |
|---|---|
| "用户会自己搞懂的" | 他们不会,只会直接离开。 |
| "我们需要展示所有内容" | 要优先展示核心内容,隐藏复杂功能。 |
| "内部测试效果很好" | 内部团队对产品过于熟悉,需测试真实用户。 |
| "添加帮助文本就能解决" | 没人会看帮助文本,应简化UI。 |
| "高级用户需要这些选项" | 95%的用户永远用不到这些选项,采用渐进式披露。 |
| "这是行业标准" | 糟糕的标准依然是糟糕的。 |
Reference Files
参考文件
- krug-principles.md: Full Krug methodology, scanning behavior, navigation clarity
- nielsen-heuristics.md: Detailed heuristic explanations with examples
- audit-template.md: Structured heuristic evaluation template
- dark-patterns.md: Categories, examples, ethical alternatives, regulations
- wcag-checklist.md: Complete WCAG 2.1 AA checklist, testing tools
- cultural-ux.md: RTL, color meanings, form conventions, localization
- heuristic-conflicts.md: When heuristics contradict, resolution frameworks
- krug-principles.md:完整的Krug方法论、用户浏览行为、导航清晰度指南
- nielsen-heuristics.md:启发式原则的详细说明及示例
- audit-template.md:结构化启发式评估模板
- dark-patterns.md:暗黑模式分类、示例、伦理替代方案及相关法规
- wcag-checklist.md:完整的WCAG 2.1 AA标准清单及测试工具
- cultural-ux.md:RTL布局、色彩含义、表单规范、本地化设计
- heuristic-conflicts.md:启发式原则冲突的解决框架
Further Reading
延伸阅读
This skill is based on usability principles developed by Steve Krug and Jakob Nielsen:
- "Don't Make Me Think, Revisited" by Steve Krug
- "10 Usability Heuristics for User Interface Design" by Jakob Nielsen (Nielsen Norman Group)
本准则体系基于Steve Krug和Jakob Nielsen提出的可用性原则:
- 《Don't Make Me Think》 作者:Steve Krug
- 《10 Usability Heuristics for User Interface Design》 作者:Jakob Nielsen(尼尔森诺曼集团)