ux-usability-review

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UX Usability Review

UX 可用性审查

Overview

概述

A structured usability audit methodology based on Don't Make Me Think by Steve Krug. Guides you through 8 sequential phases to systematically evaluate an interface for cognitive load, scanability, navigation clarity, content quality, mobile usability, accessibility, and the overall user experience. The core principle: if a user has to stop and think about how to use your interface, something needs to be redesigned.

这是一套基于史蒂夫·克鲁格所著《Don't Make Me Think》的结构化可用性审计方法论，将引导你按8个连续阶段系统评估界面的认知负荷、可浏览性、导航清晰度、内容质量、移动端可用性、可访问性以及整体用户体验。核心原则是：如果用户需要停下来思考如何使用你的界面，说明相关设计需要调整。

When to Use

适用场景

Before launching a product, feature, or redesign
When users report confusion, abandonment, or support requests about basic tasks
During design reviews or code reviews that affect user flows
When evaluating a competitor's interface for strengths and weaknesses
When onboarding a new team member to UX standards
As a complement to the ui-polish-review skill (that skill covers visual quality; this one covers usability)

产品、功能或改版上线前
用户反馈基础任务存在困惑、操作中断或需要求助客服时
评审影响用户流程的设计或代码时
评估竞品界面的优缺点时
向新团队成员科普UX标准时
作为ui-polish-review技能的补充（该技能覆盖视觉质量，本技能覆盖可用性）

When NOT to Use

不适用场景

For purely visual/aesthetic evaluation (use the ui-polish-review skill for that)
For performance or technical audits
As a substitute for actual usability testing with real users (this is a heuristic review, not a user test)
For content strategy or copywriting projects (though content clarity is covered)

纯视觉/美学评估（请使用ui-polish-review技能）
性能或技术审计
替代真实用户的可用性测试（这是启发式评估，不是用户测试）
内容策略或文案创作项目（仅覆盖内容清晰度相关内容）

Process

流程

Work through each phase sequentially. At each phase:

Ask targeted questions about the specific interface being reviewed
Read the relevant chapter summary from
```
front-end-design/dont-make-me-think/
```
for detailed guidance
Suggest and execute concrete tests (grep patterns in source code, manual inspection tasks, quick user tests)
Flag findings with severity:
```
CRITICAL
```
/
```
HIGH
```
/
```
MEDIUM
```
/
```
LOW
```
/
```
INFO
```
Summarize findings before moving to the next phase

If the application does not have a relevant surface for a phase (e.g., no homepage for an internal tool), acknowledge and skip with rationale.

dot

digraph audit_phases {
  rankdir=TB;
  node [shape=box, style=rounded];

  p1 [label="Phase 1\nDon't Make Me Think"];
  p2 [label="Phase 2\nVisual Hierarchy\n& Scanning"];
  p3 [label="Phase 3\nNavigation"];
  p4 [label="Phase 4\nWords & Content"];
  p5 [label="Phase 5\nHomepage Clarity"];
  p6 [label="Phase 6\nMobile Usability"];
  p7 [label="Phase 7\nGoodwill & Courtesy"];
  p8 [label="Phase 8\nAccessibility"];
  report [label="Usability\nReport", shape=note];

  p1 -> p2 -> p3 -> p4 -> p5 -> p6 -> p7 -> p8 -> report;
}

按顺序完成每个阶段，每个阶段需执行以下步骤：

针对待评审的具体界面提出针对性问题
阅读
```
front-end-design/dont-make-me-think/
```
下对应章节的摘要获取详细指引
建议并执行具体测试（源代码grep匹配、人工检查、快速用户测试）
标记发现的问题，按严重程度分为：
```
CRITICAL
```
/
```
HIGH
```
/
```
MEDIUM
```
/
```
LOW
```
/
```
INFO
```
进入下一阶段前总结当前阶段发现的问题

如果应用不存在对应阶段的相关界面（比如内部工具没有首页），说明原因后跳过该阶段即可。

dot

digraph audit_phases {
  rankdir=TB;
  node [shape=box, style=rounded];

  p1 [label="Phase 1\nDon't Make Me Think"];
  p2 [label="Phase 2\nVisual Hierarchy\n& Scanning"];
  p3 [label="Phase 3\nNavigation"];
  p4 [label="Phase 4\nWords & Content"];
  p5 [label="Phase 5\nHomepage Clarity"];
  p6 [label="Phase 6\nMobile Usability"];
  p7 [label="Phase 7\nGoodwill & Courtesy"];
  p8 [label="Phase 8\nAccessibility"];
  report [label="Usability\nReport", shape=note];

  p1 -> p2 -> p3 -> p4 -> p5 -> p6 -> p7 -> p8 -> report;
}

Phase 1: The "Don't Make Me Think" Test

阶段1：「Don't Make Me Think」测试

Reference:

front-end-design/dont-make-me-think/ch01-dont-make-me-think.md

ch02

Goal: Evaluate whether each screen is self-evident -- a user should immediately understand what it is and what to do without expending mental effort.

Questions to ask:

For each screen: would a first-time user immediately understand what this is and what to do next?
Are there clever, creative, or branded labels where conventional ones would be clearer? ("Job-o-Rama" vs "Jobs", "Quick Procurement Module" vs "Shopping Cart")
Is it obvious what is clickable and what is not? (Links look like links, buttons look like buttons, non-interactive elements do not look clickable.)
Are users expected to read and comprehend, or can they scan and act?
The 5-second test: if someone saw this page for only 5 seconds, could they tell you what the site does and what the primary action is?

Tests to run:

undefined

参考文档：

front-end-design/dont-make-me-think/ch01-dont-make-me-think.md

、

ch02

目标： 评估每个界面是否不言而喻——用户无需耗费脑力就能立刻理解页面是什么、要做什么。

需要思考的问题：

对每个页面而言，首次访问的用户能立刻理解页面用途和下一步操作吗？
是否存在使用创意/品牌化标签反而不如常规标签清晰的情况？（比如用「Job-o-Rama」代替「招聘」，用「快速采购模块」代替「购物车」）
可点击和不可点击的元素是否区分明显？（链接看起来像链接，按钮看起来像按钮，非交互元素不会给人可点击的错觉）
用户是需要阅读和理解内容，还是可以快速浏览后直接操作？
5秒测试：如果用户只看页面5秒，能说清网站用途和核心操作是什么吗？

需要执行的测试：

undefined

Find potentially clever/non-standard labels and navigation items

查找可能存在的创意/非标准标签和导航项

Find link/button text to review for clarity

查找链接/按钮文案评估清晰度

grep -rn ">.</a>|>.</button>|>.</Link>" --include=".tsx" --include=".jsx" --include=".html"

Check for elements styled to look clickable but are not (or vice versa)

