Hướng dẫn thiết kế Menu Hamburger – Digital Learning – MangoAds

Thực đơn bánh mì kẹp thịt đã nhận được nhiều ý kiến ​​trái chiều trong vài năm qua và vẫn còn gây tranh cãi cho đến ngày nay. Tuy nhiên, menu điều hướng hamburger cũng phổ biến như biểu tượng kính lúp để tìm kiếm và biểu tượng bánh răng để cài đặt.

Tại sao menu hamburger lại trở nên phổ biến trong thiết kế giao diện người dùng? Bạn có nên sử dụng nó trong các thiết kế tiếp theo? làm thế nào để sử dụng? Đây là những câu hỏi chúng ta sẽ khám phá trong hướng dẫn này.

Thực đơn hamburger là gì?

Ba đường kẻ ngang mà bạn nhìn thấy ở góc trên của màn hình trong các ứng dụng và trang web phản hồi được gọi là menu hamburger. Vì vậy, khi các nhà thiết kế đề cập đến một “menu hamburger”, họ đang nói về việc sắp xếp một loạt các tùy chọn menu trong bản trình chiếu có thể mở hoặc ẩn.

Tại sao lại ẩn trình đơn? Câu trả lời đơn giản là tiết kiệm không gian hiển thị trên màn hình. Để hiểu tại sao biểu tượng menu bánh hamburger lại phổ biến trong thiết kế giao diện người dùng và có thể phát triển vào thời điểm ngành thiết kế ứng dụng và web đang ở điểm bão hòa, chúng ta cần biết nó đến từ đâu.

Sự ra đời của thực đơn hamburger

Vào những năm 1980, Norm Cox, cha đẻ của menu hamburger, đã thiết kế máy trạm cá nhân Xerox Star. Anh ấy đã phát triển một biểu tượng bốn dòng cho một nút mở danh sách các mục. Ý tưởng menu hamburger ban đầu là có nhiều menu xuất hiện khi người dùng di chuột qua một biểu tượng và nhấp chuột phải để hiển thị các danh mục con. Khi mới ra đời, biểu tượng 4 dòng được coi là “thảm họa” thiết kế và nhanh chóng bị lãng quên.

Tuy nhiên, hàng chục năm sau, khi smarphone “lên ngôi”, các nhà thiết kế giao diện người dùng đã “hồi sinh” và đưa biểu tượng menu hamburger vào kho từ vựng thiết kế để tiết kiệm không gian hiển thị và hiển thị trên thiết bị di động.

Do độ phân giải thấp của các thiết bị di động như máy tính bảng và điện thoại nên menu thanh dài thường không phải là lựa chọn tốt nhất. Các biểu tượng thu gọn danh mục thành ba hàng đang nhanh chóng trở thành thiết kế phù hợp cho thiết kế menu đáp ứng.

Tuy nhiên, ngày nay, menu hamburger không được các nhà thiết kế chấp nhận rộng rãi. Bất chấp những lợi ích mà nó mang lại cho các trang web phản hồi, vẫn có nhiều nhà thiết kế muốn “xóa bỏ” biểu tượng này khỏi các thiết kế giao diện người dùng.

Từ chối thực đơn hamburger

Tại sao thực đơn hamburger lại khó chịu đến vậy? Câu trả lời là nó tạo thêm một bước để xem xét các danh mục. Yêu cầu người dùng hoàn thành các bước bổ sung được coi là “không” trong thế giới thiết kế.

Tuy nhiên, menu hamburger có thực sự là “điều cấm kỵ” hay không còn phụ thuộc vào khái niệm truy cập tuần tự và trực tiếp. Truy cập tuần tự liên quan đến việc người dùng khám phá các phần tử và nội dung theo từng giai đoạn. Nếu bạn cho phép người dùng truy cập trực tiếp, điều đó có nghĩa là họ sẽ thấy nội dung hoặc liên kết ngay lập tức.

Xem Thêm : Lời nhận xét học bạ cho học sinh lớp 6 – Download.vn

Khi sử dụng menu thông thường, họ có thể xem các danh mục ngay lập tức. Ngược lại, menu hamburger không cho phép hiển thị tất cả các danh mục của trang web. Điều này có nghĩa là người dùng phải nhấn hoặc nhấp vào biểu tượng để xem danh mục.

