Close Form

Have An Upcoming Project? Call 301.656.1144 We would love to discuss how we can help!

Thanks for the business! A representative will contact you within 24 hours.

Trendspotting: Mega-Menus


May 23, 2017

Trendspotting: Mega-Menus

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).

 

Drop Down

 

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.

 

 

 

 

 

Flyout

 

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.

 

 

 

 

 

Task-based

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.

 

 

Take Aways

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.



BrowserMedia, LLC

1424 K Street Northwest
3rd Floor
Washington, DC 20005
301-656-1144
K StreetK StreetMcPherson SqMetro Station