What are Mega Menus?
Mega menus use large popup windows to display a range of choices not usually available through other means. They have the advantage of allowing users to select their destination without navigating through separate layers of a menu hierarchy. However, they can lead to a number of usability and accessibility issues.
When to Use Mega Menus
For desktop platforms, mega menus offer an attractive alternative to layered navigation. If they are designed to meet users’ expectations, users can do a quick visual scan and single click away from most pages in a site. But to achieve this the many menu items shown in a single popup (there are 50 in the John Lewis example!) have to be well organized. On mobile platforms, mega menus are somewhat limited, although certainly not impossible, because of the typically-vertical orientation. The John Lewis website does not attempt mega menus on a mobile, for example – not even in landscape mode.
Mega menus work best in problem areas that are well understood, such as e-commerce for household items. For online grocery websites, they can quickly become nightmarish because of the sheer number of categories – see the Ocado example. In domains with more abstract or overlapping categories, users may need the reassurance provided by “incremental” navigation. This involves the more traditional loading of a new page for the menu category selected where users will see examples, illustrations and descriptive text that provides navigational feedback.
Mega menus can be daunting for some users. If the grouping is not clear or not as expected, users can struggle to find the item they’re after. Consider providing additional or alternative approaches to navigation, particularly if you need to consider mobile platforms. The two most likely are…
Search: The world’s most successful online retailer, Amazon, does not make use of mega menus. Their sites rely primarily on search and cascading menus. However, be sure that your search is effective for users. Too many results are just as bad as too few.
Cascading menus: These are the traditional pop-out (horizontal) or pull-down (vertical) menus found in many, if not most, desktop interfaces. They are less-frequently used on mobile platforms because of screen limitations. Their advantage is that users are only shown further choices relevant to their earlier selections, thereby making more efficient use of the screen space.
Learn More About Mega Menus
Practical article on the benefits and application of mega menus.
Tips on the use of mega menus in ecommerce.
Literature on Mega Menus
Here’s the entire UX literature on Mega Menus by the Interaction Design Foundation, collated in one place:
Learn more about Mega Menus
Take a deep dive into Mega Menus with our course Human-Computer Interaction: The Foundations of UX Design .
Interactions between products/designs/services on one side and humans on the other should be as intuitive as conversations between two humans—and yet many products and services fail to achieve this. So, what do you need to know so as to create an intuitive user experience? Human psychology? Human-centered design? Specialized design processes? The answer is, of course, all of the above, and this course will cover them all.
Human-Computer Interaction (HCI) will give you the skills to properly understand, and design, the relationship between the “humans”, on one side, and the “computers” (websites, apps, products, services, etc.), on the other side. With these skills, you will be able to build products that work more efficiently and therefore sell better. In fact, the Bureau of Labor Statistics predicts the IT and Design-related occupations will grow by 12% from 2014–2024, faster than the average for all occupations. This goes to show the immense demand in the market for professionals equipped with the right design skills.
Whether you are a newcomer to the subject of HCI or a professional, by the end of the course you will have learned how to implement user-centered design for the best possible results.
In the “Build Your Portfolio: Interaction Design Project”, you’ll find a series of practical exercises that will give you first-hand experience of the methods we’ll cover. If you want to complete these optional exercises, you’ll create a series of case studies for your portfolio which you can show your future employer or freelance customers.
This in-depth, video-based course is created with the amazing Alan Dix, the co-author of the internationally best-selling textbook Human-Computer Interaction and a superstar in the field of Human-Computer Interaction. Alan is currently professor and Director of the Computational Foundry at Swansea University.
Open Access - Link to us!
We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help democratize design knowledge!