- Nhãn văn bản (text labels) rất đáng được ủng hộ mạnh mẽ
- Giao diện hiện đại có quá nhiều biểu tượng, khiến người dùng phải tiêu tốn quá nhiều tài nguyên nhận thức để diễn giải ý nghĩa của chúng
- Điều này khiến tốc độ làm việc chậm lại và trải nghiệm kém hiệu quả lặp đi lặp lại
- Việc truyền đạt ý nghĩa chỉ bằng biểu tượng là không hề dễ, và phần lớn biểu tượng đều không trọn vẹn nếu thiếu nhãn văn bản
# Những vấn đề do biểu tượng gây ra
1. Phần lớn biểu tượng không thể truyền tải ý nghĩa rõ ràng ngay lập tức
- Có ý kiến cho rằng “biểu tượng tốt” có thể truyền tải ý nghĩa đầy đủ, nhưng trên thực tế, bất kỳ biểu tượng nào cũng đi kèm gánh nặng nhận thức khi phải diễn giải
- Ví dụ, "biểu tượng thùng rác" tương đối rõ ràng là xóa (Delete), nhưng "biểu tượng cây bút chì" thì mơ hồ
- Viết? Chỉnh sửa? Vẽ? Tạo mới?
- Ngữ cảnh (Context) có thể bổ sung ý nghĩa, nhưng bản thân điều này cũng đòi hỏi thêm gánh nặng nhận thức
2. Càng có nhiều biểu tượng trong giao diện thì việc tìm kiếm càng khó hơn
- Càng nhiều chức năng, càng khó phân biệt chỉ bằng biểu tượng.
- Với 5-7 chức năng thì còn có thể phân biệt bằng biểu tượng, nhưng khi lên tới 15-20 thì các biểu tượng tương tự như lưu/chia sẻ/chỉnh sửa/tạo mới rất dễ gây nhầm lẫn cho nhau.
- Khi mức độ khác biệt giữa các biểu tượng có chức năng gần giống nhau trở nên yếu đi, khả năng đọc lướt cũng giảm theo.
3. Biểu tượng chỉ có ý nghĩa trong một giao diện cụ thể
- Người dùng phải di chuyển qua lại giữa nhiều môi trường giao diện khác nhau (trình duyệt web, hệ điều hành, ứng dụng, v.v.)
- Biểu tượng được dùng trong một giao diện có thể mang ý nghĩa hoàn toàn khác trong môi trường khác
- Đặc biệt khi dùng các bộ biểu tượng tiêu chuẩn (Google Material Design, v.v.), nếu cùng một biểu tượng lại được dùng với nghĩa khác thì sự nhầm lẫn càng tăng lên
# Lợi ích mà nhãn văn bản mang lại cho giao diện
1. Chỉ riêng văn bản cũng đã hiệu quả hơn
- Bộ não của chúng ta được tối ưu để nhận diện từ ngữ rất nhanh.
- Những từ quen thuộc có thể được hiểu ngay mà không cần đọc từng chữ cái một
- Trong khi đó, phần lớn biểu tượng đòi hỏi phải học một ngôn ngữ thị giác mới nên cần nhiều nỗ lực hơn
- Danh sách văn bản chỉ cần đọc từ trên xuống dưới, còn nếu chỉ có biểu tượng thì phải quét mắt theo chiều ngang/dọc xen kẽ.
- Đặc biệt trong môi trường di động, khi các biểu tượng có hình dáng giống nhau được xếp thành hàng, sự rối mắt sẽ tăng lên đáng kể.
2. Văn bản giúp biểu tượng hiệu quả hơn
- Khi thêm nhãn văn bản:
- Ý nghĩa của biểu tượng trở nên rõ ràng hơn và việc tìm kiếm nhanh hơn
- Gánh nặng cho nhà thiết kế khi phải truyền tải mọi ý nghĩa chỉ bằng một biểu tượng cũng giảm đi.
3. Biểu tượng có thể trở thành yếu tố thị giác quan trọng trong giao diện lấy văn bản làm trung tâm
- Biểu tượng đóng vai trò điểm neo thị giác (visual anchor), và khi kết hợp với văn bản sẽ mang lại giao diện hiệu quả nhất
Tìm sự cân bằng giữa biểu tượng và văn bản
- Khi lựa chọn giữa biểu tượng và nhãn văn bản, cần cân nhắc gánh nặng nhận thức của người dùng.
- UI chỉ gồm biểu tượng thoạt nhìn có thể trông gọn gàng, nhưng thực tế lại tạo gánh nặng diễn giải cho người dùng và có thể kém hiệu quả
- Tìm ra biểu tượng hoàn hảo không phải là lời giải.
→ Điều quan trọng là kết hợp biểu tượng và văn bản để mang lại trải nghiệm tối ưu.
# Nguyên tắc cốt lõi cho thiết kế UI tối ưu
- Đừng cố biểu đạt mọi thứ chỉ bằng biểu tượng.
- Thêm nhãn văn bản sẽ cải thiện khả năng đọc và khả năng tiếp cận.
- Biểu tượng và văn bản không phải mối quan hệ cạnh tranh mà là các yếu tố bổ trợ cho nhau.
- Hãy cân nhắc ứng dụng hoặc website được sử dụng như thế nào trong toàn bộ môi trường số.
- Hãy tạo giao diện để người dùng không phải “diễn giải” mà có thể “hiểu ngay lập tức”.
Kết luận: điều quan trọng không phải là “UI đẹp mắt” mà là “UI dễ hiểu”
- Mỗi khi bạn bị cám dỗ muốn tạo một biểu tượng mới hoặc loại bỏ nhãn văn bản, hãy suy nghĩ lại.
- Một thiết kế thực sự gọn gàng không phải là thứ “trông có vẻ đơn giản”, mà là thứ “dễ hiểu”.
3 bình luận
Có vẻ như chỉ nên dùng biểu tượng trong những tình huống có thể hiểu ngay trong một cái nhìn, và nhất thiết phải có tính năng nhấn giữ để hiển thị văn bản hỗ trợ.
Chúng tôi giới hạn ở mức tối đa các trường hợp chỉ dùng biểu tượng.
** Khi khách hàng yêu cầu thôi haha;
Ý kiến trên Hacker News