Kiểm tra thông báo còn phù hợp sau khi xử lý
Thực hiện hành động được đề nghị rồi quay lại màn hình. Banner cần cập nhật hoặc biến mất khi vấn đề đã giải quyết; không để thông tin cũ tiếp tục làm người dùng lo lắng.
Thông báo nổi bật Design system
Đưa thông tin quan trọng vào đúng ngữ cảnh.
Nội dung checklist
Tiến độ kiểm tra
01
Cấu trúc và ý nghĩa
Đối chiếu thông tin và cách trình bày trong ngữ cảnh sử dụng.
02
Tương tác và khả năng sử dụng
Thử thao tác, thay đổi trạng thái và đường tiếp tục công việc.
Tiến độ được lưu tự động trên trình duyệt này.
HƯỚNG DẪN
Cách kiểm tra
VÍ DỤ
Ví dụ áp dụng
Thông tin tài khoản cần bổ sung
Banner “Hoàn tất thông tin để tiếp tục” có nút tới đúng phần còn thiếu; sau khi bổ sung, banner không xuất hiện lại.
Các biến thể và tình huống
Mức độ của thông điệp
Tách thông tin, cảnh báo, lỗi và thành công bằng nhãn hoặc biểu tượng cùng màu sắc.
Đọc banner khi bỏ màu; người dùng vẫn hiểu cần chú ý hay chỉ biết thêm.
Ví dụ “Thanh toán chưa hoàn tất” có biểu tượng cảnh báo và hành động kiểm tra.
Cấu trúc thông báo
Đặt điều vừa xảy ra trước, rồi nêu ảnh hưởng và bước xử lý ngắn gọn.
Thử thông điệp dài và số liệu động; tránh che hành động quan trọng trên mobile.
Ví dụ “Phiên sắp hết hạn. Lưu bản nháp trước khi đăng nhập lại.”
Hành động đi kèm
Ưu tiên hành động xử lý đúng sự kiện, có thể thêm lựa chọn đóng nếu thông điệp không bắt buộc.
Bấm hành động rồi quay lại; không còn banner lỗi nếu vấn đề đã giải quyết.
Ví dụ Nút “Kết nối lại” ở thông báo mất kết nối, không dẫn về trang chủ.
Tương phản với trang
Giữ thông điệp nổi đủ để nhận ra nhưng không làm mất nội dung chính của trang.
Đặt banner trên nền màu và theme tối; chữ, link và nút cần đọc được.
Ví dụ Banner cảnh báo có viền và icon; phần mô tả vẫn dùng cỡ chữ dễ đọc.
Biểu tượng theo ý nghĩa
Dùng icon diễn tả loại thông điệp và giữ nhãn bằng chữ làm nguồn thông tin chính.
Ẩn icon rồi đọc lại; thông điệp cần đứng độc lập và không mất nghĩa.
Ví dụ Icon ổ khóa đi với câu “Bạn chưa có quyền chỉnh sửa”.
Vị trí thông báo
Đặt thông báo gần vùng nó tác động; thông báo toàn phiên có thể nằm ở đầu trang.
Cuộn trang và mở bàn phím; banner không được che nút xử lý tại vùng liên quan.
Ví dụ Lỗi bộ lọc nằm cạnh kết quả; bảo trì dịch vụ nằm đầu trang.