The current site I'm working on typically has 3 levels on navigation. Site-map and navigation has already been done. They have chosen to use a mega menu to show top level navigation items and sub-categories.I'm trying to figure out if this is the best approach. When is it best to use a mega menu? What are the advantages and disadvantages of adopting a mega menu?
-
3What specifically do you need to know about for MegaMenus, just asking for general usage isn't really an answerable question. As stated in the FAQ "You should only ask practical, answerable questions based on actual problems that you face. Chatty, open-ended questions diminish the usefulness of our site and push other questions off the front page." If your question is more 'I have a site with a flat hierarchy, is a megamenu appropriate for such a site' then that's a bit more on topic, but just asking for all possible uses is too broad for here.– JonW ♦Mar 11, 2013 at 15:13
-
@jonw Tried to extend my question based on your feedback– ReloadedMar 11, 2013 at 16:01
-
OK that's better, it's more answerable now that we know your current situation.– JonW ♦Mar 11, 2013 at 16:03
5 Answers
You have some great answers. While trying not to repeat the answers already given, the key advantages and disadvantages of mega menus are :
Advantages
- Mega Menus allow you to see all the options available to the user at one shot and dont require him to drill down into further sub navigations as needed. To quote this article about the Benefits of Mega Menus
A traditional dropdown menu hides almost all options from the user until she hovers over the parent category. If the user does not think with the same hierarchy as the designer, she will have to play Treasure Hunt, hovering over many parent items to find an item. This can lead to frustration too if the dropdown keeps disappearing when the user is not asbolutely precise with the cursor. In theory, mega menus can solve that problem.
I also recommend looking at Jacob Nielson's article on Mega menus which has this to say
For bigger sites with many features, regular drop-down menus typically hide most of the user's options. Yes, you can scroll, but (a) it's a pain and (b) scrolling down hides the initial options. As a result, you can't visually compare all your choices; you have to rely on short-term memory. People have enough on their minds, and messing with short-term memory reduces their ability to accomplish their tasks on your site. Mega drop-downs show everything at a glance, so users can see rather than try to remember.
- They help you to organize options effectively : To quote Jacob Nielson's article
Mega-drop-downs let you visually emphasize relationships among items. This again helps users understand their choices.
- Mega menus allow the use of greater typography choices such use of icons and images to allow users to make distinctions quickly. To quote Jacob Nielson's article :
While plain text can be wonderful, illustrations can indeed be worth a mouthful of words, as the Word 2007 example shows. Mega drop-downs make it easy to use icons and pictures when appropriate. And, even if you stick to text alone, you have richer typography at your disposal (letting you differentiate link sizes according to their importance, for example).
Disadvantages
- If not structured properly they can become cumbersome and difficult to read since there are so many options present.
Looking at the example above, though the Mega Menu does provide all the options to the users,it suddenly become like a large sitemap which requires the user to scan around trying to find the content he is looking for
- Mega menus can take up a lot of your screen size since they dont scroll and they dont scale. Here are two examples of how mega menus fall short when the screen size is smaller or if the the browser is resized to a lower resolution :
- Most Mega menus are hover based : While Hover based menus might not pose a problem to desktop based websites with a standard mouse as a mode of navigation, they could considerable problems with touch devices where hover options fall flat.However it is possible to implement a click-based, non-hover-dependent mega menu. However, that adds more effort to manipulate the interface, which distracts the users from their goals.
I recommend looking at this article for best practices on designing Mega Menus
Also look at this article : 15 good examples of mega drop-down navigation menus
A mega menu is useful when you have a large selection of items in many clearly defined categories and sub-categories. Take Amazon or eBay as examples. This would not be a good choice where your categories and sub-categories were not clearly defined for your users.
Their advantage is that they allow you to include a lot of categories and help users to quickly drill down to the sub-category that they are looking for, while being relatively space efficient.
Their main disadvantage is that they require your users to think in terms of the categories that you have selected, and that they only reveal subcategories when you select (or hover over) a category. However in many situations, there is no better option.
I agree with what JohnGB said but let me add both Amazon and eBay have similar problems presenting and navigating extremely large catalogs, but they also have tremendous resources. Mega menus can be tricky and can require testing and iteration to make usable, there's often more to them than is immediately apparent. Here's an article about someone gleaning one of the features from Amazon's menu:
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
and general issues with mega menus:
http://www.uie.com/articles/mega_menus/
So a disadvantage or caveat is that they can require much resources to do them right.
The idea of using a mega menu with a mouse hover is very bad because is leads to discrimination of some various groups users example.
- A person suffering from Parkinson Disease
- A computer with a faulty mouse path
EDIT:
I mean bat mouse path ( you can use a tab key to navigate if the link is on click not on hover that mega menu supported. )
To play devil's advocate of the mega menu, sometimes by giving your users too much choice, you present them with too much text making it tougher for them to make a clear decision. You also have SEO to take into consideration as more menu options will appear on every page increasing the number of links you have per page. This might give a boost to the deeper pages on your site at the expense of your categories.
Also mega menu sites tend to be ones that are more associated with shopping when you are dealing with a generic marketplace. A site like Amazon has so many products and categories, they will probably always have the mega menu while a site like Apple has their products into main categories and they don't have a wide range of products so they have a simple navigation and menu.
You can check what your competition does and if you want to exclude SEO as part of the discussion, why not design both menus and test them. Testing should quickly reveal if users are using the site more or less as you'll have a change in bounce rate, time on site, pages per session, etc...