Pop-up xuất hiện giữa lúc nhập biểu mẫu, âm thanh tự phát hoặc nội dung tự làm mới có thể buộc người dùng rời khỏi việc đang làm. Vấn đề không chỉ là cảm giác khó chịu: người dùng có thể mất vị trí đang đọc, quên bước tiếp theo hoặc phải tìm lại nút điều khiển.
Trong bài viết này, gián đoạn là một thay đổi ngoài dự kiến làm người dùng phải dừng nhiệm vụ hiện tại để xử lý giao diện. Một thông báo không tự động trở thành rào cản. Rủi ro xuất hiện khi thông báo đến sai thời điểm, che nội dung, thay đổi tiêu điểm hoặc không cho người dùng trì hoãn và đóng nó.
Những gián đoạn thường gặp trên web
Gián đoạn có thể đến từ hình ảnh, âm thanh hoặc cách giao diện tự thay đổi. Bảng dưới đây cho thấy bốn tình huống phổ biến và lý do chúng làm đứt mạch thao tác.
| Tình huống | Điều xảy ra | Rủi ro với người dùng |
|---|---|---|
| Pop-up hoặc cửa sổ modal | Một lớp nội dung mới xuất hiện trên trang | Nội dung đang xem bị che; người dùng phải tìm cách đóng hoặc tiếp tục |
| Âm thanh hoặc video tự phát | Phương tiện bắt đầu khi người dùng chưa yêu cầu | Âm thanh cạnh tranh với sự chú ý và có thể át tiếng của trình đọc màn hình |
| Làm mới hoặc cập nhật tự động | Nội dung thay đổi trong lúc người dùng đang đọc hoặc thao tác | Vị trí hiện tại, thông tin đang xem hoặc dữ liệu chưa lưu có thể bị ảnh hưởng |
| Biểu ngữ và thông báo | Thông điệp mới xuất hiện hoặc che một phần giao diện | Người dùng phải chuyển sự chú ý dù thông điệp có thể chưa cần xử lý ngay |
Có thể đánh giá một thay đổi bằng ba câu hỏi: người dùng có chủ động yêu cầu nó không, họ có thể trì hoãn hoặc đóng nó không, và sau khi xử lý họ có trở lại đúng vị trí trước đó không. Nếu cả ba câu trả lời đều là “không”, giao diện nhiều khả năng đang tạo ra một gián đoạn không cần thiết.
Vì sao gián đoạn làm giảm khả năng truy cập?
Làm đứt quãng nhiệm vụ và có thể mất tiến trình
Khi giao diện làm mới, chuyển hướng hoặc mở một lớp nội dung giữa lúc người dùng nhập biểu mẫu, họ phải dừng lại để hiểu điều vừa xảy ra. Dữ liệu không nhất thiết luôn bị mất, nhưng nguy cơ này xuất hiện nếu trang đặt lại biểu mẫu hoặc không giữ trạng thái trước khi thay đổi nội dung.
Tăng tải nhận thức
Tải nhận thức là lượng thông tin mà người dùng phải ghi nhớ và xử lý để hoàn thành một việc. Một pop-up bất ngờ khiến họ phải nhớ mình đang ở bước nào, đọc thông điệp mới, quyết định có cần phản hồi hay không, rồi tìm đường quay lại. Chuỗi việc này đặc biệt gây khó khăn cho người dễ mất tập trung hoặc cần thêm thời gian để xử lý thông tin.
Làm người dùng trình đọc màn hình và bàn phím mất phương hướng
Tiêu điểm bàn phím là vị trí hiện nhận thao tác từ bàn phím. Khi một modal mở ra mà tiêu điểm không chuyển đến nơi hợp lý, hoặc khi đóng modal mà tiêu điểm không trở lại nút đã mở nó, người dùng có thể không biết mình đang ở đâu trên trang.
Vấn đề này ảnh hưởng trực tiếp đến người dùng trình đọc màn hình và người dựa vào điều hướng bằng bàn phím. Họ thường theo dõi thứ tự nội dung và vị trí tiêu điểm thay vì chỉ dựa vào bố cục thị giác.
Tăng số thao tác cần thực hiện
Đóng một cửa sổ nhỏ, tìm nút tắt âm hoặc khôi phục vị trí cũ có thể đòi hỏi nhiều thao tác chính xác. Gánh nặng tăng lên với người gặp khó khăn khi sử dụng chuột, màn hình cảm ứng hoặc các nút điều khiển nhỏ. Vì vậy, nút đóng và điều khiển phương tiện cần rõ ràng, dễ tìm và có thể sử dụng bằng bàn phím.
Nguyên tắc giảm gián đoạn
Một giao diện ít gây gián đoạn đặt quyền kiểm soát vào tay người dùng. Bốn nguyên tắc sau có thể dùng khi xem xét pop-up, phương tiện, cập nhật động và thông báo:
- Để người dùng khởi tạo thay đổi khi có thể: phát nội dung, mở modal hoặc tải thêm thông tin sau một hành động rõ ràng.
- Ưu tiên tương xứng với mức độ cần thiết: chỉ yêu cầu phản hồi ngay đối với thông tin thực sự cần được xử lý ngay.
- Cho phép trì hoãn, dừng hoặc đóng: người dùng cần một cách rõ ràng để kiểm soát nội dung không khẩn cấp.
- Giữ nguyên ngữ cảnh: sau gián đoạn, khôi phục tiêu điểm, vị trí và dữ liệu đang nhập khi có thể.
Năm cách thiết kế cụ thể
1. Để người dùng chủ động phát âm thanh và video
Mặc định an toàn hơn là không tự phát phương tiện. Hãy hiển thị nút phát có nhãn rõ ràng để người dùng quyết định thời điểm bắt đầu. Nếu nội dung cần chạy tự động, nên bắt đầu ở trạng thái tắt âm và cung cấp các nút phát, tạm dừng và bật hoặc tắt âm dễ nhận biết.
Tắt âm không loại bỏ mọi gián đoạn, vì hình ảnh chuyển động vẫn có thể thu hút sự chú ý. Do đó, điều khiển tạm dừng vẫn cần dễ tìm.
2. Chỉ dùng pop-up khi nhiệm vụ thực sự cần nó
Thông tin bổ trợ hoặc thông báo thông thường thường có thể đặt ngay trong trang. Hãy dành modal cho một lựa chọn hoặc bước thao tác cần người dùng chú ý trước khi tiếp tục.
Khi modal là cần thiết, hãy dùng tiêu đề mô tả đúng mục đích, cung cấp nút đóng rõ ràng và tránh mở nó giữa lúc người dùng đang nhập liệu. Một modal xuất hiện sau hành động chủ động, chẳng hạn nhấn nút để xem chi tiết, dễ dự đoán hơn một cửa sổ bật lên theo bộ đếm thời gian.
3. Cho phép kiểm soát nội dung tự cập nhật
Trang tin, mạng xã hội hoặc màn hình theo dõi có thể nhận nội dung mới trong khi người dùng đang đọc. Thay vì lập tức thay thế phần hiện tại, giao diện có thể báo rằng có nội dung mới và cung cấp nút để người dùng cập nhật vào thời điểm phù hợp.
Nếu cập nhật tự động vẫn cần thiết, hãy cho phép tạm dừng hoặc điều chỉnh nó. Cách này giúp người dùng giữ nguyên vị trí đọc và tránh phải tìm lại nội dung sau mỗi lần thay đổi.
4. Quản lý tiêu điểm khi mở và đóng modal
Khi modal mở, tiêu điểm cần chuyển vào một phần tử hợp lý bên trong, chẳng hạn tiêu đề, trường nhập đầu tiên hoặc nút hành động chính. Trong lúc modal còn mở, thao tác bàn phím không nên vô tình đi đến nội dung phía sau.
Khi modal đóng, tiêu điểm nên trở lại nút đã mở nó hoặc chuyển đến bước tiếp theo hợp lý. Cách xử lý này duy trì mạch thao tác và giúp người dùng hiểu kết quả của hành động vừa thực hiện.
5. Phân loại thông báo theo mức độ cần xử lý
Cảnh báo về lỗi cản trở thao tác hoặc vấn đề an toàn cần được trình bày nổi bật. Thông báo thông thường có thể nằm trong khu vực thông báo để người dùng xem sau, thay vì liên tục chiếm màn hình hoặc phát âm thanh.
Đối với thay đổi không cần chuyển tiêu điểm, hãy dùng thông điệp trạng thái dễ tiếp cận để công nghệ hỗ trợ có thể thông báo mà không kéo người dùng ra khỏi nhiệm vụ. Nếu thông báo có âm thanh, phần cài đặt nên cho phép tắt âm.
Danh sách kiểm tra trước khi phát hành
- Hoàn thành tác vụ chính chỉ bằng bàn phím và kiểm tra xem pop-up có chặn đường đi hay không.
- Mở rồi đóng từng modal; xác nhận tiêu điểm đi vào modal và trở lại vị trí hợp lý.
- Nhập thử dữ liệu vào biểu mẫu, sau đó kích hoạt thông báo hoặc cập nhật để xem dữ liệu và vị trí có được giữ lại không.
- Giữ trang mở đến khi có cập nhật tự động; kiểm tra xem người dùng có thể trì hoãn, dừng hoặc chủ động tải nội dung mới không.
- Khởi động nội dung âm thanh hoặc video; xác nhận các nút phát, tạm dừng và âm lượng rõ ràng, dùng được bằng bàn phím.
- Phân biệt thông báo phải xử lý ngay với thông báo có thể xem sau, thay vì trình bày mọi thông điệp cùng một mức ưu tiên.
Kết luận
Giảm gián đoạn không có nghĩa là loại bỏ mọi pop-up, thông báo hoặc cập nhật động. Mục tiêu là để mỗi thay đổi xuất hiện đúng lúc, có lý do rõ ràng và không làm người dùng mất quyền kiểm soát.
Ưu tiên hành động do người dùng khởi tạo, cho phép dừng hoặc trì hoãn, và khôi phục tiêu điểm sau modal sẽ giúp giao diện dễ dự đoán hơn. Những cải thiện này hỗ trợ người dùng khuyết tật, đồng thời làm cho trải nghiệm sử dụng liền mạch hơn đối với mọi người.
Hỗ trợ triển khai khả năng truy cập web
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.