In light of the mobile and tablet innovation boom over the past two-three years, it may have seemed as though the web was laying low behind the limelight, but looks can be deceiving. Just hover over a company’s navigation menu now, and you can quite possibly see one honkin’ huge “mega-menu.” After garnering Jakob Neilsen’s blessing in 2009, these mega-menus, also known as fat menus, have fast-become ubiquitous to the point of becoming design patterns. Neilsen’s study has found that despite accessibility challenges, mega-menus do in fact help ease findability by allowing more complex sites to become more discoverable. I find this especially true when navigating e-commerce sites since many of the subcategories can appear up with each category, saving users an extra page click to get to their desired page(s).
Mega-menus appear as both drop-down and flyout formats. Many of them display quick links area(s) either to the left or right side of the menu as well at the bottom stretch, which are usually accompanied by imagery. As a drop down, they work well when categories are few since the menu is limited by the horizontal space.
Typically, I’m not a fan of flyout menus since they require users to mouseover quite a bit, but in a mega-menu setting, there is minimal visual shifting that occurs since the vertical size of the flyout menus are consistent.
The jury is still out if task-based mega menus offer usability hindrances, but I am including them here to start the conversation of its usefulness, desirability, and usability since a number of sites are implementing functionality elements into their menus.
Structure first, menu second: Mega menus can provide users with an expanded view of a dense website, but these menus atop a poorly architected site can quickly become a where’s waldo mess. Hence, keep the purpose and intent as well implementation focused to support the use of a mega-menu.
Design for organization, not simply for coolness factor: When justifying the use of a mega-menu, look to investigate if the site has enough content to not only supply multiple categories but sufficient number of subcategories as well. Simply redesigning a drop down menu to repurpose the first level navigation with quick links isn’t quite as useful as unveiling the second level navigation with the quick links. The prime benefit of mega-menus is helping users discover content that might have been harder to get to otherwise.
Check for scannability: Once you decide to move forward with a mega-menu, take into consideration that users typically scan vertically. Menus are launching points to content area, so users tend to scan, not read menus. Thus, plan to match users’ mental model of navigation menus and alphabetize accordingly as vertical columns.Tweet