Menu ngăn kéo (Drawer Menu — bảng trượt từ cạnh màn hình, thường mở qua biểu tượng 3 dấu gạch hamburger) thường bị đổ lỗi cho các trải nghiệm điều hướng di động tệ hại. Nhưng trên thực tế, vấn đề nằm ở những gì bị giấu bên trong ngăn kéo, chứ không phải bản thân mẫu thiết kế ngăn kéo. Một menu ngăn kéo chứa toàn bộ cây danh mục sản phẩm được tổ chức mạch lạc, kết hợp với các lối đi quan trọng nhất đã được phơi bày bên ngoài, là một giải pháp hoàn toàn hợp lý. Ngược lại, một ngăn kéo nhồi nhét mọi thứ không theo thứ tự và đóng vai trò là cách duyệt duy nhất, chắc chắn sẽ thất bại. Cẩm nang này giúp bạn phân biệt rõ hai cách tiếp cận.
- Nghiên cứu của Nielsen Norman Group khuyến nghị mô hình kết hợp: giữ tối đa 4 mục cốt lõi hiển thị trực tiếp, phần còn lại đặt trong ngăn kéo.
- Ngăn kéo có độ sâu phân cấp vô hạn là ngăn kéo không khách hàng nào kiên nhẫn cuộn hết.
- Hiệu ứng trượt đẩy (slide-and-push) thay vì trượt đè toàn màn hình giúp khách hàng giữ được cảm giác không gian và ngữ cảnh vị trí.
Menu ngăn kéo không phải là kẻ thù — Việc dùng nó làm điều hướng duy nhất mới là vấn đề
Nghiên cứu khả năng sử dụng của Nielsen Norman Group đã so sánh 3 mô hình điều hướng: ẩn hoàn toàn (chỉ có hamburger), hiển thị toàn bộ, và mô hình kết hợp (combo) giữ hiển thị một số liên kết chính trong khi các mục phụ nằm sau biểu tượng menu. Kết quả: trên di động, menu ẩn chỉ được tương tác 57% thời gian, trong khi mô hình kết hợp đạt tới 86%. Khuyến nghị của NN/g rất rõ ràng: giữ 4 hoặc ít hơn các mục cấp cao nhất luôn hiển thị, và chỉ dùng ngăn kéo cho các thành phần thứ cấp còn lại.
Đó là cách nhìn nhận đúng đắn. Câu hỏi không phải là “dùng hamburger hay bỏ hamburger”, mà là liệu ngăn kéo có đang phải gánh vác trách nhiệm điều hướng một mình, hay nó đang làm đúng chức năng sở trường: chứa các mục thứ cấp và mục mở rộng không cần thiết phải hiển thị trên mọi trang.
Bài viết liên quanKết hợp Tab Bar và Menu ngăn kéo: Cách phân chia nhiệm vụ tối ưu →
Độ sâu phân tầng: Điểm khiến menu ngăn kéo gục ngã
Một menu ngăn kéo sao chép nguyên vẹn cây Mega Menu nhiều tầng từ máy tính để bàn — danh mục chính, 8 danh mục con, rồi tiếp tục danh mục cháu chắt trong các hàng lồng nhau — sẽ khiến người mua hàng bỏ cuộc trước khi tìm thấy sản phẩm. Trên màn hình nhỏ của điện thoại, mỗi tầng lồng thêm đòi hỏi một lần chạm toàn màn hình và thời gian chờ đợi, chứ không thể quét mắt lướt qua như desktop.
Quy tắc chuẩn: Tối đa 2 tầng, tối đa tuyệt đối là 3 tầng. Nếu danh mục của bạn quá lớn, việc tích hợp thanh tìm kiếm ngay trong đầu ngăn kéo mang lại hiệu quả cao hơn rất nhiều so với việc tạo thêm tầng lồng thứ tư. Khách hàng đã biết mình cần gì sẽ gõ từ khóa; khách hàng đang lướt dạo chỉ cần 2 tầng là đủ định hướng.
Hiệu ứng trượt: Đẩy thay vì che khuất hoàn toàn
Có hai mẫu chuyển động khi mở ngăn kéo: trượt đè lên toàn bộ nội dung, hoặc trượt vào đồng thời đẩy nhẹ nội dung trang sang một bên để lộ một mép trang phía sau. Kiểu trượt đẩy luôn là lựa chọn ưu tiên — vì phần trang bên dưới vẫn nhìn thấy mờ mờ ở mép, khách hàng duy trì được cảm giác không gian về vị trí hiện tại và có thể chạm ra ngoài để đóng menu dễ dàng.
Những gì thực sự nên đưa vào menu ngăn kéo?
Khi 3–5 lối đi giá trị cao nhất đã được đưa vào Tab Bar hoặc thanh Header cố định, những gì thuộc về ngăn kéo là các nội dung thứ cấp:
- Toàn bộ cây danh mục sản phẩm chi tiết
- Lối tắt tài khoản cá nhân, lịch sử đơn hàng và trang trợ giúp
- Các trang chính sách: vận chuyển, đổi trả, điều khoản dịch vụ
- Thông tin doanh nghiệp hoặc giới thiệu thương hiệu
Nâng cấp menu di động cho cửa hàng của bạn ngay hôm nay
Thay thế menu ngăn kéo mặc định nặng nề bằng Navi+ Mobile Menu và thanh Tab Bar di động. 100% không cần viết code.