Mega menus done well organize multiple navigation choices in a way that is convenient and clear. Good navigation design helps people move through your site with ease, increasing the likelihood their goal will be accomplished.
Mega menu example
Here is an example from MuleSoft:
You’ll note that the information is well organized, easy to read, and well formatted. The “Solutions” link is highlighted and shares the same background color as the menu itself. As well, the page is given a subtle overlay to lessen distraction and increase focus. All the information that is needed fits nicely into the menu. But most importantly, it’s clear that it’s a menu.
Unfortunately, the simple job of “being a menu” is not the case for mega mega menus.
Mega mega menu example
Here is Amazon’s WorkSpaces’s menu:
Most good usability element is there. The information is well organized. The icons help identify the areas of topic.
However, there are two flaws that when combined make the design fatal.
- Hovering over the menu link opens the menu automatically.
- It covers 90% of the page.
These two design decisions means that people will be thrown off kilter left not knowing where they are.
When I was researching their WorkSpaces product I accidentally rolled over the menu. Since it appeared as though the entire page had changed, I assumed it had. I assumed I accidentally clicked a link so I immediately clicked the back button.
Doing so landed me on the previous page I was looking at, which only confused me further. After a few moments I realized what had happened so I investigated the menu further.
It turns out the only way to exit out of the menu is to click the “X” at the top right of the menu. (Yes, you have to manually “exit” out of the menu.)
My only assumption as to why it is designed this way is because they have over optimized for mobile at the cost of the desktop. On mobile the top navigation is nicely tucked away, accessible by pressing the hamburger button.
When traversing your site, people need to know where they are at all times. Anything that throws them off course greatly reduces the likelihood they’ll accomplish what they set out to do on your site.