The Mega Menu: 7 Ways to Design the Perfect One.

Paul Boag

Mega menus can be a great usability tool, but only if we design them with care. This post explores how.

Mega menus have become a common design pattern on websites. Yet, when a client recently suggested using them on a site I was prototyping, I found myself reluctant. That struck me as strange because they have many usability benefits.

Article by Neilsen Norman Group entitled Mega Menus Work Well for Site Navigation.
Usability Expert, Jakob Nielsen praises the uses of mega menus.

My reluctance was because I have seen many bad mega menus, and it has somewhat put me off of the approach.

In this post, I want to look at what causes mega menus to fail and ask how we can avoid these pitfalls and do things right.

Do Not Rely on A Mega Menu

You should consider the design of your interface without the mega menu. That is as important as thinking about the design of the mega menu itself.

You cannot rely on a mega menu to function, and in some cases, you should not use it at all.

For example, mega menus are often a mistake on mobile devices. They need a significant redesign, and even then they don’t always work very well. They sometimes do not display right because of rendering issues. On other occassions, they take up too much screen real estate to be useful.

Menu menu being shown on a mobile device.
Although mega menus can work on a desktop, they never seem to quite work for me on a mobile device.

Then there is the fact that mega menus can create accessibility issues for screen readers. They can even fail to appear if javascript doesn’t load.

In short, you have to design your site to work without the mega menu. That means top-level navigational options cannot only display a mega menu. They will need to load a page on a click that allows users to navigate to sub-pages without the use of the mega menu.

The best approach is to think of mega menus as a way of enhancing the navigation of a website. You cannot afford to make it an integral part of navigation.

Make Every Element in The Mega Menu Justify Itself

The second problem I have with mega menus is that people use them as an excuse to avoid tough decisions about prioritisation. I see them stuff mega menus with options a user might consider useful and leave them to make a choice.

A large mega menu on the B&Q website.
Many mega menus overwhelm the user with choice.

But, as any first-year psychology student will tell you, people suck at making choices. They become paralysed.

Users suffer from cognitive overload when confronted with too many options. That means they may well miss critical links because of the noise of secondary content.

The solution to this problem is to question every item you are considering adding to a mega menu. If you cannot create a watertight case for its inclusion, you should remove it. Keep your mega menu as minimalistic as possible.

Group Mega Menu Options

Although you should make a mega menu as small as possible, you can still end up with a lot of options. Anything over approximately four sub-items under a top-level section is too many. If that happens, consider grouping these options into smaller groups.

Home Depot have grouped their many options in an attempt to make them easier to process.

Take a look at your credit card. The card number is sixteen digits long and would be hard to read if they had not split it into four blocks of four digits. By grouping the numbers, it because easier for our brains to process. We should adopt the same approach with our mega menus.

Tailor the Design for Each Top Level Section

When designing a mega menu, do not feel you have to have the same design for each section.

Take, for example, an ecommerce site. You may choose a different layout for product categories compared to account tools.

For products, you could use thumbnails to allow a user to identify different categories. With the account management section, you could use a simple list of links.

Different style mega menus on Home Depot Website.
The Home Depot website adopts different approaches to its mega menu based on the content.

There are many ways of showing navigational options. You should always pick the right tool for the job, rather than ensuring consistency for the sake of it.

Talking about lists of links, make sure each clicked link has a large clickable area. Too often mega menus include so many links that the designer packs them together. That can make them hard to click on. Yet another reason to minimise the number of options under a mega menu.

Creating a big click target is particularly important if you are using a mega menu on a mobile device. That is because of the limitations of touch. But, it applies on the desktop too. Well spread links reduces time to click and the number of mistakes made by users.

This principle is even more critical for top-level section links. That is because these are the ones that trigger the mega menu. When site packs these links together, it is easy for users to trigger other mega menus. Nothing is more annoying than going to click a link in a mega menu only to trigger another mega menu list.

On the Game website it is easy to accidentally tigger different mega menu items.

Pay Attention to How Mega Menus Are Triggered

The problem of accidentally triggering a mega menu needs careful consideration. It is also the reason why I tend to avoid triggering mega menus on hover. It is too easy to trigger a mega menu when you roll over it on the way to click another link.

Instead, use an on click event and only hide the menu when the user clicks elsewhere. Do not close a mega menu because the user’s cursor moves to a different part of the screen. It is too easy to move the cursor out of the target by accident.

Best Buy only triggers their mega menu when you click a top a top-level section.

Consider What You Lose with A Mega Menu

Finally, it is worth considering what you lose when adopting a mega menu. Although they provide the user with a quick overview of the options available, that comes at a cost.

The limited space means that you cannot provide much context about each of those options. You also lose the ability to float up key content to a top-level page that no longer exists.

That is not only damaging to the user experience. It can have a business impact too. When the user only sees a list of products or services in a mega menu, you lose the ability to upsell or cross-sell. That is because you cannot unpack the benefits of other options in the same way you could given a whole page.

Handle with care

I guess what I am driving at in this rather rambling post is to handle mega menus with care. Yes, they can be a useful usability and navigational tool. But like any tool, if you design them badly or in the wrong situation they can be dangerous.

By all means, use mega menus, but recognise they will need a lot of thought and a lot of testing to get right.

Stock Photos from nesquik007/Shutterstock

Boagworks

Boagworld