Home | Experience Design

Usability best practice, Part 2 – Mega drop-down menus

Alex Christie

12 February 2010

Following on from the first in the series ‘Usability best practice’ which focused on the use of Tabs as navigation I am continuing with another form of navigation system. This blog focuses on mega drop-down menus and their main features and how they have improved standard drop-down menus.

The mega drop-down menu is a new and increasingly used navigation system and one that Jakob Nielson actually recommends using in his Mega dropdown navigation menus work well study. They offer the user a clear preview of the site and access to the majority of its pages. Not only are they a great navigation device they can really enhance the look of your site.

John Lewis is a good example of a mega drop-down menu.

johnLewis

Main features:

  • Single drop-down appears on hover
  • Contents displayed in one large panel with no scrolling
  • Links are grouped into clear and relevant categories
  • Easy to use and are accessibility compliant

How to use:

  • Keep them simple do not add text fields or command buttons try to keep them simple links
  • Icons or other graphics can be used to aid the user
  • Menu should appear after the user has been hovering for 0.5 seconds over a category before the drop-down appears
  • Once the menu had been revealed it should remain for 0.5 seconds after the user moved  away from menu category box
  • Create them with accessibility in mind – One solution is to make only the top-level categories accessible and not the content of the mega-drop down
  • Use colours that don’t conflict with the rest of the site leading to the menu getting ‘lost’

A good use of icons/graphics being used with the menus system is Aviary.com.

aviary

Problems with ‘regular’ drop-down menus:

  • Site categories can be hidden which presents an immediate barrier
  • They don’t support category ‘grouping’
  • They can be hard to use usually with a small active area making them very fiddly!
  • Particularly bad when a second level of navigation is included. Usually another drop-down menu appearing to the right of already selected drop-down menu
  • Less flexible and scalable limiting the site’s growth
  • Can lead to poor user orientation making the user ‘lost’ in the site

An example of a poor use of drop-down navigation is Toshiba which is too small making the text hard to read and is difficult to use. Also, the colours used don’t distinguish the navigation from the rest of the site enough – very disorientating.

toshiba

In conclusion, mega drop-downs can help improve the navigability of your site and can also look very stylish. Also, if they function correctly they will build trust between the user and the site which is invaluable for any website.

LEAVE A COMMENT

IF YOU LIKED THIS POST, YOU MIGHT ALSO LIKE THESE:

Usability best practice, Part 1 – Tab navigation

Using tabs as a navigation device has long been an established metaphor and is widely accepted as a user-friendly...

Usability best practice, Part 4 – Using personas

Carrying on the series ‘Usability best practice’ I am focusing on the use of personas explaining...

SEO vs Usability

While reading an article this morning, I couldn't help but feel relieved with the fact that we, Tamar,...

I.E 8 plays spot-the-difference with Firefox 3

The race between Firefox and Internet Explorer reminds me of the Olympics. As some nations steam ahead,...

Usability vs. Flexibility

It is a well-known design principle that the more a product increases it's flexibility, the less usable...

Grab This Widget