Nút Menu Hamburger là gì? Ví dụ và cách sử dụng hiệu quả

Nội dung chính

 

• Khái niệm: Menu hamburger là biểu tượng ba gạch ngang dùng để mở/đóng menu điều hướng.

 

• Ưu và nhược điểm: Giúp tiết kiệm không gian nhưng có thể giảm khả năng khám phá của người dùng.

 

• Nguyên tắc thiết kế: Chú ý vị trí đặt icon, thêm nhãn văn bản và cách tổ chức menu.

 

• Thiết kế trên mobile: Cần phân cấp thông tin rõ ràng để dễ tìm nội dung.

 

• Các biến thể: Có thể dùng dạng kèm nhãn, hiệu ứng động hoặc menu trượt.

 

• Ví dụ thực tế: Nhiều website sử dụng hamburger menu để tối ưu bố cục.

 

• Khi nào nên dùng: Phù hợp với giao diện mobile hoặc website nhiều mục điều hướng.

 

Khái niệm menu hamburger

 

Menu hamburger (hamburger icon) là một biểu tượng giao diện người dùng (UI) gồm ba đường ngang song song, trông giống chiếc bánh hamburger. Biểu tượng này hoạt động như một nút bấm để mở hoặc thu gọn menu điều hướng ẩn.

 

Thông thường, nút hamburger được đặt ở góc trên bên trái hoặc bên phải của giao diện. Khi người dùng nhấp hoặc chạm vào, menu sẽ hiển thị danh sách liên kết điều hướng và sẽ thu gọn lại khi đóng.

 

 

Ưu và nhược điểm của menu hamburger

 

Ưu điểm

 

Tiết kiệm không gian giao diện

Menu hamburger gom các mục điều hướng vào một biểu tượng nhỏ, giúp giải phóng diện tích hiển thị, đặc biệt hữu ích trên màn hình điện thoại.

 

Tăng tính thẩm mỹ và tối giản

Việc ẩn bớt tùy chọn giúp giao diện gọn gàng, tránh rối mắt và tập trung hơn vào nội dung chính hoặc CTA.

 

Biểu tượng quen thuộc

Ba gạch ngang đã trở thành chuẩn thiết kế phổ biến, phần lớn người dùng đều hiểu đây là nút mở menu.

 

Nhược điểm

 

Giảm khả năng khám phá

Khi các mục điều hướng bị ẩn, người dùng không thấy ngay các chức năng, dẫn đến giảm tỷ lệ nhấp.

 

Tăng số thao tác

Người dùng phải nhấn thêm một lần để mở menu trước khi chọn mục cần thiết.

 

Khó đọc lướt

Menu bị ẩn khiến người dùng không thể quét nhanh các lựa chọn điều hướng.

 

Dễ gây nhầm lẫn cho người mới

Nếu chỉ hiển thị icon mà không có chữ “Menu”, một số người dùng có thể không hiểu chức năng của nó.

 

Nguyên tắc thiết kế menu hamburger

 

Chọn vị trí đặt menu

 

• Góc trái: Phù hợp với desktop vì người dùng thường quét màn hình theo mô hình chữ F.

 

• Góc phải: Thuận tiện hơn trên mobile vì dễ thao tác bằng ngón cái.

 

Nếu logo đặt ở góc trái, menu hamburger nên đặt ở góc phải để giữ bố cục rõ ràng.

 

Thêm nhãn văn bản

 

Kết hợp icon với chữ “Menu” hoặc “Danh mục” giúp tăng khả năng nhận diện và cải thiện tỷ lệ nhấp.

 

Sử dụng menu nổi khi cần

 

Menu hamburger dạng floating (cố định trên màn hình) phù hợp với trang có nội dung dài. Tuy nhiên, nếu đã có nhiều nút nổi khác, việc thêm menu nổi có thể làm giao diện rối.

 

Thiết kế hamburger menu trên điện thoại

 

Trên mobile, việc sắp xếp và phân cấp nội dung trong menu rất quan trọng:

 

• Các mục chính như Trang chủ, Sản phẩm, Liên hệ nên hiển thị trực tiếp.

 

• Các mục phụ như Chính sách, Tuyển dụng, Hỗ trợ có thể đặt trong menu hamburger.

 

• Menu nhiều cấp nên dùng thụt lề hoặc kích thước chữ khác nhau để phân biệt.

 

• Mục quan trọng nên đặt ở đầu danh sách, các tùy chọn phụ đặt phía dưới.

 

Một số biến thể của menu hamburger

 

Hamburger kèm nhãn

 

Icon ba gạch đi kèm chữ Menu, giúp người dùng hiểu chức năng ngay lập tức.

 

Icon có hiệu ứng động

 

Sau khi nhấn, icon có thể chuyển thành dấu X hoặc mũi tên quay lại, tạo phản hồi trực quan.

 

Menu hamburger dạng trượt

 

Menu có thể trượt từ cạnh trái hoặc phải màn hình, giúp giữ bố cục gọn gàng và dễ theo dõi.

 

Ví dụ thực tế về menu hamburger

 

Một số website nổi bật sử dụng hamburger menu để tối ưu giao diện:

 

• Bhroovi Gupta: Menu nhỏ gọn trong header, mở ra menu toàn màn hình khi nhấn.

 

 

• Overport: Sử dụng hamburger menu để giữ trang chủ tập trung vào slideshow dự án.

 

 

• Yang’s Place: Gom các liên kết điều hướng để trang chủ hiển thị hình món ăn nổi bật.

 

 

• Pei Jung Creative: Kết hợp hamburger menu với animation và emoji động.

 

 

• 8590 Group: Dùng menu để hiển thị danh sách dự án chi tiết.

 

 

• JR Taylor: Cho phép người xem tập trung vào video trên trang chủ trước khi điều hướng.

 

 

• Ducknology: Giữ trang chủ giống “tủ kính sản phẩm”, menu hamburger chứa các mục phụ.

 

 

• Miranda Sofroniou: Icon nhỏ trong gallery toàn màn hình giúp điều hướng tinh tế.

 

 

Khi nào nên sử dụng menu hamburger

 

Menu hamburger phù hợp trong các trường hợp:

 

• Giao diện mobile có không gian hạn chế

 

• Website có nhiều mục điều hướng

 

• Ứng dụng muốn ưu tiên nội dung chính hoặc thiết kế tối giản

 

Ngược lại, với các website cần hiển thị điều hướng rõ ràng để tăng chuyển đổi như landing page bán hàng hoặc thương mại điện tử, bạn nên kết hợp hamburger menu với menu ngang hoặc tab cố định để người dùng dễ truy cập các mục quan trọng.