Khi mở một trang web, không ai đọc từ trên xuống dưới như đọc sách. Mắt người dùng quét nhanh, dừng ở vài điểm nổi bật, rồi quyết định có ở lại hay không trong vài giây. Phần quyết định họ nhìn cái gì trước, cái gì sau chính là phân cấp thị giác. Làm tốt thì người đọc nắm ý chính mà không cần cố gắng; làm sai thì mọi thứ đập vào mắt cùng lúc, không biết bắt đầu từ đâu.
Phân cấp thị giác hoạt động dựa trên điều gì
Theo Nielsen Norman Group, phân cấp thị giác là việc tổ chức các phần tử để mắt tiêu thụ chúng theo đúng thứ tự quan trọng mà người thiết kế muốn. Nói cách khác, đây là một dạng “ngôn ngữ thầm lặng”: người đọc chưa cần đọc chữ đã cảm nhận được phần nào lớn, phần nào nhỏ, phần nào nên xem trước.
Cơ chế nằm ở chỗ não bộ ưu tiên những gì khác biệt. Một dòng chữ to giữa rừng chữ nhỏ sẽ được chú ý. Một nút màu coral trên nền trắng sẽ được chú ý. Phân cấp thị giác chính là việc tạo ra những khác biệt có chủ đích để dẫn mắt đi đúng đường.
Năm công cụ tạo phân cấp thị giác
Bạn không cần kỹ thuật cao siêu. Chỉ có vài công cụ, nhưng dùng đúng liều lượng mới quan trọng.
1. Cỡ (scale)
Phần tử lớn hơn có “trọng lượng thị giác” lớn hơn và được nhìn trước. Đây là công cụ mạnh nhất và dễ nhất. NN/G khuyến nghị giới hạn ở khoảng 3 bậc cỡ (tiêu đề, tiêu đề phụ, chữ thân) và đừng có quá 2 phần tử thật to trên một màn hình — nhiều thứ to cùng lúc thì chẳng còn gì nổi bật nữa.
2. Đậm nhạt và màu (contrast)
Độ tương phản về độ sáng, độ đậm chữ (bold/italic) và màu sắc giúp một phần tử “tiến lên” hoặc “lùi xuống”. Một nút hành động màu nổi trên nền dịu là cách dẫn mắt cổ điển. NN/G khuyên giới hạn 2–3 màu chính để giao diện không bị loạn.
3. Màu nhấn dùng tiết kiệm
Material Design khuyên dùng màu để nhấn một cách dè dặt — màu càng tiết kiệm thì mỗi điểm màu càng có sức nặng. Nếu cái gì cũng tô màu, mắt không biết bám vào đâu.
4. Khoảng cách (spacing)
Khoảng trắng không phải chỗ “bỏ phí”. Tăng khoảng cách giữa các nhóm và giảm khoảng cách trong cùng một nhóm sẽ tạo ra phân cấp mà không cần thêm đường kẻ hay hộp. Đây là lý do khoảng trắng trong thiết kế gắn chặt với phân cấp thị giác: tách rời tốt cũng là một cách xếp thứ tự.
5. Vị trí (position)
Người dùng đọc lướt theo những mẫu nhất định — với khối văn bản dài thường là hình chữ F, mắt lướt ngang đầu trang rồi tụt xuống. Đặt thông tin quan trọng ở vùng mắt đi qua đầu tiên (trên cùng, bên trái với ngôn ngữ đọc trái-phải) giúp nó được thấy mà không cần phóng to.
| Công cụ | Tín hiệu gửi tới mắt | Liều lượng nên dùng |
|---|---|---|
| Cỡ | “To = quan trọng hơn” | Tối đa ~3 bậc |
| Đậm/màu | “Nổi = xem ngay” | 2–3 màu chính |
| Khoảng cách | “Gần nhau = cùng nhóm” | Trong nhóm hẹp, giữa nhóm rộng |
| Vị trí | “Trên/trái = đọc trước” | Đặt nội dung chính vào vùng mắt quét |
Khác gì với nguyên lý Gestalt
Nhiều người nhầm phân cấp thị giác với nguyên lý Gestalt trong thiết kế, nhưng hai thứ trả lời hai câu hỏi khác nhau:
- Gestalt trả lời: “Những phần tử nào thuộc về cùng một nhóm?” — đó là chuyện gom nhóm (proximity, similarity, common region).
- Phân cấp thị giác trả lời: “Trong các nhóm/phần tử đó, cái nào nên xem trước?” — đó là chuyện thứ tự ưu tiên.
Ví dụ: Gestalt giúp bạn thấy ba ô sản phẩm là một nhóm sản phẩm. Phân cấp thị giác giúp bạn thấy ô “Bán chạy nhất” được làm nổi để nhìn trước hai ô còn lại. Hai nguyên lý làm việc cạnh nhau, không thay thế nhau.
Phân cấp thị giác và typography đi cùng nhau
Phần lớn phân cấp trên web được tạo bằng chữ. Một hệ thang cỡ chữ rõ ràng — tiêu đề lớn, tiêu đề phụ vừa, chữ thân nhỏ — chính là phân cấp thị giác bằng văn bản. Đó là lý do bài này gắn liền với typography cho web: chọn cỡ, chọn độ đậm, chọn khoảng cách dòng đều là đang xếp thứ tự ưu tiên cho người đọc. Một bài viết toàn chữ cùng cỡ sẽ khiến người đọc mệt vì không có điểm dừng để mắt nghỉ.
Cách kiểm tra phân cấp của một trang
Có một phép thử nhanh mà bất kỳ ai cũng làm được: nheo mắt nhìn vào màn hình cho mọi thứ mờ đi. Khi chi tiết biến mất, phần nào còn nổi rõ chính là phần phân cấp đang ưu tiên. Nếu phần nổi rõ đó đúng là phần bạn muốn người dùng thấy trước thì phân cấp đang ổn; nếu mắt dừng nhầm chỗ, cần điều chỉnh cỡ, màu hoặc khoảng cách.
Một cách khác là tự hỏi: “Nếu người dùng chỉ nhìn 3 giây, họ sẽ thấy gì?” Liệt kê ra 3 phần tử đó và đối chiếu với mục tiêu của trang.
Khi nhận thiết kế website, Web22 vừa thiết kế vừa lập trình giao diện, nên thang phân cấp đặt ra trong bản thiết kế ra đúng như vậy khi lên code thật — không bị lệch ở khâu bàn giao. Nếu bạn cần dựng giao diện có phân cấp rõ ràng cho website, tham khảo dịch vụ thiết kế UI/UX của Web22.
Câu hỏi thường gặp
Phân cấp thị giác có phải chỉ là làm chữ to nhỏ không?
Không. Cỡ chữ chỉ là một công cụ. Màu, độ đậm, khoảng cách và vị trí cũng tạo phân cấp, và thường phải kết hợp nhiều công cụ mới rõ.
Một trang nên có bao nhiêu bậc phân cấp?
Càng ít càng dễ đọc. NN/G gợi ý khoảng 3 bậc cỡ là đủ cho phần lớn nội dung. Quá nhiều bậc khiến mắt mất phương hướng.
Làm sao biết phân cấp đã đúng?
Dùng phép thử nheo mắt, hoặc đưa cho người chưa từng xem trang và hỏi họ nhìn thấy gì đầu tiên. Nếu họ chỉ đúng phần bạn muốn ưu tiên thì phân cấp đang hoạt động.