Menu thả xuống quay trở lại menu Bắt đầu của các phiên bản Microsoft Windows cổ điển nhất. Giờ đây, bạn có thể tìm thấy nó ở hầu khắp mọi nơi: từ các trang web báo chí đến các cửa hàng trực tuyến, và từ các ứng dụng thiết kế đồ họa đến phần mềm soạn thảo văn bản. Nó đã giúp người dùng hết lần này đến lần khác truy cập vào các phần nội dung và nếu bạn đang tìm cách cung cấp cho họ tất cả các tùy chọn mà không đưa họ đến một trang hoàn toàn mới, thì đó chính là mẫu dành cho bạn.
Vấn đề thiết kế
Bạn có một số lựa chọn khác nhau chứa các tùy chọn về nơi người dùng có thể đến hoặc những gì họ có thể làm trong một trang web hoặc ứng dụng. Một số hoặc tất cả các lựa chọn có thể có này chứa các tùy chọn cụ thể hơn, nhưng bạn không muốn đưa người dùng đến một trang, cửa sổ hoặc bảng điều khiển hoàn toàn mới để có thể nhìn thấy chúng. Ví dụ: hãy xem xét một bộ hiệu ứng đặc biệt để chỉnh sửa hình ảnh — từ menu thả xuống ban đầu gồm chín tùy chọn, bạn có thể phải thêm trung bình bốn tùy chọn cho mỗi tùy chọn và sau đó thêm năm tùy chọn cho mỗi tùy chọn đó , trước khi có khoảng ba tùy chọn phụ cuối cùng được điều chỉnh cho phù hợp với từng các tùy chọn trước đó. Tất cả đã nói, chúng ta sẽ làm gì với số lượng lựa chọn của mình? Đó là 9 x 4 x 5 x 3 = 540 tùy chọn! Chỉ cần nói rằng, 500 lựa chọn lẻ từ danh sách ban đầu gồm 9 là rất nhiều mảnh vụn; có phải chúng tôi đang thử triển khai cách chúng tôi cung cấp cho người dùng những thứ này trên cơ sở từng màn hình mới, chúng tôi sẽ mất họ khá nhanh (nghĩa là người dùng; chúng tôi sẽ bị mắc kẹt với tất cả những màn hình đó và những gì một trải nghiệm đe dọa sự tỉnh táo mà họ sẽ cung cấp cho chúng tôi). Đột nhiên, chúng tôi nhận ra rằng mặc dù có tùy chọn chuyển đổi một hình ảnh tuyến tính trong bộ ứng dụng của chúng tôi thành một hình ảnh có kết cấu dưới dạng thiên hà các ngôi sao là một ý tưởng thực sự tuyệt vời, nhưng điểm mà chúng tôi đã không cung cấp nó một cách thích hợp cho người dùng là một thất bại sử thi.
Giải pháp thiết kế
Menu thả xuống theo chiều dọc cho phép bạn hiển thị danh sách nội dung, điểm điều hướng và chức năng mà không làm ngập người dùng với nhiều tùy chọn cùng một lúc. Chúng tôi sẽ trình bày các tùy chọn cho người dùng dưới dạng danh sách dọc bất cứ khi nào người dùng nhấp vào nhãn menu hoặc di con trỏ qua nó – tùy thuộc vào tương tác mà chúng tôi đã kích hoạt trong thiết kế. Sau đó, người dùng có thể chọn một trong các tùy chọn trình đơn thả xuống bằng cách nhấp vào tên nội dung thích hợp. Các tùy chọn này có thể đưa người dùng đến một trang khác — hoặc chúng có thể dẫn đến việc trình bày menu hoặc bảng điều khiển mới hoặc thực thi một chức năng (ví dụ: “Lưu” so với “Lưu dưới dạng”).
Trong menu thả xuống , mỗi danh sách tùy chọn được gán một tiêu đề xác định nội dung và những tùy chọn này được đặt theo chiều ngang dọc theo đầu màn hình hoặc bảng điều khiển. Như tên cho thấy, danh sách các tùy chọn ‘thả xuống’ khi người dùng đặt con trỏ qua hoặc nhấp vào nhãn menu. Người dùng có thể xem tất cả nội dung trong menu cụ thể đó, đảm bảo họ chỉ phải xem mộtdanh sách các tùy chọn tại một thời điểm. Sau đó, họ có thể thực hiện lựa chọn của mình từ danh sách các tùy chọn theo chiều dọc bằng cách nhấp vào điểm thích hợp trên menu. Thông thường, các menu thả xuống được thiết kế để mục danh sách dưới con trỏ được đánh dấu — phục vụ để thông báo cho người dùng tùy chọn nào đang hoặc sẽ được chọn. Như bạn có thể thấy từ trình đơn thả xuống bên dưới, con trỏ được đặt trên tùy chọn ‘Bạn’, với người dùng được thông báo qua việc sử dụng màu phông xám .
Tác giả / Chủ bản quyền: Flickr. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.
Ví dụ này, hiển thị trang Nhóm Flickr, bao gồm phần đánh dấu được đề xuất ở trên. Khi di chuột, phần ‘Bạn’ của hàng trên cùng của các mục menu được đánh dấu bằng màu xám tinh tế. Đây là một dấu hiệu nhẹ nhàng cho biết tùy chọn nào được chọn, bên cạnh menu thả xuống đã mở.
Menu thả xuống ngang là một bổ sung cho menu thả xuống dọc, giúp người dùng không phải đi đến các phần riêng biệt của giao diện người dùng ở mỗi giai đoạn của trình tự lựa chọn tùy chọn. Như bạn có thể thấy từ ví dụ bên dưới, khi người dùng đặt con trỏ lên một tùy chọn trong menu thả xuống đầu tiên (dọc), với một mũi tên hướng đông ở bên phải của mục đó, một menu thả xuống khác sẽ xuất hiện cùng với tùy chọn gốc và chứa các lựa chọn cụ thể hơn.
Tác giả / Chủ bản quyền: Microsoft. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.
Microsoft Word sử dụng rất nhiều menu thả xuống. Ví dụ này cho thấy sự kết hợp của menu thả xuống theo chiều dọc và ngang, cho phép người dùng truy cập nhiều nội dung hơn bằng cách di chuột qua các mũi tên hướng về phía đông. Mỗi menu bổ sung này tự nó giống như một ‘hộp số’, cho phép người dùng điều khiển được tinh chỉnh — trong trường hợp này, có thể lựa chọn chèn một loạt năm hình dạng.
Menu thả xuống Mega (còn được gọi là ‘menu béo’) hợp nhất tất cả các phần khác nhau của trang web, ứng dụng hoặc hệ thống thành một danh sách dài , được chia nhỏ thành các danh mục phụ và được truy cập từ thanh điều hướng, chẳng hạn như ví dụ trang chủ Asos bên dưới. Như tên cho thấy, các menu thả xuống lớn được sử dụng để hiển thị các nhóm lớn các tùy chọn, danh mục, tập dữ liệu hoặc các loại nội dung liên quan khác cùng một lúc .
Tác giả / Người giữ bản quyền: Asos. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.
Trang web Asos sử dụng menu chất béo, hoặc menu thả xuống lớn, hiển thị tất cả các tùy chọn có sẵn cho quần áo ‘Nam giới’ cùng một lúc. Để làm điều này một cách có thể sử dụng được, các nhà thiết kế đã chia nội dung thành các mục, mỗi mục đều có nhãn rõ ràng.
Tại sao nên chọn Mẫu thiết kế menu thả xuống?
Vì chúng thường được sử dụng trong các ứng dụng máy tính để bàn, nằm ở đầu màn hình, nên gần như tất cả người dùng, bất kể mức độ kinh nghiệm của họ, sẽ quen thuộc với phương tiện tổ chức nội dung này và cách họ phải tương tác để xem nội dung khả dụng. các tùy chọn và thực hiện các lựa chọn của họ. Do đó, nếu bạn đang thiết kế một trang web hoặc ứng dụng dành cho người dùng phổ thông , menu thả xuống cung cấp một mẫu thiết kế giao diện người dùng quen thuộc không cản trở việc khám phá của họ.
Sử dụng menu thả xuống theo chiều ngang cho phép người dùng xem một số lượng lớn các tùy chọn từ một trang và các tùy chọn này dần dần cụ thể hơn , đồng thời giúp giữ cho số lượng trang được làm mới ở mức tối thiểu. Nhờ việc hiển thị tất cả các danh mục phụ của các tùy chọn trong cùng một không gian chung được chiếm bởi thứ tự danh mục cao nhất, người dùng chỉ cần chuyển chế độ xem của họ sang phải một chút mỗi khi chọn menu ngang. Nếu người dùng được đưa đến một trang khác để xem các danh mục phụ này, họ sẽ phải tự định hướng lại ở mỗi lần làm mới trang mới — đây không phải là một ý tưởng hay, vì nó không chỉ làm tăng thêm thời gian cho quá trình mà còn cũng sẽ tạo cho người dùng ấn tượng rằng họ đang ‘làm việc’ để tìm kiếm mọi thứ.
Lợi thế khác biệt của việc sử dụng menu thả xuống lớn là người dùng có cơ hội khám phá danh sách đầy đủ các tùy chọn cho một phần nhất định của trang web, ứng dụng hoặc hệ thống mà không cần phải chuyển đổi giữa các mẫu thiết kế giao diện người dùng khác nhau, chẳng hạn như danh sách cuộn , thanh điều hướng và menu. Bằng cách được hiển thị với tất cả các điểm điều hướng có sẵn, cho một phần cụ thể trong một menu, người dùng có thể điều tra một loạt các tùy chọn mà họ có thể đã không xem xét theo cách khác. Điều này làm cho các menu thả xuống lớn đặc biệt hữu ích trong các thiết kế trang web thương mại điện tử, vì người dùng có thể bị quyến rũ với các nhóm sản phẩm khác nhau mà họ sẽ không bắt gặp trong quá trình di chuyển thông thường qua các cấp độ khác nhau của trang web.
Menu béo cũng tăng tính liên kết của nội dung trong một trang web hoặc ứng dụng, vì chúng cung cấp một điểm điều hướng duy nhất mà từ đó người dùng có thể chuyển từ trang con này sang trang con khác. Điều này có thể đặc biệt thuận lợi đối với các trang web hoặc ứng dụng rộng rãi với nhiều danh mục, phần và trang khác nhau, vì người dùng không phải điều hướng đến trang chủ hoặc một cấp khác trong phân cấp trang web hoặc ứng dụng để chuyển sang phần nội dung khác . Do đó, menu béo cho phép bạn kết nối các trang con trong một thiết kế nhiều cấp để tạo ra trải nghiệm người dùng gắn kết và đơn giản. Ngoài ra, bằng cách bạn hợp nhất tất cả các liên kết được kết nối vào một menu, người dùng luôn biết phải đi đâu khi họ muốn chuyển đến một phần khác của trang web. Điều này giúp họ không phải nhớ nội dung bên trong thiết kế, do đó giảm tải bộ nhớ ngắn hạn.
Tác giả / Chủ bản quyền: New York Times. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.
Sử dụng menu thả xuống theo chiều ngang cho phép người dùng xem một số lượng lớn các tùy chọn từ một trang, các tùy chọn dần dần cụ thể hơn, đồng thời giúp giữ cho số lượng trang được làm mới ở mức tối thiểu. Trang web của New York Times ví dụ về cách hướng dẫn người dùng qua vô số lựa chọn đến một mục tiêu mong muốn, tất cả chỉ trong vòng ba cú nhấp chuột.
Jakob Nielsen, tác giả, nhà nghiên cứu và nhà tư vấn về giao diện người dùng, đồng thời là đồng sáng lập của Nielsen / Norman Group, đã đưa ra ba lý do mà thực đơn chất béo vượt trội hơn thực đơn thả xuống thông thường. Tóm lại, những điều này như sau:
- Các menu thả xuống thông thường trong các trang web lớn, nhiều cấp thường ẩn một số hoặc nhiều tùy chọn khỏi người dùng . Điều này yêu cầu họ cuộn, tìm kiếm hoặc ghi nhớ vị trí các tùy chọn cụ thể trong giao diện người dùng, đòi hỏi tương tác nhiều hơn (tức là cần nhiều lần nhấp hơn) hoặc đòi hỏi về nhận thức (tức là yêu cầu nhớ lại từ bộ nhớ ngắn hạn).
- Các menu thả xuống thông thường tương đối nhỏ, vì vậy có giới hạn không gian để thể hiện (các) mối quan hệ giữa các tùy chọn , chẳng hạn như các phần hoặc danh mục được chia sẻ. Kích thước lớn hơn của menu chất béo cho phép bạn sắp xếp các tùy chọn thành các phần hoặc danh mục có tiêu đề, chẳng hạn như các tùy chọn trong menu chất béo Asos.com ở trên (‘mua sắm theo sản phẩm’, ‘phổ biến nhất’ và ‘thị trường’).
- Một lần nữa, kích thước tuyệt đối của menu chất béo mang lại sự linh hoạt hơn nhiều trong cách thể hiện các tùy chọn . Ví dụ, các hình minh họa nhỏ có thể được sử dụng để giúp người dùng nhận ra ngay một tùy chọn trong danh sách dài. Trong khi văn bản có thể được sử dụng để đặt tên một cách rõ ràng cho một tùy chọn, các hình minh họa và biểu tượng có thể được nhận biết ngay lập tức để người dùng có thể lựa chọn ngay lập tức. Ngay cả khi bạn chọn không sử dụng hình ảnh để đại diện cho các tùy chọn, các menu béo cho phép bạn sáng tạo với kích thước phông chữ, có thể được sử dụng để giúp người dùng phân biệt giữa tiêu đề danh mục và liên kết nội dung trực tiếp hoặc xác định liên kết nào có tầm quan trọng hơn (tức là, lớn nhất đến nhỏ nhất).
Phương pháp hay nhất: Cách triển khai menu thả xuống
Trước khi triển khai các menu thả xuống, bạn phải tự hỏi mình câu hỏi quan trọng là “Liệu chúng có phải là cách tốt nhất để tổ chức nội dung của một trang web hoặc ứng dụng không?”. Không sử dụng menu thả xuống khi:
- Bạn muốn cho người dùng biết họ đang ở đâu trong trang web hoặc ứng dụng. Khi việc cung cấp cho người dùng thông tin theo ngữ cảnh là quan trọng, hãy sử dụng các tab điều hướng .
- Người dùng sẽ được hưởng lợi khi xem nội dung của các menu riêng lẻ cùng nhau.
- Khi một danh mục chỉ chứa một mục.
Làm theo các bước sau để triển khai menu thả xuống:
- Đầu tiên, bạn phải xác định danh mục hoặc tiêu đề trình đơn thả xuống của mình là gì , bao gồm việc xem xét nội dung của bạn để thiết lập các chủ đề và liên kết chung giữa các mục, tùy chọn, chức năng và nội dung trang web / ứng dụng. Đối với menu thả xuống theo chiều dọc, số lượng bộ tùy chọn không được lớn hơn mười, do sự sắp xếp các tiêu đề menu cạnh nhau và kéo dài theo chiều rộng của giao diện người dùng. Điều này hạn chế số lượng không gian có sẵn để trình bày các tiêu đề menu và vì (bản chất của chúng) chúng được thả xuống, bạn không thể xếp chúng chồng lên nhau.
- Sau khi sắp xếp các tùy chọn này vào các nhóm thích hợp, bạn nên gán tiêu đề hợp lý và phù hợp cho từng danh mục . Nhãn này không được quá dài — để tiết kiệm không gian có sẵn dọc theo bảng điều khiển hoặc màn hình — cũng không quá ngắn để làm mất đi sự rõ ràng của thuật ngữ xác định nội dung. Hãy nhớ rằng những nhãn này được sử dụng để thúc đẩy nhận thức ngay lập tức về những gì người dùng sẽ tìm thấy khi họ chọn một mục trong menu; sử dụng các thuật ngữ không rõ ràng hoặc không quen thuộc có thể gây nhầm lẫn hoặc gây hiểu lầm, lãng phí thời gian của người dùng khi họ điều tra các tùy chọn được cung cấp trong menu.
- Bây giờ, hãy đặt các tiêu đề menu thành một hàng và xác định cách sắp xếp chúng . Tùy từng trường hợp mà tần suất sử dụng có thể là một tiêu chí thích hợp. Trong các trường hợp khác, thứ tự bảng chữ cái có thể hữu ích. Rõ ràng, bạn sẽ không biết chắc chắn điều gì sẽ hoạt động tốt nhất cho người dùng của mình, vì vậy việc tiến hành một số thử nghiệm khả năng sử dụng có thể hữu ích.
- Nếu bạn cũng đang sử dụng menu thả xuống theo chiều ngang, bây giờ bạn nên bao gồm một số chỉ báo trực quan , chẳng hạn như các mũi tên màu đen, hướng về phía đông trong ví dụ trên, thông báo cho người dùng rằng việc di con trỏ qua một tùy chọn có thêm tùy chọn sẽ hiển thị danh mục phụ được liên kết trong một menu thả xuống khác. Menu mới này sau đó xuất hiện ở bên phải, với lựa chọn đầu tiên có thể có ngay bây giờ phù hợp với mục tương ứng trong menu thả xuống ban đầu.
- Bây giờ bạn đã quyết định những gì sẽ có trong menu và thứ tự của các mục sẽ được hiển thị, bạn phải thêm một số tính năng trực quan sẽ giúp người dùng chọn tùy chọn dự định . Có hai tính năng chính hỗ trợ người dùng: thứ nhất, sử dụng màu nền để thông báo cho họ biết tùy chọn nào sẽ được chọn theo vị trí của con trỏ và thứ hai, việc triển khai ranh giới rõ ràng xung quanh menu thả xuống để giúp người dùng cô lập nhóm các tùy chọn có sẵn khỏi phần còn lại của giao diện người dùng. Nếu không có một số chỉ báo trực quan, người dùng có thể cho rằng con trỏ ở trên tùy chọn mong muốn của họ, trong khi trên thực tế, con trỏ ở trên vùng lân cận Lựa chọn. Do đó, việc bổ sung đơn giản này cho thiết kế menu thả xuống có thể giúp giảm tỷ lệ lỗi và giúp người dùng không phải thực hiện các bước lùi khó chịu chỉ để quay lại danh sách các tùy chọn. Một ranh giới được xác định rõ ràng sẽ làm giảm tác động ức chế tiềm ẩn của thông tin xung quanh đối với lựa chọn của một phương án. Ví dụ: trình đơn thả xuống có thể chứa văn bản Times New Roman, 12 phông chữ; ngoài ra, nếu danh sách các tùy chọn dường như không tách biệt với phần còn lại của màn hình, văn bản tương tự trong không gian xung quanh có thể khiến người dùng nhầm lẫn hoặc làm chậm quá trình lựa chọn.
- Nếu bạn quyết định sử dụng một menu thả xuống lớn, việc làm đúng các khía cạnh trực quan liên quan đến việc sử dụng tiêu đề và dấu phân chia để người dùng có thể xác định ngay danh mục mà một tùy chọn riêng lẻ thuộc về. Khoảng trắng cũng có thể đóng một phần quan trọng trong việc giúp người dùng xác định các nhóm tùy chọn; vì vậy, hãy bao gồm một lượng nhỏ không gian ‘chết’ này giữa các nhóm khác nhau để tránh nhầm lẫn và giữ cho trải nghiệm dễ chịu.
- Tại thời điểm này, tất cả các khía cạnh trực quan của thiết kế menu thả xuống sẽ có sẵn; bây giờ, bạn phải chọn các yếu tố tương tác của thiết kế .
- Thứ nhất, danh sách thả xuống có nên xuất hiện khi người dùng chỉ cần di con trỏ qua tiêu đề danh mục không? Hay menu chỉ xuất hiện khi người dùng đã nhấp vào nhãn danh mục? Phương pháp trước đây giúp người dùng không phải tương tác trực tiếp; sau đó đảm bảo menu không xuất hiện trừ khi người dùng rõ ràng muốn nó.
- Ngoài ra, bạn phải quyết định xem menu có biến mất khi con trỏ được di chuyển đến vùng khác của giao diện người dùng hay không. Một lần nữa, xóa menu theo cách này sẽ giúp người dùng không tương tác để quay lại phần còn lại của màn hình. Mặc dù vậy, nó có thể cực kỳ khó chịu nếu người dùng di chuyển con trỏ ra xa mà không có ý định đóng menu. Các cách giải quyết vấn đề này được liệt kê trong ‘Các vấn đề tiềm ẩn’ bên dưới.
- Cuối cùng, khi người dùng nhấp vào một tùy chọn, menu sẽ tự động biến mất và nội dung liên quan sẽ mở ra ngay lập tức.
Tác giả / Chủ bản quyền: IxDA BA. Điều khoản bản quyền và giấy phép: CC BY-SA 2.0.
Phân loại thẻ là một phương pháp tốt để hiểu rõ hơn những gì người dùng của bạn cho là danh mục phù hợp để sử dụng trong menu thả xuống của bạn. Nếu bạn không có thời gian để thực hiện các phiên thích hợp với người dùng, bạn có thể cân nhắc việc tự mình thử phân loại thẻ để nắm rõ nội dung. Đây có thể là một ý tưởng hay, đặc biệt là khi bạn đang thiết kế một menu thả xuống lớn.
Để giúp bạn bắt đầu triển khai menu thả xuống, bạn có thể tải xuống và in mẫu “Menu thả xuống” của chúng tôi:
Sự cố tiềm ẩn với menu thả xuống
“Tôi đã chọn một người lười biếng để làm một công việc khó khăn. Bởi vì kẻ lười biếng sẽ tìm ra cách dễ dàng để làm điều đó ”.
—Bill Gates, Người sáng lập Microsoft
Tất nhiên, ông Gates không đề cập đến menu thả xuống ở đây; ngay cả như vậy, với một chút trí tưởng tượng, chúng ta có thể thấy song song với chủ đề của mình nếu chúng ta nhớ rằng chúng ta đang thiết kế để tổ chức một lượng lớn thông tin tiềm năng trên một màn hình. Sắp xếp quá nhiều tùy chọn theo cách này có nghĩa là chúng ta không nên quên rằng mặc dù menu thả xuống giúp tìm kiếm mọi thứ dễ dàng, nhưng việc thiết kế chúng để chúng không gây thất vọng là một vấn đề khó hơn. Đặc biệt, việc tự động xóa menu khỏi màn hình khi con trỏ được di chuyển đến một vùng khác của giao diện người dùng có thể gây khó chịu, nhưng có một số cách có thể giải quyết vấn đề này.
- Bạn có thể thực hiện độ trễ thời gian khoảng 200–300 mili giây giữa lúc người dùng di chuyển con trỏ khỏi không gian bị chiếm bởi danh sách tùy chọn và xóa menu.
- Bạn có thể làm cho các lề xung quanh các tùy chọn menu lớn hơn, vì vậy các chuyển động không chủ ý hoặc không chính xác ít có khả năng làm cho menu biến mất.
- Bạn có thể thay đổi biểu tượng con trỏ xuất hiện khi đặt trên tab (ví dụ: chuyển từ mũi tên sang bàn tay trỏ); điều này giúp thông báo cho người dùng rằng họ đang ở trong vùng tương tác của giao diện người dùng và việc di chuyển khỏi vùng này sẽ khiến nội dung liên quan bị xóa.
Hai cách tiếp cận đầu tiên cho phép sai số chênh lệch lớn hơn khi người dùng di chuyển con trỏ xung quanh màn hình và cách tiếp cận cuối cùng cung cấp cho người dùng phản hồi quan trọng. Do đó, ba kỹ thuật kết hợp có thể giúp giảm thiểu những khó chịu tiềm ẩn liên quan đến việc tự động xóa menu thả xuống khi con trỏ được di chuyển ra xa.
Tác giả / Chủ bản quyền: French Connection. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.
Cửa hàng trực tuyến French Connection là một ví dụ cho thấy thực sự rõ ràng một menu thả xuống lớn có thể chiếm bao nhiêu dung lượng. Trong trường hợp này, đó không phải là vấn đề lớn, vì người dùng sẽ không cần phải xem nội dung của toàn bộ trang web trong khi chọn một danh mục cụ thể. Tuy nhiên, nó không thể được làm lớn hơn bây giờ, vì nó sẽ bao phủ toàn bộ trang.
Một vấn đề quan trọng cần xem xét, đặc biệt là đối với menu thả xuống theo chiều ngang và lớn, là một vùng lớn của giao diện người dùng có thể bị che khuất do tính chất trải rộng của các menu đang mở. Như bạn có thể thấy trong ví dụ trên, menu mở che giấu một lượng lớn giao diện người dùng.
Nếu các menu thả xuống lớn được thiết kế để các tùy chọn tiêu tốn nhiều không gian hơn theo chiều dọc, một số tùy chọn này có thể vượt ra ngoài phần hiển thị của trang. Sau đó, người dùng được yêu cầu cuộn lên và xuống để xem tất cả các tùy chọn và so sánh những tùy chọn ở trên cùng với những tùy chọn ở dưới cùng. Điều này mang lại một mức độ tương tác bổ sung gây khó chịu cho trải nghiệm và giới hạn tốc độ mà người dùng có thể đưa ra lựa chọn.
Về bản chất, Mega menu thả xuống cung cấp cho người dùng rất nhiều tùy chọn khác nhau, có thể là một con dao hai lưỡi. Nếu các tùy chọn riêng lẻ không được sắp xếp thành các danh mục phụ hoặc được phân biệt rõ ràng bằng cách sử dụng một số dạng biến thể trực quan (kích thước phông chữ, biểu tượng hoặc hình ảnh), thì người dùng sẽ phải quét một số lượng lớn các tùy chọn trước khi xác định tùy chọn ưa thích. Do đó, trừ khi một nhà thiết kế thực hiện các biện pháp để chia các tùy chọn thành các nhóm nhỏ hơn, cụ thể hơn, các lợi ích liên quan đến việc hiển thị nhiều tùy chọn cùng một lúc sẽ bị hạn chế.
Tác giả / Chủ bản quyền: USA.gov. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.
Trong ví dụ này từ USA.gov, người dùng cần phải quét từng mục trong menu thả xuống lớn, vì các danh mục dường như không được tổ chức theo cấu trúc logic. Trong trường hợp này, nó có thể chấp nhận được, vì chỉ có mười lựa chọn để xem xét. Nhưng khi kích thước của menu tăng lên, việc sắp xếp các mục một cách dễ hiểu sẽ trở nên quan trọng để đảm bảo khả năng sử dụng thích hợp.
Mang đi
Menu thả xuống là một cách cổ điển để cung cấp cho người dùng một số tùy chọn mà không cần đưa họ đến một trang mới. Việc kết hợp menu thả xuống theo chiều dọc và ngang sẽ cung cấp cho bạn tùy chọn để mở nhiều danh mục, nhưng nếu bạn đang tìm kiếm nhiều hơn, menu chất béo (menu thả xuống lớn) có thể là thứ bạn cần. Xác định danh mục các mục là bước quan trọng nhất trong quá trình thực hiện và kỹ thuật sắp xếp thẻ có thể giúp bạn ở đây. Hãy cẩn thận để giảm bớt những khó chịu tiềm ẩn liên quan đến việc tự động xóa menu thả xuống khi con trỏ được di chuyển ra xa và tránh để menu này che toàn bộ trang. Trên hết, hãy lưu ý rằng người dùng sẽ dễ dàng cảm thấy mất phương hướng như thế nào nếu họ gặp phải những gián đoạn như vậy. Các menu này có thể là đồng minh rất mạnh trong việc cung cấp trải nghiệm người dùng tốt, nhưng việc triển khai đúng cách của chúng là điều tối quan trọng.