检查元素样式是否有可点击的误导（反之亦然）

grep -rn "cursor:\spointer" --include=".css" --include=".scss" grep -rn "cursor-pointer" --include=".tsx" --include=".jsx" --include=".html"

Find tooltips (may indicate UI is not self-explanatory)

查找提示框（可能说明UI不够不言自明）

grep -rn "tooltip|Tooltip|title="|data-tip|aria-label" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"

Check for instructional text that might indicate confusing UI

查找可能说明UI存在困惑的引导文案


**The 5-Second Test (manual):**
1. Open the page. Look at it for exactly 5 seconds. Look away.
2. Can you answer: What is this site/app? What is the main thing I can do? Where would I start?
3. If any of these are unclear, the page fails this test.

**Visual inspection checklist:**
- [ ] Is every interactive element visually distinguishable from non-interactive elements?
- [ ] Are labels conventional and immediately understandable (no jargon, no cleverness)?
- [ ] Can you identify the primary action on each screen within 2 seconds?
- [ ] Is the page self-evident (no instructions needed) or at minimum self-explanatory (brief moment to understand)?
- [ ] Would removing any "How to" text or instructions break the experience? (If yes, the UI needs redesign, not instructions.)

**Finding template:**

[SEVERITY] Cognitive Load: [description] Affected: [screen/component] Issue: [what makes the user think] User question: [the question mark in the user's head — e.g., "Is this clickable?" or "What does 'Synergy Hub' mean?"] Fix: [specific recommendation — e.g., "rename 'Synergy Hub' to 'Team Dashboard'"]

---


**5秒测试（人工执行）：**
1. 打开页面，准确观看5秒后移开视线
2. 你能回答以下问题吗：这个网站/应用是做什么的？我能做的核心操作是什么？我该从哪里开始？
3. 如果任何一个问题回答不清，页面就未通过该测试

**人工检查清单：**
- [ ] 所有交互元素和非交互元素视觉上可明确区分吗？
- [ ] 标签都是常规表述、可立刻理解（没有黑话、没有强行创意）吗？
- [ ] 你能在2秒内识别每个页面的核心操作吗？
- [ ] 页面是不言而喻的（无需引导）或至少是可自解释的（只需短暂理解）吗？
- [ ] 移除所有「操作指南」类文案会影响使用体验吗？（如果是，说明UI需要重新设计，而不是加引导）

**问题记录模板：**

[严重程度] 认知负荷：[问题描述] 影响范围：[页面/组件] 问题：[导致用户思考的原因] 用户疑问：[用户脑海中冒出的问题，比如「这个可以点击吗？」或者「Synergy Hub是什么意思？」] 修复方案：[具体建议，比如「将Synergy Hub重命名为团队看板」]

---

Phase 2: Visual Hierarchy & Scanning

阶段2：视觉层级与浏览体验

Reference:

front-end-design/dont-make-me-think/ch03-billboard-design-101.md

Goal: Verify the page supports scanning behavior -- users do not read web pages, they scan them. The design must make the most important content immediately findable.

Questions to ask:

Is there a clear visual hierarchy where the most important thing is the most prominent?
Are pages broken into clearly defined, visually distinct areas?
Is text formatted for scanning? (Meaningful headings, short paragraphs, bold key terms, bullet lists.)
Is there excessive visual noise? (Too many competing elements, background patterns, unnecessary decoration, animation overload.)
Are related items visually grouped (proximity) and unrelated items visually separated?

Tests to run:

undefined

参考文档：

front-end-design/dont-make-me-think/ch03-billboard-design-101.md

目标： 确认页面符合用户的浏览习惯——用户不会逐字阅读网页，只会快速扫视。设计必须让最重要的内容能立刻被找到。

需要思考的问题：

是否有清晰的视觉层级，最重要的内容最突出？
页面是否拆分为边界清晰、视觉区分明显的板块？
文本格式是否适合快速浏览？（有意义的标题、短段落、关键内容加粗、列表展示）
是否存在过多视觉噪音？（太多元素互相干扰、背景纹理、不必要的装饰、过多动画）
相关内容是否在视觉上分组（接近原则），无关内容是否在视觉上分离？

需要执行的测试：

undefined

Check for heading structure (are headings used to break up content?)

检查标题结构（是否使用标题拆分内容）

grep -rn "<h[1-6]|<Heading|role="heading"" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"

Find long text blocks without headings or formatting (walls of text)

查找没有标题或格式的长文本块（大段文字墙）

Look for paragraphs or text blocks without structure

查找没有结构的段落或文本块

grep -rn "<p>" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"

Check for bullet/ordered lists (good for scanning)

检查无序列表/有序列表（适合快速浏览）

grep -rn "<ul|<ol|<li" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"

Find text formatting helpers (bold for key terms)

查找文本格式工具（关键内容加粗）

Check for potential noise: excessive decoration, patterns, animations

检查潜在的视觉噪音：过多装饰、纹理、动画

grep -rn "background-image:|background-pattern|animation:|@keyframes" --include=".css" --include=".scss"


**Visual inspection checklist:**
- [ ] Can you identify the page's purpose and primary content within 3 seconds of looking at it?
- [ ] Are there clearly defined visual areas (header, main content, sidebar, footer) with obvious boundaries?
- [ ] Is body text broken into short paragraphs (3-4 sentences max) with descriptive headings?
- [ ] Are key terms bolded or otherwise highlighted for scanners?
- [ ] Is the page free of excessive visual noise (competing elements, unnecessary decoration, distracting animations)?
- [ ] Is whitespace used effectively to create breathing room and visual grouping?

**Finding template:**

[SEVERITY] Scanning & Hierarchy: [description] Affected: [screen/section] Issue: [e.g., "400-word paragraph with no headings, no bold, no lists"] Impact: [users will skip this content entirely rather than read it] Fix: [e.g., "break into 3 short paragraphs with descriptive headings, bold key terms, use bullet list for features"]

---

grep -rn "background-image:|background-pattern|animation:|@keyframes" --include=".css" --include=".scss"


**人工检查清单：**
- [ ] 你能在看到页面的3秒内识别页面用途和核心内容吗？
- [ ] 有没有边界清晰的视觉板块（头部、主内容、侧边栏、底部）？
- [ ] 正文是否拆分为短段落（最多3-4句）并配有描述性标题？
- [ ] 关键术语是否加粗或以其他方式高亮方便用户扫视？
- [ ] 页面没有过多视觉噪音（互相干扰的元素、不必要的装饰、分散注意力的动画）吗？
- [ ] 留白是否合理，能营造呼吸感和视觉分组效果吗？

**问题记录模板：**

[严重程度] 浏览与层级：[问题描述] 影响范围：[页面/板块] 问题：[比如「400字的段落没有标题、没有加粗、没有列表」] 影响：[用户会直接跳过这段内容而不是阅读] 修复方案：[比如「拆分为3个带描述性标题的短段落，关键术语加粗，功能点用列表展示」]

---

Phase 3: Navigation

阶段3：导航

Reference:

front-end-design/dont-make-me-think/ch06-street-signs-and-breadcrumbs.md

Goal: Verify that navigation is clear, persistent, and enables users to always answer three fundamental questions: Where am I? Where can I go? How do I get back?

Questions to ask:

Is there persistent global navigation visible on every page?
Can the user always answer: Where am I? Where can I go? How do I get back?
Is there a clear "you are here" indicator in the navigation (active state, highlight, bold)?
Does every page have a name/title that matches what was clicked to reach it?
Are breadcrumbs present for deep hierarchies (3+ levels)?
Is there a persistent, accessible search function?
Is the logo linked to the homepage?

Tests to run:

undefined

参考文档：

front-end-design/dont-make-me-think/ch06-street-signs-and-breadcrumbs.md

目标： 确认导航清晰、常驻显示，让用户始终能回答三个基础问题：我在哪里？我可以去哪些地方？我怎么回去？

需要思考的问题：

每个页面都有常驻的全局导航吗？
用户始终能回答：我在哪里？我可以去哪些地方？我怎么回去吗？
导航中是否有清晰的「你在这里」标识（激活状态、高亮、加粗）？
每个页面的名称/标题是否和点击进入的导航标签一致？
深层层级（3级及以上）是否有面包屑导航？
是否有常驻、可访问的搜索功能？
Logo是否链接到首页？

需要执行的测试：

undefined

Check for navigation component

检查导航组件

Check for "you are here" indicators (active/current state in navigation)

检查「你在这里」标识（导航的激活/当前状态）

Check for breadcrumbs

检查面包屑导航

grep -rn "breadcrumb|Breadcrumb|aria-label="breadcrumb"|role="navigation".breadcrumb" --include=".tsx" --include=".jsx" --include=".html" --include="*.vue"

Check for search functionality

检查搜索功能

Check for back/home navigation

检查返回/首页导航

Check for page titles/headings matching navigation labels

检查页面标题/标题是否和导航标签匹配

grep -rn "<title|<h1|document.title|useTitle|Head>" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"


**The Trunk Test (standalone quick-check):**
Land on any interior page of the site blindly (not the homepage). Can you immediately answer:
1. What site is this? (Site identity/logo visible)
2. What page am I on? (Page name/title visible)
3. What are the major sections? (Global navigation visible)
4. What are my options at this level? (Local navigation visible)
5. Where am I in the scheme of things? (Breadcrumbs or "you are here" indicator)
6. How can I search? (Search box visible or easily findable)

If any of these questions cannot be answered within 5 seconds, flag it.

**Visual inspection checklist:**
- [ ] Is global navigation persistent and visible on every page (not hidden behind a hamburger on desktop)?
- [ ] Is there a "you are here" indicator showing the current page/section?
- [ ] Do page titles match the navigation labels that led to them?
- [ ] Are breadcrumbs present for content deeper than 2 levels?
- [ ] Is the logo clickable and linked to the homepage?
- [ ] Can the user always get back to where they came from (back button works, breadcrumbs, or explicit back link)?

**Finding template:**

[SEVERITY] Navigation: [description] Affected: [screen/flow] Trunk test: [which questions could not be answered] Issue: [e.g., "no 'you are here' indicator — active nav item has no visual distinction"] Fix: [e.g., "add font-weight: 600 and a left border accent to the active navigation item"]

---

grep -rn "<title|<h1|document.title|useTitle|Head>" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"


**主干测试（独立快速检查）：**
随机进入网站的任意内页（不是首页），你能立刻回答以下问题吗：
1. 这是哪个网站？（网站标识/Logo可见）
2. 我在哪个页面？（页面名称/标题可见）
3. 主要板块有哪些？（全局导航可见）
4. 这个层级下我有什么操作选项？（局部导航可见）
5. 我在整个网站的什么位置？（面包屑或「你在这里」标识）
6. 我怎么搜索？（搜索框可见或容易找到）

如果任何一个问题无法在5秒内回答，标记为问题。

**人工检查清单：**
- [ ] 全局导航在所有页面常驻显示（桌面端不会隐藏在汉堡菜单后）吗？
- [ ] 有「你在这里」标识显示当前页面/板块吗？
- [ ] 页面标题和跳转过来的导航标签匹配吗？
- [ ] 2级以上的内容有面包屑导航吗？
- [ ] Logo可点击并跳转到首页吗？
- [ ] 用户总能回到上一级页面（返回按钮可用、面包屑、或明确的返回链接）吗？

**问题记录模板：**

[严重程度] 导航：[问题描述] 影响范围：[页面/流程] 主干测试：[哪些问题无法回答] 问题：[比如「没有『你在这里』标识——激活的导航项没有视觉区分」] 修复方案：[比如「给激活的导航项添加600字重和左侧 accent 边框高亮」]

---

Phase 4: Words & Content

阶段4：文案与内容

Reference:

front-end-design/dont-make-me-think/ch04

ch05-omit-needless-words.md

Goal: Verify that all text on the interface is concise, useful, and free of "happy talk," unnecessary instructions, and marketing fluff. Every word should earn its place.

Questions to ask:

Is there "happy talk" that should be removed? ("Welcome to our innovative platform...", "We're passionate about...", "Thank you for choosing...")
Are there instructions that would be unnecessary if the interface were better designed?
Can half the words on any given page be removed without losing meaning?
Are labels clear, conventional, and user-language (not marketing-speak or internal jargon)?
Are error messages written in plain language that tells the user what happened and what to do?

Tests to run:

undefined

参考文档：

front-end-design/dont-make-me-think/ch04

、

ch05-omit-needless-words.md

目标： 确认界面上的所有文本简洁、有用，没有「客套话」、不必要的引导和营销套话，每个字都有存在的价值。

需要思考的问题：

是否有可以删除的「客套话」？（「欢迎来到我们的创新平台...」「我们致力于...」「感谢您选择...」）
是否有如果界面设计更好就不需要的引导文案？
任意页面的文案能不能删掉一半还不损失含义？
标签是否清晰、常规，使用用户易懂的语言（不是营销话术或内部黑话）？
错误提示是否用平实的语言说明发生了什么、该怎么处理？

需要执行的测试：

undefined

Find happy talk and filler text patterns

查找客套话和填充文案模式

Find instructional text that might indicate confusing UI

查找可能说明UI存在困惑的引导文案

Find generic/unhelpful error messages

查找通用/无用的错误提示

Find button/link text that could be clearer

查找可以更清晰的按钮/链接文案

Find long text blocks (potential walls of text)

查找长文本块（潜在的文字墙）

grep -rn "<p>" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"


**Visual inspection checklist:**
- [ ] Is the page free of "happy talk" that adds no information? (Marketing fluff, welcome messages, mission statements in the UI.)
- [ ] Are there instructions that could be eliminated by redesigning the interface?
- [ ] Could any paragraph on the page be cut in half without losing essential meaning?
- [ ] Do button labels clearly describe what will happen when clicked? ("Save changes" not "Submit", "Create account" not "Go".)
- [ ] Are error messages specific and actionable? ("Email is already registered. Try signing in instead." not "An error occurred.")

**Finding template:**

[SEVERITY] Content: [description] Affected: [screen/section] Current text: "[the problematic text]" Issue: [e.g., "happy talk — provides no useful information"] Suggested text: "[concise alternative]" or "Remove entirely"

---

grep -rn "<p>" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"


**人工检查清单：**
- [ ] 页面没有无信息价值的「客套话」吗？（UI里的营销套话、欢迎语、使命宣言）
- [ ] 没有可以通过优化界面设计删掉的引导文案吗？
- [ ] 页面上的任意段落能不能删掉一半还不损失核心含义？
- [ ] 按钮标签能清晰说明点击后会发生什么吗？（「保存修改」而不是「提交」，「创建账号」而不是「前往」）
- [ ] 错误提示具体且可执行吗？（「邮箱已注册，请尝试登录」而不是「发生错误」）

**问题记录模板：**

[严重程度] 内容：[问题描述] 影响范围：[页面/板块] 当前文案："[有问题的文本]" 问题：[比如「客套话，没有提供有用信息」] 建议文案："[简洁的替代文案]" 或 "直接删除"

---

Phase 5: Homepage Clarity

阶段5：首页清晰度

Reference:

front-end-design/dont-make-me-think/ch07-the-first-step-in-recovery.md

Goal: Verify the homepage immediately communicates what the site is, what the user can do, and why they should care -- within 5 seconds, for a first-time visitor.

Questions to ask:

Does the homepage answer three questions within 5 seconds: What is this? What can I do here? Why should I be here (and not somewhere else)?
Is there a clear, concise tagline near the logo that describes the site's purpose?
Is the homepage cluttered with competing priorities, or is there a clear hierarchy of importance?
Can a first-time visitor understand the site's purpose without scrolling?
Is the primary call-to-action obvious and compelling?
Does the homepage avoid the trap of trying to showcase everything at once?

Tests to run:

undefined

参考文档：

front-end-design/dont-make-me-think/ch07-the-first-step-in-recovery.md

目标： 确认首页能在5秒内向首次访问的用户传递网站是什么、用户可以做什么、为什么要留在这个网站（而不是其他网站）。

需要思考的问题：

首页能在5秒内回答三个问题：这是什么？我可以在这里做什么？我为什么要在这里（而不是别的地方）？
Logo附近有没有清晰简洁的标语说明网站用途？
首页是优先级清晰，还是堆满了互相冲突的内容？
首次访问的用户不滚动就能理解网站用途吗？
核心行动召唤按钮清晰且有吸引力吗？
首页有没有避免想要一次性展示所有内容的陷阱？

需要执行的测试：

undefined

Check for tagline/value proposition near the top

检查顶部附近的标语/价值主张

Check the homepage/landing page component

检查首页/落地页组件

Find the primary call-to-action on the homepage

查找首页的核心行动召唤按钮

Check for competing CTAs (too many primary actions)

检查冲突的行动召唤按钮（太多核心操作）

grep -rn "btn-primary|variant="primary"|variant='primary'" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"

Look for logo + tagline proximity

检查Logo和标语的接近程度

grep -rn "logo|Logo|brand|Brand" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"


**The 5-Second Homepage Test (manual):**
1. Open the homepage. Start a 5-second timer. Look away when it ends.
2. Write down answers to: What does this site do? What is the main action I can take? Who is this for?
3. If any answer is vague or wrong, the homepage needs work.

**Visual inspection checklist:**
- [ ] Is the site's purpose communicated above the fold without scrolling?
- [ ] Is there a tagline or value proposition near the logo?
- [ ] Is there one clear primary CTA (not 5 competing buttons)?
- [ ] Is the homepage free of "everything and the kitchen sink" syndrome?
- [ ] Would a first-time visitor from your target audience understand the purpose in 5 seconds?
- [ ] Is the homepage hierarchy clear: primary message > secondary features > tertiary details?

**Finding template:**

[SEVERITY] Homepage Clarity: [description] Affected: [homepage section] The 3 questions: What is this? [clear / unclear — what a user might guess] What can I do? [clear / unclear — what the primary action appears to be] Why here? [clear / unclear — is the value proposition communicated?] Fix: [e.g., "add a tagline under the logo: 'Project management for remote teams' and make the 'Start free trial' button the sole primary CTA above the fold"]

---

grep -rn "logo|Logo|brand|Brand" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"


**首页5秒测试（人工执行）：**
1. 打开首页，开始5秒计时，计时结束后移开视线
2. 写下以下问题的答案：这个网站是做什么的？我可以做的核心操作是什么？这个网站面向谁？
3. 如果任何答案模糊或错误，说明首页需要优化。

**人工检查清单：**
- [ ] 网站用途在首屏（无需滚动）就传递清楚了吗？
- [ ] Logo附近有标语或价值主张吗？
- [ ] 有一个清晰的核心行动召唤按钮（不是5个互相冲突的按钮）吗？
- [ ] 首页没有「什么都想堆上去」的问题吗？
- [ ] 目标受众的首次访问用户能在5秒内理解网站用途吗？
- [ ] 首页层级清晰吗：核心信息 > 次要功能 > 三级细节？

**问题记录模板：**

[严重程度] 首页清晰度：[问题描述] 影响范围：[首页板块] 三个核心问题：这是什么？[清晰 / 不清晰 — 用户可能的猜测] 我可以做什么？[清晰 / 不清晰 — 看起来的核心操作] 为什么选这里？[清晰 / 不清晰 — 价值主张有没有传递清楚？] 修复方案：[比如「在Logo下方添加标语：『面向远程团队的项目管理工具』，并将『开启免费试用』按钮设为首屏唯一的核心行动召唤按钮」]

---

Phase 6: Mobile Usability

阶段6：移动端可用性

Reference:

front-end-design/dont-make-me-think/ch10-mobile-usability.md

Goal: Verify the interface works well on mobile devices -- adequate touch targets, readable text, accessible features, and a complete (not stripped-down) experience.

Questions to ask:

Are touch targets at least 44x44 points (Apple HIG) / 48x48dp (Material) with adequate spacing between them?
Are key features accessible on mobile, not hidden or removed?
Can the interface be used comfortably one-handed?
Is text readable without zooming (minimum 16px for body text)?
Is the mobile experience feature-complete (not a stripped-down version of desktop)?
Is the viewport meta tag set correctly to prevent unintended zooming issues?
Are form inputs using appropriate mobile keyboard types (email, tel, number)?

Tests to run:

undefined

参考文档：

front-end-design/dont-make-me-think/ch10-mobile-usability.md

目标： 确认界面在移动端表现良好——足够大的点击区域、可读的文本、可访问的功能、完整的体验（不是阉割版的桌面端体验）。

需要思考的问题：

点击区域至少达到苹果设计规范的44x44pt / Material设计规范的48x48dp，且间距足够吗？
核心功能在移动端可访问，没有被隐藏或移除吗？
界面可以舒适地单手操作吗？
文本无需放大就能阅读（正文至少16px）吗？
移动端体验功能完整（不是桌面端的阉割版）吗？
viewport meta标签设置正确，不会出现意外的缩放问题吗？
表单输入框使用了合适的移动端键盘类型（邮箱、电话、数字）吗？

需要执行的测试：

undefined

Check for viewport meta tag

检查viewport meta标签

grep -rn "viewport" --include=".html" --include=".tsx" --include="*.jsx"

Check for responsive design (media queries, responsive utilities)

检查响应式设计（媒体查询、响应式工具类）

grep -rn "@media|breakpoint|responsive|sm:|md:|lg:|xl:" --include=".css" --include=".scss" --include=".tsx" --include=".jsx"

Check touch target sizes (minimum 44x44 / 48x48)

检查点击区域大小（最小44x44 / 48x48）

grep -rn "min-height:\s*(4[0-3]|3[0-9]|[12][0-9]|[0-9])px|min-width:\s*(4[0-3]|3[0-9]|[12][0-9]|[0-9])px" --include=".css" --include=".scss" grep -rn "h-[0-9]\b|w-[0-9]\b|h-1[0-1]\b|w-1[0-1]\b" --include=".tsx" --include=".jsx" --include="*.html"

Check for appropriate input types on mobile

检查移动端合适的输入类型

Check for mobile navigation patterns (hamburger, bottom nav, sheet)

检查移动端导航模式（汉堡菜单、底部导航、弹窗）

Check for horizontal scrolling issues (content wider than viewport)

检查横向滚动问题（内容超出视口宽度）

grep -rn "overflow-x:\shidden|overflow-x:\sauto|overflow-x:\sscroll|overflow-hidden|overflow-x-auto" --include=".css" --include=".scss" --include=".tsx" --include="*.jsx"

Check font sizes (body text should be at least 16px on mobile to prevent zoom)

检查字体大小（移动端正文至少16px，避免自动缩放）

grep -rn "font-size:\s1[0-5]px|font-size:\s[0-9]px|text-xs\b|text-[1[0-3]px]" --include=".css" --include=".scss" --include=".tsx" --include=".jsx"


**Visual inspection checklist (test on actual mobile device or device emulation):**
- [ ] Can all buttons and links be tapped accurately with a thumb (44x44pt minimum)?
- [ ] Is there enough spacing between tap targets to prevent mis-taps?
- [ ] Is body text at least 16px and readable without zooming?
- [ ] Are all desktop features accessible on mobile (not removed or hidden)?
- [ ] Can critical flows (signup, login, checkout, search) be completed on mobile?
- [ ] Do form inputs trigger the appropriate mobile keyboard (email, number, tel)?
- [ ] Is horizontal scrolling avoided (no content bleeding off-screen)?
- [ ] Is the mobile navigation easy to access and use one-handed?

**Finding template:**

[SEVERITY] Mobile Usability: [description] Affected: [screen/component] Issue: [e.g., "secondary navigation links are 28x28px with 4px spacing — too small to tap accurately"] Device tested: [device or viewport size] Fix: [e.g., "increase tap targets to 44x44px minimum with 8px spacing between items"]

---

grep -rn "font-size:\s1[0-5]px|font-size:\s[0-9]px|text-xs\b|text-[1[0-3]px]" --include=".css" --include=".scss" --include=".tsx" --include=".jsx"


**人工检查清单（在真实移动设备或模拟器上测试）：**
- [ ] 所有按钮和链接都可以用拇指准确点击（最小44x44pt）吗？
- [ ] 点击区域之间的间距足够，不会误触吗？
- [ ] 正文至少16px，无需放大就能阅读吗？
- [ ] 所有桌面端功能在移动端都可访问（没有被移除或隐藏）吗？
- [ ] 核心流程（注册、登录、支付、搜索）都可以在移动端完成吗？
- [ ] 表单输入框会触发对应的移动端键盘（邮箱、数字、电话）吗？
- [ ] 避免了横向滚动（没有内容超出屏幕边界）吗？
- [ ] 移动端导航容易访问，可单手操作吗？

**问题记录模板：**

[严重程度] 移动端可用性：[问题描述] 影响范围：[页面/组件] 问题：[比如「二级导航链接大小为28x28px，间距4px——太小无法准确点击」] 测试设备：[设备或视口尺寸] 修复方案：[比如「将点击区域最小提升到44x44px，元素之间间距8px」]

---

Phase 7: Goodwill & Courtesy

阶段7：用户好感度与体验友好性

Reference:

front-end-design/dont-make-me-think/ch11-usability-as-common-courtesy.md

Goal: Verify the interface respects users' time, provides information they need upfront, and makes it easy to recover from mistakes. Every friction point depletes the user's "reservoir of goodwill"; every courteous interaction refills it.

Questions to ask:

Is information users commonly need readily available? (Pricing, shipping costs, contact info, support, FAQs -- not buried 3 clicks deep.)
Are forms asking only for information that is genuinely necessary? (No phone number unless you will call them. No company name for personal accounts.)
Are error messages helpful, specific, and constructive? (Not just "Invalid input" but "Email must include an @ symbol.")
Can users easily recover from mistakes? (Undo, back button works, clear error states, confirm destructive actions.)
Are loading, empty, and error states designed and helpful (not default browser behavior)?
Is the interface free of "dark patterns"? (Tricking users into subscriptions, hiding unsubscribe, pre-checked consent boxes.)

Tests to run:

undefined

参考文档：

front-end-design/dont-make-me-think/ch11-usability-as-common-courtesy.md

目标： 确认界面尊重用户的时间，提前提供用户需要的信息，且容易从错误中恢复。每一个摩擦点都会消耗用户的「好感度储备」，每一个友好的交互都会补充储备。

需要思考的问题：

用户常需要的信息容易找到吗？（定价、配送费、联系方式、客服、常见问题——不需要点击3次以上才能找到）
表单只索要真正必要的信息吗？（不会要手机号除非你真的会打电话给用户，个人账号不需要填公司名）
错误提示有用吗？具体吗？有建设性吗？（不是只有「输入无效」，而是「邮箱需要包含@符号」）
用户可以轻松从错误中恢复吗？（撤销、返回按钮可用、清晰的错误状态、危险操作二次确认）
加载、空状态、错误状态都是经过设计且有用的（不是浏览器默认样式）吗？
界面没有「暗黑模式」吗？（诱导用户订阅、隐藏退订入口、默认勾选同意框）

需要执行的测试：

undefined

Find form fields — check if all are necessary

查找表单字段——检查是否都是必要的

Check for required fields (are they all truly required?)

检查必填字段（是否真的都是必填的？）

grep -rn "required|isRequired|*|aria-required" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"

Find error message patterns

查找错误提示模式

Check for undo/recovery mechanisms

检查撤销/恢复机制

Check for loading states

检查加载状态

Check for empty states

检查空状态

Check for dark patterns

检查暗黑模式

Check for confirmation dialogs on destructive actions

检查危险操作的二次确认弹窗


**Visual inspection checklist:**
- [ ] Can users find pricing, contact info, shipping details, and support within 1-2 clicks from any page?
- [ ] Do forms ask only for necessary information? (Would you be annoyed filling this form out?)
- [ ] Are error messages specific and tell the user how to fix the problem?
- [ ] Is there a confirmation step before destructive actions (delete account, remove data)?
- [ ] Do loading states inform the user something is happening (skeleton screens, progress indicators)?
- [ ] Are empty states helpful with messaging and a clear next action?
- [ ] Is the interface free of dark patterns (pre-checked boxes, hidden unsubscribe, confusing opt-out language)?

**Finding template:**

[SEVERITY] Goodwill: [description] Affected: [screen/flow] Issue: [e.g., "registration form asks for phone number, company name, and job title — none required for the service"] Goodwill impact: [depletes / neutral / builds] Fix: [e.g., "remove phone, company, and title fields — ask only for name, email, and password"]

---


**人工检查清单：**
- [ ] 用户可以从任意页面点击1-2次就能找到定价、联系方式、配送信息、客服吗？
- [ ] 表单只索要必要信息吗？（你自己填这个表单会觉得烦吗？）
- [ ] 错误提示具体，会告诉用户怎么解决问题吗？
- [ ] 危险操作（删除账号、移除数据）前有二次确认步骤吗？
- [ ] 加载状态会告知用户正在处理（骨架屏、进度指示器）吗？
- [ ] 空状态有提示信息和清晰的下一步操作引导吗？
- [ ] 界面没有暗黑模式（默认勾选框、隐藏退订入口、 confusing opt-out language）吗？

**问题记录模板：**

[严重程度] 好感度：[问题描述] 影响范围：[页面/流程] 问题：[比如「注册表单索要手机号、公司名和职位——这些都不是使用服务的必填项」] 好感度影响：[消耗 / 中性 / 提升] 修复方案：[比如「移除手机号、公司和职位字段——只索要姓名、邮箱和密码」]

---

Phase 8: Accessibility

阶段8：可访问性

Reference:

front-end-design/dont-make-me-think/ch12-accessibility-and-you.md

Goal: Verify the interface is usable by people with diverse abilities -- proper heading structure, alt text, keyboard navigation, contrast, form labels, focus indicators, and skip navigation.

Questions to ask:

Is there a proper heading hierarchy (h1 > h2 > h3, with no skipped levels)?
Do all meaningful images have descriptive alt text? (Decorative images should have empty alt="".)
Can all interactive elements be reached and operated by keyboard alone?
Is there sufficient color contrast (WCAG AA: 4.5:1 for normal text, 3:1 for large text)?
Do all form inputs have programmatically associated labels?
Are focus indicators visible and clear?
Is there a "skip to main content" link for keyboard users?
Is ARIA used correctly (not overused or used as a substitute for semantic HTML)?

Tests to run:

undefined

参考文档：

front-end-design/dont-make-me-think/ch12-accessibility-and-you.md

目标： 确认不同能力的用户都可以使用界面——正确的标题结构、alt文本、键盘导航、对比度、表单标签、焦点指示器、跳转到主内容链接。

需要思考的问题：

标题层级正确吗？（h1 > h2 > h3，没有跳过层级）
所有有意义的图片都有描述性的alt文本吗？（装饰性图片应该用空alt=""）
所有交互元素都可以仅通过键盘访问和操作吗？
颜色对比度足够吗？（WCAG AA标准：普通文本4.5:1，大文本3:1）
所有表单输入框都有关联的程序标签吗？
焦点指示器可见且清晰吗？
有供键盘用户使用的「跳转到主内容」链接吗？
ARIA使用正确吗？（没有滥用，也没有用来替代语义化HTML）

需要执行的测试：

undefined

Check heading hierarchy (should be sequential, no skipping)

检查标题层级（应该是连续的，没有跳过）

grep -rn "<h1|<h2|<h3|<h4|<h5|<h6" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"

Check for images without alt text

查找没有alt文本的图片

grep -rn "<img|<Image" --include=".tsx" --include=".jsx" --include=".html" --include=".vue" grep -rn "alt=" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"

Check for empty alt text on images that might need descriptions

检查可能需要描述的图片用了空alt文本的情况

grep -rn "alt=""|alt=''" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"

Check for form labels associated with inputs

检查表单输入框的关联标签

Find inputs without labels (accessibility violation)

查找没有标签的输入框（违反可访问性规范）

Check for focus styles

检查焦点样式

Check for outline removal (anti-pattern unless replaced with alternative)

检查移除轮廓的反模式（除非有替代样式）

grep -rn "outline:\snone|outline:\s0|outline-none" --include=".css" --include=".scss" --include=".tsx" --include=".jsx"

Check for skip navigation link

检查跳转到导航的链接

Check for ARIA usage

检查ARIA使用情况

grep -rn "aria-|role="" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"

Check for keyboard event handlers (should have keyboard equivalents for mouse events)

检查键盘事件处理器（鼠标事件应该有对应的键盘等价事件）

Check for tabIndex usage (negative tabindex removes from tab order)

检查tabIndex使用情况（负的tabindex会从tab顺序中移除）

grep -rn "tabIndex|tabindex" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"


**Visual inspection checklist:**
- [ ] Does the heading hierarchy go h1 > h2 > h3 without skipping levels?
- [ ] Do all informative images have meaningful alt text?
- [ ] Can you tab through all interactive elements in a logical order?
- [ ] Are focus indicators clearly visible on every interactive element?
- [ ] Does all text meet WCAG AA contrast requirements (4.5:1 normal, 3:1 large)?
- [ ] Does every form input have a visible label (not just placeholder text)?
- [ ] Is there a "skip to main content" link that appears on keyboard focus?
- [ ] Can all functionality triggered by mouse events also be triggered by keyboard?
- [ ] Does the interface avoid conveying information through color alone?

**Finding template:**

[SEVERITY] Accessibility: [description] Affected: [component/screen] WCAG criterion: [e.g., "1.1.1 Non-text Content" or "2.4.7 Focus Visible"] Issue: [e.g., "product images have no alt text — screen readers announce 'image' with no context"] Users impacted: [e.g., "screen reader users, keyboard-only users"] Fix: [e.g., "add descriptive alt text: alt='Red leather notebook, 5x7 inches, 200 pages'"]

---

grep -rn "tabIndex|tabindex" --include=".tsx" --include=".jsx" --include=".html" --include=".vue"


**人工检查清单：**
- [ ] 标题层级按h1 > h2 > h3排列，没有跳过层级吗？
- [ ] 所有信息类图片都有有意义的alt文本吗？
- [ ] 你可以按逻辑顺序用tab键遍历所有交互元素吗？
- [ ] 所有交互元素的焦点指示器清晰可见吗？
- [ ] 所有文本都符合WCAG AA对比度要求（普通文本4.5:1，大文本3:1）吗？
- [ ] 每个表单输入框都有可见的标签（不只是占位符文本）吗？
- [ ] 有键盘聚焦时会出现的「跳转到主内容」链接吗？
- [ ] 所有鼠标事件触发的功能也可以通过键盘触发吗？
- [ ] 界面不会仅通过颜色传递信息吗？

**问题记录模板：**

[严重程度] 可访问性：[问题描述] 影响范围：[组件/页面] WCAG标准：[比如「1.1.1 非文本内容」或「2.4.7 焦点可见」] 问题：[比如「产品图片没有alt文本——屏幕阅读器只会播报『图片』没有上下文」] 影响用户：[比如「屏幕阅读器用户、仅用键盘的用户」] 修复方案：[比如「添加描述性alt文本：alt='红色皮质笔记本，5x7英寸，200页'」]

---

Severity Rating Guide

严重程度评级指南

Severity	Criteria	Examples
CRITICAL	Unusable for a user group, core functionality inaccessible, users cannot complete key tasks	No keyboard navigation on forms, primary action invisible or unreachable, mobile users cannot sign up, zero color contrast on essential text
HIGH	Confusing navigation, unclear purpose, major accessibility gap, users get lost or stuck	No "you are here" indicator, homepage fails 5-second test, no heading hierarchy, missing form labels, trunk test fails on 3+ questions
MEDIUM	Excessive text, inconsistent patterns, minor accessibility gaps, users slow down but can proceed	Happy talk on every page, instructions needed for basic tasks, some missing alt text, focus indicators missing on some elements
LOW	Polish issues, could be clearer, minor friction	Some error messages are generic, empty states show "No data", button labels could be more descriptive, some mobile tap targets slightly small
INFO	Usability testing suggestion, potential improvement, best practice not yet applied	"Consider running a 5-second test with real users", "A skeleton loading state would improve perceived performance", "Adding breadcrumbs would help deep navigation"

严重程度	判定标准	示例
CRITICAL（严重）	某类用户完全无法使用，核心功能不可访问，用户无法完成关键任务	表单没有键盘导航，核心操作不可见或无法访问，移动端用户无法注册，核心文本零对比度
HIGH（高）	导航混乱、用途不清晰、重大可访问性缺陷，用户会迷路或卡住	没有「你在这里」标识，首页未通过5秒测试，没有标题层级，缺少表单标签，主干测试有3个以上问题未通过
MEDIUM（中）	文本过多、模式不一致、轻微可访问性缺陷，用户操作变慢但可以继续	每个页面都有客套话，基础任务需要引导，部分alt文本缺失，部分元素没有焦点指示器
LOW（低）	优化问题、可以更清晰、轻微摩擦	部分错误提示通用，空状态只显示「无数据」，按钮标签可以更具描述性，部分移动端点击区域略小
INFO（信息）	可用性测试建议、潜在优化点、尚未落地的最佳实践	「建议和真实用户一起做5秒测试」，「骨架屏加载状态可以提升感知性能」，「添加面包屑可以提升深层导航体验」

Common Mistakes

常见错误

Mistake	Fix
Designing for reading instead of scanning	Use headings, short paragraphs, bold key terms, and bullet lists — users scan, they do not read
Using clever labels instead of conventional ones	"Jobs" beats "Career Opportunities Portal" every time — use the simplest, most common label
Hiding navigation behind a hamburger on desktop	Persistent visible navigation is always preferable to hidden navigation on screens with space
No "you are here" indicator	Highlight the current page/section in the navigation with visual distinction (bold, underline, accent color)
Writing instructions instead of fixing the design	If you need to explain how to use something, the design needs improvement — not documentation
Generic error messages	"An error occurred" helps no one — say what went wrong and how to fix it
Asking for unnecessary form fields	Every field you add decreases completion rate — ask only for what you truly need
Placeholder text as the only label	Placeholders disappear on focus — every input needs a persistent, visible label
Removing focus outlines for aesthetics	Replace the default outline with a custom focus indicator — never remove it entirely
Mobile as an afterthought	Design for mobile first or in parallel — a responsive afterthought always feels like one

错误	修复方案
为阅读设计而非为浏览设计	使用标题、短段落、加粗关键术语、列表——用户是扫视，不是逐字阅读
用创意标签代替常规标签	「招聘」永远比「职业机会门户」好——用最简单最通用的标签
桌面端把导航藏在汉堡菜单后	屏幕空间足够时，常驻可见的导航永远比隐藏导航好
没有「你在这里」标识	用视觉区分方式（加粗、下划线、强调色）高亮导航中的当前页面/板块
写引导文案而不是优化设计	如果你需要解释怎么用某个功能，说明设计需要优化，而不是加文档
通用错误提示	「发生错误」对谁都没用——说明出了什么问题，以及怎么修复
索要不必要的表单字段	每多一个字段都会降低完成率——只索要你真正需要的信息
仅用占位符作为标签	占位符在输入时会消失——每个输入框都需要常驻的可见标签
为了美观移除焦点轮廓	用自定义焦点指示器替代默认轮廓，永远不要完全移除
移动端体验是事后补充	优先设计移动端或并行设计——事后补的响应式体验永远都很生硬

Standalone Quick-Check: The Trunk Test

独立快速检查：主干测试

Use this as a fast, independent check on any page of any site. It takes 30 seconds and surfaces the most common navigation failures.

Instructions: Navigate to any interior page of the site (not the homepage). Without scrolling or clicking, answer these 6 questions:

#	Question	What to Look For
1	What site is this?	Logo or site name visible in a consistent location
2	What page am I on?	Clear page title/heading that matches what was clicked
3	What are the major sections?	Global navigation visible with clear section labels
4	What are my options at this level?	Local/sub-navigation or clear content choices visible
5	Where am I in the scheme of things?	"You are here" indicator, breadcrumbs, or highlighted nav item
6	How can I search?	Search box or search icon visible without scrolling

Scoring:

6/6: Excellent navigation. Users will feel oriented and confident.
4-5/6: Good, but gaps exist. Address the failing items.
2-3/6: Significant navigation problems. Users will feel lost.
0-1/6: Critical navigation failure. Users will leave.

可以用来快速检查任意网站的任意页面，只需要30秒就能发现最常见的导航问题。

操作指引： 进入网站的任意内页（不是首页），不要滚动或点击，回答以下6个问题：

#	问题	检查点
1	这是哪个网站？	Logo或网站名称在固定位置可见
2	我在哪个页面？	清晰的页面标题/标题和点击的导航标签匹配
3	主要板块有哪些？	全局导航可见，板块标签清晰
4	这个层级下我有什么选项？	局部/子导航或清晰的内容选项可见
5	我在整个网站的什么位置？	「你在这里」标识、面包屑或高亮的导航项
6	我怎么搜索？	无需滚动就能看到搜索框或搜索图标

评分：

6/6：优秀的导航，用户会有方向感和信心
4-5/6：良好，但存在缺陷，修复未通过的项即可
2-3/6：严重的导航问题，用户会迷路
0-1/6：灾难性的导航缺陷，用户会直接离开

Phase 9: Review & Report

阶段9：评审与报告

Generate the usability report:

markdown

undefined

生成可用性报告：

markdown

undefined

UX Usability Review Report: [Application/Site Name]

UX 可用性审查报告：[应用/网站名称]

Date: [date] Reviewer: [name] Scope: [what was reviewed — screens, flows, user types] Method: Heuristic review based on Don't Make Me Think principles

日期： [日期] 评审人： [姓名] 范围： [评审内容——页面、流程、用户类型] 方法： 基于Don't Make Me Think原则的启发式评估

Executive Summary

执行摘要

[1-2 paragraph summary of overall usability and key findings. State whether the interface passes the "don't make me think" standard and the trunk test.]

[1-2段总结整体可用性和核心发现，说明界面是否通过「Don't Make Me Think」标准和主干测试]

Trunk Test Results

主干测试结果

Question	Answer	Pass/Fail
What site is this?	[answer]	[pass/fail]
What page am I on?	[answer]	[pass/fail]
Major sections?	[answer]	[pass/fail]
Options at this level?	[answer]	[pass/fail]
Where am I?	[answer]	[pass/fail]
How to search?	[answer]	[pass/fail]
Trunk Test Score: [X/6]

问题	答案	通过/未通过
这是哪个网站？	[答案]	[通过/未通过]
我在哪个页面？	[答案]	[通过/未通过]
主要板块有哪些？	[答案]	[通过/未通过]
这个层级下我有什么选项？	[答案]	[通过/未通过]
我在什么位置？	[答案]	[通过/未通过]
怎么搜索？	[答案]	[通过/未通过]
主干测试得分： [X/6]

5-Second Homepage Test Results

首页5秒测试结果

Question	Answer	Clear?
What is this site?	[answer]	[yes/no]
What can I do here?	[answer]	[yes/no]
Why should I be here?	[answer]	[yes/no]

问题	答案	清晰吗？
这个网站是做什么的？	[答案]	[是/否]
我可以在这里做什么？	[答案]	[是/否]
我为什么要在这里？	[答案]	[是/否]

Findings Summary

发现总结

#	Severity	Finding	Phase
1	CRITICAL	[title]	[phase]
2	HIGH	[title]	[phase]
...	...	...	...

#	严重程度	发现问题	阶段
1	CRITICAL	[标题]	[阶段]
2	HIGH	[标题]	[阶段]
...	...	...	...

Detailed Findings

详细发现

Finding 1: [Title]

发现1：[标题]

Severity: CRITICAL / HIGH / MEDIUM / LOW / INFO Phase: [which phase found it] Affected Component: [screen, flow, component]

Description: [What the usability issue is — describe the user's experience, not just the technical problem]

User Impact: [How this affects real users — confusion, abandonment, errors, frustration, exclusion]

Evidence: [What you observed — specific screens, text, interactions, test results]

Recommended Fix: [Specific, actionable improvement — include before/after if helpful]

Reference: [Don't Make Me Think chapter/principle reference]

[Repeat for each finding]

严重程度： CRITICAL / HIGH / MEDIUM / LOW / INFO 阶段： [发现问题的阶段] 影响组件： [页面、流程、组件]

描述： [可用性问题是什么——描述用户的体验，而不只是技术问题]

用户影响： [对真实用户的影响——困惑、放弃操作、出错、 frustration、无法使用]

证据： [你观察到的内容——具体页面、文本、交互、测试结果]

建议修复方案： [具体可执行的优化方案——如果有帮助可以附上前后对比]

参考： [Don't Make Me Think章节/原则参考]

[每个发现重复以上结构]

Improvement Priority

优化优先级

Fix CRITICAL findings immediately — users are blocked or excluded
Fix HIGH findings before launch — users are confused or lost
Fix MEDIUM findings in the next sprint — users are slowed down
Fix LOW findings as polish — users are mildly inconvenienced
Consider INFO suggestions — for the next round of usability improvement

立即修复CRITICAL级问题 —— 用户被阻塞或无法使用
上线前修复HIGH级问题 —— 用户会困惑或迷路
下个迭代修复MEDIUM级问题 —— 用户操作变慢
优化时修复LOW级问题 —— 用户有轻微不便
考虑INFO级建议 —— 用于下一轮可用性优化

Recommended Usability Tests

建议的可用性测试

[Suggest specific usability tests to run with real users, based on findings:

5-second test on the homepage with 5 participants
Task-based test: "Find [X] and complete [Y]" with 3-5 participants
Navigation test: trunk test on 5 interior pages with 3 participants
Mobile-specific test on [key flows] with 3 participants]

[基于发现的问题，建议和真实用户一起执行的具体可用性测试：

5名参与者的首页5秒测试
3-5名参与者的任务型测试：「找到[X]并完成[Y]」
3名参与者的导航测试：5个内页的主干测试
3名参与者的[核心流程]移动端专项测试]

Out of Scope / Not Reviewed

超出范围/未评审内容

[What was explicitly excluded and why]

undefined

[明确排除的评审内容及原因]

undefined