Thiết kế đủ trạng thái cho mọi phần tử tương tác

Sinh Vũ thường hỏi khách một câu khi kiểm tra thiết kế: "Nếu khách bấm nút này rồi không có gì xảy ra trong hai giây, họ sẽ làm gì?" Câu trả lời gần như luôn là: bấm lại. Và đó chính là lúc vấn đề bắt đầu, đơn trùng, form gửi hai lần, khách mất tin vào hệ thống. Trạng thái và phản hồi không phải chi tiết hoàn thiện cuối cùng. Đó là nền tảng của một giao diện hoạt động được.

Bảy trạng thái bắt buộc

Mỗi phần tử tương tác, dù là nút, ô nhập liệu, menu chọn hay đường dẫn, đều cần đủ bảy trạng thái dưới đây. Thiếu bất kỳ trạng thái nào là thiếu, không phải "tạm ổn".

• Thường (default): trạng thái mặc định khi không có tương tác nào.
• Di chuột (hover): khách đưa chuột vào, giao diện phải cho thấy phần tử này có thể bấm được.
• Lấy tiêu điểm (focus): khách dùng bàn phím điều hướng đến, cần viền hoặc dấu hiệu rõ để biết con trỏ đang ở đâu.
• Đang xử lý (loading): sau khi bấm, hệ thống đang làm việc, cần dấu hiệu rõ để khách không bấm lại.
• Thành công: thao tác hoàn tất, xác nhận bằng dấu tích, thông báo, hoặc chuyển màn hình phù hợp.
• Lỗi: có gì đó sai, phải chỉ ra sai ở đâu và khách cần làm gì để sửa.
• Vô hiệu (disabled): hành động chưa dùng được, cần thể hiện rõ và nên kèm lý do ngắn.

Ba mốc thời gian khách cảm nhận

Nielsen Norman Group đã xác định ba ngưỡng thời gian mà não người xử lý khác nhau. Sinh Vũ dùng ba mốc này để quyết định loại phản hồi cần thiết kế.

• Dưới 0,1 giây: khách cảm giác phản hồi tức thì, như bấm phím vật lý. Một thay đổi màu nhỏ hoặc hiệu ứng nhấn nhẹ là đủ.
• Dưới 1 giây: khách nhận ra có độ trễ nhưng mạch suy nghĩ chưa đứt. Một vòng xoay nhỏ hoặc trạng thái nút chuyển sang "đang gửi" là phù hợp.
• Trên 10 giây: khách mất tập trung và bắt đầu nghi ngờ hệ thống có đang chạy không. Cần thanh tiến trình (progress bar) hoặc chỉ báo phần trăm hoàn thành để khách yên tâm chờ.

Hệ thống luôn phải cho khách biết chuyện gì đang xảy ra, qua phản hồi phù hợp trong thời gian hợp lý.

Nielsen Norman Group, Visibility of System Status (Heuristic số 1)

Lỗi thường gặp khi bàn giao

Điểm thất thoát phổ biến nhất không phải ở lúc thiết kế, mà ở lúc chuyển file từ thiết kế sang lập trình. Khi file chỉ có một màn hình đẹp lúc nghỉ, lập trình viên phải tự quyết các trạng thái còn lại. Kết quả thường không nhất quán với nhận diện thương hiệu.

• Nút bấm xong không có phản hồi, khách bấm lại và gửi trùng đơn.
• File bàn giao chỉ có trạng thái mặc định, thiếu hover, focus, loading, error, disabled.
• Thông báo lỗi chung chung như "Đã có lỗi xảy ra", không nói sai ở đâu và cách sửa.
• Dùng vòng xoay tải vô định (spinner) cho thao tác dài, khiến khách không biết còn bao lâu và tưởng hệ thống treo.

Góc nhìn của Sinh Vũ

Phản hồi kịp thời không chỉ là vấn đề kỹ thuật. Đó là cách thương hiệu thể hiện sự tôn trọng với khách: khách luôn biết mình đang ở đâu, điều gì vừa xảy ra, và bước tiếp theo là gì. Một giao diện im lặng sau khi khách thao tác là một giao diện không tôn trọng thời gian của khách.

Sinh Vũ đặc tả đủ bảy trạng thái trong file bàn giao cho mọi dự án, không để lập trình viên tự suy đoán. Anh/Chị nên yêu cầu điều này như một tiêu chí nghiệm thu, không phải như một yêu cầu bổ sung. Một phần tử thiếu trạng thái không phải phần tử chưa hoàn thiện: đó là phần tử chưa được thiết kế xong.