📚 Bổ trợ Tutorial là phần thực hành bổ trợ cho bài học chính.
← Quay lại Tutorial Hub
🎨 Designer basic v1.0 Cập nhật: 2026-03-06

Agent phân tích UX Flow

Dùng AI Agent để critique UX flow, phát hiện dead-ends, missing states, và usability issues trong flow design.

1

Vấn đề

Designer thường miss edge cases trong UX flow: empty states, error states, loading states, và dead-end paths. Review thủ công dễ bỏ sót, đặc biệt với flow phức tạp nhiều branching.

2

Kết quả mong đợi

Báo cáo critique chi tiết: danh sách screens có vấn đề, missing states map, dead-end paths, và recommendations cụ thể. Kèm priority ranking (P0/P1/P2).

3

Yêu cầu trước khi bắt đầu

  • ☐ UX flow diagram (Figma, FigJam, hoặc text description)
  • ☐ User personas và user stories
  • ☐ AI tool hỗ trợ image analysis (GPT-4V, Claude) hoặc text description
4

Prompt Pack

System Prompt

You are a Senior UX Designer with 10+ years experience. You critique UX flows using Nielsen's Usability Heuristics. You always check: visibility of system status, error prevention, user control, consistency, and recognition over recall. You provide specific, actionable recommendations.

Task Prompt

Critique this UX flow:

[DESCRIBE OR PASTE FLOW]

Analyze for:
1. Missing screen states (empty, loading, error, success, offline)
2. Dead-end paths (no back/escape route)
3. Cognitive load issues (too many choices, unclear hierarchy)
4. Accessibility concerns (color contrast, touch targets, screen reader)
5. Edge cases (first-time user, returning user, power user)

For each issue:
- Severity: P0 (blocker) / P1 (major) / P2 (nice-to-have)
- Screenshot/step reference
- Specific recommendation

Guardrails

- Do NOT redesign the flow — only critique
- Reference specific screens/steps
- Be constructive, not just critical
- Consider mobile AND desktop
- Check consistency with platform guidelines (iOS HIG, Material Design)
✓ Đã copy!
5

Workflow từng bước

1

Describe flow

Viết text description hoặc upload screenshot từng bước của UX flow.

2

Add context

Cho agent biết: platform (web/mobile), target users, và business context.

3

Run critique

Gửi prompt và đợi phân tích.

4

Map issues to flow

Sticky-note các P0/P1 issues lên Figma flow diagram.

5

Design fixes

Sửa flow theo recommendations, chạy lại agent để verify.

6

Demo Input / Output

📥 Input

Flow: Checkout flow cho e-commerce app. Steps: Cart → Shipping Info → Payment → Confirmation. User có thể chọn COD hoặc credit card.
→

📤 Output

## UX Flow Critique

### 🔴 P0 — Blockers
1. **Missing error state ở Payment step**: Khi thẻ bị reject, user thấy gì?
   - Recommendation: Add inline error message + retry option

2. **No back button từ Confirmation**: User muốn sửa shipping info phải làm sao?
   - Recommendation: Add 'Edit' links cho mỗi section trên Confirmation page

### 🟡 P1 — Major
3. **Empty cart state missing**: Nếu user access checkout với cart rỗng?
   - Recommendation: Redirect về shop + 'Your cart is empty' message

4. **No loading indicator khi process payment**
   - Recommendation: Add spinner + 'Processing...' + disable submit button
7

Failure Cases & Cách Fix

⚠️ Critique quá chung chung
💡 Mô tả flow chi tiết hơn, include user actions ở mỗi step.
⚠️ Agent suggest redesign thay vì critique
💡 Enforce guardrail: 'Do NOT redesign. Only identify issues and suggest fixes.'
⚠️ Miss mobile-specific issues
💡 Thêm: 'Also consider: thumb zones, portrait/landscape, one-handed use.'
8

Production Checklist

  • ☐ Tất cả screens có 5 states: empty, loading, error, success, offline
  • ☐ Không có dead-end path
  • ☐ Back/escape route ở mọi step
  • ☐ Error messages rõ ràng, actionable
  • ☐ Touch targets ≥ 44pt
  • ☐ Color contrast ratio ≥ 4.5:1
  • ☐ Flow tested với 3 personas
✓ Đã copy!
9

Metrics theo dõi hiệu quả

Metric Target Cách đo
Issues found pre-dev > 15 issues / flow Count critique items per analysis
P0 escape rate 0 P0 found post-dev Track P0 UX issues found in QA
Reviewer satisfaction > 4/5 useful rating Quick poll sau mỗi critique session
10

Supporting Skill: Wireframe

🔬 Chuyên sâu
### Wireframe cho Designer (mức chuyên sâu)

Designer sử dụng wireframe không chỉ để check flow mà còn để phân tích sâu:

#### 1. Layout Analysis
- **Visual hierarchy**: H1 → H2 → Body text → Caption rõ ràng?
- **White space**: Đủ breathing room giữa các sections?
- **Grid alignment**: Tất cả elements align theo grid system?

#### 2. Interaction Mapping
- **Clickable areas**: Mọi interactive element có visual affordance?
- **Hover/Focus states**: Có feedback cho mỗi interaction?
- **Transition flows**: Chuyển trang smooth? Có loading skeleton?

#### 3. State Completeness Matrix
| Screen | Empty | Loading | Error | Success | Offline |
|--------|-------|---------|-------|---------|--------|
| Cart | ✅ | ✅ | ❌ | ✅ | ❌ |

#### 4. Usability Heuristics Check
- **Visibility of system status**: User luôn biết mình đang ở đâu?
- **Error prevention**: Có confirm dialog cho destructive actions?
- **Consistency**: Cùng action = cùng pattern across screens?
- **Recognition over recall**: Labels rõ ràng, không cần nhớ?

> Prompts:
> - 'Analyze this wireframe for visual hierarchy issues'
> - 'Create a state completeness matrix for all screens'
> - 'Check this wireframe against Nielsen's 10 heuristics'