UX Handbook — Wiki
Hệ tài liệu UX dùng cho team Atomic + AI Agent. Mục tiêu: bất kỳ ai (kể cả người chưa học UX) đều có thể nhìn 1 web/app và trả lời được — Tốt chưa? Sai ở đâu? Vì sao sai? Sửa thế nào? Ship được không?
Đây là wiki overview — mỗi link đi tới 1 file con. Nếu bạn cần làm việc ngay, mở AI Agents.
🚀 Bắt đầu
| Cách | Mở | Thời gian |
|---|---|---|
| Để AI agent review giúp (Claude Code / Cursor / Codex) | AI Agents | 10-15 phút |
| Tự làm review bằng tay | Start Here — 6 bước cho người | ~60 phút |
| Tra thuật ngữ UX | Glossary — tiếng Việt lớp 3 | tra theo nhu cầu |
🧭 Pipeline UX review
[1] Setup — flow + archetype + platform + persona
↓
[2] Nielsen — 10 baseline H1-H10 (must-pass)
↓
[3] Gates — 4-6 cổng context-specific G1-G14
↓
[4] Severity — gán S0-S3 cho từng violation
↓
[5] Release — Ship / Ship with Exception / No Ship
↓
[6] (optional) Xuất ticket cho Linear/Notion
Pipeline này được encode trong AI Agents — copy 5 prompt theo thứ tự là xong, không cần nhớ.
📚 Knowledge — tài liệu AI đọc khi review
Frameworks — thước đo gốc
| File | Nội dung |
|---|---|
| Nielsen Heuristics | 10 baseline H1-H10 (must-pass cho mọi sản phẩm) |
| Quality Gates | 14 cổng G1-G14 context-specific |
| Severity & Release | S0-S3 + luật Ship/No Ship |
| Review Layers | Strategy/Scope/Structure/Skeleton/Surface — chọn tầng review |
Practice — áp dụng vào review
| File | Nội dung |
|---|---|
| Pre-Ship Checklist | Checklist tick trên staging/device thật trước merge |
| Measurement | Metric/method chuẩn (TTV, CES, Web Vitals, SUS, HEART) |
| Pattern Picker | Pattern theo archetype/persona/platform |
| Advanced Patterns | Pattern nâng cao tăng UX |
Examples — schema + 3 case end-to-end
| File | Nội dung |
|---|---|
| Output Schema | Format chuẩn cho AI agent xuất review |
| Example — Signup B2B Tool (mobile) | Onboarding HR low-tech |
| Example — Booking flow (mobile) | Commerce + trust + payment |
| Example — Dashboard tạo đơn (web-desktop) | Tool + power user |
🗂 References — bảng tra
Archetypes — 9 loại sản phẩm
Hướng dẫn detect archetype (decision tree + 7 câu hỏi).
| Archetype | Khi nào | App mẫu |
|---|---|---|
| Tool / Productivity | User làm việc nhanh, chính xác | Linear, Notion, Figma |
| Commerce / Transaction | Mua bán, trả tiền, booking | Shopee, Airbnb, Stripe |
| AI Copilot | AI làm việc thay user | ChatGPT, Cursor |
| Content / Discovery | Xem, nghe, đọc nội dung | YouTube, Spotify |
| Communication / Collab | Nhắn, họp, làm việc cùng | Slack, Zoom |
| Utility / Instant | Mở ra lấy kết quả ngay | Google Search, Maps |
| Habit / Engagement | User quay lại mỗi ngày | TikTok, Duolingo |
| Calm / Wellness | Sức khỏe, an yên | Headspace, Calm |
| Game / Play | Chơi, thử thách, phần thưởng | Wordle, mobile game |
Platforms — 5 thiết bị / hệ điều hành
Hướng dẫn 3 trục Archetype × Device × Platform.
| Platform | Đặc thù |
|---|---|
| Web Desktop | Chuột + bàn phím, viewport rộng, hover/shortcut |
| Web Mobile | Touch, viewport hẹp, không có app store |
| iOS Native | HIG, gesture, haptic, Live Activity |
| Android Native | Material, predictive back, intent |
| Tablet | Hybrid touch + keyboard, multi-pane |
Cards — Principle, Pattern, Anti-pattern
20 Principles (niềm tin gốc), 15 Patterns (mẫu thiết kế), 10 Anti-patterns (cấm dùng). Mỗi card có severity_default, gate, archetype phù hợp.
📖 Principles — 20 nguyên tắc UX
🧩 Patterns — 15 mẫu thiết kế nên dùng
⛔ Anti-patterns — 10 lỗi cấm
Case Studies — 30 app thật
Mỗi case study là 1 mechanism UX cụ thể đáng học (không copy bề mặt).
🌐 Tier 1 — Global (20 app)
🇻🇳 Tier 2 — Local (Vietnam + SEA, 10 app)
Persona Builder
Persona Builder overview — quy trình 6 bước từ spec → 3 persona.
| File | Dùng để |
|---|---|
| 12 Golden Questions | 12 câu vàng để build persona đúng |
| 10 Pattern Questions | 10 câu chốt pattern UX cho persona |
| Example — HR Ops Manager | B2B SaaS, low-tech |
| Example — Senior Dev Power User | Tool, expert |
| Example — Mobile Consumer Shopper | Commerce, mass market |
Tài liệu khác
| File | Dùng để |
|---|---|
| Benchmarks | 7 UX mechanisms học từ app top |
| Research — UX Deep Dive | Source of truth dài, 12 phần |
⚖️ Quy tắc nội bộ
- Mỗi violation phải có Gate ID (G1-G14) hoặc Nielsen ID (H1-H10).
- Severity quyết bởi Severity & Release, không theo cảm giác.
- Không ship nếu có S0 trong primary flow.
- Không dùng điểm trung bình để che blocker.
- Tone tài liệu: học sinh lớp 3-5 đọc hiểu được.
- Không bịa nguồn; chỉ link URL đã verify.
📊 Thống kê handbook
- 2 entry point (AI Agents + Start Here)
- 1 glossary
- 12 file knowledge (4 frameworks + 4 practice + 4 examples)
- 9 archetype
- 5 platform
- 20 principle, 15 pattern, 10 anti-pattern
- 30 case study (20 global + 10 local SEA/VN)
- 5 persona builder file (incl. 3 example)
- 1 benchmark, 1 research deep-dive