技能 UX 启发式研究技能
基于人机交互（HCD）知识的启发式评估，并将结果作为报告输出。
前提条件
在执行启发式评估之前，请根据指示的提示确认以下条件。如果无法确认，请适当提问。如果在无法确认或不满足这些条件的环境下进行评估，请提前通知用户，评估结果可能无法充分输出。
目标的确定
- 评估可以选择以下两种模式之一：
- 页面整体方式：均匀评估指定网站的每个页面整体。
- 旅程重现方式：评估实现指定客户旅程的体验。
- 评估对象（页面整体方式为网站列表，旅程重现方式为旅程的起始URL）必须明确。
- 对于旅程重现方式，必须明确目标客户旅程的概要（例如：查找XX信息，进行咨询等）。
目标环境的确定
- 明确目标用户访问的环境（PC/移动设备）。
调查方法的可用性确认
- 能够获取目标网站的源代码（HTML， CSS， JavaScript）。
- 可以使用 Playwright 或类似的 E2E 工具。
- 能够使用 E2E 工具访问并操作目标网站。
原则
- 评估结果以日语输出。
- 评估需遵循尼尔森的10项可用性原则，并对每项原则进行10分制评分。
- 关于每项原则，如果存在具体问题，必须毫无遗漏地进行报告。
评估流程
评估按以下步骤分阶段执行。
- 创建网站结构/屏幕转换图
- 使用 Playwright 等 E2E 工具操作屏幕，执行以下操作：
- 页面整体方式：掌握列表化网站的屏幕转换，创建网站结构。
- 旅程重现方式：创建为实现客户旅程所需的转换图作为屏幕转换图。
- 动态/E2E 验证（确认目标客户旅程）
- 页面整体方式：使用 Playwright 等 E2E 工具访问每个网站，对主要 UI 进行操作。
- 在操作屏幕的过程中，确认是否满足可用性原则并进行评估。
- 旅程重现方式：使用 Playwright 等 E2E 工具重现目标客户旅程。
- 在实现旅程的过程中，确认是否满足可用性原则并进行评估。
- 静态代码分析
- 加载列表或转换中的网页源代码（HTML, CSS, JavaScript），验证 DOM 结构的有效性、语义标签的使用情况、属性的有效性、WAI-ARIA 的构成等。
判断状态的定义
每项原则的评估结果必须分配以下状态之一：
- 1-10：10分最高，1分最低，10分制评分。
- 不适用：目标原则对应的功能或内容元素不存在。
输出格式
评估结果应整理为以下 Markdown 结构的 .md 文件，并输出包含目标网站整体截图（用红框标出问题位置并附问题编号）的文件。文件夹结构如下。
├ huristic-research-result-[域名].md
└ screenshots
├ screenshot-[网站URL].png
└ ...
启发式评估报告
1. 评估概要
- 评估日期时间
- （旅程重现方式时）目标旅程
- 目标 URL 列表
- 验证环境（PC/移动端）
网站结构/屏幕转换图
使用 Mermaid 语法代码块描述网站结构或屏幕转换图。
综合结果摘要
| 原则 | 评分 | 依据/评论 |
|---|---|---|
| 1. 系统状态的可见性 | 1-10 或不适用 | 填写依据/评论 |
| 2. 系统与现实世界的匹配 | 1-10 或不适用 | 填写依据/评论 |
| 3. 用户控制与自由度 | 1-10 或不适用 | 填写依据/评论 |
| 4. 一致性与标准化 | 1-10 或不适用 | 填写依据/评论 |
| 5. 错误预防 | 1-10 或不适用 | 填写依据/评论 |
| 6. 识别而非回忆 | 1-10 或不适用 | 填写依据/评论 |
| 7. 灵活性与效率 | 1-10 或不适用 | 填写依据/评论 |
| 8. 美学与极简设计 | 1-10 或不适用 | 填写依据/评论 |
| 9. 帮助用户识别、诊断和恢复错误 | 1-10 或不适用 | 填写依据/评论 |
| 10. 帮助与文档 | 1-10 或不适用 | 填写依据/评论 |
2. 问题列表与改进建议
对于具体问题，请注明相应的原则，并按以下格式报告。
Issue-XX: [问题编号，问题的简短标题]
- 相应原则：填写相应原则的名称。
- 相应位置：填写目标页面的 URL、CSS 选择器或代码位置。
- 问题位置：用简洁的语言描述（例如：主视觉下方的标题）。
- 操作内容：描述通过目视页面或什么操作导致该问题出现。
- 问题点：描述出现了什么问题。
- 受影响用户示例：描述特别受影响的用户（例如：屏幕阅读器用户、键盘操作用户、低视力用户等）。
- 解决方法：描述解决方法的方案。如果有具体的修改建议，请使用以下格式提供代码示例。
- 有问题的代码示例 (Before)：
<!-- 存在问题的实现模式 --> - 推荐的代码示例 (After)：
<!-- 解决问题的实现模式 -->
- 有问题的代码示例 (Before)：
3. 补充观察
如果在评估中有需要特别说明的事项，请在此处记录（例如：JavaScript 错误或行为异常等）。
参考资料
references/hcd-10-usability-heuristics.md- 尼尔森的用户体验10项原则（原文·英语）references/hcd-standards.md- 与 HCD 相关的 ISO 标准概要。关于可用性的定义请参考此处。references/examples_01.md- 基于输出格式的评估示例 1references/huristic-research-result-www.soumu.go.jp.md- 基于输出格式的评估示例 2（总务省网站评估结果）/references/screenshots/screenshot-https_www.soumu.go.jp.png- 基于输出格式的评估示例 2（总务省网站评估结果）/references/huristic-research-result-www.digital.go.jp.md- 基于输出格式的评估示例 3（数字厅网站评估结果）