Hamburger menu — ba gạch ngang ở góc màn hình — có từ những ngày đầu của web trên điện thoại. Hồi đó màn hình nhỏ, đường truyền chậm, lựa chọn thiết kế cũng ít. Gom mọi thứ vào một biểu tượng nhỏ là cách hợp lý để tiết kiệm chỗ. Nó không sai. Nhưng đem dùng cho mọi trường hợp thì lại thành sai.
Nếu bạn vận hành một store có hơn mười danh mục, mobile navigation thường là chỗ rò rỉ doanh thu mà ít người để ý. Khách vào bằng điện thoại, muốn xem hàng, nhưng đường tới danh mục lại nằm sau một biểu tượng phải bấm mới mở. Bài này nói về lý do hamburger menu đuối sức trên ecommerce mobile, và những hướng thay thế thực dụng hơn: Tab Bar, thumb zone, và cách phối nhiều kiểu menu cho hợp với cách người ta thật sự cầm điện thoại.
- Hamburger menu che mất những đường đi khách cần nhất.
- Thumb zone đẩy điều hướng quan trọng xuống gần đáy màn hình.
- Tab Bar kết hợp Slide Menu thường là cấu hình mobile thực tế nhất.
Vấn đề thực sự của hamburger menu trên ecommerce mobile
Vấn đề lớn nhất không phải hamburger menu xấu, mà là nó giấu điều hướng đi. Khách phải bấm mới biết bên trong có gì. Một thao tác nghe nhỏ, nhưng nhân với hàng nghìn lượt truy cập, nó tạo ra khoảng cách thật giữa “thấy danh mục” và “không thấy”.
Nielsen Norman Group đã đo chuyện này. Trong nghiên cứu trên 179 người dùng qua sáu website, họ thấy việc giấu điều hướng chính làm khả năng người dùng nhận ra và sử dụng nó giảm gần một nửa, đồng thời kéo dài thời gian hoàn thành tác vụ và tăng cảm nhận về độ khó. Kết quả này đúng cả trên điện thoại lẫn desktop.
Một chi tiết khác đáng cân nhắc: ngày nay biểu tượng ba gạch đã quen thuộc với phần đông người dùng, nhưng theo NN/g, nó vẫn không hiển nhiên với mọi người, nhất là nhóm ít rành công nghệ. Nếu khách của bạn không chỉ toàn người trẻ, đây là điểm nên lưu ý.
Trên ecommerce, cái giá của một thao tác thừa cao hơn người ta tưởng. Tỷ lệ bỏ giỏ hàng trung bình quanh mức 70% — Baymard Institute tính ra 70,22% dựa trên 50 nghiên cứu. Phần lớn nguyên nhân nằm ở khâu thanh toán, nhưng hành trình dẫn tới đó cũng góp phần. Mỗi rào cản nhỏ trên đường đi đều rụng bớt một ít khách. Menu giấu kín là một trong những rào cản dễ gỡ nhất.
Điều này không có nghĩa hamburger luôn tệ. Với một blog đơn giản hay landing page chỉ vài liên kết, nó vẫn ổn. Vấn đề là store ecommerce hiếm khi đơn giản như vậy.
Đọc sâuXem bài đầy đủ → Vấn đề thực sự của hamburger menu trên ecommerce mobile
Thumb zone — hiểu cách người dùng cầm điện thoại
Muốn biết nên đặt menu ở đâu, trước hết cần hiểu người ta cầm điện thoại thế nào. Khái niệm thumb zone (vùng ngón cái) do chuyên gia giao diện Steven Hoober đưa ra sau khi quan sát hơn 1.300 lượt thao tác trong môi trường thật.
Phát hiện cốt lõi rất đơn giản: phần lớn thao tác trên điện thoại làm bằng ngón cái. Hoober ghi nhận khoảng một nửa số người cầm máy bằng một tay, để ngón cái gánh hết việc chạm. Mà ngón cái có giới hạn vật lý — nó với tới một số chỗ dễ dàng, một số chỗ phải ráng, vài chỗ gần như không tới được nếu không đổi cách cầm.
Người ta thường chia màn hình thành ba vùng:
- Vùng dễ chạm: phần dưới và giữa màn hình, nơi ngón cái nghỉ tự nhiên. Đây là chỗ đặt hành động quan trọng.
- Vùng phải với: hai bên giữa màn hình, chạm được nhưng hơi gắng.
- Vùng khó chạm: góc trên, thường phải đổi tay hoặc dùng hai tay mới tới.
Giờ nhìn lại hamburger menu: nó nằm đúng góc trên cùng — vùng khó với nhất. Nghĩa là yếu tố điều hướng quan trọng nhất lại bị đặt ở nơi ngón cái khó chạm tới nhất. Màn hình điện thoại càng to, khoảng cách đó càng rõ.
Đây là lý do nền tảng cho việc chuyển menu xuống đáy. Không phải vì đáy “đẹp hơn”, mà vì đáy nằm trong tầm với tự nhiên của ngón cái. Hiểu điểm này rồi thì những lựa chọn thiết kế phía sau dễ giải thích hơn nhiều.
Đọc sâuXem bài đầy đủ → Thumb zone — hiểu cách người dùng cầm điện thoại
Tab Bar — giải pháp thay thế chính
Tab Bar là thanh điều hướng cố định ở đáy màn hình, với vài biểu tượng luôn hiển thị. Nếu bạn dùng app ngân hàng, app đặt xe hay mạng xã hội, bạn đã quen với nó rồi. Trang chủ, tìm kiếm, giỏ hàng, tài khoản — mỗi thứ một ô, lúc nào cũng thấy, lúc nào cũng trong tầm ngón cái.
Điểm mạnh của Tab Bar gói trong hai ý: hiển thị sẵn và trong tầm với. Khách không cần bấm mở mới biết có gì. Các lối đi chính bày ngay đó. Và vì nằm ở đáy, nó rơi đúng vào vùng dễ chạm của thumb zone.
Một quy ước đáng nhớ: Tab Bar hợp nhất khi có từ 3 đến 5 mục. Cả Material Design của Google lẫn Human Interface Guidelines của Apple đều khuyên vậy. Quá năm mục thì các ô chạm sát nhau, ngón cái dễ bấm nhầm. Bốn mục thường là điểm cân bằng dễ chịu cho hầu hết store.
So sánh nhanh hai cách:
| Hamburger menu | Tab Bar | |
|---|---|---|
| Khả năng nhìn thấy | Phải bấm mới hiện | Luôn hiển thị |
| Vị trí trên màn hình | Góc trên (khó chạm) | Đáy (dễ chạm) |
| Số lựa chọn phù hợp | Nhiều, dạng danh sách | 3–5 lối đi chính |
| Phù hợp nhất với | Mục phụ, ít dùng | Lối đi quan trọng nhất |
Một lưu ý khi đổi sang Tab Bar: đừng để nó làm chậm trang hay nhảy layout. Google đặt ngưỡng Core Web Vitals khá rõ — LCP dưới 2,5 giây, INP dưới 200 mili giây, CLS dưới 0,1. Một thanh cố định ở đáy nếu gắn không khéo có thể gây dịch chuyển layout (ảnh hưởng CLS) hoặc làm nặng trang. Vì vậy khi chọn công cụ, nên ưu tiên cái nào quan tâm tới tốc độ tải.
Đây cũng là chỗ Navi+ hữu ích: nó dựng Tab Bar bằng kéo-thả, không cần code, cấu hình riêng cho mobile, và được làm để không kéo điểm Core Web Vitals xuống.
Đọc sâuXem bài đầy đủ → Tab Bar — giải pháp thay thế chính
Kết hợp Tab Bar + Slide Menu
Tới đây bạn có thể thắc mắc: nếu Tab Bar chỉ chứa được 3–5 mục, thì hàng chục danh mục kia bỏ đâu? Đây là hiểu lầm thường gặp. Tab Bar không thay thế toàn bộ điều hướng — nó chỉ lo những lối đi quan trọng nhất.
Cách làm thực dụng là phối nhiều kiểu menu, mỗi kiểu một việc:
- Tab Bar giữ 3–5 lối đi cốt lõi: trang chủ, danh mục, tìm kiếm, giỏ hàng, tài khoản.
- Slide Menu (chính là hamburger mở rộng) chứa phần còn lại — danh sách danh mục đầy đủ, trang chính sách, liên hệ. Những mục này quan trọng nhưng không phải lúc nào cũng cần.
- FAB (nút hành động nổi) dành cho một thao tác nổi bật nếu store của bạn cần, ví dụ chat hỗ trợ hay thêm nhanh vào giỏ.
Nhìn theo cách này, hamburger không bị xóa sổ — nó được giao đúng vai. Việc của nó là chứa thông tin phụ, chứ không phải gánh toàn bộ điều hướng. Lối đi chính chuyển xuống Tab Bar, nơi ngón cái với tới dễ dàng và mắt nhìn thấy ngay.
Cái khó của cách phối này là phải cấu hình mobile và desktop riêng. Trên desktop, Mega Menu trải rộng nhiều cột vẫn hợp lý, vì con trỏ chuột không có “vùng khó chạm”. Nhưng trên mobile thì cùng menu đó lại quá tải. Hai môi trường, hai logic khác nhau.
Navi+ làm được mấy kiểu menu này trong cùng một chỗ — Tab Bar, Slide Menu, Mega Menu, FAB, Grid Menu — và cho cấu hình mobile, desktop tách biệt. Menu cũng giữ nguyên khi bạn đổi theme, nên không phải dựng lại từ đầu mỗi lần thay giao diện.
Đọc sâuXem bài đầy đủ → Kết hợp Tab Bar + Slide Menu (và vai trò của FAB)
Bắt đầu từ đâu
Nếu phải chọn một việc làm trước, hãy mở store bằng chính điện thoại của bạn và tự đi một vòng mua hàng bằng một tay. Cầm máy bình thường, không đổi tay. Để ý ngón cái phải với tới đâu mới vào được danh mục.
Vài câu hỏi để tự kiểm:
- Lối đi quan trọng nhất có hiển thị sẵn, hay phải bấm mở mới thấy?
- Khách cần mấy lần chạm để tới danh mục họ muốn?
- Những nút hay dùng nhất có nằm trong vùng ngón cái với thoải mái không?
- Menu có làm trang chậm đi hay nhảy layout khi tải không?
Test một tayMở store trên điện thoại và đi thử một lượt mua hàng mà không đổi tay.
Không cần làm lại hết một lượt. Thường chỉ cần đưa 3–5 lối đi chính xuống một Tab Bar và dồn phần còn lại vào Slide Menu là đã thấy khác. Đây là kiểu thay đổi nhỏ về công sức nhưng chạm thẳng vào trải nghiệm hằng ngày của khách mobile.
Hamburger menu không phải kẻ thù. Nó vẫn có chỗ cho những mục phụ, ít dùng. Nhưng trên một store đặt mobile lên trước như hôm nay, để nó gánh toàn bộ điều hướng không còn là lựa chọn mặc định tốt nhất. Chuyển những lối đi quan trọng từ hamburger sang Tab Bar là một trong những cải tiến rẻ tiền mà đáng giá nhất bạn có thể làm cho store của mình.
Khám phá các chủ đề
Bài này dẫn tới các bài chuyên sâu hơn — đào sâu từng phần.