Vấn đề gốc rễ của menu hamburger
Biểu tượng hamburger — ba đường ngang nằm ngang đại diện cho một menu thu gọn — được giới thiệu vào những năm 1980 cho các giao diện bị hạn chế màn hình và được hồi sinh trong thiết kế web di động vào khoảng năm 2012 khi điện thoại thông minh phổ biến và các nhà thiết kế cần ẩn điều hướng để bảo tồn không gian màn hình. Nó giải quyết một vấn đề thực tế một cách thanh lịch: trên màn hình điện thoại 3,5 inch, một menu điều hướng đầy đủ chiếm quá nhiều không gian. Thu gọn nó sau một biểu tượng nhỏ giúp tiết kiệm không gian và giữ cho nội dung hiển thị.
Vấn đề mà hamburger tạo ra là điều hướng bị ẩn là điều hướng mà khách truy cập không sử dụng. Các nghiên cứu trên nhiều nền tảng và bối cảnh đã liên tục chỉ ra rằng menu hamburger nhận được ít tương tác hơn so với các lựa chọn điều hướng hiển thị — đặc biệt là trong lần truy cập đầu tiên và từ những người dùng không quen với quy ước này. Biểu tượng không truyền đạt "nhấn vào đây để tìm mọi thứ trong cửa hàng này" cho những khách truy cập chưa được chuẩn bị để tìm kiếm nó. Đối với một phần đáng kể khách truy cập di động, hamburger vô hình theo nghĩa chức năng: họ không thấy điều hướng, không khám phá các danh mục, và hoặc là đến được đích dự định thông qua tìm kiếm hoặc rời đi mà không khám phá những gì cửa hàng thực sự cung cấp.
"Chúng tôi đã A/B test menu hamburger với cấu hình Tab Bar có cùng năm danh mục trong ba tuần. Phiên bản Tab Bar có số lần tương tác điều hướng nhiều hơn 3,4 lần — khách truy cập nhấp vào các liên kết danh mục thường xuyên hơn nhiều khi họ có thể thấy chúng. Quan trọng hơn, các phiên bắt đầu từ một lần nhấp điều hướng Tab Bar có tỷ lệ thêm vào giỏ hàng cao hơn so với các phiên bắt đầu từ một lần nhấp vào menu hamburger. Điều hướng làm tốt hơn trong việc dẫn khách truy cập đến các sản phẩm phù hợp vì họ có thể thấy các tùy chọn trước khi quyết định nhấn."
— Một khách hàng Navi+, thương hiệu làm đẹp và mỹ phẩm
Các kiểu điều hướng thay thế hoặc bổ sung cho hamburger
Các lựa chọn thay thế cho điều hướng chỉ dùng hamburger trong thương mại điện tử di động giải quyết vấn đề khả năng hiển thị mà không hy sinh không gian màn hình đã thúc đẩy việc sử dụng hamburger:
Tab Bar: cố định, hiển thị, luôn có thể truy cập. Tab Bar — hàng 4–5 ô điều hướng có nhãn biểu tượng ở cuối màn hình — là lựa chọn thay thế hamburger được thử nghiệm toàn diện nhất. Các ứng dụng di động gốc đã sử dụng điều hướng Tab Bar hơn một thập kỷ vì nó hoạt động hiệu quả: tất cả các đích điều hướng chính đều hiển thị mà không cần tương tác, chúng có thể đạt được bằng một lần chạm bất kể vị trí cuộn, và chúng được đặt ở cuối màn hình nơi ngón cái tự nhiên đặt vào. Chuyển kiểu này sang điều hướng web di động tạo ra những lợi ích tương tự. Vị trí dưới cùng của Tab Bar là chìa khóa — nó giữ điều hướng chính có thể truy cập mà không cạnh tranh với nội dung ở đầu màn hình, và về mặt công thái học phù hợp với việc sử dụng một tay trên điện thoại màn hình lớn nơi điều hướng tiêu đề đã trở nên thực sự khó tiếp cận.
Floating Action Button: điểm vào điều hướng luôn có thể truy cập. Đối với các cửa hàng không thể giảm điều hướng xuống còn 4–5 đích chính (vì độ sâu danh mục yêu cầu nhiều hơn), Floating Action Button cung cấp một điểm vào cố định, hiển thị đến điều hướng đầy đủ mà không tiêu thụ bất kỳ không gian màn hình cố định nào. FAB nổi phía trên nội dung, di chuyển khi cuộn, và mở Slide Menu đầy đủ bằng một lần chạm. Sự khác biệt quan trọng so với hamburger: FAB nổi bật hơn về mặt thị giác (đó là một vòng tròn, thường có màu thương hiệu, không phải biểu tượng ba dòng tối giản), và nó được đặt ở cuối màn hình trong vùng tiếp cận của ngón cái thay vì góc trên bên trái đòi hỏi phải với tay. Những khách truy cập có thể không nhận thấy biểu tượng hamburger ở góc trên bên trái lại nhận thấy một vòng tròn màu thương hiệu nổi gần ngón cái của họ.
Kết hợp: Tab Bar cộng với Slide Menu có thể truy cập. Kiến trúc điều hướng di động có khả năng nhất kết hợp cả hai: Tab Bar với năm đích điều hướng quan trọng nhất luôn hiển thị, và Slide Menu được kích hoạt từ ô "Thêm" trên Tab Bar hoặc FAB để điều hướng toàn diện. Điều này cung cấp cho khách truy cập quyền truy cập ngay lập tức vào các đích chính mà không cần tương tác, và điều hướng danh mục đầy đủ chỉ với thêm một lần chạm. Slide Menu không còn là điều hướng chính nữa — nó là tài liệu tham khảo toàn diện. Sự kết hợp này là những gì các ứng dụng gốc được thiết kế tốt sử dụng, và nó chuyển trực tiếp sang điều hướng web thông qua các thành phần Tab Bar và Slide Menu kết hợp của Navi+.
Hamburger có nhãn: cải thiện khả năng hiển thị với thay đổi cấu trúc tối thiểu. Đối với các cửa hàng chưa sẵn sàng tái cấu trúc toàn bộ điều hướng, việc thay thế biểu tượng ba dòng bằng một nút có nhãn — "Menu" hoặc "Duyệt" — làm tăng đáng kể tỷ lệ chạm. Nhãn truyền đạt chức năng của nút đến những khách truy cập không nhận ra quy ước ba dòng. Đây là biện pháp can thiệp ít nỗ lực nhất với lợi nhuận có ý nghĩa: các nghiên cứu cho thấy hamburger có nhãn nhận được nhiều hơn 20–40% lần chạm so với hamburger chỉ có biểu tượng, đơn giản bằng cách truyền đạt những gì nút làm.
| Kiểu | Khả năng hiển thị | Trường hợp sử dụng tốt nhất |
|---|---|---|
| Biểu tượng hamburger tiêu chuẩn | Thấp — vô hình với khách truy cập chưa quen | Chỉ cho hệ thống cũ; có lựa chọn tốt hơn trong mọi bối cảnh |
| Tab Bar (4–5 ô) | Tối đa — tất cả đích chính luôn hiển thị | Cửa hàng có 4–5 đích điều hướng chính rõ ràng |
| Floating Action Button | Cao — nổi bật, vùng ngón cái, không phụ thuộc cuộn | Cửa hàng cần truy cập toàn bộ danh mục mà không bị ràng buộc Tab Bar |
| Kết hợp Tab Bar + Slide Menu | Tối đa chính + toàn bộ danh mục chỉ một lần chạm | Kiểu tổng thể tốt nhất cho cửa hàng danh mục vừa đến lớn |
Chiều kích sáng tạo của các lựa chọn thay thế hamburger
Thay thế hamburger không chỉ là một quyết định về khả năng sử dụng — đó là quyết định thể hiện thương hiệu. Tab Bar, FAB và Slide Menu là các thành phần điều hướng có thể tùy chỉnh đầy đủ về phong cách, có thể phản ánh bản sắc thương hiệu của cửa hàng theo cách mà biểu tượng ba dòng không thể làm được. Một FAB màu thương hiệu, một Tab Bar với các biểu tượng tùy chỉnh và màu nhấn của cửa hàng cho trạng thái active, một Slide Menu với hệ thống chữ viết của thương hiệu được áp dụng cho nhãn danh mục — đây là những trải nghiệm điều hướng cảm giác như thương hiệu thay vì cơ sở hạ tầng di động chung chung. Hamburger, theo thiết kế, không truyền đạt gì cả; các lựa chọn thay thế của nó truyền đạt mọi thứ mà thương hiệu muốn điều hướng nói.
Dùng thử miễn phí — không cần code, không cần lập trình viên
Cài đặt trong vài phút trên Shopify, WordPress hoặc bất kỳ website nào.