Tôi sẽ không xem đây đơn thuần là “25 checklist”, mà nên xem nó như 6 lớp kiểm định UX.
A. Navigation & Information Architecture
Đây là lớp kiểm tra logic của sản phẩm.
1. Clear Menu Labels
Tên menu phải phù hợp với mental model của người dùng. Ví dụ:
Không tốt: Solution / Explore / Discover / Ecosystem
Nếu website B2B chỉ có:: Services / Products / About / Contact thì người dùng hiểu ngay. Câu hỏi audit:
“Nếu bỏ toàn bộ visual design, chỉ nhìn tên menu, người dùng có đoán đúng nội dung bên trong không?”
2. Breadcrumbs
Ví dụ: Home → Products → CRM → Customer Management
Đặc biệt hữu ích với: Website nhiều tầng, E-commerce, Knowledge base, SaaS, Enterprise system. Nhưng không phải sản phẩm nào cũng cần breadcrumb. Một landing page đơn giản mà cố nhét breadcrumb vào sẽ tạo noise.
Breadcrumb giúp người dùng biết: Tôi đang ở đâu?
3. Working Search
Search không chỉ là “có ô tìm kiếm”. Một search tốt cần:
– Autocomplete
– Tolerance với typo
– Suggestion
– Relevant ranking
– Empty state
– No-result recovery
– Search history nếu cần
Ví dụ người dùng gõ: microsft team, hệ thống vẫn nên hiểu: Microsoft Teams
Đây là một tiêu chí rất quan trọng với: SaaS, E-commerce, Knowledge system, Enterprise portal, Documentation
4. Logical Grouping
Các nội dung phải được nhóm theo logic của người dùng, không phải logic nội bộ của doanh nghiệp. Đây là điểm rất quan trọng. Ví dụ công ty có: Sales, Marketing, Finance, HR, IT
Nhưng người dùng có thể cần: Manage Customers, Manage Orders, Manage Employees, Manage Finance
Đó là lý do hình nhắc đến: Card Sorting + Tree Testing Đây là hai phương pháp kiểm chứng IA khá mạnh.
→ Tầng A trả lời:
“Tôi có biết mình đang ở đâu và phải đi đâu không?”
B. Visual Design & Hierarchy
Sau khi IA đúng, lớp B kiểm tra khả năng nhìn và hiểu.
5. Consistent Styling
Color, Typography, Spacing, Border radius, Icon, Button, Component
Mọi thứ phải sử dụng một hệ thống nhất quán: Đây chính là nơi Design System phát huy tác dụng.
Ví dụ: Primary button = màu xanh + 48px height + 8px radius thì không nên xuất hiện một màn khác: Primary button = màu đỏ + 40px height + 16px radius
6. Clear Hierarchy
Mắt người dùng phải biết: Cái gì quan trọng nhất?
Ví dụ:
H1
→ Supporting text
→ Primary CTA
→ Secondary information
Hierarchy được tạo bằng: Size, Weight, Contrast, Position, Spacing, Color
Một lỗi UX phổ biến là: Mọi thứ đều được thiết kế “quan trọng”.
Kết quả:
Không có gì quan trọng.
7. Non-text Contrast
Các thành phần UI không phải text cũng phải có contrast đủ tốt.
Ví dụ: Input border, Icon, Button outline, Chart, Focus indicator, Form control
Hình sử dụng mốc 3:1, phù hợp với WCAG 1.4.11 cho non-text contrast.
8. Aligned Elements
Hình đề xuất 8px grid. Đây là design-system convention rất phổ biến: 8 / 16 / 24 / 32 / 40 / 48 / 64...
Nó giúp: Layout có rhythm, Component nhất quán, Dễ scale, Dễ handoff, Dễ maintain
Nhưng cần lưu ý: 8px grid là design convention, không phải một yêu cầu UX/WCAG bắt buộc.
→ Tầng B trả lời:
“Tôi nhìn vào màn hình có biết cái gì quan trọng không?”
C. Content & Readability
Đây là phần nhiều designer bỏ qua. UX không chỉ là UI. Content cũng là interface.
9. Readable Body Text
Hình đưa ra: 16px base và khả năng zoom đến 200%.
Điểm cần chỉnh: WCAG 1.4.4 là yêu cầu về Resize Text, không quy định rằng body text bắt buộc phải 16px. 16px nên được xem là practical design baseline, không phải “WCAG bắt buộc”.
10. Plain Language
Nội dung phải dễ hiểu. Ví dụ: Thay vì: “Authentication credentials failed to validate.” Có thể viết: “Email hoặc mật khẩu không đúng.” Đặc biệt quan trọng với: Government, Healthcare, Finance, Enterprise software, AI products
11. Descriptive Headings
Heading phải giúp người dùng scan nội dung.
Ví dụ tốt: How to create a new project thay vì: Information
Và cấu trúc nên hợp lý: H1 → H2 → H3. Không nên: H1 → H4 → H2
12. Scannable Copy
Người dùng web thường scan trước, đọc sau.
Vì vậy: Paragraph ngắn, Bullet, Heading, Bold keyword, Information upfront, tốt hơn những block text dài.
→ Tầng C trả lời:
“Tôi có hiểu nội dung này nhanh không?”
D. Forms & Interactions
Đây là nơi UX bắt đầu ảnh hưởng trực tiếp đến conversion và task completion.
13. Persistent Labels
Không nên dùng placeholder thay cho label.
Không tốt: [ Enter email... ]. Sau khi người dùng nhập: [ abc@gmail.com ]. Họ có thể quên field này là gì.
Tốt: Email address [ abc@gmail.com ]. Placeholder chỉ nên dùng để cung cấp example/hint.
14. Inline Validation
Đừng đợi người dùng bấm Submit mới nói: “Email không hợp lệ.”
Nên báo ngay khi có thể: Email address [abc@] – ⚠ Please enter a valid email address. Điều này giảm cognitive load và giảm frustration.
15. Actionable Errors
Error message phải trả lời: Có vấn đề gì? Tôi phải làm gì?
Không tốt: Error 403
Tốt: You don’t have permission to access this project. Contact your administrator.
16. Clear Feedback
Mọi action nên có feedback: Loading → Success / Error / Disabled
Ví dụ người dùng click: Save. Không nên để màn hình đứng im.
Nên: Saving… → Saved. Đây là một nguyên tắc rất quan trọng trong SaaS.
→ Tầng D trả lời:
“Tôi có biết hệ thống đang làm gì và phải xử lý thế nào không?”
E. Accessibility
Đây là lớp biến UX từ: “Dễ dùng” thành: “Có thể sử dụng bởi nhiều nhóm người dùng nhất có thể.”
17. Text Contrast
Hình sử dụng: 4.5:1 cho normal text, 3:1 cho large text phù hợp với WCAG AA trong trường hợp thông thường.
18. Meaningful Alt Text
Không phải ảnh nào cũng cần alt text giống nhau.
Ví dụ: Ảnh có ý nghĩa: alt="Dashboard showing monthly revenue". Ảnh decorative: alt=""
Mục tiêu là truyền tải meaning, không phải mô tả mọi pixel.
19. Full Keyboard Access
Người dùng phải có thể sử dụng interface mà không cần mouse. Kiểm tra: Tab → Shift + Tab → Enter → Space → Arrow keys → Esc
Đặc biệt quan trọng với: Modal, Dropdown, Date picker, Menu, Form, Data table
20. Visible Focus
Khi dùng keyboard, người dùng phải biết: “Tôi đang focus vào element nào?”
Ví dụ: Button, Input, Menu item
focus state phải rõ ràng.
→ Tầng E trả lời:
“Người có khả năng và phương thức tương tác khác nhau có dùng được sản phẩm không?”
F. Performance & Responsive
Đây là phần mở rộng UX ra ngoài UI.
21. Core Web Vitals
Hình sử dụng các ngưỡng: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Đây là các ngưỡng “Good” phổ biến của Core Web Vitals. UX tốt nhưng website load 5–7 giây thì vẫn là UX tệ.
22. Fluid Layout
Không chỉ: Desktop → Mobile mà cần thích nghi xuyên suốt: 320px → 375 → 768 → 1024 → 1440 → 1920
Đây là tư duy responsive system, không phải thiết kế hai phiên bản desktop/mobile riêng biệt.
23. Touch Targets
Hình nhắc:
24×24px minimum theo WCAG 2.5.8
và 44×44px là một target thực hành phổ biến để tăng usability trên touch device. Cần phân biệt: 24×24px = WCAG minimum trong điều kiện áp dụng với: 44×44px = practical recommendation thường dùng cho mobile/touch UX.
24. Optimized Media
Image nên: WebP/AVIF, Responsive image, Lazy loading khi phù hợp, Compression, Proper dimensions
Không nên đưa một ảnh: 4000 × 3000 vào một container: 400 × 300 rồi bắt browser tự xử lý.
25. Reflow / No Horizontal Scroll
Đặc biệt ở: 320px nội dung vẫn phải sử dụng được mà không xuất hiện horizontal scrolling không cần thiết. Đây là một trong những test responsive rất tốt.
→ Tầng F trả lời:
“Sản phẩm có hoạt động nhanh, ổn định và tốt trên thiết bị thực tế không?”
Điều tôi đánh giá cao nhất ở framework này
Nó tạo ra một chuỗi logic khá đẹp:
A — Find
Tôi có tìm được không?
↓
B — See
Tôi có nhìn và hiểu được không?
↓
C — Read
Tôi có đọc và hiểu nội dung không?
↓
D — Act
Tôi có thực hiện task được không?
↓
E — Access
Tôi có thể sử dụng nó không?
↓
F — Perform
Nó có chạy tốt trong thực tế không?
Đây gần như có thể trở thành UX Audit Funnel.
Nhưng nếu dùng để audit chuyên nghiệp, tôi sẽ nâng cấp framework này
25 checklist hiện tại rất tốt để screening, nhưng chưa đủ để trở thành một UX Audit Framework hoàn chỉnh. Tôi sẽ thêm 3 lớp:
Layer 0 — Business & User Context
Trước A:
Business Goal
→ Conversion?
→ Retention?
→ Revenue?
→ Task completion?
User Goal
→ User đang muốn làm gì?
User Context
→ Who?
→ Device?
→ Situation?
→ Frequency?
Nếu không có lớp này, designer rất dễ audit theo kiểu: “Cái này đẹp/chưa đẹp.” Thay vì: “Cái này có đang giúp user đạt goal và business đạt outcome không?”
