ux-heuristic

asgard-ai-platform ｜ 設計與前端 ｜ 原文 ｜ MIT

用 Nielsen 十大原則做啟發式評估，找出易用性問題並評嚴重度

---
name: "ux-heuristic"
description: "用 Nielsen 的 10 大易用性原則，對使用者介面做啟發式評估。當使用者需要稽核網站、app 或介面的易用性問題、替 UX 改善排優先順序，或不做使用者測試就快速做專家評審時使用這個 skill，就算他們說的是「幫我看這個 UI」、「找出易用性問題」或「為什麼使用者在我們的 app 上卡關」也一樣。"
metadata:
  category: "WP-21 設計/資訊/傳播/公衛"
  tags: ["ux", "heuristic-evaluation", "usability", "nielsen"]
---

# 啟發式評估（Nielsen 的 10 大原則）

## 概述

啟發式評估是一種專家評審方法，用既有的易用性原則來評估使用者介面。它很快（2-4 小時）、很便宜（不用招募使用者），而且能找出 40-60% 的易用性問題。把它當成使用者測試的補充，不是取代。

## 框架

```
IRON LAW: Every Violation Gets a Severity Rating
（鐵律：每個違反都要有嚴重度評分）

找到違反只完成一半的工作，評估它的嚴重度是另一半。
外觀上的不一致和會卡死關鍵流程的問題，雖然都是「違反」，
但需要完全不同的處理急迫性。

0 = 不是易用性問題
1 = 僅外觀問題，有時間再修
2 = 輕微，低優先
3 = 重大，很重要必須修，高優先
4 = 災難，上線前必須修
```

### Nielsen 的 10 大啟發法

| # | 啟發法 | 要問的問題 |
|---|-----------|----------------|
| 1 | **系統狀態的可見性** | 使用者是否隨時知道正在發生什麼？（載入指示、進度條、確認訊息） |
| 2 | **系統與真實世界相符** | 是否使用使用者的語言，而不是系統術語？慣例是否熟悉？ |
| 3 | **使用者控制與自由** | 使用者能復原、重做、返回、取消嗎？有沒有緊急出口？ |
| 4 | **一致性與標準** | 相同的操作/用字是否一致？是否遵循平台慣例？ |
| 5 | **錯誤預防** | 設計是否在錯誤發生前就預防它？（確認、限制、預設值） |
| 6 | **識別優於回憶** | 選項是否看得到？使用者能「認出」而不用「記住」嗎？ |
| 7 | **使用的彈性與效率** | 專家有捷徑嗎？使用者能客製常用操作嗎？ |
| 8 | **美觀與極簡設計** | 每個元素都必要嗎？多餘的資訊有沒有和相關資訊競爭？ |
| 9 | **協助使用者辨識、診斷並從錯誤中復原** | 錯誤訊息有幫助嗎？有說明哪裡出錯、怎麼修嗎？ |
| 10 | **說明與文件** | 有提供說明嗎？可搜尋、以任務為導向且簡潔嗎？ |

### 評估流程

1. **定義範圍**：要評估哪些畫面/流程
2. 用不同的使用者任務，把介面**走過** 2-3 遍
3. **標記違反**：記下每個違反的啟發法編號、位置、描述
4. **評嚴重度**：每個違反用 0-4 分
5. **排優先順序**：先修嚴重度 4 和 3
6. **報告**：依嚴重度整理發現，不是依啟發法編號

## 輸出格式

```markdown
# Heuristic Evaluation: {Product/Feature}

## Summary
- Total violations found: {N}
- Severity 4 (catastrophe): {N}
- Severity 3 (major): {N}
- Severity 2 (minor): {N}
- Severity 1 (cosmetic): {N}

## Critical Issues (Severity 3-4)
| # | Location | Heuristic | Issue | Severity | Recommendation |
|---|----------|-----------|-------|----------|---------------|
| 1 | {screen/element} | {#N: name} | {description} | 3/4 | {fix} |

## Other Issues (Severity 1-2)
| # | Location | Heuristic | Issue | Severity |
|---|----------|-----------|-------|----------|
| ... | ... | ... | ... | ... |
```

## 範例

### 正確的應用
**情境：** 評估外送 app 的結帳流程

| 位置 | 啟發法 | 問題 | 嚴重度 |
|----------|-----------|-------|----------|
| 購物車頁 | #1 可見性 | 加入商品時沒有載入指示，使用者會連點好幾次 | 3 |
| 付款 | #5 錯誤預防 | 下單前沒有確認，會發生誤下單 | 4 |
| 錯誤畫面 | #9 錯誤復原 | 只有「Error 500」，沒有說明也沒有重試按鈕 | 4 |
| 地址表單 | #6 識別 | 使用者必須輸入完整地址，而不是從已儲存的地址選取 | 2 |

優先順序：立刻修 #5 和 #9（嚴重度 4） ✓

### 錯誤的應用
- 「這個 app 看起來很醜」 → 這不是啟發法違反。「美觀與極簡設計」（#8）講的是資訊層級，不是視覺吸引力。具體的違反應該是：「商品頁同時顯示 15 個資料欄位，把價格和『加入購物車』按鈕淹沒了。」

## 常見陷阱

- **3-5 位評估者能找出 75% 的問題**：一位評估者大約只找到 35%。超過 5 位之後效益遞減。可以的話，讓多位評估者獨立作業，再合併發現。
- **啟發式評估找出問題，不是解法**：它告訴你哪裡有問題，沒告訴你怎麼修。解法設計是另一個步驟。
- **不能取代使用者測試**：專家對使用者行為的預測並不完美。有些專家標記的「違反」其實不會困擾真實使用者，也有些真正的問題專家會漏掉。
- **行動版 vs 桌面版**：每個平台要分開套用啟發法。觸控目標、螢幕空間和互動模式差異很大。
- **無障礙不是啟發法**：Nielsen 的 10 大原則沒有明確涵蓋無障礙（色彩對比、螢幕閱讀器支援、鍵盤導覽）。要另外加上 WCAG 檢查。

