review-ux-uiReview user experience and interface design using Nielsen's heuristics, WCAG 2.1 accessibility guidelines, keyboard and screen reader audit, user flow analysis, cognitive load assessment, and form usability evaluation. Use when conducting a usability review before release, assessing WCAG 2.1 accessibility compliance, evaluating user flows for efficiency, re…
Independent GitHub snapshot · Automated classification · Original documentation governs
評估用戶體驗與介面設計之可用性、可及性與成效。
依各啟發式評估介面：
| # | 啟發式 | 關鍵問題 | 評分 |
|---|---|---|---|
| 1 | 系統狀態之可見性 | 系統是否始終告知用戶當前發生何事？ | |
| 2 | 系統與現實世界之契合 | 系統是否使用熟悉之語言與概念？ | |
| 3 | 用戶控制與自由 | 用戶能否輕易撤銷、重做或退出非預期狀態？ | |
| 4 | 一致性與標準 | 相似元素是否始終以相同方式運作？ | |
| 5 | 錯誤防範 | 設計是否在錯誤發生前加以防範？ | |
| 6 | 識別重於回憶 | 選項、動作與資訊是否可見或易於擷取？ | |
| 7 | 使用之靈活性與效率 | 是否為熟手提供捷徑而不致困擾新手？ | |
| 8 | 美學與極簡設計 | 各元素是否皆有用途？是否有不必要之雜亂？ | |
| 9 | 協助用戶識別、診斷並從錯誤中恢復 | 錯誤訊息是否清晰、具體、有建設性？ | |
| 10 | 協助與文件 | 需要時協助是否可用且易於尋找？ |
對各啟發式違反之嚴重度評級：
| 嚴重度 | 描述 |
|---|---|
| 0 | 非可用性問題 |
| 1 | 表面 — 有時間時修正 |
| 2 | 輕微 — 低優先級修正 |
| 3 | 重大 — 應修正，高優先級 |
| 4 | 災難 — 發佈前必修 |
## Heuristic Evaluation Findings
| # | Heuristic | Severity | Finding | Location |
|---|-----------|----------|---------|----------|
| 1 | System status | 3 | No loading indicator during data fetch — users click repeatedly | Dashboard page |
| 3 | User control | 2 | No undo for item deletion — only a confirmation dialog | Item list |
| 5 | Error prevention | 3 | Date field accepts invalid dates (Feb 30) | Booking form |
| 9 | Error recovery | 4 | Form submission error clears all fields | Registration |
預期： 全部十項啟發式皆已評估，並附具體發現與嚴重度評級。 失敗時： 若時間有限，聚焦於啟發式 1、3、5、9（對用戶體驗影響最大者）。
alt=""）<html> 設置 lang 屬性預期： WCAG 2.1 AA 標準經系統化檢查，逐項通過/失敗。 失敗時： 用自動化工具（axe-core、Lighthouse）作初步掃描，再對需人類判斷之標準作手動測試。
僅用 Tab、Shift+Tab、Enter、Space、方向鍵與 Escape：
## Keyboard Navigation Audit
| Task | Completable? | Issues |
|------|-------------|--------|
| Navigate to main content | Yes — skip link works | None |
| Open dropdown menu | Yes | Arrow keys don't work within menu |
| Submit a form | Yes | Tab order skips the submit button |
| Close a modal | No | Escape doesn't close, no visible close button in tab order |
| Use date picker | No | Custom date picker not keyboard accessible |
以 NVDA（Windows）、VoiceOver（macOS/iOS）或 TalkBack（Android）測試：
## Screen Reader Audit
| Element | Announced As | Expected | Issue |
|---------|-------------|----------|-------|
| Logo link | "link, image" | "Home, link" | Missing alt text on logo |
| Search input | "edit, search" | "Search products, edit" | Missing label association |
| Nav menu | "navigation, main" | Correct | None |
| Error message | (not announced) | "Error: email is required" | Missing live region |
| Loading spinner | (not announced) | "Loading, please wait" | Missing aria-live or role="status" |
預期： 完整任務流程皆以僅鍵盤與屏幕閱讀器測試。 失敗時： 若無屏幕閱讀器可用，檢視 ARIA 屬性與語義化 HTML 作代理。
繪製並評估關鍵用戶流程：
## User Flow: Complete a Purchase
### Steps
1. Browse products → 2. View product → 3. Add to cart → 4. View cart →
5. Enter shipping → 6. Enter payment → 7. Review order → 8. Confirm
### Assessment
| Step | Friction | Severity | Notes |
|------|---------|----------|-------|
| 1→2 | Low | - | Clear product cards |
| 2→3 | Medium | 2 | "Add to cart" button below the fold on mobile |
| 3→4 | Low | - | Cart icon updates with count |
| 4→5 | High | 3 | Must create account — no guest checkout |
| 5→6 | Low | - | Address autocomplete works well |
| 6→7 | Medium | 2 | Card number field doesn't auto-format |
| 7→8 | Low | - | Clear order summary |
### Flow Efficiency
- **Steps**: 8 (acceptable for e-commerce)
- **Required fields**: 14 (could reduce with address autocomplete + saved payment)
- **Decision points**: 2 (size selection, shipping method)
- **Potential drop-off points**: Step 4→5 (forced account creation)
預期： 關鍵用戶流程已繪製，摩擦點已識別並評級。 失敗時： 若無用戶分析數據，依任務複雜度與步驟數評估流程。
預期： 認知負荷已評估，並識別具體之過載或不足區域。 失敗時： 若認知負荷難以客觀評估，採「瞇眼測試」——瞇眼觀屏，看結構與層級是否仍清晰。
對應用中各表單：
autocomplete 屬性（name、email、address、cc-number）預期： 各表單依清單評估，具體問題已記錄。 失敗時： 若表單眾多，優先處理流量最高者（註冊、結帳、聯絡）。
## UX/UI Review Report
### Executive Summary
[2-3 sentences: overall usability, most critical issues, strongest aspects]
### Heuristic Evaluation Summary
| Heuristic | Severity | Key Finding |
|-----------|----------|-------------|
[Summary table from Step 1]
### Accessibility Compliance
- **Target**: WCAG 2.1 AA
- **Status**: [X of Y criteria pass]
- **Critical failures**: [List]
### User Flow Analysis
[Key friction points with severity and recommendations]
### Top 5 Improvements (Prioritised)
1. **[Issue]** — Severity: [N] — [Specific recommendation]
2. ...
### What Works Well
1. [Specific positive observation]
2. ...
預期： 審查提供按優先級排序、可執行之建議，並附嚴重度評級。 失敗時： 若審查發現問題過多，分類為「必修」（嚴重度 3-4）與「應修」（嚴重度 1-2）。
review-web-design — 視覺設計審查（佈局、字體、顏色——與 UX 互補）scaffold-nextjs-app — Next.js 應用腳手架setup-tailwind-typescript — Tailwind CSS 用於設計系統實作