Một chủ store thấy thương hiệu lớn dùng Mega Menu trông sang trọng, thế là bê y nguyên về store mình. Vấn đề là store đó chỉ bán hai mươi sản phẩm, nhưng menu thì rối hơn cả một sàn thương mại điện tử. Ở chiều ngược lại, có store bán hàng trăm danh mục mà chỉ để đúng một hàng menu ngang đơn giản — khách vào, lướt một vòng, không hiểu store này thực ra bán gì.
Cả hai mắc cùng một lỗi: chọn menu theo cái mình thích nhìn, chứ không theo cái store thật sự cần. Không có loại menu nào tốt nhất cho mọi store. Việc chọn loại menu Shopify đúng phụ thuộc vào số lượng sản phẩm, cách khách tìm hàng, và tỷ lệ khách dùng điện thoại. Bài này gom lại những gì tôi đúc rút sau khi vận hành và quan sát nhiều store — không phải để bảo bạn loại nào hay nhất, mà để giúp bạn tự nhìn ra loại nào hợp với mình.
- Chọn menu phải bắt đầu từ bối cảnh store, không phải gu thẩm mỹ.
- Mobile và desktop thường cần hai kiểu điều hướng khác nhau.
- Menu tốt nhất là menu giải đúng một điểm nghẽn mua sắm.
Vì sao menu đáng quan tâm hơn bạn nghĩ
Menu là thứ khách chạm vào trước cả khi xem sản phẩm. Nếu không tìm được đường đi, họ không mua. Nghe hiển nhiên, nhưng nó liên quan trực tiếp tới một con số ít ai để ý.
Theo Baymard Institute, tỷ lệ bỏ giỏ hàng trung bình trong thương mại điện tử vào khoảng 70%, tổng hợp từ hàng chục nghiên cứu và giữ ổn định quanh mức này nhiều năm. Tất nhiên menu không phải nguyên nhân duy nhất, nhưng một phần khách rời đi đơn giản vì không tìm thấy thứ cần đủ nhanh. Điều hướng tốt không tạo ra doanh thu, nhưng điều hướng tệ thì làm rò rỉ nó từng chút một.
Còn một điểm nữa: phần lớn lưu lượng store giờ đến từ điện thoại. Cách khách dùng menu trên màn hình nhỏ rất khác trên máy tính, nên menu hợp cho desktop chưa chắc hợp cho mobile. Đây là lý do các công cụ như Navi+ cho phép cấu hình mobile và desktop riêng biệt thay vì ép một menu chạy chung cả hai.
Bốn yếu tố quyết định bạn cần loại menu nào
Trước khi nhìn vào từng loại menu, hãy trả lời bốn câu hỏi về chính store của bạn. Bốn yếu tố này quyết định gần như mọi thứ.
- Số lượng sản phẩm và danh mục. Store hai mươi sản phẩm và store hai nghìn sản phẩm cần cấu trúc khác hẳn nhau. Càng nhiều danh mục, càng cần một cách để khách thấy được chiều sâu mà không bị ngợp.
- Tỷ lệ mobile so với desktop. Hãy mở Google Analytics ra xem thật. Nếu phần lớn khách dùng điện thoại, menu mobile mới là menu chính, desktop chỉ là phụ.
- Cách khách tìm hàng. Họ biết rõ mình muốn gì rồi đi thẳng, hay vào để dạo và khám phá? Người mua có chủ đích cần lối tắt; người đi dạo cần gợi mở.
- Hành động quan trọng nhất của store. Mỗi store có một việc bạn muốn khách làm nhiều nhất — chat tư vấn, mở giỏ, hay nhảy vào trang khuyến mãi. Hành động đó nên luôn nằm trong tầm tay.
Yếu tố thứ hai đáng nói thêm. Nghiên cứu của Steven Hoober trên hơn 1.300 người dùng cho thấy phần lớn thao tác điện thoại bằng ngón cái, và vùng ngón cái với tới thoải mái nhất là nửa dưới màn hình. Đó là lý do một nút hay thanh điều hướng đặt ở đáy thường được chạm nhiều hơn thứ nằm tận góc trên.
Đọc sâuXem bài đầy đủ → Bốn yếu tố quyết định bạn cần loại menu nào
Từng loại menu giải một bài toán
Mỗi loại menu sinh ra để giải một vấn đề cụ thể. Hiểu vấn đề đó, bạn sẽ biết khi nào nên dùng.
Mega Menu là menu xổ rộng trên desktop, bày nhiều danh mục cùng lúc, thường kèm hình ảnh. Nó hợp với store nhiều danh mục cần phô bày chiều sâu. Nhưng với store ít sản phẩm, mega menu chỉ tạo cảm giác trống trải và phức tạp không cần thiết.
Tab Bar là thanh điều hướng cố định ở đáy màn hình mobile, thường có ba đến năm mục như Trang chủ, Danh mục, Tìm kiếm, Giỏ hàng, Tài khoản. Nó nằm đúng vùng ngón cái với tới dễ nhất, và luôn hiện ra nên khách không phải đi tìm. Đây là một trong những bố cục mobile đáng tin cậy nhất.
Slide Menu (hamburger) giấu toàn bộ menu sau biểu tượng ba gạch, mở ra panel trượt. Ưu điểm là gọn gàng, chứa được nhiều mục. Nhược điểm là nó giấu mọi thứ. Nielsen Norman Group chỉ ra rằng giấu điều hướng làm giảm rõ rệt khả năng khách phát hiện ra nó — họ ít dùng hơn, và nếu dùng thì cũng muộn hơn. Slide menu không sai, nhưng đừng để những mục quan trọng nhất nằm trốn trong đó.
FAB (Floating Action Button) là nút tròn nổi, thường ở góc dưới, dành cho một hành động duy nhất — gọi điện, chat Zalo, mở khuyến mãi. Nó mạnh khi store có đúng một việc muốn khách làm. Đặt vài ba nút nổi cùng lúc thì lại che mất nội dung.
| Loại menu | Hợp khi | Coi chừng khi |
|---|---|---|
| Mega Menu | Nhiều danh mục, chủ yếu desktop | Store ít sản phẩm |
| Tab Bar | Lưu lượng mobile cao | Cần nhồi quá năm mục |
| Slide Menu | Nhiều mục phụ, muốn gọn | Giấu mất mục quan trọng |
| FAB | Có một hành động ưu tiên rõ | Đặt nhiều nút nổi cùng lúc |
Đọc sâuXem bài đầy đủ → Phân tích từng loại menu: khi nào nên dùng, khi nào không
Kết hợp menu cho từng loại store
Thực tế hiếm khi một store chỉ dùng một loại menu. Cái hay nằm ở chỗ kết hợp — và kết hợp đúng tùy theo store của bạn thuộc nhóm nào.
Một store thời trang nhiều danh mục thường dùng Mega Menu trên desktop để bày các dòng sản phẩm, và Tab Bar trên mobile để khách lúc nào cũng chạm tới danh mục và giỏ hàng. Hai menu khác nhau phục vụ hai bối cảnh khác nhau, nhưng cùng một logic danh mục bên dưới.
Một store một hoặc vài sản phẩm thì ngược lại. Mega menu là thừa. Một hàng menu desktop gọn cộng với một FAB chat tư vấn trên mobile thường là đủ — vì với store kiểu này, việc quan trọng nhất là giải đáp thắc mắc để chốt đơn, chứ không phải điều hướng qua nhiều tầng danh mục.
Store tầm trung, vài chục đến vài trăm sản phẩm, thường rơi vào khoảng giữa: menu desktop vừa phải, Tab Bar mobile, đôi khi thêm Slide Menu chứa các mục phụ như chính sách, blog, liên hệ. Nguyên tắc chung: thứ khách cần thường xuyên thì để hiện ra, thứ thỉnh thoảng mới cần thì có thể giấu.
Điều khiến việc kết hợp này khả thi mà không cần đụng tới code là bạn cấu hình từng menu cho từng màn hình một cách độc lập. Với Navi+, bạn dựng Tab Bar cho mobile và Mega Menu cho desktop trong cùng một chỗ, kéo thả, không phải sửa theme.
Đọc sâuXem bài đầy đủ → Kết hợp các loại menu cho từng loại store
Quy trình quyết định menu phù hợp
Thay vì chọn theo cảm tính, có một trình tự đơn giản giúp bạn đi từ dữ liệu tới quyết định.
- Xem số liệu trước. Mở Analytics, ghi lại tỷ lệ mobile/desktop và những trang khách hay vào nhất. Đây là cơ sở, không phải phỏng đoán.
- Liệt kê thứ khách cần truy cập thường xuyên. Thường chỉ ba đến năm thứ. Đó là ứng viên cho Tab Bar hoặc menu chính.
- Tách mục phụ ra. Chính sách, blog, giới thiệu — những thứ này có thể vào Slide Menu hoặc footer, không cần chiếm chỗ đắt.
- Chọn một hành động ưu tiên. Nếu có một việc rõ ràng muốn khách làm, cân nhắc FAB.
- Thử rồi đo. Lắp menu, theo dõi một hai tuần, xem khách có chạm vào những gì bạn kỳ vọng không.
Bước cuối quan trọng nhưng hay bị bỏ qua: tốc độ. Thêm menu mà làm trang chậm đi thì lợi bất cập hại. Google khuyến nghị các ngưỡng Core Web Vitals: LCP dưới 2,5 giây, INP dưới 200 mili-giây, CLS dưới 0,1. Một menu nặng làm trang giật, layout nhảy khi tải, là đủ để đẩy bạn ra khỏi vùng tốt. Khi chọn công cụ dựng menu, hãy để ý nó có được tối ưu để không làm chậm trang hay không — đây là lý do Navi+ chú trọng giữ menu nhẹ và đạt badge Built for Shopify.
Đọc sâuXem bài đầy đủ → Quy trình thực tế để quyết định menu phù hợp
Bắt đầu từ đâu
Bắt đầu ở đâyKiểm tra tỷ lệ mobile trước, rồi liệt kê ba đường đi khách cần dùng thường xuyên nhất.
Nếu chưa biết bắt đầu thế nào, hãy làm việc nhỏ nhất trước: mở Analytics xem tỷ lệ mobile, rồi viết ra ba thứ khách của bạn cần chạm tới nhiều nhất. Hai thông tin đó thôi đã loại bỏ phần lớn lựa chọn sai. Phần còn lại là thử và điều chỉnh.
Đừng cố làm hoàn hảo ngay từ đầu. Menu là thứ nên được tinh chỉnh dần theo cách khách thật sự dùng store, không phải theo cái bạn tưởng họ sẽ dùng.
Suy cho cùng, menu tốt là thứ khách không bao giờ nghĩ đến. Họ chỉ để ý tới nó khi nó làm họ vướng. Vậy nên mục tiêu không phải là một menu trông thật đẹp, mà là một menu khách dùng mà chẳng cần suy nghĩ — họ tìm thấy thứ cần tìm, rồi đi tiếp, mà không nhận ra menu vừa giúp 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.