The Ultimate Checklist: 100+ Tiêu chuẩn UI/UX

Đây là bản danh sách kiểm tra toàn diện dành cho lập trình viên để đảm bảo sản phẩm đạt chất lượng chuyên nghiệp nhất. Không sử dụng biểu tượng cảm xúc để đảm bảo tính nghiêm túc của tài liệu kỹ thuật.

1. Phân cấp thị giác và Bố cục (Visual Hierarchy & Layout)

1. Có duy nhất một hành động chính (Primary CTA) nổi bật trên mỗi vùng nhìn thấy.
2. Các hành động phụ được thiết kế với độ tương phản thấp hơn (Outline hoặc Ghost button).
3. Sử dụng hệ thống Grid 12 cột cho toàn bộ ứng dụng.
4. Căn lề thẳng hàng tuyệt đối giữa các thành phần (Align left là mặc định).
5. Các thành phần liên quan được nhóm lại gần nhau (Luật Proximity).
6. Sử dụng khoảng trắng (White-space) để phân tách các khu vực chức năng.
7. Tránh việc nhồi nhét quá nhiều thông tin trên một màn hình đơn lẻ.
8. Độ rộng nội dung văn bản giới hạn trong khoảng 600px - 800px để tối ưu việc đọc.
9. Container chính có max-width xác định (thường 1200px - 1440px).
10. Mọi thành phần đều có khoảng cách an toàn với mép màn hình (Padding).
11. Sử dụng tiêu đề (Heading) để phân chia cấp bậc thông tin từ H1 đến H4.
12. Hình ảnh và biểu đồ có chú thích rõ ràng.
13. Không sử dụng quá 3 màu sắc có sắc độ trong một giao diện.
14. Màu sắc mang tính thương hiệu được sử dụng nhất quán cho các thành phần hành động.
15. Các đường kẻ phân cách (Dividers) có màu nhạt, không gây đứt quãng thị giác mạnh.

2. Hệ thống Khoảng cách (Spacing System)

16. Tuân thủ hệ thống Spacing dựa trên bội số của 8 (hoặc 4).
17. Padding dọc và ngang của nút bấm theo tỷ lệ chuẩn (thường 1:2).
18. Khoảng cách giữa các phần tử trong danh sách là nhất quán.
19. Khoảng cách giữa các Section lớn đạt mức 48px - 80px.
20. Khoảng cách giữa Label và Input nằm trong khoảng 4px - 8px.
21. Card padding nhất quán trên toàn bộ ứng dụng (16px hoặc 24px).
22. Sử dụng hằng số (Variables) cho spacing thay vì dùng mã cứng (Hard-coded values).
23. Không để các thành phần dính sát vào nhau nếu chúng không có quan hệ trực tiếp.
24. Spacing trên mobile được thu nhỏ một cách hợp lý nhưng vẫn đảm bảo độ thở.

3. Chữ viết (Typography)

25. Font-size mặc định cho nội dung chính là 16px.
26. Không dùng quá 2 bộ font chữ khác nhau.
27. Line-height cho văn bản dài đạt mức 1.5 - 1.6.
28. Line-height cho tiêu đề đạt mức 1.1 - 1.25.
29. Độ dài dòng văn bản nằm trong khoảng 45 - 75 ký tự.
30. Độ tương phản màu chữ đạt chuẩn WCAG (tối thiểu 4.5:1).
31. Phân biệt rõ ràng tiêu đề và văn bản bằng độ đậm (Font-weight).
32. Tránh sử dụng font-size nhỏ hơn 12px trừ khi thực sự cần thiết (caption/legal).
33. Không sử dụng toàn bộ chữ in hoa (ALL CAPS) cho các đoạn văn dài.
34. Căn lề trái cho văn bản đọc, tránh căn giữa các đoạn văn dài.
35. Sử dụng font chữ hỗ trợ đầy đủ tiếng Việt, không bị lỗi hiển thị dấu.

4. Màu sắc (Color)

