E-commerce Link: Go Big or Go Home
With mega menus, the site IA is clear and visible. Users don't have to remember what content lives where, or how to get to it, because everything is available at a glance. They can devote precious brain space to higher pursuits because they're not subconsciously trying to remember how to use your website. Mega menus also reduce the amount of clicking and tunneling required to reach site content. This means less time navigating and more time interacting with the content itself. Marketers rejoice!
Now, let's review some mega menu best practices:
1. Smart Hover: Mega menus should appear on hover. But, as discussed, hover can be a little annoying, particularly if it's too sensitive. No one wants menus opening up all over the place when the mouse is simply on its way someplace else. Therefore, make sure your mega menus are envoked only with a purposeful hover on a specific target.
Build your menu so it appears only after the user's cursor has rested on the corresponding global nav button for 0.5 seconds. The same is true when closing your mega menu panel. Your user's cursor should be outside of the panel for 0.5 seconds before it disappears. Also note, there is no need for a close button on your mega menu. The menu itself is temporary and, therefore, doesn't need to be actively dismissed.
2. White Space: Even though a mega menu has more real estate, that doesn't give designers and information architects license to stuff it to the gills. It's important to be thoughtful about the number, granularity and labeling of navigation options at each level. Keep it clean and simple despite the extra space. The Clinique website is a perfect example. It shows five key categories beneath Makeup—Face, Eyes, Lips and so forth—and then four or five sub-options in each of those key categories. It's very manageable.