Thiết kế phân cấp trang đáp ứng để người dùng dễ quét đọc và thấu hiểu

Phân cấp trang đáp ứng tốt giúp người dùng xác định mục đích, bằng chứng, lựa chọn và bước tiếp theo trên bản rộng, hẹp, phóng to hoặc tuyến tính. Phân cấp không phải thu nhỏ bố cục máy tính mà là bảo toàn ưu tiên, quan hệ và hướng đi của nhiệm vụ khi cách trình bày thay đổi.

Phân cấp trang đáp ứng phải giúp người dùng hiểu những gì?

Phân cấp phải giúp người dùng định hướng, xem bằng chứng, so sánh lựa chọn và nhận ra hành động mà không cần lời giải thích của người thiết kế. W3C cho biết tiêu đề rõ ràng giúp nhận biết vị trí và mục đích trang; đây là hướng dẫn bổ sung, không phải tiêu chí thành công WCAG. Bốn câu hỏi của bài là tổng hợp biên tập, không phải khuôn khổ do W3C, Nielsen Norman Group hay GOV.UK đặt tên.

Ví dụ là trang B2B so sánh ba gói hỗ trợ, nơi lời giới thiệu, bằng chứng, điều kiện và nút đều có mức nhấn gần nhau; trên màn hình hẹp, chúng thành một dải dài khó định hướng. Nielsen Norman Group quan sát rằng tiêu đề phụ nổi bật, tóm tắt đúng có thể hỗ trợ quét theo từng lớp. Nhưng hành vi quét còn thay đổi theo nhiệm vụ, ngôn ngữ, nội dung, mức quen thuộc và bố cục, nên không thể dùng chữ F hoặc Z làm mẫu mặc định.

Đội ngũ cần thống nhất điều gì trước khi tạo kiểu cho trang?

Trước khi tạo kiểu, hãy viết hợp đồng phân cấp về ưu tiên, quan hệ và trình tự đọc đúng khi thứ tự ảnh hưởng đến ý nghĩa. Với trang chọn dịch vụ, hợp đồng là: giúp người mua chọn gói phù hợp; giữ bằng chứng cạnh tuyên bố; làm ba gói có thể so sánh; coi yêu cầu đánh giá là hành động cấp trang chính. Tiêu đề và nhãn phải mô tả chủ đề hoặc mục đích để người dùng dự đoán nội dung.

Thứ tự nguồn phải còn mạch lạc khi cột và vị trí biến mất: định hướng trước đánh giá, bằng chứng cùng đối tượng, thuộc tính gói theo chuỗi nhất quán, hành động trong đủ ngữ cảnh. Quan hệ thị giác quan trọng cũng phải xác định được bằng chương trình hoặc văn bản. Khi thứ tự đổi ý nghĩa, cần ít nhất một trình tự đúng; vùng độc lập có thể có nhiều thứ tự tương đối hợp lệ.

Tín hiệu thị giác nên bộc lộ phân cấp như thế nào?

Tín hiệu thị giác nên phối hợp để làm lộ rõ những ưu tiên và quan hệ đã thống nhất, nhưng không tín hiệu nào được trở thành vật mang ý nghĩa duy nhất. Trên trang chọn dịch vụ, các nhãn chung chung như “Thông tin thêm” nên được thay bằng tiêu đề dự báo đúng nội dung, chẳng hạn “Chọn mức hỗ trợ” hoặc “Kiểm tra điều kiện áp dụng”, với câu chữ được hiệu chỉnh theo ngôn ngữ của khách hàng. W3C nêu kích thước và độ đậm của tiêu đề, khoảng trống, thụt lề, nhãn, tổ chức dạng bảng và nền nhóm là những dấu hiệu thường dùng để nhận biết cấu trúc.

Thang chữ cần phân biệt tiêu đề trang, phần, gói và nội dung, rồi được kiểm tra bằng kiểu chữ, tiếng Việt và độ rộng thực tế. GOV.UK cho thấy có thể giảm cỡ chữ và một số khoảng lớn trên màn hình nhỏ trong khi giữ vai trò chữ, nhịp dọc và khoảng quan hệ nhỏ. Đây là ví dụ triển khai, không phải giá trị hay điểm ngắt phổ quát. Tỷ lệ, màu, vị trí và tương phản có thể hướng chú ý nhưng không tự quyết định ưu tiên nghiệp vụ.

Làm sao phân biệt bằng chứng, lựa chọn và hành động tiếp theo?

Trang cần đặt bằng chứng cạnh nội dung mà nó hỗ trợ, gom các lựa chọn vào một vùng so sánh nhất quán và dành mức nhấn riêng cho bước tiếp theo. Ở bản rộng đã sửa, mục đích chọn dịch vụ chiếm vị trí mở đầu; bằng chứng năng lực nằm cạnh tuyên bố liên quan; ba gói xuất hiện trong một nhóm có nhãn rõ. Mỗi gói trình bày các thuộc tính theo cùng một thứ tự để người mua đối chiếu cùng loại thông tin. Không nên dựng sẵn một gói “được đề xuất” nếu chưa có bằng chứng từ nhiệm vụ hoặc nhu cầu người dùng.

