E-commerce Link: Go Big or Go Home
In May, we began exploring the tip of the navigation best practices iceberg. Now I want to move on to a worthy trend in navigation design that's become popular during the past year or so: mega menus.
Mega menus work in conjunction with the global navigation bar to help users move through your website confidently and efficiently. They are among my favorite navigation interactions; particularly for sites with a robust information architecture (IA).
In the Beginning ...
Before mega menus, there were a couple of standard designs for a global navigation bar. The first was a simple static global nav. Clicking one of the buttons on the bar would open another page where additional menu items were available, either in the main content area or listed down the left-hand side. Technically, this method gets the job done. But because there is so little insight into the breadth, depth and organization of site content, it requires a lot of guessing, clicking and tunneling. This is not the most efficient way to connect users with the content they seek.
The second familiar global navigation interaction makes use of cascading dynamic dropdown menus, sometimes called flyouts. When users hover over a global navigation button, they get a dropdown menu listing their choices one level deeper. When they hover over one of the items in that menu, they get another menu with yet more options one level deeper still. While this gives the user more insight into the structure of the site, this multi-level hovering is a usability frustration to say the least.
We've all experienced the annoyance of trying to point from one dropdown menu to the next: On the way to making your next selection, the first menu disappears. BAH! So, how is the mega menu different?
Make It Mega
Mega menus are large navigation panels that appear when hovering over a global nav button. They are different from flyout menus in that they display multiple levels of IA at once with no scrolling. For example, outdoor gear retailer REI groups its content into logical categories and displays those categories and all related sub-options at once through the mega menu. The large mega menu panel allows you to move your mouse from one option to the next with no fear of it doing that pesky disappearing act.
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.
3. Icons and Illustrations: Definitely use icons or illustrations in your mega menus if it will help users make navigation decisions. Avoid the imagery completely if it's little more than decoration or fluff. The European Ripcurl retail site relies heavily on imagery to navigate its products. Because Ripcurl has a good bit of French in addition to English on its site, using visual navigation helps the surfwear retailer bridge the language divide.
4. Say "NO" to Search: Avoid advanced interactions within your mega menus—such as searching or logging in. First of all, you don't want to hide these important functions from your users; keep them readily available in the masthead of your page where they are expected. Secondly, these types of complex interactions shouldn't happen within a panel that appears on hover and feels more temporary. Mega menus should be used to get the user in, making a click and out again. Heftier interactions need a more permanent space.
5. Strong Visual Borders: Lastly, make sure your mega menu has strong borders and feels visually distinct from the main portion of your page. The one drawback with a mega menu is that when it opens, it expands down on top of main page content. Therefore, you need to make sure your mega menu doesn't blend in with, or look too similar to, the page beneath. This will be a visual cue to users that they need to leave the menu in order to browse main page content.
Please send me screenshots if you end up using these mega menu techniques. I'd love to see your examples! Best of luck.
Cristin Siegel is the director of user experience and research at Chicago-based interactive agency Designkitchen. Reach her at email@example.com.