36. Sử dụng bảng màu Neutral (Xám/Zinc) cho các thành phần nền và text.
37. Màu trạng thái (Xanh/Đỏ/Vàng) được dùng đúng ý nghĩa ngữ nghĩa.
38. Tránh dùng màu đen tuyệt đối (#000) cho văn bản, ưu tiên xám cực đậm.
39. Tránh dùng màu trắng tuyệt đối (#FFF) cho nền diện tích lớn ở Dark Mode.
40. Đảm bảo màu thương hiệu vẫn dễ nhìn khi hiển thị trên các nền khác nhau.
41. Không dùng màu sắc làm phương tiện duy nhất để truyền đạt thông tin (Cần có icon/văn bản đi kèm).

5. Tương tác và Phản hồi (Interactions & Feedback)

42. Nút bấm có trạng thái Hover rõ ràng (thay đổi độ sáng hoặc bóng đổ).
43. Nút bấm có trạng thái Active (Pressed) để xác nhận hành động click.
44. Các thành phần click được có cursor: pointer.
45. Hiển thị trạng thái Loading (Spinner hoặc Skeleton) khi xử lý tác vụ không đồng bộ.
46. Có thông báo thành công (Success Toast/Message) sau khi hoàn tất hành động quan trọng.
47. Thông báo lỗi rõ ràng, giải thích cách khắc phục thay vì chỉ báo lỗi chung chung.
48. Tooltip được sử dụng cho các icon không đi kèm văn bản.
49. Sử dụng hiệu ứng Transition mượt mà (150ms-300ms) cho các thay đổi UI.
50. Người dùng có thể hủy (Cancel/Undo) các hành động quan trọng.
51. Trạng thái Focus được hiển thị rõ ràng cho người dùng sử dụng bàn phím.

6. Biểu mẫu và Nhập liệu (Forms & Inputs)

52. Label luôn hiển thị, không dùng Placeholder thay thế Label.
53. Nhóm các trường liên quan vào các Fieldset hoặc Section.
54. Input có chiều cao nhất quán (thường 40px hoặc 48px).
55. Hiển thị thông báo lỗi ngay tại trường nhập liệu bị sai (Inline Validation).
56. Đánh dấu rõ ràng các trường bắt buộc (thường dùng dấu *).
57. Sử dụng đúng Input Type (email, tel, password, date).
58. Nút Gửi (Submit) nằm ở vị trí dễ tìm thấy sau khi điền xong form.
59. Form dài được chia thành nhiều bước (Multi-step).
60. Tự động tập trung (Auto-focus) vào input đầu tiên nếu hợp lý.
61. Ngăn chặn việc nhấn Submit nhiều lần (Disable button sau khi click).
62. Cho phép người dùng xem mật khẩu đã nhập (Toggle password visibility).

7. Điều hướng (Navigation)

63. Menu chính dễ tìm và luôn nhất quán giữa các trang.
64. Sử dụng Breadcrumbs cho các ứng dụng có cấu trúc thư mục sâu.
65. Logo luôn dẫn về trang chủ.
66. Liên kết (Links) được phân biệt rõ ràng với văn bản thông thường (màu sắc/gạch chân).
67. Trạng thái Active cho biết người dùng đang ở trang nào trong menu.
68. Thanh tìm kiếm (nếu có) nằm ở vị trí dễ thấy (trên cùng bên phải hoặc giữa).
69. Cung cấp Sitemap hoặc liên kết quan trọng ở Footer.

8. Trải nghiệm trên Di động (Mobile UX)

70. Kích thước vùng tương tác tối thiểu là 44x44px.
71. Không có hiện tượng cuộn ngang (Horizontal scroll) không mong muốn.
72. Menu được tối ưu hóa (Hamburger menu hoặc Tab bar).
73. Font-size không tự động zoom khi focus vào input trên iOS (thường > 16px).
74. Các nút bấm quan trọng nằm trong vùng dễ chạm của ngón cái.
75. Nội dung hình ảnh được resize phù hợp với màn hình nhỏ.

9. Khả năng Tiếp cận (Accessibility - a11y)

76. Tuân thủ Semantic HTML (header, nav, main, section, footer).
77. Hình ảnh có thuộc tính alt mô tả nội dung.
78. Video có phụ đề hoặc mô tả văn bản.
79. Có thể điều hướng toàn bộ website bằng phím Tab.
80. Thứ tự Tab di chuyển theo logic từ trên xuống trái qua.
81. Sử dụng ARIA labels cho các thành phần UI phức tạp.
82. Không có hiệu ứng nhấp nháy nhanh gây nguy hiểm cho người bị động kinh.

10. Hiệu suất và Tốc độ (Performance)

83. Hình ảnh được nén tối ưu (WebP/Avif).
84. Sử dụng Lazy loading cho hình ảnh nằm ngoài vùng nhìn thấy ban đầu.
85. Sử dụng Skeleton Screen để giảm cảm giác chờ đợi khi load dữ liệu.
86. Third-party scripts (Google Analytics, Chat) được load không đồng bộ (defer/async).
87. Fonts được tối ưu (swap strategy) để hiện text nhanh nhất có thể.

11. Tin cậy và Minh bạch (Trust & Transparency)

88. Có trang Chính sách bảo mật và Điều khoản sử dụng.
89. Hiển thị thông tin liên hệ rõ ràng.
90. Các thông báo lỗi không làm lộ thông tin nhạy cảm của hệ thống/DB.
91. Giá cả và phí ẩn (nếu có) được hiển thị minh bạch trước khi thanh toán.
92. Có xác nhận trước khi thực hiện các hành động không thể hoàn tác (Xóa dữ liệu).

12. Chi tiết và Độ thẩm mỹ (Details & Aesthetics)

93. Border radius nhất quán (ví dụ: tất cả đều bo 8px).
94. Độ đậm của đường viền (Border-width) nhất quán (thường 1px).
95. Sử dụng Shadow một cách tinh tế, tránh màu shadow quá đậm.
96. Icons cùng một bộ sưu tập (Stroke width đồng nhất).
97. Favicon được hiển thị trên trình duyệt.
98. Trang 404 được thiết kế thân thiện, giúp người dùng quay lại trang chủ.
99. Metadata (Tiêu đề, Mô tả) được cấu hình cho SEO và Social Sharing.
100. Trạng thái trống (Empty State) có hướng dẫn người dùng phải làm gì tiếp theo.

Kết luận

Bản checklist này là một tiêu chuẩn động. Tùy vào tính chất của từng dự án mà bạn có thể ưu tiên các hạng mục khác nhau. Tuy nhiên, việc tuân thủ các quy tắc này sẽ giúp bạn xây dựng được một sản phẩm bền vững và được người dùng đánh giá cao.