{"product_id":"claude-cho-design-danh-gia-thiết-kế-chuyen-sau","title":"Claude cho Design: Đánh giá thiết kế chuyên sâu","description":"\n\u003cp\u003eDesign 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ự. \u003cstrong\u003eClaude có thể đóng vai một senior UX designer\u003c\/strong\u003e 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.\u003c\/p\u003e\n\n\u003ch2\u003eTại sao cần cấu trúc trong Design Critique?\u003c\/h2\u003e\n\n\u003cp\u003eFeedback 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:\u003c\/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eCụ thể:\u003c\/strong\u003e \"CTA cạnh tranh với navigation\" thay vì \"layout lộn xộn\"\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eCó lý do:\u003c\/strong\u003e Kết nối với design principles hoặc user needs\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eĐề xuất giải pháp:\u003c\/strong\u003e Không chỉ chỉ ra vấn đề\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eGhi nhận điểm tốt:\u003c\/strong\u003e Tránh feedback hoàn toàn tiêu cực\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003ePhù hợp giai đoạn:\u003c\/strong\u003e Wireframe cần khác feedback khác final mockup\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch2\u003eKhung đánh giá 5 chiều\u003c\/h2\u003e\n\n\u003cp\u003eClaude 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:\u003c\/p\u003e\n\n\u003col\u003e\n  \u003cli\u003e\n\u003cstrong\u003eFirst Impression (2 giây):\u003c\/strong\u003e Mắt nhìn vào đâu đầu tiên? Mục đích trang có rõ ngay không?\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eUsability:\u003c\/strong\u003e Người dùng có hoàn thành mục tiêu được không? Navigation có intuitive không?\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eVisual Hierarchy:\u003c\/strong\u003e Reading order có logic không? Whitespace có hiệu quả không?\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eConsistency:\u003c\/strong\u003e Có tuân theo design system không? Spacing, màu sắc, typography nhất quán?\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eAccessibility:\u003c\/strong\u003e Contrast, touch target size, text readability.\u003c\/li\u003e\n\u003c\/ol\u003e\n\n\u003ch2\u003ePrompt cơ bản: Critique một màn hình\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003eBạ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 Á.\nHãy critique màn hình sau theo framework 5 chiều.\n\nMàn hình: Trang chủ ứng dụng giao đồ ăn (tương tự ShopeeFood\/Grab)\nTarget users: Người dùng 22-35 tuổi tại TP.HCM và Hà Nội\nGiai đoạn: Visual design, chuẩn bị handoff\n\nMô tả layout:\n- Top: Search bar full-width màu xám nhạt, icon filter bên phải\n- Dưới search: Horizontal scroll categories (Cơm, Bún, Phở, Pizza, Burger, Trà sữa...) — icon + text nhỏ\n- Banner promo: Carousel 3 banner màu sắc, auto-rotate 3 giây\n- Section \"Đề xuất cho bạn\": Grid 2 cột, card nhà hàng với ảnh, tên, rating, thời gian giao\n- Section \"Đang hot\": Horizontal scroll card món ăn\n- Bottom nav: Home, Search, Orders, Account (4 tabs)\n\nContext bổ sung:\n- User research cho thấy 60% đơn hàng đến từ \"cravings\" (thèm gì đó cụ thể)\n- Retention thấp vì user khó tìm lại nhà hàng yêu thích\n- Competitor ShopeeFood vừa ra tính năng \"Đặt lại\" prominent\n\nHãy critique toàn diện và đưa ra 3 priority recommendations cụ thể.\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eOutput mẫu từ Claude\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003e## Design Critique: Trang Chủ App Giao Đồ Ăn\n\n### Ấn tượng đầu tiên\nSearch 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?\n\n---\n\n### Usability\n| Vấn đề | Mức độ | Khuyến nghị |\n|--------|--------|-------------|\n| 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 |\n| 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 |\n| 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 |\n\n### Visual Hierarchy\n- **Focal point đầu tiên:** Search bar (đúng)\n- **Reading flow:** Search → Categories → Banner (bị interrupt bởi màu sắc banner) → Content\n- **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\n\n### Consistency\n| Phần tử | Vấn đề | Khuyến nghị |\n|---------|--------|-------------|\n| 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 |\n| Font size categories vs section headers không trong cùng type scale | Typography | Dùng type scale từ design system |\n\n### Accessibility\n- Touch target categories: Icon + text nhỏ, cần đo thực tế để confirm \u0026gt;= 44px\n- Banner text trên ảnh: Rủi ro contrast thấp nếu ảnh sáng\n\n### Điểm tốt\n- Bottom nav 4 tabs: Clean và đủ, không overcrowded\n- Grid 2 cột cho nhà hàng: Phù hợp với thumb zone trên mobile\n- Search bar full-width: Accessible và prominent\n\n---\n\n### 3 Priority Recommendations\n\n1. **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.\n\n2. **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.\n\n3. **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.\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003ePrompt cho giai đoạn khác nhau\u003c\/h2\u003e\n\n\u003ch3\u003eCritique Wireframe (Early Stage)\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003eĐây là wireframe giai đoạn early exploration cho tính năng onboarding mới.\nTôi muốn feedback về INFORMATION ARCHITECTURE và USER FLOW — chưa cần feedback về visual design.\n\nFlow onboarding gồm 7 bước:\n1. Welcome screen với value proposition\n2. Chọn mục tiêu sử dụng (checkboxes, multi-select)\n3. Nhập thông tin cá nhân (tên, email, phone)\n4. Xác thực email\n5. Tạo mật khẩu\n6. Chọn preferences (notifications, language)\n7. Tutorial interactive (3 steps)\n\nTarget: B2B SaaS, người dùng là kế toán doanh nghiệp vừa và nhỏ tại Việt Nam\nContext: User đã mua subscription qua sales team, đây là first login\n\nHãy đánh giá: flow logic có đúng không? Có bước nào cần remove\/reorder không? Friction points ở đâu?\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eCritique Final Design (Pre-handoff)\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003eDesign này đã qua 3 vòng iteration và chuẩn bị handoff cho dev team.\nHãy làm final QA check theo góc nhìn của:\n1. Một developer React Native nhận spec này — có đủ thông tin không?\n2. Một QA tester — edge cases nào có thể miss?\n3. Một user lần đầu dùng app — có gì confusing không?\n\n[Mô tả design chi tiết ở đây]\n\nĐặc biệt chú ý:\n- Empty states đã được thiết kế chưa?\n- Loading states có không?\n- Error states đã cover hết scenarios chưa?\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eHeuristic Evaluation với Claude\u003c\/h2\u003e\n\n\u003cp\u003eNielsen's 10 Usability Heuristics là framework kinh điển — Claude có thể đánh giá theo từng heuristic:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eĐánh giá màn hình sau theo Nielsen's 10 Usability Heuristics.\nCho điểm 1-5 cho mỗi heuristic và giải thích ngắn gọn.\n\nMàn hình: Dashboard quản lý đơn hàng của seller trên sàn TMDT\n[Mô tả chi tiết dashboard...]\n\n10 Heuristics cần đánh giá:\n1. Visibility of system status\n2. Match between system and real world\n3. User control and freedom\n4. Consistency and standards\n5. Error prevention\n6. Recognition rather than recall\n7. Flexibility and efficiency of use\n8. Aesthetic and minimalist design\n9. Help users recognize, diagnose, recover from errors\n10. Help and documentation\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eCritique cho Mobile vs Desktop\u003c\/h2\u003e\n\n\u003cp\u003eNhiều team Việt Nam thiết kế desktop first rồi mới mobile — Claude giúp identify các vấn đề adaptation:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eDesign này được thiết kế cho desktop (1440px) và cần adapt sang mobile.\nHãy review bản mobile (375px) và chỉ ra:\n\n1. Những gì đã được adapt tốt\n2. Những vấn đề phát sinh khi down-size\n3. Tính năng nào nên ẩn trên mobile (progressive disclosure)\n4. Touch interaction nào cần thêm so với click interaction\n\nDesktop layout: [mô tả]\nMobile layout hiện tại: [mô tả]\n\nĐặc biệt lưu ý context người dùng mobile tại VN:\n- 70%+ dùng Android mid-range (màn hình 6-6.7 inch)\n- Thường dùng 1 tay\n- Kết nối mạng có thể không ổn định\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTích hợp vào quy trình Design Review\u003c\/h2\u003e\n\n\u003cp\u003eGợi ý workflow thực tế cho team design 3-5 người:\u003c\/p\u003e\n\n\u003col\u003e\n  \u003cli\u003e\n\u003cstrong\u003eSelf-review:\u003c\/strong\u003e Designer tự dùng Claude audit trước khi present\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003ePeer review:\u003c\/strong\u003e Designer khác trong team review + Claude critique song song\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eStakeholder prep:\u003c\/strong\u003e Dùng Claude để anticipate câu hỏi từ PM và engineer\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eIteration tracking:\u003c\/strong\u003e Paste previous feedback vào Claude, check xem iteration mới có address chưa\u003c\/li\u003e\n\u003c\/ol\u003e\n\n\u003cpre\u003e\u003ccode\u003eĐây là feedback từ design review lần trước:\n\"1. Search cần prominent hơn\n2. Card layout inconsistent\n3. Empty state chưa có\"\n\nTôi đã iteration và đây là design mới: [mô tả]\n\nHã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.\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eBước tiếp theo\u003c\/h2\u003e\n\n\u003cp\u003eDesign 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 \u003cstrong\u003ehandoff design cho developer\u003c\/strong\u003e một cách chuyên nghiệp. Khám phá thêm tại \u003ca href=\"\/en\/collections\/ung-dung\"\u003ebộ sưu tập Ứng dụng Claude cho Design\u003c\/a\u003e.\u003c\/p\u003e\n\n\n\u003chr\u003e\n\u003ch3\u003eBài viết liên quan\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-design-ux-copywriting-hi%E1%BB%87u-qu%E1%BA%A3\"\u003eClaude cho Design: UX Copywriting hiệu quả\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-design-xay-d%E1%BB%B1ng-design-system\"\u003eClaude cho Design: Xây dựng Design System\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-design-accessibility-review-t%E1%BB%B1-d%E1%BB%99ng\"\u003eClaude cho Design: Accessibility Review tự động\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-engineering-standup-va-bao-cao-ti%E1%BA%BFn-d%E1%BB%99\"\u003eClaude cho Engineering: Standup và báo cáo tiến độ\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-marketing-seo-audit-chuyen-sau\"\u003eClaude cho Marketing: SEO Audit chuyên sâu\u003c\/a\u003e\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"Minh Tuấn","offers":[{"title":"Default Title","offer_id":47722092101844,"sku":null,"price":0.0,"currency_code":"VND","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0821\/0264\/9044\/files\/claude-cho-design-danh-gia-thi_t-k_-chuyen-sau_9765278c-d571-4722-aff8-b2d82b1e11f0.jpg?v=1774521977","url":"https:\/\/claude.vn\/en\/products\/claude-cho-design-danh-gia-thi%e1%ba%bft-k%e1%ba%bf-chuyen-sau","provider":"CLAUDE.VN","version":"1.0","type":"link"}