Sau khi đọc các bài về từng loại menu, nhiều người vẫn mắc ở khâu cuối: rốt cuộc store của mình nên dùng gì? Cảm giác đó bình thường. Lý thuyết về Tab Bar, Mega Menu hay Slide Menu chỉ hữu ích khi bạn áp nó vào số liệu của chính mình.
Bài này đưa ra một quy trình chọn menu gồm 5 bước, làm tuần tự trong khoảng một buổi chiều. Không có công thức đúng cho mọi store, nhưng có một cách làm giúp bạn quyết định dựa trên dữ liệu thật thay vì cảm tính. Mình rút ra cách này sau khi vận hành vài store nhỏ và đoán sai vài lần.
Bước 1: Xem tỷ lệ mobile vs desktop của chính bạn
Đừng tin câu “ai cũng nói mobile chiếm đa số”. Hãy mở số liệu của bạn ra xem.
Vào Google Analytics (mục Tech / Device category) hoặc Shopify Analytics (Online store sessions by device type). Lấy dữ liệu 30-90 ngày gần nhất cho đủ mẫu. Bạn sẽ thấy phần trăm session đến từ điện thoại so với máy tính.
Con số này quyết định bạn ưu tiên thiết kế cho màn hình nào trước. Nếu 80% khách vào bằng điện thoại, trải nghiệm trên điện thoại là sân khấu chính, desktop chỉ là phụ. Nếu bạn bán B2B và phần lớn khách dùng máy tính tại văn phòng, câu chuyện ngược lại.
Xem thêm tỷ lệ chuyển đổi tách theo thiết bị, không chỉ lượng truy cập. Theo Baymard Institute, tỷ lệ bỏ giỏ trên mobile khoảng 80%, cao hơn desktop (khoảng 66%). Nếu store của bạn nhiều khách mobile mà chuyển đổi mobile lại thấp, điều hướng khó dùng có thể là một phần nguyên nhân.
Bước 2: Đếm số danh mục cấp 1 và cấp 2
Mở phần Navigation trong Shopify và đếm thật.
- Danh mục cấp 1: các nhóm lớn nhất. Ví dụ shop thời trang: “Nữ”, “Nam”, “Phụ kiện”, “Sale”.
- Danh mục cấp 2: nhánh con bên trong mỗi cấp 1. “Nữ” có thể gồm “Áo”, “Quần”, “Đầm”, “Giày”.
Con số này loại bớt lựa chọn cho bạn. Store chỉ có 3-4 danh mục cấp 1 và gần như không có cấp 2 thì không cần Mega Menu — Mega Menu sinh ra để chứa cấu trúc nhiều tầng. Ngược lại, shop có 8 danh mục cấp 1, mỗi cái 5-6 nhánh con, nhồi hết vào một Slide Menu sẽ khiến khách cuộn mỏi tay.
Quy tắc thô mình hay dùng: cấu trúc càng phẳng và ít mục, càng nên ưu tiên menu hiển thị sẵn (như Tab Bar dưới đáy). Cấu trúc càng sâu và nhiều nhánh, càng cần dạng menu nhóm và bung ra được (Mega Menu trên desktop, Slide Menu trên mobile).
Bước 3: Xác định 3-5 trang khách cần đến nhiều nhất
Đây là bước hay bị bỏ qua nhất, mà lại quan trọng.
Quay lại Google Analytics hoặc Shopify Analytics, mở báo cáo các trang được xem nhiều nhất (Top pages / Landing pages). Ghi ra 3-5 đích đến khách thật sự cần. Thường rơi vào: trang chủ, vài collection chủ lực, trang tìm kiếm, giỏ hàng, đôi khi là trang theo dõi đơn hoặc liên hệ.
Vì sao chỉ 3-5? Vì đó là số “lối tắt” hợp lý đặt ở vị trí dễ bấm nhất. Một Tab Bar dưới đáy mobile thường chỉ chứa được 4-5 mục trước khi trở nên chật. Nếu xác định đúng 4 đích đến quan trọng nhất, bạn biết chính xác cần đặt gì lên Tab Bar.
Hãy thành thật ở bước này. Cái bạn muốn khách xem (ví dụ trang giới thiệu thương hiệu) chưa chắc là cái họ cần để mua hàng. Đi theo dữ liệu hành vi, không theo mong muốn.
Bước 4: Chọn cấu hình menu dựa trên bốn yếu tố
Giờ ghép ba bước trên với bốn yếu tố đã bàn ở các bài trước: thiết bị chủ đạo, độ sâu danh mục, số đích đến quan trọng, và đặc thù ngành hàng. Đối chiếu với bảng so sánh ở những bài đó. Dưới đây là vài tổ hợp thường gặp.
| Tình huống của bạn | Hướng cấu hình gợi ý |
|---|---|
| Đa số khách mobile, cấu trúc phẳng, 4 đích đến rõ ràng | Tab Bar dưới đáy + Slide Menu cho phần còn lại |
| Nhiều danh mục, nhiều nhánh con, khách desktop đáng kể | Mega Menu trên desktop + Slide Menu trên mobile |
| Cần một hành động nổi bật (chat, đặt lịch, gọi) | FAB cho hành động đó, kết hợp menu chính |
| Catalog hình ảnh, ít chữ (mỹ phẩm, đồ ăn) | Grid Menu trực quan |
Một lưu ý về thói quen cầm máy. Theo nghiên cứu của Steven Hoober, khoảng một nửa người dùng điện thoại bằng một tay, phần lớn thao tác bằng ngón cái. Vùng dễ chạm của ngón cái nằm ở nửa dưới màn hình. Đó là lý do Tab Bar đặt dưới đáy thường dễ bấm hơn hamburger ở góc trên — góc trên rơi vào vùng “với không tới”.
Đây cũng là lúc cân nhắc về điều hướng ẩn. Nielsen Norman Group đo và thấy menu hiển thị sẵn được tìm thấy và sử dụng nhiều gấp khoảng 1,5 lần so với menu ẩn sau biểu tượng hamburger. Không có nghĩa hamburger là sai — nó vẫn hữu ích để chứa các mục phụ — mà là: đừng giấu những đích đến quan trọng nhất phía sau nó.
Bước 5: Cài Navi+, build thử và xem trên thiết bị thật
Đến đây bạn đã có giả thuyết. Việc còn lại là dựng nó lên và nhìn tận mắt.
Navi+ cho phép dựng cả Tab Bar, Mega Menu, Slide Menu, FAB lẫn Grid Menu mà không cần code, kéo thả là xong, và cấu hình mobile với desktop tách riêng. Bạn cài đúng cấu hình đã chọn ở Bước 4, mỗi thiết bị một kiểu, rồi bật chế độ xem thử. Vì menu được tạo độc lập với theme, nó vẫn giữ nguyên kể cả khi sau này bạn đổi giao diện.
Điểm mình muốn nhấn mạnh: hãy xem trên điện thoại thật, không chỉ trên trình giả lập.
Trình giả lập trong trình duyệt cho bạn đúng kích thước màn hình, nhưng không tái hiện được cách ngón tay thật chạm vào nút, nút có quá nhỏ không, Tab Bar có bị bàn phím hay thanh điều hướng của điện thoại che mất không. Có những lỗi chỉ lộ ra khi bạn cầm máy lên và thử mua một món như khách thật.
Khi xem thử, để ý cả tốc độ. Google đặt ngưỡng “tốt” cho Core Web Vitals là LCP dưới 2,5 giây, INP dưới 200 mili-giây và CLS dưới 0,1. Một menu nặng có thể làm trang giật hoặc nhảy layout. Navi+ được tối ưu để hạn chế ảnh hưởng tới các chỉ số này, nhưng bạn vẫn nên tự kiểm chứng trên store của mình.
Cuối cùng, đừng ngại chỉnh. Cấu hình chọn ở Bước 4 là điểm khởi đầu, không phải bản án. Thêm hay bớt một công cụ điều hướng không phải chuyện lớn. Build thử, xem số liệu sau vài tuần, rồi điều chỉnh. Đó mới là cách quy trình này phát huy tác dụng.
Tóm lại, một quy trình chọn menu tốt không bắt đầu từ việc thích loại menu nào, mà từ số liệu: tỷ lệ mobile vs desktop, độ sâu danh mục, và những đích đến khách thật sự cần. Bốn yếu tố cộng một lần dựng thử trên thiết bị thật sẽ cho bạn câu trả lời sát với store của bạn hơn bất kỳ lời khuyên chung chung nào.
Bài viết này nằm trong cẩm nang lớn hơn về Cách chọn đúng loại menu cho Shopify store của bạn.