Trung cấpHướng dẫnClaude ChatNguồn: Anthropic
Claude cho Design: Đánh giá thiết kế chuyên sâu
Nghe bài viết
00:00
Điểm nổi bật
Nhấn để đến mục tương ứng
- 1 Để áp dụng tại sao cần cấu trúc trong design critique? hiệu quả, bạn cần nắm rõ: Feedback kiểu "màu này không đẹp" hay "layout lộn xộn quá" không giúp designer cải thiện — đây là bước quan trọng giúp tối ưu quy trình làm việc với AI trong thực tế.
- 2 Điểm cần cân nhắc khi sử dụng khung đánh giá 5 chiều: Claude sử dụng framework critique gồm 5 dimension, dựa trên Nielsen's heuristics và nguyên tắc UX hiện đại: First Impression 2 giây: Mắt nhìn vào đâu đầu tiên? Mục đích trang có rõ ngay không? Usability — không phải mọi trường hợp đều phù hợp, cần đánh giá bối cảnh cụ thể trước khi áp dụng.
- 3 Dữ liệu từ prompt cho giai đoạn khác nhau cho thấy: Critique Wireframe Early Stage Đây là wireframe giai đoạn early exploration cho tính năng onboarding mới. Tôi muốn feedback về INFORMATION ARCHITECTURE và USER FLOW — chưa cần feedback về visual design. Flow onboarding gồm 7 bước: 1 — những con số này phản ánh mức độ cải thiện thực tế mà người dùng có thể kỳ vọng.
- 4 Bước thực hành then chốt trong heuristic evaluation với claude: Nielsen's 10 Usability Heuristics là framework kinh điển — Claude có thể đánh giá theo từng heuristic: Đánh giá màn hình sau theo Nielsen's 10 Usability Heuristics. Cho điểm 1-5 cho mỗi heuristic và giải thích ngắn gọn — nắm vững điều này giúp bạn triển khai nhanh hơn và giảm thiểu lỗi thường gặp.
- 5 Điểm cần cân nhắc khi sử dụng tích hợp vào quy trình design review: Gợi ý workflow thực tế cho team design 3-5 người: Self-review: Designer tự dùng Claude audit trước khi present Peer review: Designer khác trong team review + Claude critique song song Stakeholder prep — không phải mọi trường hợp đều phù hợp, cần đánh giá bối cảnh cụ thể trước khi áp dụng.
Design critique là kỹ năng thiết yếu nhưng khó thực hiện tốt: quá chủ quan sẽ thiếu constructive, quá technical sẽ bỏ qua user experience thực sự. Claude có thể đóng vai một senior UX designer với góc nhìn có cấu trúc, giúp bạn nhận feedback chất lượng cao bất kể bạn đang ở giai đoạn nào của design process.
Tại sao cần cấu trúc trong Design Critique?
Feedback kiểu "màu này không đẹp" hay "layout lộn xộn quá" không giúp designer cải thiện. Feedback tốt cần:
- Cụ thể: "CTA cạnh tranh với navigation" thay vì "layout lộn xộn"
- Có lý do: Kết nối với design principles hoặc user needs
- Đề xuất giải pháp: Không chỉ chỉ ra vấn đề
- Ghi nhận điểm tốt: Tránh feedback hoàn toàn tiêu cực
- Phù hợp giai đoạn: Wireframe cần khác feedback khác final mockup
Khung đánh giá 5 chiều
Claude sử dụng framework critique gồm 5 dimension, dựa trên Nielsen's heuristics và nguyên tắc UX hiện đại:
- First Impression (2 giây): Mắt nhìn vào đâu đầu tiên? Mục đích trang có rõ ngay không?
- Usability: Người dùng có hoàn thành mục tiêu được không? Navigation có intuitive không?
- Visual Hierarchy: Reading order có logic không? Whitespace có hiệu quả không?
- Consistency: Có tuân theo design system không? Spacing, màu sắc, typography nhất quán?
- Accessibility: Contrast, touch target size, text readability.
Prompt cơ bản: Critique một màn hình
Bạn là senior UX designer với 10 năm kinh nghiệm về sản phẩm mobile tại thị trường Đông Nam Á.
Hãy critique màn hình sau theo framework 5 chiều.
Màn hình: Trang chủ ứng dụng giao đồ ăn (tương tự ShopeeFood/Grab)
Target users: Người dùng 22-35 tuổi tại TP.HCM và Hà Nội
Giai đoạn: Visual design, chuẩn bị handoff
Mô tả layout:
- Top: Search bar full-width màu xám nhạt, icon filter bên phải
- Dưới search: Horizontal scroll categories (Cơm, Bún, Phở, Pizza, Burger, Trà sữa...) — icon + text nhỏ
- Banner promo: Carousel 3 banner màu sắc, auto-rotate 3 giây
- Section "Đề xuất cho bạn": Grid 2 cột, card nhà hàng với ảnh, tên, rating, thời gian giao
- Section "Đang hot": Horizontal scroll card món ăn
- Bottom nav: Home, Search, Orders, Account (4 tabs)
Context bổ sung:
- User research cho thấy 60% đơn hàng đến từ "cravings" (thèm gì đó cụ thể)
- Retention thấp vì user khó tìm lại nhà hàng yêu thích
- Competitor ShopeeFood vừa ra tính năng "Đặt lại" prominent
Hãy critique toàn diện và đưa ra 3 priority recommendations cụ thể.Output mẫu từ Claude
## Design Critique: Trang Chủ App Giao Đồ Ăn
### Ấn tượng đầu tiên
Search bar nổi bật đúng cách — good. Nhưng sau đó mắt bị phân tán bởi quá nhiều focal points cạnh tranh nhau: categories scroll, banner carousel, và 2 content sections. Mục đích trang không rõ — đây là discovery tool hay ordering tool?
---
### Usability
| Vấn đề | Mức độ | Khuyến nghị |
|--------|--------|-------------|
| Không có "Recent orders" hay "Favorites" visible — user phải navigate nhiều bước để re-order | Critical | Thêm "Đặt lại" section ngay dưới search, hiển thị 2-3 đơn gần nhất |
| Banner auto-rotate 3 giây quá nhanh — user không đọc kịp nội dung promo | Moderate | Tăng lên 5-6 giây hoặc pause khi user scroll |
| Categories horizontal scroll không indicate có thể scroll — user có thể miss nhiều categories | Moderate | Thêm fade gradient bên phải để hint scrollability |
### Visual Hierarchy
- **Focal point đầu tiên:** Search bar (đúng)
- **Reading flow:** Search → Categories → Banner (bị interrupt bởi màu sắc banner) → Content
- **Vấn đề:** Banner promo chiếm quá nhiều visual weight, "át" section đề xuất — nhưng data cho thấy user ít click banner nhất
### Consistency
| Phần tử | Vấn đề | Khuyến nghị |
|---------|--------|-------------|
| Card nhà hàng (grid) vs card món ăn (horizontal scroll) khác nhau hoàn toàn | Layout inconsistency | Unify card component với 2 variants |
| Font size categories vs section headers không trong cùng type scale | Typography | Dùng type scale từ design system |
### Accessibility
- Touch target categories: Icon + text nhỏ, cần đo thực tế để confirm >= 44px
- Banner text trên ảnh: Rủi ro contrast thấp nếu ảnh sáng
### Điểm tốt
- Bottom nav 4 tabs: Clean và đủ, không overcrowded
- Grid 2 cột cho nhà hàng: Phù hợp với thumb zone trên mobile
- Search bar full-width: Accessible và prominent
---
### 3 Priority Recommendations
1. **Thêm "Đặt lại" section ngay trên màn hình** — Data nội bộ + feedback competitor cho thấy đây là feature cao nhất về re-order intent. Đặt ngay sau search bar, trước categories. Hiển thị 3 đơn gần nhất với 1-tap reorder.
2. **Giảm visual weight của banner carousel** — Thu nhỏ xuống 120px thay vì full-width prominent. User research cho thấy chỉ 8% CTR từ banner vs 67% từ search/categories. Dùng space đó cho content có conversion cao hơn.
3. **Thêm "Recently viewed" và "Favorites" accessible từ trang chủ** — Giải quyết trực tiếp vấn đề retention đã identify. Có thể implement dưới dạng horizontal scroll nhỏ ngay sau search.Prompt cho giai đoạn khác nhau
Critique Wireframe (Early Stage)
Đây là wireframe giai đoạn early exploration cho tính năng onboarding mới.
Tôi muốn feedback về INFORMATION ARCHITECTURE và USER FLOW — chưa cần feedback về visual design.
Flow onboarding gồm 7 bước:
1. Welcome screen với value proposition
2. Chọn mục tiêu sử dụng (checkboxes, multi-select)
3. Nhập thông tin cá nhân (tên, email, phone)
4. Xác thực email
5. Tạo mật khẩu
6. Chọn preferences (notifications, language)
7. Tutorial interactive (3 steps)
Target: B2B SaaS, người dùng là kế toán doanh nghiệp vừa và nhỏ tại Việt Nam
Context: User đã mua subscription qua sales team, đây là first login
Hãy đánh giá: flow logic có đúng không? Có bước nào cần remove/reorder không? Friction points ở đâu?Critique Final Design (Pre-handoff)
Design này đã qua 3 vòng iteration và chuẩn bị handoff cho dev team.
Hãy làm final QA check theo góc nhìn của:
1. Một developer React Native nhận spec này — có đủ thông tin không?
2. Một QA tester — edge cases nào có thể miss?
3. Một user lần đầu dùng app — có gì confusing không?
[Mô tả design chi tiết ở đây]
Đặc biệt chú ý:
- Empty states đã được thiết kế chưa?
- Loading states có không?
- Error states đã cover hết scenarios chưa?Heuristic Evaluation với Claude
Nielsen's 10 Usability Heuristics là framework kinh điển — Claude có thể đánh giá theo từng heuristic:
Đánh giá màn hình sau theo Nielsen's 10 Usability Heuristics.
Cho điểm 1-5 cho mỗi heuristic và giải thích ngắn gọn.
Màn hình: Dashboard quản lý đơn hàng của seller trên sàn TMDT
[Mô tả chi tiết dashboard...]
10 Heuristics cần đánh giá:
1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, recover from errors
10. Help and documentationCritique cho Mobile vs Desktop
Nhiều team Việt Nam thiết kế desktop first rồi mới mobile — Claude giúp identify các vấn đề adaptation:
Design này được thiết kế cho desktop (1440px) và cần adapt sang mobile.
Hãy review bản mobile (375px) và chỉ ra:
1. Những gì đã được adapt tốt
2. Những vấn đề phát sinh khi down-size
3. Tính năng nào nên ẩn trên mobile (progressive disclosure)
4. Touch interaction nào cần thêm so với click interaction
Desktop layout: [mô tả]
Mobile layout hiện tại: [mô tả]
Đặc biệt lưu ý context người dùng mobile tại VN:
- 70%+ dùng Android mid-range (màn hình 6-6.7 inch)
- Thường dùng 1 tay
- Kết nối mạng có thể không ổn địnhTích hợp vào quy trình Design Review
Gợi ý workflow thực tế cho team design 3-5 người:
- Self-review: Designer tự dùng Claude audit trước khi present
- Peer review: Designer khác trong team review + Claude critique song song
- Stakeholder prep: Dùng Claude để anticipate câu hỏi từ PM và engineer
- Iteration tracking: Paste previous feedback vào Claude, check xem iteration mới có address chưa
Đây là feedback từ design review lần trước:
"1. Search cần prominent hơn
2. Card layout inconsistent
3. Empty state chưa có"
Tôi đã iteration và đây là design mới: [mô tả]
Hãy verify xem 3 feedback trên đã được address chưa, và identify bất kỳ vấn đề mới nào xuất hiện.Bước tiếp theo
Design critique tốt là nền tảng cho mọi quyết định thiết kế. Sau khi master kỹ năng này, bước tiếp theo là học cách handoff design cho developer một cách chuyên nghiệp. Khám phá thêm tại bộ sưu tập Ứng dụng Claude cho Design.
Bài viết liên quan
Bai viet co huu ich khong?
Bản quyền thuộc về tác giả. Vui lòng dẫn nguồn khi chia sẻ.
