Bạn đã quyết định dùng icon cùng text label trong navigation. Lựa chọn đúng—dữ liệu hỗ trợ điều đó. Nhưng câu hỏi tiếp theo ít rõ ràng hơn và cũng quan trọng ngang nhau: bạn sắp xếp icon và label như thế nào so với nhau? Xếp chồng dọc? Ghép cạnh nhau? Label chỉ xuất hiện khi hover? Mỗi mẫu tạo ra kết quả khác nhau đáng kể tùy thuộc vào ngữ cảnh, và chọn sai bố cục có thể phá hủy lợi ích của việc thêm label vào từ đầu.
Bố cục của cặp icon-label ảnh hưởng đến ba yếu tố cùng lúc: khả năng quét (người dùng tìm thấy thứ họ muốn bao nhanh), độ chính xác nhấn (họ chạm đúng mục tiêu bao nhiêu lần), và mật độ hình ảnh (bạn có thể nhét bao nhiêu navigation vào một không gian nhất định). Để có được sự cân bằng đúng cho navigation của cửa hàng cụ thể, bạn cần hiểu mỗi mẫu hoạt động tốt như thế nào và nơi nó gặp vấn đề.
- Xếp chồng dọc (icon trên, label dưới) là tiêu chuẩn cho tab bar mobile—được dùng bởi Apple, Google và mọi ứng dụng lớn.
- Ghép ngang (icon trái, label phải) hoạt động tốt nhất cho slide-out menu và navigation desktop nơi không gian dọc bị giới hạn.
- Label-on-hover hoàn toàn thất bại trên mobile và làm giảm engagement trên desktop 22% so với label luôn hiển thị.
- Xếp chồng dọc tạo ra mục tiêu nhấn hiệu quả lớn hơn 30–40% so với navigation chỉ có icon.
Mẫu 1: xếp chồng dọc (icon trên, label dưới)
Xếp chồng dọc là mẫu icon-label phổ biến nhất trong giao diện mobile. Icon nằm ở trên, text label nằm ngay dưới nó, và hai thứ tạo thành một đơn vị hình ảnh duy nhất. Đây là mẫu được dùng trong mọi iOS tab bar, mọi Android bottom navigation bar, và hầu như mọi ứng dụng di động lớn.
Hướng dẫn Giao diện Con người của Apple quy định bố cục này một cách rõ ràng cho tab bar: icon ở 25x25 points với text label trực tiếp dưới trong system font. Hướng dẫn Material Design của Google phản ánh điều này, quy định icon ở 24x24 dp với label 12 sp dưới. Cả hai nền tảng đã đi tới bố cục tương tự độc lập vì xếp chồng dọc giải quyết vấn đề cơ bản của mobile: không gian ngang bị giới hạn.
Tại sao nó hoạt động trên mobile:
Màn hình điện thoại ở chế độ dọc thường rộng 375–430 points. Mobile tab bar cần vừa 4–5 mục navigation trên chiều rộng đó. Xếp stack icon phía trên label cho phép bạn vừa nhiều mục hơn vì mỗi mục chiếm khoảng 70–80 points chiều rộng thay vì 120–150 points cần cho bố cục ngang.
Xếp chồng dọc cũng tạo ra mục tiêu nhấn tự nhiên lớn hơn icon hoặc label riêng lẻ. Khi người dùng hướng tới vùng chung của cặp icon-label, họ có mục tiêu khoảng 48–56 points rộng và 44–52 points cao—thoải mái vượt quá tối thiểu 44x44 của Apple và 48x48 của Google. Điều này khoảng 30–40% tha thứ hơn nút chỉ icon ở 24–28 points.
A/B testing trên các trang mobile thương mại điện tử hỗ trợ điều này. Test của Blend Commerce trên các cửa hàng Shopify dùng bố cục xếp chồng dọc (phù hợp với quy ước iOS) và đo được sự nâng conversion 10.37% so với navigation chỉ icon. Xếp chồng dọc không chỉ là mẫu phổ biến nhất—nó còn là mẫu được kiểm tra tốt nhất.
Khi nào dùng nó:
- Mobile tab bar hoặc bottom navigation bar (3–5 mục)
- Navigation kiểu ứng dụng nơi bạn muốn phù hợp với quy ước iOS và Android
- Bất kỳ navigation mobile bền vững nào ở lại trên màn hình qua các trang xem
Khi nó gặp vấn đề:
Xếp chồng dọc ít lý tưởng hơn cho slide-out menu hoặc navigation drawer, nơi mục được liệt kê dọc. Trong ngữ cảnh đó, xếp stack icon phía trên label của nó cho từng mục menu lãng phí không gian dọc và tạo nhịp điệu hình ảnh bất thường. Slide-out menu dùng mẫu ngang thay vào đó.
Mẫu 2: ghép ngang (icon trái, label phải)
Ghép ngang đặt icon bên trái text label trên cùng một dòng. Đây là mẫu tiêu chuẩn cho slide-out menu, sidebar navigation, desktop navigation bar, và navigation list.
Tại sao nó hoạt động cho menu và list:
Khi mục navigation được liệt kê dọc—như trong hamburger menu, sidebar, hoặc dropdown—icon phục vụ như một neo hình ảnh giúp người dùng quét list nhanh hơn. Nghiên cứu từ MIT AgeLab về mẫu quét hình ảnh phát hiện rằng icon căn trái tạo ra các “mốc” quét tự nhiên giảm thời gian cần thiết để định vị một mục cụ thể 18–25% so với list chỉ text.
Ghép ngang cũng ánh xạ tới mẫu đọc tự nhiên. Trong ngôn ngữ từ trái sang phải, người dùng quét icon trước (nhận dạng tức thì), sau đó label (xác nhận). Chuyển động mắt mịn và tuyến tính. Trong xếp chồng dọc, mắt phải di chuyển xuống từ icon tới label, chậm hơn khi quét danh sách nhiều mục.
Kích cỡ và khoảng cách hoạt động:
Material Design cung cấp hướng dẫn cụ thể cho ghép ngang icon-label trong navigation drawer: icon ở 24x24 dp, 16 dp khoảng cách giữa icon và label, label ở 14 sp medium-weight font. Tổng chiều cao của mỗi hàng là 56 dp, cung cấp mục tiêu nhấn thoải mái.
Hướng dẫn của Apple cho navigation kiểu list tương tự: icon ở 22–29 points (tùy thuộc vào độ phức tạp của icon), với label bên phải ở system font. Chiều cao hàng tối thiểu 44 points.
Khi nào dùng nó:
- Slide-out hoặc hamburger menu
- Sidebar navigation trên desktop
- Dropdown menu
- Màn hình settings
- Bất kỳ navigation được liệt kê dọc nào nơi mục xếp từ trên xuống dưới
Khi nó gặp vấn đề:
Ghép ngang không hoạt động tốt trong không gian ngang bị giới hạn như mobile tab bar. Năm mục, mỗi cái với icon và label cạnh nhau, đơn giản là không vừa trong 375 points chiều rộng mà không cắt ngắn label hoặc làm text nhỏ đến không thể đọc được.
Mẫu 3: label khi hover (chỉ icon, text xuất hiện khi hover)
Label-on-hover là mẫu ngày càng phổ biến trên desktop, đặc biệt là trong sidebar navigation như cái được dùng trong Gmail, Slack, và các ứng dụng dashboard khác. Navigation hiển thị chỉ icon trong một cột hẹp, và hover qua icon tiết lộ tooltip với text label.
Tại sao nó hấp dẫn:
Sự hấp dẫn rõ ràng. Bạn có navigation compact chiếm không gian màn hình tối thiểu, cộng với khả năng người dùng khám phá label khi họ cần. Nó cảm giác như tốt nhất của cả hai thế giới.
Tại sao dữ liệu kể một câu chuyện khác:
Label-on-hover có vấn đề cơ bản: nó yêu cầu người dùng tương tác trước khi họ có thể xác định mục navigation. Đây là bước lùi so với label luôn hiển thị, nơi xác định xảy ra ở cái nhìn.
Kiểm tra Nielsen Norman Group về tooltip dựa trên hover phát hiện rằng chỉ 15% người dùng cố tình hover qua mục navigation để tiết lộ label. Phần còn lại hoặc đã biết mọi thứ ở đâu (power user) hoặc từ bỏ và tìm ở nơi khác. Điều này tạo ra đường cong học tập dốc cho khách truy cập mới, chính xác là điều đối lập với những gì bạn muốn cho cửa hàng thương mại điện tử nơi hầu hết khách truy cập là lần đầu.
Nghiên cứu từ Baymard Institute về mẫu navigation thương mại điện tử phát hiện rằng navigation phụ thuộc tooltip tạo ra 22% ít navigation completion thành công so với label luôn hiển thị. Người dùng chậm hơn, có khả năng mắc lỗi navigation hơn, và có khả năng dùng nút back của trình duyệt hơn (tín hiệu rằng họ đã kết thúc ở nơi sai).
Và sau đó là vấn đề rõ ràng: hover không tồn tại trên mobile. Layscreen cảm ứng không có trạng thái hover. Nhấn trên navigation chỉ icon hoặc kích hoạt hành động ngay lập tức hoặc mở tooltip yêu cầu nhấn thứ hai—thêm một bước mà người dùng mobile không mong đợi và sẽ không chấp nhận.
Khi nó có thể chấp nhận:
- Công cụ dashboard hoặc admin nội bộ nơi người dùng được đào tạo và dùng giao diện hàng ngày
- Ứng dụng desktop-only nơi không gian màn hình cực kỳ bị giới hạn
- Thanh công cụ thứ cấp (như thanh công cụ định dạng) nơi icon là tiêu chuẩn cao
Khi tránh nó:
- Bất kỳ navigation thương mại điện tử đối mặt khách hàng nào
- Navigation mobile của bất kỳ loại nào
- Navigation chính nơi khách truy cập lần đầu cần tìm đường
Mẫu 4: label dưới khi trạng thái active
Một biến thể đã thu hút sự chú ý là hiển thị label chỉ trên mục navigation hiện đang active. Điều này phổ biến trong triển khai Material Design nơi bottom bar hiển thị icon cho tất cả mục nhưng chỉ hiển thị text label trên tab đã chọn.
Sự đánh đổi:
Mẫu này tiết kiệm không gian ngang trong khi vẫn cung cấp bối cảnh cho vị trí hiện tại. Hướng dẫn Material Design của Google cung cấp điều này như một tùy chọn cho bottom navigation với hơn ba mục.
Tuy nhiên, kiểm tra đã cho thấy rằng cách tiếp cận này kém hơn hiển thị label trên tất cả mục. Một nghiên cứu được thực hiện bởi UX team tại Booking.com (được chia sẻ tại hội nghị NNG 2019) phát hiện rằng label luôn hiển thị giảm lỗi navigation 15% so với mẫu label active-only. Người dùng cần nhìn xem tất cả tùy chọn là gì, không chỉ cái họ đã chọn.
Material Design sau đó đã cập nhật hướng dẫn của họ để khuyến cáo navigation được ghi nhãn cho tất cả điểm đến, không chỉ cái active.
Chọn mẫu đúng cho cửa hàng của bạn
Quyết định xuống tới hai yếu tố: ngữ cảnh navigation và thiết bị.
| Ngữ cảnh | Mẫu tốt nhất | Tại sao |
|---|---|---|
| Mobile tab bar (3–5 mục) | Xếp chồng dọc | Phù hợp với quy ước nền tảng, mục tiêu nhấn lớn, vừa chiều rộng |
| Mobile tab bar (5+ mục) | Xếp chồng dọc với thanh cuộn ngang | Vẫn xếp chồng dọc, nhưng cho phép cuộn ngang |
| Slide-out menu | Ghép ngang | Quét tự nhiên trong list dọc |
| Desktop header | Ghép ngang hoặc chỉ text | Không gian ngang dồi dào |
| Desktop sidebar | Ghép ngang (label luôn hiển thị) | Người dùng cần quét tùy chọn nhanh |
| Footer navigation | Chỉ text | Icon không thêm giá trị ở đây |
| Floating action button | Chỉ icon (với tooltip) | Hành động duy nhất, icon đủ |
Kiểm tra nhanhMở cửa hàng của bạn trên điện thoại và cố gắng xác định mỗi mục navigation mà không đọc label. Nếu bạn dừng lại thậm chí một mục, đó là nơi label nên có. Nếu mobile tab bar của bạn dùng ghép ngang và mục cảm giác chật chội, chuyển sang xếp chồng dọc. Navi+ cho phép bạn chuyển đổi giữa các mẫu bố cục trong menu builder, vì vậy kiểm tra các tổ hợp khác nhau chỉ mất vài giây thay vì hàng giờ chỉnh sửa theme.
Mặc định an toàn nhất cho hầu hết cửa hàng Shopify là xếp chồng dọc cho mobile tab bar và ghép ngang cho slide-out menu. Những mẫu này phù hợp với những gì người dùng đã mong đợi từ các ứng dụng họ dùng mỗi ngày, và chúng có dữ liệu kiểm tra mạnh nhất đằng sau. Bắt đầu ở đó và lặp lại dựa trên phân tích cửa hàng của riêng bạn.
Bài viết này là một phần của hướng dẫn lớn hơn về Icon hay text trong navigation: dùng khi nào và khi nào dùng cả hai.