Nhãn hành động phải cho biết điều gì sẽ xảy ra, chẳng hạn “Yêu cầu đánh giá nhu cầu” rõ hơn một nút chỉ ghi “Tiếp tục”. Hướng dẫn nút của GOV.UK cảnh báo rằng nhiều hành động chính nổi bật ngang nhau hoặc quá nhiều hành động phụ có thể làm bước kế tiếp khó nhận biết. Điều đó không có nghĩa mỗi trang chỉ được phép có một lựa chọn: nút chọn gói, liên kết xem chi tiết và hành động yêu cầu đánh giá có vai trò khác nhau nên cần mức nhấn khác nhau. Bằng chứng bổ sung có thể mang ưu tiên thứ cấp nhưng không vì thế mà trở thành nội dung tùy ý xóa bỏ.

Những thao tác đáp ứng nào giữ được ý nghĩa khi bố cục thay đổi?

Năm thao tác hữu ích là giữ nguyên, xếp chồng, di chuyển, cô đọng và mở dần, nhưng chỉ áp dụng khi thông tin, chức năng, quan hệ và ưu tiên nhiệm vụ còn nguyên. Hãy bắt đầu trang chọn gói từ một cột hẹp, sau đó chỉ thêm bố cục rộng khi nó làm việc so sánh hoặc liên kết bằng chứng rõ hơn. GOV.UK dùng cách ưu tiên màn hình nhỏ và giới hạn chiều rộng văn bản máy tính như một thực hành trong hệ thống của họ; lưới và số đo cụ thể không phải chuẩn chung cho mọi sản phẩm.

Theo hướng dẫn tái định dạng của WCAG, trong các điều kiện kiểm tra liên quan, nội dung phải được trình bày mà không mất thông tin hoặc chức năng và không buộc cuộn theo hai chiều, ngoại trừ bố cục hai chiều thiết yếu cho ý nghĩa hoặc chức năng. Nhiều trang đọc có thể xếp vùng nội dung thành một cột nếu từng vùng vẫn hiểu được và thao tác được; tiện ích phức tạp có thể cần thay đổi chức năng thay vì chỉ thu hẹp. Khi di chuyển một vùng, phải giữ ít nhất một trình tự đọc đúng có thể xác định bằng chương trình nếu thứ tự ảnh hưởng đến ý nghĩa.

1. Giữ nguyên khi nội dung và vai trò nhiệm vụ vẫn phù hợp với không gian mới mà không gây cuộn hai chiều không cần thiết.
2. Xếp chồng khi các vùng độc lập hoặc đã có trình tự đúng vẫn dễ hiểu và thao tác theo một trục.
3. Di chuyển khi nhãn, giá trị, bằng chứng và hành động không mất ngữ cảnh trong trình tự mới.
4. Cô đọng khi có thể giảm lặp hoặc giảm trang trí mà không loại bỏ thông tin và chức năng thiết yếu.
5. Mở dần khi người dùng vẫn tìm được chi tiết, hiểu nó thuộc về nội dung nào và vận hành được cơ chế hiển thị.

Phân cấp đáp ứng không phải thứ tự các hộp trên máy tính co lại; đó là thứ tự mà ý nghĩa còn sống sót.

Đội ngũ nên kiểm tra và quản trị phân cấp ra sao?

Đội ngũ nên kiểm tra cùng một hợp đồng phân cấp ở bản rộng, hẹp, phóng to và tuyến tính, sau đó xác thực bằng nhiệm vụ với người dùng đại diện. Trước hết, đưa bản rộng của trang chọn gói cho người đánh giá mà không giải thích ý đồ thiết kế. Yêu cầu họ chỉ ra mục đích trang, bằng chứng năng lực liên quan, ba lựa chọn gói và hành động yêu cầu đánh giá. Nếu câu trả lời phụ thuộc vào lời giải thích của người thiết kế, hợp đồng chưa được biểu đạt đủ rõ trên giao diện.

Lặp lại phép kiểm tra khi thu hẹp và phóng to, đồng thời tìm nội dung bị mất, cuộn hai chiều, bằng chứng bị tách, so sánh đứt đoạn, hành động cạnh tranh hoặc bước chính bị chôn sâu. Tách riêng việc kiểm tra trình tự đọc có thể xác định bằng chương trình khỏi đánh giá bố cục bằng mắt. Tiêu đề mô tả đúng giúp người dùng tìm và dự đoán nội dung, nhưng không thay thế cấu trúc ngữ nghĩa. Việc tái định dạng cũng phải được đánh giá theo khả năng bảo toàn cả thông tin lẫn chức năng, chứ không chỉ theo việc các mô-đun có vừa khung nhìn hay không.

Quy tắc quản trị nên ngắn gọn: mọi quyết định phân cấp cấp trang phải bảo vệ được bằng hợp đồng phân cấp, một nhiệm vụ người dùng đại diện và một kết quả quan sát được, không chỉ bằng gu thẩm mỹ. WCAG là yêu cầu quan trọng về khả năng tiếp cận, nhưng một trang đáp ứng các tiêu chí kỹ thuật vẫn cần kiểm tra riêng xem người dùng có hiểu và hoàn thành nhiệm vụ hay không. Khi đội ngũ thiếu bằng chứng hoặc không tự đánh giá chắc chắn các quan hệ và hành vi đáp ứng phức tạp, hãy đưa chuyên gia khả năng tiếp cận hoặc nghiên cứu người dùng vào quá trình ra quyết định.