Các nguyên tắc thiết kế UI cốt lõi (bộ quy tắc thực hành)

Khi một giao diện khiến người dùng phải dừng lại tự hỏi “bấm cái này có chuyện gì xảy ra?”, phần lớn nguyên nhân không nằm ở màu sắc hay phông chữ, mà ở việc bộ quy tắc nền tảng bị bỏ qua. Bài này gom các nguyên tắc thiết kế UI mà designer, lập trình viên và chủ website nên thuộc lòng, mỗi nguyên tắc kèm cách áp dụng cụ thể.

Bộ quy tắc này dựa trên đâu

Phần lớn nguyên tắc thực hành dưới đây bắt nguồn từ 10 heuristic (quy tắc kinh nghiệm — luật ngón tay cái) do Jakob Nielsen của Nielsen Norman Group công bố năm 1994 và tinh chỉnh lại năm 2020. Đây là khung được dùng rộng rãi nhất để đánh giá khả năng dùng (usability) của giao diện. Bên cạnh đó, hai bộ hướng dẫn nhà sản xuất là Material Design (Google) và Human Interface Guidelines (Apple) cũng nhấn cùng những điểm này: nhất quán, phản hồi và rõ ràng.

Lưu ý cách phân vai: bài này nói về quy tắc hành vi của giao diện. Cách sắp xếp thị giác theo nhóm (gần nhau, tương đồng) thuộc về quy luật Gestalt trong thiết kế, còn cách dẫn mắt theo tầng quan trọng thuộc về phân cấp thị giác. Ba chủ đề bổ trợ nhau chứ không trùng.

Nhất quán và theo chuẩn

Nhất quán (consistency) nghĩa là cùng một thứ thì trông giống nhau và hành xử giống nhau ở mọi nơi trong sản phẩm. Nút “Lưu” không thể chỗ thì xanh dương chỗ thì viền xám; từ “Huỷ” không thể chỗ này mang nghĩa quay lại, chỗ kia mang nghĩa xoá. Có hai lớp:

• Nhất quán nội bộ — trong cùng sản phẩm: cùng kiểu nút, cùng khoảng cách, cùng cách đặt tên.
• Nhất quán theo chuẩn ngành — bám quy ước người dùng đã quen: logo góc trái dẫn về trang chủ, biểu tượng giỏ hàng nằm góc phải, gạch chân là link.

Nhất quán giảm tải nhận thức vì người dùng không phải học lại cách dùng ở mỗi màn hình mới. Đây cũng là lý do nên dùng một thư viện component dùng lại thay vì vẽ tay từng nút.

Phản hồi và hiển thị trạng thái hệ thống

Giao diện phải luôn cho người dùng biết chuyện gì đang diễn ra, trong khoảng thời gian hợp lý. Theo Apple HIG, mỗi thao tác cần có phản hồi (feedback) rõ ràng để người dùng hiểu hệ thống đang ở đâu. Cụ thể:

• Bấm nút thì nút phải đổi trạng thái (đang xử lý, đã xong).
• Tác vụ dài thì hiện thanh tiến trình hoặc spinner, đừng để màn hình “đứng hình”.
• Gửi biểu mẫu thành công thì báo thành công, lỗi thì báo lỗi ngay tại chỗ.

Im lặng là kẻ thù của trải nghiệm: người dùng không biết hệ thống nhận lệnh chưa thường sẽ bấm lại lần hai, gây trùng đơn hoặc trùng thao tác.

Ngăn lỗi từ gốc và cho phép sửa sai

Có hai nguyên tắc song hành ở đây. Thứ nhất là ngăn lỗi (error prevention): thiết kế sao cho người dùng khó mắc lỗi ngay từ đầu — vô hiệu hoá nút khi chưa đủ điều kiện, dùng ô chọn ngày thay vì gõ tay, hỏi xác nhận trước hành động phá huỷ. Thứ hai là dung sai lỗi và quyền kiểm soát (user control and freedom): khi đã lỡ tay, người dùng phải có lối thoát rõ ràng.

• Luôn có nút Hoàn tác (undo) hoặc Quay lại cho thao tác quan trọng.
• Thông báo lỗi viết bằng ngôn ngữ con người, nói rõ lỗi gì và cách sửa — đừng phun mã lỗi “Error 0x80004005”.
• Hành động xoá/thanh toán nên có bước xác nhận, nhưng đừng lạm dụng hộp xác nhận cho mọi thứ nhỏ nhặt.

Dễ đoán: nhận ra thay vì phải nhớ

