← Tất cả cẩm nang

Mobile navigation — vì sao hamburger menu đang lỗi thời và nên dùng gì thay thế

Vấn đề thực sự của hamburger menu trên ecommerce mobile

Vấn đề hamburger menu trên ecommerce mobile: ẩn quá nhiều, thêm bước thừa, khó với ngón cái và khuất tầm nhìn. Phân tích kèm số liệu và cách thay thế.

Vấn đề thực sự của hamburger menu trên ecommerce mobile

Tôi từng nghĩ hamburger menu là chuyện đương nhiên. Ba gạch ngang ở góc trên, ai cũng biết bấm vào. Nhưng khi nhìn kỹ số liệu của store mình, tôi nhận ra rất ít khách thực sự mở nó ra. Vấn đề hamburger menu trên ecommerce mobile không nằm ở chỗ nó xấu hay khó hiểu, mà ở chỗ nó giấu đi đúng những thứ khách cần thấy để mua hàng.

Bài này gom lại bốn vấn đề tôi thấy rõ nhất, kèm vài con số có nguồn để bạn tự cân nhắc, chứ không phải để chê cái menu này.

Vấn đề 1: ẩn quá nhiều thứ

Bản chất của hamburger là một cái hộp đóng. Khách không biết bên trong có gì nếu chưa mở. Mà phần lớn họ không mở.

Nielsen Norman Group (NN/G) từng nghiên cứu với 179 người dùng trên 6 website, cả điện thoại lẫn desktop. Kết luận đáng chú ý: ẩn điều hướng làm khả năng khám phá (discoverability) giảm gần một nửa. Khi menu bị ẩn, người dùng ít dùng hơn, và nếu có dùng thì cũng muộn hơn.

Đặt vào ngữ cảnh người bán Việt Nam: bạn có một danh mục “Hàng mới về” hay “Sale 50%” mà rất muốn khách thấy. Nhưng nếu nó nằm trong hamburger, đa số khách lướt qua trang chủ rồi thoát mà không biết bạn đang có chương trình đó. Bạn bỏ công nhập liệu, gắn ảnh, nhưng nó nằm sau một cánh cửa đóng.

Vấn đề 2: thêm một bước thừa

Hamburger bắt khách đi qua nhiều bước hơn mức cần: mở menu, đợi nó trượt ra, đọc danh sách, tìm đúng danh mục, bấm, rồi mới tới trang.

So với Tab Bar — thanh điều hướng cố định ở đáy màn hình. Khách thấy “Trang chủ”, “Danh mục”, “Giỏ hàng”, “Tài khoản” ngay từ đầu và tap thẳng vào cái họ cần. Một chạm thay vì ba bốn chạm.

Mỗi bước thừa là một chỗ khách có thể đổi ý hoặc mất kiên nhẫn. Trên mobile, sự kiên nhẫn vốn đã mỏng. NN/G cũng ghi nhận người dùng làm việc chậm hơn 15% trên các site có điều hướng ẩn ở mobile, và tới 39% trên desktop, so với điều hướng hiện rõ. Chậm hơn không phải vì khách kém, mà vì cấu trúc bắt họ phải tìm.

Điều này gián tiếp liên quan tới chuyện bỏ giỏ. Theo Baymard Institute, tỷ lệ bỏ giỏ trung bình của ecommerce vào khoảng 70%, và trên mobile còn nhỉnh hơn. Tôi không nói hamburger là nguyên nhân chính — nguyên nhân lớn nhất vẫn là chi phí phát sinh, bắt tạo tài khoản, checkout rườm rà. Nhưng mọi ma sát nhỏ trong hành trình đều cộng dồn, và điều hướng khó dùng là một trong số đó.

Vấn đề 3: vị trí không tự nhiên với ngón cái

Đây là điểm dễ bị bỏ qua nhất. Hamburger gần như luôn nằm ở góc trên, trái hoặc phải. Mà góc trên lại là vùng khó với nhất khi cầm điện thoại một tay.

Nghiên cứu của Steven Hoober cho thấy khoảng một nửa người dùng cầm điện thoại bằng một tay và thao tác chủ yếu bằng ngón cái. Bản đồ “vùng ngón cái” (thumb zone) chia màn hình thành ba khu: vùng dễ chạm ở phía dưới giữa, vùng phải rướn tay ở hai bên, và vùng khó hoặc gần như không chạm tới ở các góc trên.

