20

My director and designer want to make a big drop-down menu on our site. Multilevel menu :

|     MENU 1     |     MENU 2     |     MENU 3     |     MENU 4     |
-----------------|----------------|----------------|----------------|
                 |  SUBMENU 2-1   | 
                 |  SUBMENU 2-2   |
                 |  SUBMENU 2-3 > |----------------|
                 |  SUBMENU 2-4   |  SUBMENU 2-3-1 |
                 |----------------|  SUBMENU 2-3-2 |
                                  |  SUBMENU 2-3-3 |
                                  |  SUBMENU 2-3-4 |
                                  |  SUBMENU 2-3-5 |
                                  |----------------|

I think it's a bad idea. I think it's very uncomfortable. Am I right? Is this really bad idea to do such a navigation menu on the website? (in 2011 ;) )

Ben Brocka
  • 40,865
  • 10
  • 112
  • 183
Gray Bananas
  • 385
  • 3
  • 7
  • 1
    Why does the director want the multiple dropdowns menu? Usually too many submenus can get frustrating to the user by accidentally opening menus by a wrong mouse move and not being able to navigate easily to where they want to go. –  Nov 11 '11 at 17:45
  • I don't know why. They just 'want' – Gray Bananas Nov 11 '11 at 19:55
  • That is a valid answer. May be worth the time to go back and ask if there is a particular reason why this was proposed? It may be that is what was thought was the standard menu for this type of display. I generally don't like to assume I understand what a user wants all the time. –  Nov 11 '11 at 20:00
  • Build it, and have your director test it. – DA01 Nov 14 '11 at 15:21
  • 3
    No don't...he'll love it since it's his idea. – Itumac Aug 09 '12 at 15:30

4 Answers4

33

There's lots of research in Human Computer Interaction on this issue and the general concensus is that breadth beats depth (read: wide top level navigation beats nested submenus).

This is the case due to Short Term Memory (STM) storage issues and how STM is affected by both breath and depth. Pointing to some hard research should help your case to your director and designer quite well. Here's a good excerpt from the book Human Computer Interaction:

For very large hierarchies, or complex web navigation structures in general, in fact keeping track of where one is in the hierarchy depth is more likely to be a strain on memory than scanning the list of items being displayed. That is depth is the memory limit.

STM isn't significantly affected when you can see your options, so breadth is generally preferred. Depth forces you to remember what options are where, which can be taxing on memory.

It's also been found that access time is a function of depth. This means a deeper menu structure results in a longer access time. This makes sense considering the points about STM above.

Overall the results are in agreement with those of Kiger (1984) where it has been proven that access time is proportional to depth in menu selection.

Here's a nice overview of the of Depth vs Breadth from the UI Design Newsletter(emphasis is mine):

  • Too deep is too deep: users have a more difficult time encoding, and consequently navigating, deep sites.
  • Too broad is too broad: conversely extremely broad sites (which may encourage satisficing) also present a challenge to efficient
    navigation.
  • Effective sub-grouping reduces perceived breadth: grouping navigation elements thematically improves performance for even the broadest structures.

Their conclusion stresses the importance of proper grouping as well. This helps limit short term memory load as logical grouping means I should intuitively know what's under a submenu, I don't have to look to find out.

Bottom line, a lot of research shows deep navigation menus to be slow or confusing. This means each layer of "submenu" as in your question results in slower access times for any items hidden inside the deeper menus. This is a good reason to consider alternatives, such as Mega Menus as others have brought up.

Ben Brocka
  • 40,865
  • 10
  • 112
  • 183
  • You can find a great deal of information simply searching for "HCI depth breadth menus" or similar searches on Google, there is a lot of published research. – Ben Brocka Nov 11 '11 at 17:59
28

How about using a mega menu? http://www.useit.com/alertbox/mega-dropdown-menus.html

Wander
  • 1,336
  • 12
  • 23
15

There are two reasons that multi-level nested menus do not provide the best usability.

  1. It is hard for users to physically select the first level item, then the second level, then the third. There is a tendency for the user's mouse to slip off their intended target, and then they have to go back to the top level and start the navigation process again.

  2. Actions at the 2nd and 3rd level are quite hidden, and it is hard for users to find them. If these actions are truly rarely used, perhaps burying them at a lower level is a valid decision. However, primary actions should be more easily discovered, viewed and usable.

Now, all that said, in some advanced 3d applications, for example, 2 levels of navigation might begin to make sense, because these apps are indeed so complex. I have rarely ever seen, however, a good reason to use three levels.

Nadine Schaeffer
  • 1,718
  • 8
  • 12
1

You could, as an alternate option to do such a thing, to make the user click the button of the sub-menu and, by clicking, it transforms the whole sub-tab into a sub-sub-tab. If the user wants to go back, then just move the mouse away from the menu and open the sub-menu again or putting a return button.

Probably, your director wants this because of fear of boring the users out of loading pages and more pages just to check a little thing.

Pedro Falcão
  • 11
  • 1