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、箭、Esc：
## 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、VoiceOver、TalkBack 測：
## 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
得：要流繪、摩擦點識別評級。
敗：無分析→按複雜與步數評。
得：認負察、過載/不足區明。
敗：難客評→「眯測」（眯眼察結構顯否）。
各表：
autocomplete 設得：每表察、具體問題錄。
敗：表多→重高量者（註冊、結算、聯）。
## UX/UI Review Report
### Executive Summary
[2-3 sentences]
### Top 5 Improvements (Prioritised)
1. **[Issue]** — Severity: [N] — [Specific recommendation]
得：察給優先可行建、附重級。
敗：問題過多→分「必修」（3-4）「宜修」（1-2）。
review-web-designscaffold-nextjs-appsetup-tailwind-typescript