Nếu bạn đang bán hàng trên Shopify và loay hoay với menu trên điện thoại, có một mô hình mà nhiều app ecommerce lớn đang dùng và đáng để học theo. Đó là cách kết hợp tab bar slide menu: để Tab Bar lo việc đi nhanh, để Slide Menu lo việc đi sâu. Bài này nói về cách hai thứ đó phối hợp với nhau, và FAB nên đứng ở đâu trong bức tranh đó.
Tôi từng vận hành một store và mắc đúng cái lỗi phổ biến: nhét tất cả vào một cái hamburger menu rồi tin rằng “khách cần thì sẽ tự bấm”. Thực tế khách hàng ít kiên nhẫn hơn ta tưởng.
Vì sao một loại menu là không đủ
Trên điện thoại, hành vi của khách chia làm hai nhóm khá rõ.
Nhóm thứ nhất biết mình muốn gì. Họ vào để xem giỏ hàng, tìm kiếm, hoặc về trang chủ. Họ cần đi nhanh, đi thẳng.
Nhóm thứ hai chưa biết mua gì. Họ muốn lượn qua các danh mục, xem có gì hay. Họ cần một bản đồ đầy đủ về cửa hàng.
Một cái menu khó phục vụ tốt cả hai. Nếu bạn nhét mọi thứ vào hamburger, nhóm thứ nhất phải bấm thêm một bước cho những việc lẽ ra chỉ cần một chạm. Nielsen Norman Group nhận thấy việc giấu điều hướng chính sau một nút khiến khách khó tìm thấy hơn và thao tác lâu hơn so với khi để các mục hiện sẵn. Ngược lại, nếu bạn cố phơi bày toàn bộ cây danh mục ra màn hình, nhóm thứ nhất bị ngợp còn màn hình thì chật.
Cách giải quyết không phải chọn một, mà là phân vai.
Tab Bar lo điểm đến chính
Tab Bar là thanh điều hướng cố định ở đáy màn hình, thường chứa 4-5 mục. Nó luôn hiển thị, khách không cần bấm để mở.
Vị trí dưới đáy không phải ngẫu nhiên. Theo nghiên cứu của Steven Hoober trên hơn 1.300 lượt quan sát người dùng, khoảng 75% thao tác trên màn hình được thực hiện bằng ngón cái. Vùng đáy giữa màn hình chính là chỗ ngón cái với tới dễ nhất khi cầm một tay. Đặt các điểm đến quan trọng ở đó nghĩa là khách chạm trúng nhanh, ít sai.
Vậy nên đặt gì vào Tab Bar? Chỉ những điểm đến được dùng nhiều nhất và cần đi nhanh nhất. Ví dụ cho một store thời trang:
- Trang chủ
- Tìm kiếm
- Danh mục (hoặc “Sản phẩm”)
- Giỏ hàng
- Tài khoản
Năm mục là vừa đẹp. Nhiều hơn thì mỗi nút bị bóp nhỏ, khó chạm; ít hơn thì lãng phí không gian quý giá. Đây không phải nơi liệt kê hết mọi danh mục con, mà là nơi đặt vài cánh cửa lớn nhất.
Slide Menu lo toàn bộ cấu trúc danh mục
Tab Bar chỉ có 4-5 ô. Nhưng một store thật thường có hàng chục danh mục và danh mục con. Chúng đi đâu?
Đây là lúc Slide Menu vào việc. Slide Menu (còn gọi là menu trượt) mở ra từ cạnh màn hình, chứa được cấu trúc danh mục đầy đủ, nhiều tầng. Khách muốn duyệt từ Nam sang Nữ, từ Áo sang Quần, từ bộ sưu tập này sang bộ sưu tập kia — Slide Menu là nơi cho việc đó.
Điểm hay của mô hình nằm ở cách mở Slide Menu. Bạn đặt một mục “Danh mục” hoặc một icon “More” ngay trên Tab Bar. Khách chạm vào đó, Slide Menu trượt ra. Như vậy hai loại menu nối liền nhau: Tab Bar luôn ở đó cho việc nhanh, và là cửa dẫn vào Slide Menu cho việc duyệt sâu.
Một chi tiết nhỏ nhưng quan trọng: khi vẫn dùng Slide Menu, hãy gắn nhãn chữ rõ ràng thay vì để icon trơ trọi, và đặt ở chỗ khách quen tìm. NN/G khuyên dùng icon ba gạch chuẩn kèm nhãn để khách đoán được bên trong là gì. Slide Menu không xấu — nó chỉ xấu khi bị bắt làm việc của cả Tab Bar lẫn chính nó.
Cách phân vai gọn lại như sau: khách cần nhanh thì dùng Tab Bar; khách muốn duyệt toàn bộ thì mở Slide Menu. Đây chính là kết hợp tab bar slide menu mà nhiều app ecommerce lớn đang dùng, và nó áp dụng được cho Shopify mà không cần đổi gì ghê gớm.
FAB: bổ sung, không thay thế
FAB (Floating Action Button) là nút tròn nổi, thường nằm góc dưới phải, đè lên nội dung trang. Nhiều người thấy nó đẹp nên muốn dùng để điều hướng. Tôi khuyên đừng.
FAB nên dành cho đúng một hành động duy nhất, quan trọng và lặp đi lặp lại. Vài ví dụ hợp lý:
- Nút chat hỗ trợ, để khách hỏi nhanh khi phân vân
- “Xem ưu đãi hôm nay” trong một đợt khuyến mãi
- Back-to-top trên những trang danh sách sản phẩm rất dài
Lý do FAB không nên gánh điều hướng chính: nó chỉ là một nút. Khi bấm vào, nó lại phải mở ra menu — tức là quay về đúng mô hình giấu điều hướng mà ta vừa muốn tránh. Tab Bar làm việc điều hướng tốt hơn vì luôn hiện và có nhiều ô. FAB thì hợp với một lời mời gọi hành động rõ ràng, duy nhất.
Nói cách khác: Tab Bar và Slide Menu lo “đi đâu”, còn FAB lo “làm một việc”. Đừng để chúng giẫm chân nhau.
Vì sao mô hình này đáng làm cho đúng
Có lý do thực tế để bận tâm chuyện menu trên điện thoại. Theo Baymard Institute, tỷ lệ bỏ giỏ trung bình khoảng 70%, và trên di động con số này còn cao hơn, quanh mức 80%. Khi khách đã khó tìm đường ngay từ menu, họ rời đi trước cả lúc nghĩ đến việc thanh toán.
Tốc độ trang cũng liên quan. Một menu nặng có thể làm chậm tải và gây giật layout. Google đặt ngưỡng “tốt” cho Core Web Vitals ở LCP dưới 2,5 giây, INP dưới 200 mili giây và CLS dưới 0,1. Menu càng gọn, càng nhẹ thì càng dễ giữ trong ngưỡng đó.
Còn một điều đáng cân nhắc: số lượng app. Một store Shopify thường cài nhiều app, và mỗi app thêm vào là thêm một mảnh code chạy trên trang. Nếu một công cụ menu lo được cả Tab Bar, Slide Menu lẫn FAB trong cùng chỗ, bạn đỡ phải chắp vá nhiều thứ rời rạc.
Dựng mô hình này mà không cần code
Cái khó của mô hình kết hợp là cấu hình. Bạn cần một Tab Bar riêng cho mobile, một Slide Menu nối vào nó, và có thể một FAB cho CTA — tất cả phải khớp nhau và không đụng vào bản desktop.
Đây là việc Navi+ được làm ra để giải quyết. Bạn cấu hình Tab Bar và Slide Menu trong cùng một chỗ, đặt riêng cho mobile, kéo-thả không cần code. Cấu hình mobile và desktop tách biệt, nên bản desktop vẫn dùng Mega Menu bình thường. Menu cũng giữ nguyên khi bạn đổi theme, và được tối ưu để không kéo Core Web Vitals đi xuống.
Điều tôi muốn để lại không phải một công cụ cụ thể, mà là tư duy phân vai: đừng bắt một menu làm mọi việc. Hãy để Tab Bar lo đi nhanh, Slide Menu lo duyệt sâu, FAB lo một hành động. Khách của bạn sẽ tìm đường dễ hơn, và đó thường là bước đầu để họ ở lại lâu hơn.
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ế.