Hamburger menu là gì, dùng ở đâu và khi nào nên chọn nó

Hamburger menu là gì

Hamburger menu là biểu tượng ba gạch ngang xếp chồng (≡), khi bấm vào sẽ mở ra danh sách điều hướng của trang. Tên gọi đến từ hình dạng: nhìn như một chiếc bánh hamburger nhìn nghiêng, hai lớp bánh mì kẹp một lớp nhân ở giữa.

Nó xuất hiện phổ biến nhất ở góc trên bên phải hoặc bên trái giao diện điện thoại, khi màn hình quá nhỏ để hiển thị hết các mục menu cùng lúc. Một khi người dùng bấm vào ba gạch đó, danh sách điều hướng trượt ra hoặc đổ xuống.

Hamburger menu hoạt động thế nào, từng bước

Toàn bộ cơ chế chỉ có ba bước. Người dùng thấy icon ≡ ở góc màn hình, bấm vào, panel menu trượt ra hiện danh sách điều hướng đầy đủ. Chọn xong thì menu tự đóng, hoặc người dùng bấm dấu × hay vuốt sang để đóng thủ công.

Về phía kỹ thuật, hamburger menu gồm hai phần: icon ba gạch và panel menu ẩn. Khi bấm icon, JavaScript thêm hoặc xóa một class CSS để panel chuyển từ trạng thái ẩn sang hiện. Nếu không có JavaScript, cần dùng checkbox CSS để giả lập hành vi này, phần lớn trình duyệt hiện đại hỗ trợ nhưng giới hạn về animation và tùy biến.

Chi phí làm một hamburger menu đơn giản gần bằng không nếu dùng framework hay theme có sẵn. Nếu cần thiết kế riêng theo thương hiệu hoặc thêm animation (hiệu ứng chuyển động), chi phí tính vào phần thiết kế giao diện tổng thể, không bóc thành dòng mục riêng.

So sánh hamburger menu với các kiểu điều hướng khác

Để chọn đúng kiểu điều hướng, cần biết từng cái phù hợp tình huống nào. Ba kiểu thường gặp nhất là hamburger menu, mega menu và tab bar dưới cùng, mỗi cái giải quyết một bài toán khác nhau.

Nếu bạn muốn tìm hiểu thêm về mega menu để đối chiếu, xem bài mega menu là gì.

Nhược điểm của hamburger menu với trang bán hàng

Nhiều nghiên cứu UX (trải nghiệm người dùng) cho thấy tỉ lệ bấm vào các mục bên trong hamburger menu thấp hơn so với menu hiện thẳng ra. Lý do đơn giản: người dùng phải nhận ra icon, bấm, rồi mới thấy lựa chọn. Thêm một bước là thêm một rào cản.

Với shop bán hàng online, nếu “Sản phẩm mới” hay “Khuyến mãi” nằm sau hamburger menu và người dùng không buồn mở, doanh số mất đi một cách thầm lặng mà bạn không thấy ngay. Tab bar dưới cùng hoặc sticky navigation (thanh điều hướng theo khi cuộn) thường hiệu quả hơn cho tình huống này.

Hamburger menu không phải lựa chọn tệ. Với blog, trang tin tức, hoặc trang giới thiệu công ty chỉ có 5-7 mục menu, nó hoàn toàn phù hợp và không ảnh hưởng doanh số. Vấn đề xảy ra khi người ta áp nó vào trang bán hàng mà không cân nhắc thêm.

Khi nào nên và không nên dùng hamburger menu

Hamburger menu phù hợp khi web có 5-10 mục điều hướng chính và người dùng không phụ thuộc vào menu để chuyển đổi. Nó làm giao diện mobile thoáng hơn, dành không gian cho nội dung chính thay vì dàn thanh menu chiếm chỗ.

Nên xem xét kiểu khác khi web có dưới 4 mục (không cần ẩn làm gì), khi trang bán hàng cần khách thấy danh mục ngay mà không cần bấm thêm, hoặc khi có trên 15 mục và nhiều cấp danh mục, lúc đó mega menu là lựa chọn hợp lý hơn.

Cách nhận biết hamburger menu được làm đúng

Một hamburger menu đạt chuẩn cần đủ các điểm sau. Vùng bấm tối thiểu 44×44 pixel theo chuẩn Apple và Google, tức là dùng ngón tay cái bấm được thoải mái mà không cần căn. Khi bấm, menu hiện ra ngay, không phải chờ hoặc tự hỏi có bấm trúng không.

Nút đóng phải dễ tìm: dấu × hoặc vuốt để đóng panel rõ ràng, người dùng không bị kẹt trong menu. Sau khi bấm vào một mục và quay lại, menu nên thu gọn lại chứ không treo mãi. Phần lớn lỗi người dùng phàn nàn về hamburger menu đến từ một trong các điểm vừa kể.

Người không rành kỹ thuật cần biết gì về hamburger menu

Nếu bạn đang làm web lần đầu và không rành kỹ thuật, hầu hết theme WordPress hoặc website builder phổ biến đều tự xử lý hamburger menu. Bạn không cần làm gì thêm, nó hiện tự động trên mobile khi màn hình đủ hẹp.

Câu hỏi thực tế hơn là: menu của tôi có bao nhiêu mục, và khách tôi dùng điện thoại nhiều không? Nếu web có trên 10 mục điều hướng và nhiều cấp danh mục, đó là lúc cần nghĩ tới mega menu thay vì hamburger menu đơn giản.

Cấu trúc điều hướng cũng liên quan chặt đến các thành phần khác của giao diện như sticky header (thanh header theo khi cuộn) và hero section (vùng đầu trang). Hiểu ba thứ này là hiểu phần lớn bộ khung giao diện thông thường.

Câu hỏi thường gặp

Hamburger menu có cần JavaScript không?

Phần lớn cần. Có cách làm thuần CSS không cần JavaScript, nhưng kết quả sẽ giới hạn về animation và khả năng tùy biến sau này. Với hầu hết website thông thường, JavaScript là lựa chọn phổ biến và không làm trang chậm đáng kể nếu được tích hợp đúng cách.

Hamburger menu có ảnh hưởng đến SEO không?

Bản thân icon và cấu trúc menu không ảnh hưởng trực tiếp. Điều ảnh hưởng là các link trong menu đó có được Google nhìn thấy và index không. Với cách dùng phổ biến hiện tại, Google đã đọc được phần lớn menu JavaScript. Nếu dùng plugin ẩn hoàn toàn link cho đến khi JavaScript chạy, cần kiểm tra lại xem Google có crawl được không.

Tại sao nhiều web desktop cũng dùng hamburger menu?

Thường do có quá nhiều mục điều hướng không thể xếp vừa thanh ngang, hoặc nhóm thiết kế muốn giao diện tối giản. Không phải quyết định sai về mặt kỹ thuật, nhưng trên màn hình rộng người dùng đã quen thấy menu hiện ngay, phải bấm thêm một bước là rào cản nhỏ.

Khi nào không nên dùng hamburger menu?

Khi menu chỉ có 3-4 mục, ẩn đi rồi bắt người dùng bấm thêm là việc không cần thiết. Khi web thương mại điện tử có nhiều danh mục phân cấp mà phần lớn khách dùng desktop, nên chọn mega menu thay thế. Khi người dùng chủ yếu thực hiện 3-5 tác vụ cố định thường xuyên, tab bar dưới cùng phục vụ tốt hơn.

Web22 tư vấn cụ thể về cách tổ chức điều hướng phù hợp với loại web qua dịch vụ thiết kế UI/UX, từ chọn kiểu menu đến bố trí giao diện toàn trang.