Mega Menus Done Right

Mega Drop Down Menus thumb 0

Mega Menus Done Right

Mega-menus have successfully made the transition from “hot, new trend” to accepted practice in the user interface world. These drop-down (or fly-out if coming from side navigation) menus group navigation options so that all options are visible at once. The more successful implementations of these menus structure navigation choices with layout, images and typography. reuters.png When should you use them? They are perfect for ecommerce, news, or sites with a large number categories to display. Use them to replace long drop-down, pop-out menus that require scrolling and make it impossible for users to see all their choices in one glance. Why they work On large sites, regular drop-down menus hide most of the user's options. Mega-menus show everything at a glance, so users can see where things are rather than try to remember where they last saw it. When used correctly, they are less taxing on the end users short term memory than traditional dropdowns. Regular drop downs just present a list of words that may or may not mean anything to the end user. Mega-menus give you more space to visually emphasize relationships among items through labeling, grouping, typography or icons. They can provide context to help users better understand their options. OfficeMax
Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other. – Jakob Nielsen
When designing mega-menus, keep your basic usability rules in mind Just because mega-menus allow you to put anything into them doesn't mean that you should. • Don't over-crowd menus with numerous options that require extensive time to scan. • Show each choice only once. Duplicating options confuses the user. • Use concise, yet descriptive labels for each group. • Enhance scannability by using the most information-carrying word and avoid made-up terms. • Order the groups and links according to importance, putting the most important and/or frequently used on top One possible usability fail: The diagonal problem. The diagonal problem occurs when direct path from the nav bar to the destination takes the pointer outside of the active menu area. The menu disappears when the user is on the way to point to something within the menu. fail.png Solutions: Time delay Menu Including a subtle time delay when hovering in and out of menus gives the user just enough time to get where they are going. For a helpful tutorial on creating Mega Drop Down Menus with a hover Intent jQuery plugin, see Soh Tanaka's post Mega Drop Down Menus w/ CSS & jQuery Click Drop Panel Another interesting solution is to design a menu panel that slides down when the nav link is clicked. Source: Jakob Nielsen's Alertbox, March 23, 2009 Mega Drop-Down Navigation Menus Work Well Image: http://www.sohtanaka.com

Related Posts

Drupal Mega Menus Made Simple

Mark Carver
Read more

Improving Menu Views in Drupal 7 to Create Mega Menus More Efficiently

Mark Carver
Read more

UX Design Improves Inbound Marketing

Felipa Villegas
Read more

Design Trends 2016: The Good, The Bad, and The Outdated

Felipa Villegas
Read more

Creating and Growing a Drupal User Group

David Hahn
Read more

Comparing Popular CSS Grid Frameworks

Tom Nelson
Read more