Skills UX 啟發式研究技能
基於以人為中心設計的啟發式評估，並將結果輸出為報告。
前提條件
在進行啟發式評估前，應從指示的提示詞中確認以下條件。若無法確認，請適時提問。若在無法確認或未滿足條件的環境下進行評估，請事先通知評估結果可能不盡完整。
確認評估對象
- 評估可選擇以下兩種模式之一：
- 頁面整體模式：全面評估指定網站的所有頁面。
- 旅程重現模式：評估實現指定客戶旅程時的體驗。
- 必須明確評估對象（頁面整體模式需提供網站列表，旅程重現模式需提供旅程的起點網址）。
- 若為旅程重現模式，必須明確說明目標客戶旅程的概要（例如：查詢某項資訊、進行聯絡等）。
確認目標環境
- 必須明確目標使用者所使用的環境（PC / 行動裝置）。
確認調查方法的可用性
- 必須能夠取得目標網站的原始碼 (HTML, CSS, JavaScript)。
- 必須能夠使用 Playwright 或等效的 E2E 工具。
- 必須能夠使用 E2E 工具存取目標網站並進行操作。
原則
- 評估結果必須以繁體中文輸出。
- 評估應遵循 Nielsen 的 10 項可用性原則，並針對每項原則給予 1 到 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-[網站網址].png
└ ...
啟發式評估報告
1. 評估概要
- 評估日期時間
- （旅程重現模式時）目標旅程
- 目標網址列表
- 驗證環境 (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- Nielsen 的 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（數位廳網站的評估結果）