Một ví dụ khác về yếu tố thiết kế giao diện người dùng là quảng cáo quay vòng, hiển thị nhiều nội dung trực quan khác nhau, thường là hình ảnh, để người dùng chạm, nhấn hoặc vuốt qua. Do đó, họ không thể xem mọi thứ cùng một lúc. Nhiều nhà thiết kế cảm thấy rằng nó làm giảm “khám phá”. Vì vậy, trong khi bạn đang ẩn đằng sau menu hamburger và băng chuyền, người dùng có thể phát hiện ra một số chức năng.

Bạn có thể thiết kế menu tùy chọn hướng dẫn người dùng đến các danh mục nội dung quan trọng và thúc đẩy nhiều chuyển đổi nhất đến trang web của bạn. Tuy nhiên, nếu menu hamburger được sử dụng, những menu này có thể bị người dùng bỏ qua hoặc yêu cầu các bước bổ sung để người dùng tương tác trực tiếp.

Chi phí tương tác của menu hamburger

Thêm nhấp chuột, vuốt, chạm, nhảy vòi… tất cả sự bất tiện cho người dùng đều có chi phí tương tác. Sử dụng menu hamburger làm tăng chi phí tham gia.

Tuy nhiên, tư duy cởi mở là điều cần thiết trong thiết kế giao diện người dùng. Đặc biệt, khi loại menu này mang lại những lợi thế nhất định trong một số trường hợp nhất định, chẳng hạn như

Thực đơn hamburger – một biểu tượng nổi tiếng

Tại thời điểm này, menu hamburger trở nên phổ biến và người dùng ngay lập tức biết biểu tượng này dùng để làm gì.

Do đó, bạn nên cân nhắc sử dụng menu hamburger trong một thiết kế web hoặc ứng dụng phù hợp. Vì các ứng dụng và trang web khác nhau nên những gì không hiệu quả với người này có thể phù hợp với người kia.

Khi nào thì sử dụng menu hamburger?

Bây giờ, hãy đưa menu hamburger vào thiết kế giao diện người dùng. Tuy nhiên, trước khi sử dụng công cụ tạo mẫu để tạo menu hamburger, bạn nên hiểu các cơ hội tiềm năng trong trải nghiệm người dùng.

Ẩn các tính năng bổ sung

Hãy tưởng tượng rằng các thành phần điều hướng cốt lõi và chức năng của trang web hoặc ứng dụng của bạn đều có mặt, nhưng vẫn có những danh mục con hoặc danh mục con không quan trọng lắm đối với mục tiêu chuyển đổi của trang web của bạn. Nếu các danh mục phụ này không quá quan trọng, bạn có thể chọn ẩn chúng sau menu bánh hamburger để tiết kiệm diện tích màn hình.

Tiết kiệm không gian màn hình

Bạn có thể hiển thị cho người dùng những danh mục quan trọng nhất và ẩn những danh mục khác sau menu hamburger để họ không bị nhầm lẫn với quá nhiều thông tin. Theo một nghiên cứu của Đại học Columbia về việc loại bỏ lựa chọn, người dùng có nhiều khả năng mua sắm trên các trang thương mại điện tử hơn khi đối mặt với ít lựa chọn hơn.

Khi nào thì không nên sử dụng menu hamburger?

Khi nó ẩn chức năng cốt lõi

Không nên sử dụng menu hamburger nếu menu này ẩn một tùy chọn, cài đặt hoặc chức năng quan trọng hoặc trung tâm đối với trải nghiệm người dùng. Nguyên tắc chung là chúng sẽ xuất hiện ở thanh trên cùng hoặc thanh menu cố định. Bởi vì các danh mục quan trọng nên được hiển thị trực tiếp và không nên ẩn hoặc ẩn trong menu hamburger.

Khi chi phí tương tác trang web của bạn cao

Ngoài ra, hãy tưởng tượng người dùng phải nhấp nhiều lần để tìm mục họ muốn. Điều này có thể dẫn đến trải nghiệm người dùng kém hoặc ảnh hưởng đến mục tiêu của trang web. Rõ ràng, bạn muốn giảm các bước bổ sung này thành một lần nhấp hoặc nhấn vào bất kỳ đâu, do đó giảm chi phí tương tác.

Khi điều hướng gốc bị ẩn

Xem Thêm : Paint.NET – Phần mềm chỉnh sửa ảnh miễn phí

Điều cuối cùng bạn muốn là đặt menu hamburger ở vị trí mà nó ảnh hưởng đến thiết bị, chẳng hạn như các thành phần điều hướng gốc của iphone. Điều này làm cho khả năng sử dụng trở nên tồi tệ hơn vì hầu hết người dùng đã quen với việc điều hướng bằng tùy chọn gốc này.