## 參考資料

- WCAG 無障礙檢查表，見 `references/wcag-checklist.md`

---
name: "ux-heuristic"
description: "Conduct heuristic evaluation of user interfaces using Nielsen's 10 usability principles. Use this skill when the user needs to audit a website, app, or interface for usability issues, prioritize UX improvements, or conduct a quick expert review without user testing — even if they say 'review this UI', 'find usability problems', or 'why do users struggle with our app'."
metadata:
  category: "WP-21 設計/資訊/傳播/公衛"
  tags: ["ux", "heuristic-evaluation", "usability", "nielsen"]
---

# Heuristic Evaluation (Nielsen's 10 Principles)

## Overview

Heuristic evaluation is an expert review method that assesses a user interface against established usability principles. It's fast (2-4 hours), cheap (no user recruitment), and finds 40-60% of usability issues. Use it as a complement to, not replacement for, user testing.

## Framework

```
IRON LAW: Every Violation Gets a Severity Rating

Finding a violation is half the work. Rating its severity is the other half.
A cosmetic inconsistency and a critical workflow blocker are both "violations"
but require completely different response urgency.

0 = Not a usability problem
1 = Cosmetic only — fix if time permits
2 = Minor — low priority
3 = Major — important to fix, high priority
4 = Catastrophe — must fix before release
```

### Nielsen's 10 Heuristics

| # | Heuristic | Question to Ask |
|---|-----------|----------------|
| 1 | **Visibility of system status** | Does the user always know what's happening? (loading indicators, progress bars, confirmations) |
| 2 | **Match between system and real world** | Does it use the user's language, not system jargon? Are conventions familiar? |
| 3 | **User control and freedom** | Can users undo, redo, go back, cancel? Is there an emergency exit? |
| 4 | **Consistency and standards** | Are the same actions/words used consistently? Does it follow platform conventions? |
| 5 | **Error prevention** | Does the design prevent errors before they happen? (confirmations, constraints, defaults) |
| 6 | **Recognition rather than recall** | Are options visible? Can users recognize rather than remember? |
| 7 | **Flexibility and efficiency of use** | Are there shortcuts for experts? Can users customize frequent actions? |
| 8 | **Aesthetic and minimalist design** | Is every element necessary? Does extra information compete with relevant info? |
| 9 | **Help users recognize, diagnose, and recover from errors** | Are error messages helpful? Do they explain what went wrong and how to fix it? |
| 10 | **Help and documentation** | Is help available? Is it searchable, task-oriented, and concise? |

### Evaluation Process

1. **Define scope**: Which screens/flows to evaluate
2. **Walk through** the interface 2-3 times with different user tasks
3. **Flag violations**: Note each violation with heuristic #, location, description
4. **Rate severity**: 0-4 scale for each violation
5. **Prioritize**: Fix severity 4 and 3 first
6. **Report**: Organize findings by severity, not by heuristic number

## Output Format

```markdown
# Heuristic Evaluation: {Product/Feature}

## Summary
- Total violations found: {N}
- Severity 4 (catastrophe): {N}
- Severity 3 (major): {N}
- Severity 2 (minor): {N}
- Severity 1 (cosmetic): {N}

## Critical Issues (Severity 3-4)
| # | Location | Heuristic | Issue | Severity | Recommendation |
|---|----------|-----------|-------|----------|---------------|
| 1 | {screen/element} | {#N: name} | {description} | 3/4 | {fix} |

## Other Issues (Severity 1-2)
| # | Location | Heuristic | Issue | Severity |
|---|----------|-----------|-------|----------|
| ... | ... | ... | ... | ... |
```

## Examples

### Correct Application
**Scenario:** Evaluating a food delivery app checkout flow

| Location | Heuristic | Issue | Severity |
|----------|-----------|-------|----------|
| Cart page | #1 Visibility | No loading indicator when adding items — user taps multiple times | 3 |
| Payment | #5 Error prevention | No confirmation before placing order — accidental orders happen | 4 |
| Error screen | #9 Error recovery | "Error 500" with no explanation or retry button | 4 |
| Address form | #6 Recognition | User must type full address instead of selecting from saved addresses | 2 |

Priority: Fix #5 and #9 immediately (severity 4) ✓

### Incorrect Application
- "The app looks ugly" → Not a heuristic violation. "Aesthetic and minimalist design" (#8) is about information hierarchy, not visual attractiveness. A specific violation would be: "Product page shows 15 data fields simultaneously, burying the price and 'Add to Cart' button."

## Gotchas

- **3-5 evaluators find 75% of issues**: One evaluator finds ~35%. Diminishing returns after 5. If possible, have multiple evaluators work independently then merge findings.
- **Heuristic evaluation finds problems, not solutions**: It tells you what's wrong, not how to fix it. Solution design is a separate step.
- **Not a substitute for user testing**: Experts predict user behavior imperfectly. Some "violations" that experts flag don't bother real users, and some real problems experts miss.
- **Mobile vs desktop**: Apply heuristics separately for each platform. Touch targets, screen real estate, and interaction patterns differ significantly.
- **Accessibility is not a heuristic**: Nielsen's 10 don't explicitly cover accessibility (color contrast, screen reader support, keyboard navigation). Add WCAG checks separately.

## References

- For WCAG accessibility checklist, see `references/wcag-checklist.md`