Điện thoại càng to thì vùng khó này càng nở ra. Đặt nút điều hướng chính ở góc trên nghĩa là bắt khách đổi cách cầm hoặc dùng tay thứ hai chỉ để mở menu. Đó là một rào cản vật lý nhỏ nhưng có thật.

Ngược lại, Tab Bar và FAB (nút hành động nổi) nằm ở nửa dưới màn hình — đúng vùng ngón cái nghỉ tự nhiên. Khách không phải rướn tay. Đây là một lý do chính đáng để cân nhắc dời điều hướng xuống dưới.

Vấn đề 4: không thấy thì coi như không có

Khách mobile hành động theo những gì họ thấy trước mắt. Họ không nhớ trong đầu rằng “store này chắc có mục abc đâu đó”. Cái gì hiện ra thì họ bấm, cái gì ẩn thì họ quên.

Một menu ẩn là một menu ít được dùng. Nó không sai về mặt kỹ thuật, nhưng vô tình hạ những đường dẫn quan trọng nhất xuống ngang hàng với “không có gì”. Nếu danh mục bán chạy của bạn nằm sau ba gạch ngang, về mặt hành vi nó gần như vô hình.

Đây cũng là lý do nhiều store đưa vài danh mục chủ lực ra ngoài, hiện rõ ngay trên màn hình, và chỉ để những thứ ít quan trọng (Liên hệ, Chính sách, FAQ) trong menu ẩn. Cái gì cần bán thì cho khách thấy. Cái gì để tham khảo thì có thể giấu.

Vậy có nên bỏ hẳn hamburger không?

Không hẳn. Hamburger vẫn hữu ích cho các danh mục phụ, và việc khách quen với biểu tượng này là có thật. Vấn đề không phải bản thân cái icon, mà là dồn toàn bộ điều hướng quan trọng vào trong nó.

Cách tôi thấy hợp lý là phối hợp: dùng Tab Bar ở đáy cho 4-5 đường dẫn chủ lực, kết hợp một Slide/Hamburger Menu cho phần còn lại. Khách có lối tắt cho thứ họ cần thường xuyên, đồng thời vẫn có chỗ chứa gọn những mục ít dùng.

Đây đúng là việc Navi+ được làm ra để giải quyết: công cụ dựng menu không cần code, dùng AI, cho Shopify và mọi website — tạo được Tab Bar, Mega Menu, Slide/Hamburger Menu, FAB và Grid Menu. Bạn cấu hình mobile và desktop riêng, nên có thể để Tab Bar ở mobile mà vẫn giữ Mega Menu trên desktop. Menu giữ nguyên khi bạn đổi theme, và được tối ưu để không làm chậm trang.

Tốc độ không phải chuyện nhỏ. Google đánh giá trải nghiệm qua Core Web Vitals, với ngưỡng “tốt” là LCP dưới 2,5 giây, INP dưới 200 mili giây và CLS dưới 0,1. Một thanh điều hướng nặng, dựng cẩu thả có thể đẩy các chỉ số này xấu đi. Khi chọn cách làm menu, nên tính tốc độ ngay từ đầu, không phải xử lý sau.

Tóm lại

Bốn vấn đề trên không phải để kết tội hamburger menu, mà để bạn nhìn rõ cái giá của việc ẩn điều hướng:

  • Ẩn quá nhiều — khách không biết bên trong có gì.
  • Thêm bước thừa — nhiều chạm hơn mức cần để tới một danh mục.
  • Vị trí khó với — góc trên nằm ngoài vùng ngón cái.
  • Khuất tầm nhìn — không thấy thì khách không dùng.

Người bán nào cũng muốn khách tìm thấy hàng nhanh và mua dễ. Nếu điều hướng đang cản giữa hai việc đó, thì đáng để xem lại. Bạn không cần lật ngược toàn bộ store ngay; chỉ cần thử đưa vài danh mục bán chạy ra chỗ khách nhìn thấy và đo lại số liệu là đã thấy khác biệt.

Bài viết này nằm trong cẩm nang lớn hơn về Mobile navigation — vì sao hamburger menu đang lỗi thời và nên dùng gì thay thế.

Chia sẻ Facebook X