Menu hamburger được sử dụng như thế nào trong thiết kế?

Menu hamburger nên được đặt ở bên trái hay bên phải màn hình?

Khi sử dụng menu hamburger, các nhà thiết kế luôn quan tâm đến việc nên đặt biểu tượng ở bên trái hay bên phải màn hình.

Nhiều người cho rằng menu hamburger nên đặt ở bên trái, vì họ quen sử dụng ngôn ngữ từ trái sang phải nên người dùng có xu hướng bắt đầu từ nội dung bên trái của trang, tức là ở phần đầu trang. hình chữ f. Do đó, nhiều menu được đặt ở phía bên trái, điều này cũng đồng nghĩa với việc người dùng sẽ quen với menu bên trái.

Ngược lại, cũng có ý kiến ​​cho rằng vì menu hamburger hiện đã là biểu tượng được nhiều người biết đến và chấp nhận nên việc đặt nó ở bên phải không ảnh hưởng đến trải nghiệm trang web nên không cần quá quan trọng. Đặc biệt là nơi menu hamburger ẩn các tùy chọn điều hướng, danh mục và chức năng phụ. Do đó, những nội dung quan trọng hơn nên được giữ ở bên trái màn hình.

Tuy nhiên, có một số ý kiến ​​cho rằng thực đơn hamburger nên ở bên phải, vì hầu hết mọi người đều thuận tay phải. Với smartphone màn hình lớn, người dùng sẽ phải vươn ngón tay cái lên góc trên bên trái màn hình, khiến họ phải thay đổi cách cầm. Việc đặt nó bên phải giúp người dùng dễ bấm hơn. Tuy nhiên, nếu màn hình của điện thoại di động rất lớn, người dùng bắt buộc phải chuyển tay cầm.

Menu hamburger nổi

Một giải pháp tốt cho các thiết bị màn hình lớn là có một nút menu hamburger nổi cố định ở gần góc dưới cùng bên phải của màn hình khi người dùng cuộn, cho phép người dùng dễ dàng truy cập nút này chỉ bằng một lần chạm ngón tay vào nút cái . Menu hamburger động này cũng được thiết kế để nhắc nhở người dùng về nhiều danh mục mà họ có thể truy cập khi sử dụng ứng dụng. Nó cũng tiết kiệm rất nhiều không gian hiển thị trên thiết bị di động, giúp tạo ra trải nghiệm sống động hơn.

Tuy nhiên, bạn nên tránh menu hamburger động nếu có nút “quay lại đầu trang”. Bạn không muốn người dùng vô tình nhấn một cái khi họ muốn nhấn cái kia.

Sử dụng menu hamburger khi thu nhỏ cửa sổ

Nếu bạn sử dụng menu hamburger, nguyên tắc chung là chỉ triển khai menu này khi trang web của bạn được thu nhỏ lại.

Ví dụ: bạn đang thiết kế một trang web đáp ứng và menu chính không thể hiển thị ở độ phân giải nhỏ hơn, vì vậy bạn sẽ triển khai menu hamburger cho máy tính bảng và điện thoại di động. Ý tưởng là đưa mọi thứ vào menu hamburger sau khi màn hình thu nhỏ lại bằng kích thước của một chiếc máy tính bảng.

Cách sử dụng với menu thông thường

Một giải pháp khác là tạo menu trên cùng và giữ chức năng điều hướng cơ bản nhất, sau đó đặt biểu tượng menu hamburger trên cùng một thanh menu để cho người dùng biết rằng có nhiều tùy chọn menu hơn. Đây là một cách tuyệt vời để tiết kiệm diện tích màn hình trong khi vẫn giữ cho người dùng có thể nhìn thấy và sử dụng được các tùy chọn điều hướng cốt lõi.

Kết luận

Vậy bạn có nên sử dụng menu hamburger trong thiết kế tiếp theo của mình không? Như với hầu hết mọi thứ trong thiết kế, câu trả lời phụ thuộc vào hai yếu tố: phong cách của trang web hoặc ứng dụng và người dùng.

Menu hamburger của bạn nên ở bên trái hay bên phải màn hình? Một lần nữa, câu trả lời thường mang tính chủ quan. Để có một cách tiếp cận thực sự khách quan, chúng ta phải nắm bắt được tâm lý người dùng và hiểu họ muốn gì khi sử dụng ứng dụng.