Hỏi một phòng thiết kế viên liệt kê những biểu tượng mà họ cảm thấy thoải mái khi dùng mà không có nhãn chữ, bạn sẽ nhận được hai mươi danh sách khác nhau. Hỏi người dùng ý nghĩa của những biểu tượng đó, bạn sẽ nhận được hai trăm câu trả lời khác nhau. Khoảng cách giữa những gì thiết kế viên cho là phổ biến và những gì người dùng thực sự hiểu được là một trong những sai lầm tốn kém nhất trong navigation ecommerce.
Sự thật, được hỗ trợ bởi nhiều năm nghiên cứu từ Nielsen Norman Group, Apple, Google và các công ty A/B testing quy mô lớn, thực tế hẹp hơn nhiều so với những gì hầu hết mọi người nghĩ. Chỉ có một số ít biểu tượng có thể được dùng một mình mà không gây ra sự nhầm lẫn. Mọi thứ khác đều cần một nhãn.
- Chỉ năm biểu tượng có sự công nhận gần như phổ biến: home, search, cart, menu (hamburger) và close.
- Nghiên cứu của Nielsen Norman Group cho thấy 60% người dùng diễn giải sai những biểu tượng mà thiết kế viên cho là hiển nhiên.
- Sự không nhất quán giữa các nền tảng là nguyên nhân chính—cùng một biểu tượng có nghĩa khác nhau trên các ứng dụng khác nhau.
- Ngay cả những biểu tượng "phổ biến" cũng được hưởng lợi từ nhãn khi không gian cho phép, tăng engagement 10–20%.
Năm biểu tượng phổ biến
Những biểu tượng thực sự hoạt động mà không cần chữ là những biểu tượng đã được chuẩn hóa trên các nền tảng trong hàng chục năm và có các phiên bản gần như giống hệt nhau trong hầu như mọi ứng dụng chính mà người dùng gặp phải. Danh sách này rất ngắn.
1. Home (biểu tượng ngôi nhà)
Biểu tượng ngôi nhà đã có nghĩa là “đi tới trang chủ” từ lâu đến nỗi ý nghĩa của nó đã bị lấp trong kỳ vọng của người dùng. Mọi trình duyệt, mọi hệ điều hành di động và hầu như mọi ứng dụng đều sử dụng cùng một phép ẩn dụ trực quan. Tỷ lệ nhận dạng của biểu tượng home vượt quá 95% trong hầu hết các bài kiểm tra người dùng.
Tuy vậy, biểu tượng home có phần dư thừa trong ecommerce. Hầu hết các chủ đề Shopify đã sử dụng logo cửa hàng làm liên kết trang chủ, có chức năng tương tự và tăng cường nhận dạng thương hiệu. Nếu bạn có cả logo và biểu tượng home, bạn đang dành hai phần navigation real estate cho cùng một hành động.
2. Search (kính lúp)
Biểu tượng kính lúp là một trong những biểu tượng được kiểm tra nhiều nhất trên web. Tỷ lệ nhận dạng của nó luôn ở mức trên 90%, và người dùng nhấn vào nó mà không do dự. Biểu tượng này có ưu điểm là trực quan từ khía cạnh hình ảnh—kính lúp trông giống như một công cụ để tìm kiếm những thứ—và nó đã được sử dụng trong các hệ điều hành máy tính để bàn từ những năm 1980.
Trong ecommerce, tìm kiếm là rất quan trọng. Biểu tượng kính lúp có thể được dùng an toàn một mình trong tiêu đề di động hoặc tab bar, mặc dù thêm từ “Search” bên dưới nó vẫn tạo ra một sự tăng nhỏ nhưng có thể đo lường được trong engagement. Ngay cả những biểu tượng phổ biến cũng được nhấn vào nhiều hơn khi có nhãn.
3. Shopping cart hoặc bag
Hàng chục năm mua sắm trực tuyến đã khiến biểu tượng giỏ hàng trở nên không thể nhầm lẫn. Cho dù đó là giỏ hàng từ một cửa hàng tạp hóa hay một túi mua sắm từ một cửa hàng bán lẻ, người dùng biết rằng nó có nghĩa là “xem những mặt hàng tôi định mua”. Biểu tượng này thường bao gồm một badge hiển thị số lượng mặt hàng, điều này làm tăng sự rõ ràng chức năng.
Kiểm tra từ Baymard Institute cho thấy rằng nhận dạng biểu tượng cart trong các bối cảnh ecommerce nằm trên 95%. Không giống như một số biểu tượng khác, biểu tượng cart không bị quá tải bởi các ý nghĩa thay thế—nó có nghĩa là một thứ, và ý nghĩa đó ổn định trên các nền tảng.
4. Menu (biểu tượng hamburger)
Biểu tượng ba dòng hamburger đã trở thành ký hiệu mặc định cho “mở menu” trên các thiết bị di động. Sự công nhận của nó đã tăng đáng kể trong thập kỷ qua khi thiết kế ưu tiên di động trở thành tiêu chuẩn. Sự chỉ trích sớm về biểu tượng hamburger—đặc biệt là một bài kiểm tra nổi tiếng năm 2014 cho thấy rằng từ “MENU” hoạt động tốt hơn so với biểu tượng—phần lớn đã được giải quyết khi người dùng thích ứng với mô hình.
Tuy vậy, kết hợp biểu tượng hamburger với từ “Menu” vẫn hoạt động tốt hơn so với chỉ có biểu tượng. Kiểm tra Nielsen Norman Group trên hàng trăm nghìn phiên làm việc phát hiện ra tăng 20% trong engagement menu khi biểu tượng được kết hợp với chữ. Biểu tượng được hiểu rõ, nhưng nhãn loại bỏ chút do dự còn lại.
5. Close (biểu tượng X)
Biểu tượng X để đóng cửa sổ, hộp thoại và overlay được hiểu phổ biến. Nó đã là một phần tiêu chuẩn của giao diện người dùng đồ họa kể từ các hệ điều hành máy tính để bàn sớm nhất. Nhận dạng gần như 100%, và người dùng không do dự khi nhìn thấy nó.
Biểu tượng X là một trong những trường hợp hiếm hoi khi nhãn thực sự sẽ làm hỏng khả dụng. Thêm từ “Close” bên cạnh X tạo ra sự dư thừa mà không cần thêm sự rõ ràng, và nó chiếm dụng không gian thường rất hạn chế trong tiêu đề modal.
Tại sao mọi thứ khác không hoạt động mà không có nhãn
Khi bạn bước ra ngoài năm biểu tượng này, tỷ lệ nhận dạng giảm mạnh. Lý do là sự không nhất quán giữa các nền tảng. Cùng một ký hiệu trực quan có nghĩa khác nhau trong các bối cảnh khác nhau, và người dùng không có cách nào biết ý nghĩa nào áp dụng cho cửa hàng của bạn trừ khi bạn cho họ biết.
Biểu tượng trái tim là một ví dụ hoàn hảo. Trên Instagram, nó có nghĩa là “like”. Trên Pinterest, nó có nghĩa là “save”. Trên nhiều trang ecommerce, nó có nghĩa là “thêm vào danh sách yêu thích”. Trên các ứng dụng sức khỏe, nó đại diện cho dữ liệu sức khỏe hoặc mục yêu thích. Khi một người dùng gặp biểu tượng trái tim trên cửa hàng của bạn lần đầu tiên, họ đang đoán. Nghiên cứu từ Nielsen Norman Group phát hiện ra rằng những biểu tượng trái tim không có nhãn bị diễn giải sai bởi hơn 40% người dùng trong các bối cảnh ecommerce.
Biểu tượng sao có cùng vấn đề. Nó có thể có nghĩa là xếp hạng, mục yêu thích, tính năng cao cấp hoặc các mặt hàng nổi bật, tùy thuộc vào ứng dụng. Không có nhãn, người dùng phải giải mã nó từ bối cảnh, điều này tạo ra ma sát.
Biểu tượng người hoặc người dùng có vẻ hiển nhiên—nó đại diện cho “tài khoản” hoặc “hồ sơ”, phải không? Ngoại trừ trên một số trang web nó có nghĩa là “đăng nhập”, trên những trang khác nó có nghĩa là “dịch vụ khách hàng”, và trên những trang khác nó mở một dropdown với nhiều hành động liên quan đến tài khoản. Các nghiên cứu nhận dạng cho thấy rằng chỉ khoảng 60% người dùng xác định chính xác biểu tượng người là “tài khoản” vào lần đầu tiên gặp.
Các biểu tượng lưới, thẻ, bộ lọc và dấu trang đều bị sự mơ hồ nghiêm trọng. Một lưới có thể có nghĩa là “xem dưới dạng lưới”, “danh mục”, “bộ sưu tập” hoặc “tất cả sản phẩm”. Một thẻ có thể có nghĩa là “mặt hàng bán”, “nhãn” hoặc “tổ chức”. Biểu tượng bộ lọc có phần tốt hơn, nhưng vẫn chỉ được công nhận bởi khoảng 70% người dùng mà không có nhãn.
Mô hình rõ ràng: những biểu tượng có một ý nghĩa ổn định trên tất cả các nền tảng chính có thể hoạt động một mình. Những biểu tượng có nghĩa khác nhau trong các ứng dụng khác nhau không thể.
Dữ liệu nhận dạng
Nielsen Norman Group đã chạy nhiều vòng kiểm tra khả dụng biểu tượng trong thập kỷ qua. Những phát hiện của họ là nhất quán. Trong một nghiên cứu được trích dẫn rộng rãi, họ đã kiểm tra 75 biểu tượng khác nhau được sử dụng trên các trang ecommerce và nội dung. Chỉ sáu biểu tượng có tỷ lệ nhận dạng trên 80%. Phần còn lại rơi vào một phạm vi mà 40% đến 70% người dùng hoặc nhầm lẫn biểu tượng hoặc bỏ qua nó hoàn toàn vì họ không chắc chắn.
Nghiên cứu nội bộ của Apple, đó là cơ sở cho Hướng dẫn Giao diện Người dùng của họ, dẫn họ đến việc rõ ràng khuyến nghị nhãn chữ trên tất cả các mục tab bar. Hướng dẫn của họ nói: “Nếu bạn loại bỏ các nhãn khỏi tab bar của mình, hãy chắc chắn rằng các biểu tượng rõ ràng và dễ hiểu.” Nhưng sau đó nó đi xa hơn: “Nói chung, tốt nhất là bao gồm các nhãn vì chúng giúp người dùng hiểu mục đích của mỗi tab ở cái nhìn thoáng qua.”
Hướng dẫn Material Design của Google thậm chí còn trực tiếp hơn. Hướng dẫn cho bottom navigation quy định: “Nhãn chữ phải được sử dụng cho tất cả các điểm đến. Các điểm đến không có nhãn chữ không giao tiếp rõ ràng đủ trên chính nó.” Họ đã kiểm tra các thanh bottom icon-only và phát hiện ra rằng thêm nhãn chữ cải thiện tỷ lệ thành công điều hướng 18%.
Đây không phải là lý thuyết. Khi các nền tảng chính với hàng tỷ người dùng và gần như tài nguyên vô hạn để kiểm tra cho bạn biết rằng nhãn chữ là bắt buộc, đó là vì dữ liệu của họ cho thấy rằng những biểu tượng không có nhãn làm hỏng khả dụng.
Khi những biểu tượng phổ biến vẫn được hưởng lợi từ nhãn
Ngay cả năm biểu tượng phổ biến cũng hoạt động tốt hơn với nhãn trong nhiều bối cảnh. Sự khác biệt nhỏ hơn so với những biểu tượng mơ hồ, nhưng nó có thể đo lường được.
Kiểm tra từ Blend Commerce trên các cửa hàng Shopify phát hiện ra rằng một tab bar di động với các biểu tượng và nhãn chữ tạo ra tỷ lệ chuyển đổi cao hơn 10% so với cùng một tab bar chỉ có biểu tượng—ngay cả khi các biểu tượng được sử dụng là từ bộ phổ biến (home, search, collections được đại diện bởi lưới, cart, account).
Tại sao thêm nhãn vào biểu tượng kính lúp lại tăng engagement? Có hai lý do. Đầu tiên, nhãn cung cấp xác nhận. Một người dùng nhìn thấy biểu tượng, nhận ra nó, và nhãn xác nhận rằng họ đúng trước khi họ nhấn. Giây lát tự tin đó loại bỏ ma sát vi mô. Thứ hai, nhãn tạo ra một mục tiêu nhấn lớn hơn, dễ dàng hơn, điều này cải thiện khả dụng trên các màn hình nhỏ.
Bài học thực tiễn: những biểu tượng phổ biến có thể được dùng một mình khi không gian thực sự bị hạn chế, nhưng thêm những nhãn ngắn là lựa chọn tốt hơn theo mặc định.
Điều này để lại cho navigation của bạn
Nếu bạn đang xây dựng hoặc kiểm tra navigation cho một cửa hàng Shopify, đây là khung ra quyết định:
Các biểu tượng an toàn khi dùng một mình:
- Search (kính lúp)
- Cart hoặc bag
- Close (X)
- Home (nếu không dư thừa với logo)
- Menu (hamburger)
Các biểu tượng cần nhãn:
- Mọi thứ khác. Collections, account, wishlist, favorites, filter, sort, share, settings, notifications, chat và bất kỳ biểu tượng cụ thể danh mục nào mà bạn đang xem xét.
Thực hành tốt nhất: Ngay cả những biểu tượng phổ biến cũng nên có nhãn trong persistent navigation như một tab bar di động. Chi phí không gian là tối thiểu—một hoặc hai từ bên dưới mỗi biểu tượng—và lợi ích khả dụng là thực tế.
Nếu navigation hiện tại của bạn sử dụng các nút chỉ có biểu tượng cho bất kỳ thứ gì ngoài search, cart hoặc close, hãy chạy một bài kiểm tra đơn giản. Thêm nhãn chữ và đo lường engagement. Các công cụ như Navi+ giúp dễ dàng bật/tắt nhãn, vì vậy bạn có thể kiểm tra cả hai phiên bản mà không cần xây dựng lại chủ đề của bạn. Dữ liệu gần như luôn ủng hộ phiên bản có nhãn.
Bài viết này là một phần của hướng dẫn lớn hơn về Biểu tượng vs chữ trong navigation: khi dùng cái nào (và khi dùng cả hai).