How fast can you find the three of diamonds in a deck of playing cards? The answer is not very fast because you have to sift through so many irrelevant cards to get to the right one. This is what you’re asking users to do when you use a mega menu for your navigation.
When users open a mega menu, they experience a megaton explosion of navigation links in their face. After they select a parent category, every single child item related to that category is displayed simultaneously. This might work for menus with only a few child items, but not for menus with a megaton.
It’s not only disorienting to look at, but it’s frustrating to use. First, users have to scan and process the organized whole to get a sense of the structure. Then they have to scan and process each part of the whole to find their item. It’s no wonder why they struggle with them, and why companies who use them lose revenue.
A much easier way to find the three of diamonds is by searching through a stack of diamond cards only instead of every card from every suit.
It would be even easier if they could search through a stack of cards that have the number three only. The more you break down the classification, the easier it is to search. Not only are there fewer cards to view, but you can view them in a sensible order.
Your navigation menu should work the same way. By only displaying items from a relevant classification, users don’t have to sift through irrelevant items. This allows them to find their item faster with fewer visual distractions. Unfortunately, mega menus don’t work this way. They display too many irrelevant items at once, which creates a lot of visual distractions.
The Two-Parent Menu
The way to remove these visual distractions is to use a two-parent menu. A two-parent menu has a secondary parent category that conceals irrelevant child items. As a result, the user only sees items from the relevant classification they choose.
To illustrate this, let’s add a secondary parent to H&M’s mega menu. As you can see, the mega menu goes from the primary parent to revealing too many irrelevant child items.
When a secondary parent is added, it conceals irrelevant child items and saves users from scanning and processing extra information. Relevant child items are only displayed after users choose from the secondary menu, allowing them to focus on finding their item with fewer distractions.
This particular design technique is called progressive disclosure and is effective for managing information complexity. Mega menus fail to use progressive disclosure, while two-parent menus use it correctly.
Limited Attentional Resources
Fewer visual distractions mean users have more attentional resources to allocate toward tasks, giving them more focus to find their item. You may have experienced directed attention fatigue if you’ve ever scanned through a large spreadsheet of data. Since human attentional resources are limited, it’s easier to lose focus when there’s more data to look at than fewer data. More data creates competing stimuli, which demands more attention and weakens focus.
This is the end of the sample preview. The rest of the article discusses tips on making the two-parent menu more intuitive, translating it to mobile, and caveats to using them. To read the full article, subscribe to premium.
- Premium Article: 1550 words / 14 visual examples
- Sample Preview: 528 words / 7 visual examples