Một giao diện dễ đoán đặt thông tin và lựa chọn ở nơi người dùng nhìn thấy được, thay vì bắt họ ghi nhớ từ màn hình trước. Đây là heuristic “recognition rather than recall” (nhận ra thay vì gợi nhớ). Ví dụ: ô tìm kiếm gợi ý lại từ khoá vừa gõ; trang thanh toán hiển thị lại tóm tắt giỏ hàng để không phải nhớ; menu lọc giữ nguyên lựa chọn đã chọn.

Dễ đoán còn là chuyện khớp với thế giới thật: dùng từ ngữ và biểu tượng người dùng quen, theo trình tự tự nhiên. Biểu tượng thùng rác nghĩa là xoá, hình phong bì nghĩa là email — đừng sáng tạo lại bánh xe ở những chỗ người dùng đã có sẵn kỳ vọng.

Tối giản nhận thức và thẩm mỹ gọn

Mỗi yếu tố thừa trên màn hình đều cạnh tranh sự chú ý với phần thật sự quan trọng. Nguyên tắc “aesthetic and minimalist design” khuyên chỉ giữ thông tin liên quan đến tác vụ hiện tại. Tối giản ở đây không phải là đẹp cho có, mà là giảm số quyết định người dùng phải xử lý cùng lúc.

Cách áp dụng thực tế: dồn tác vụ thành các bước nhỏ thay vì một biểu mẫu khổng lồ; ẩn tuỳ chọn nâng cao sau một nút “Tuỳ chọn thêm”; dùng khoảng trắng trong thiết kế để tách nhóm thay vì nhồi mọi thứ sát nhau. Khoảng trống không phải chỗ trống lãng phí — nó là công cụ điều hướng mắt.

Kích thước chạm đủ lớn và đúng người dùng

Nguyên tắc dễ dùng phải tính cả người dùng tay run, dùng một tay hoặc khuyết tật vận động. Về kích thước vùng chạm (touch target):

Nói gọn: 24px là sàn pháp lý của WCAG 2.2, còn 44–48px là vùng thoải mái thực tế cho ngón tay. Vùng chạm nhỏ làm tăng tỷ lệ bấm nhầm, đặc biệt với người dùng hạn chế vận động. Đây chỉ là một mảnh trong bức tranh lớn về khả năng tiếp cận khi thiết kế web.

Áp dụng vào quy trình làm việc

Các nguyên tắc trên có giá trị nhất khi được mã hoá thành quy ước chung của đội, không phải để trong đầu mỗi người. Khi Web22 thiết kế giao diện website cho khách, các quy tắc nhất quán này được gom vào một hệ thống thiết kế (design system) chung — cùng bộ màu, cùng cỡ chữ, cùng component — để bản thiết kế và bản code không lệch nhau. Vì Web22 vừa thiết kế vừa lập trình, nút mà designer vẽ chính là nút lập trình viên dựng, không qua tam sao thất bản.

Một mẹo kiểm tra nhanh: lấy 10 heuristic của Nielsen làm danh sách rà (checklist), đi qua từng màn hình và tự hỏi “trạng thái có rõ không, lỗi có ngăn được không, người dùng có lối thoát không”. Cách rà này gọi là đánh giá heuristic, không cần người dùng thật mà vẫn lọc ra phần lớn vấn đề.

Câu hỏi thường gặp

Nguyên tắc thiết kế UI và heuristic của Nielsen có phải một?

Không hẳn. 10 heuristic của Nielsen là một bộ nguyên tắc nền tảng và được dùng nhiều nhất, nhưng nguyên tắc thiết kế UI là khái niệm rộng hơn, gồm cả quy tắc về kích thước chạm, khả năng tiếp cận và thẩm mỹ.

Có cần nhớ hết tất cả nguyên tắc không?

Không cần học thuộc lòng. Quan trọng là hiểu tinh thần chung: làm giao diện dễ đoán, ít gây lỗi, luôn cho người dùng biết chuyện gì đang xảy ra. Khi nghi ngờ, hãy quay về danh sách heuristic để rà.

Nguyên tắc cho web và cho ứng dụng di động có khác nhau không?

Tinh thần giống nhau, nhưng di động cần chú ý hơn về kích thước chạm và thao tác một tay. Apple và Material Design có ngưỡng riêng cho từng nền tảng như bảng ở trên.

Nếu bạn muốn biến những nguyên tắc này thành một giao diện thật, thống nhất từ bản vẽ đến dòng code, hãy tham khảo dịch vụ thiết kế UI/UX của Web22.