Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Two level menus: should they be used? Why are they important?

I never found any resource explaining this. Should I avoid them and only use them when you really have too much stuff to present?

Two level menu

share|improve this question
    
It is more of a drop-down menu than a two-level menu. I am not sure what you want to ask. –  Gildas Frémont Apr 30 '13 at 17:09
    
@GildasFrémont It's not just a traditional drop-down. There are sub-menus within the dropdown (such as "analog animation" under "2D animation"). –  3nafish Apr 30 '13 at 20:45
    
Is "2D Animation:" a link? –  unor May 1 '13 at 14:43
    
@unor: No idea. This isn't a menu of mine. Just the first example that popped up in Google search. –  John Assymptoth May 1 '13 at 14:56

5 Answers 5

Two level menus are better for usability than traditional drop-down menus, because the user doesn't have to navigate carefully in multiple directions.

As AskTog explains, with traditional, multi-level drop-down menus:

The bottleneck is the passage between the first-level menu and the second-level menu. Users first slide the mouse pointer down to the category menu item. Then, they must carefully slide the mouse directly across (horizontally) in order to move the pointer into the secondary menu.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Trying to move sideways without straying outside the menu can be difficult, especially for users with impaired mobility.

On the other hand, placing two levels of hierarchy within a single menu saves the user time because she doesn't have to navigate carefully through a maze to get where she's going. With two-level menus, you can navigate straight downward, instead of having to navigate down, then sideways, then downward again.

enter image description here

Two-level menus only work well with relatively simple hierarchies. On larger hierarchies it becomes inefficient. For example, if you have a 10 menus at each level of your hierarchy, such a menu would be ill-fitted because the user would be presented with 100 options inside the dropdown instead of just picking one of 10 and then one of another 10 (20 options total). For hierarchies of five or fewer items per level, the two-level menus work great.

EDIT: Jacob Nielsen has an article on why mega menus work better than normal menus and how to implement them.

share|improve this answer
1  
Amazon does a good job with their left navigation. You can move diagonally like you naturally would and get the desired result. –  rk. Apr 30 '13 at 18:57
    
@rk. True. Many modern hover menus do work smoothly when you travel diagonally, but if you're unfamiliar with the hierarchy they'll still slow you down because you'll have to move incrementally. Using these two-level-in-one menus when there are only a few items per level of hierarchy effectively broadens the hierarchy: broader hierarchies (as long as they're not too huge) generally reduce users' time and errors to find what they're looking for. (See Section 1.1 of this paper.) –  3nafish Apr 30 '13 at 19:08

Considering you are really asking about hover menus.

They can be a really good mean in creating a rich content website. It is also a trap in which you do not want to fall.

They are hard to use because they are often badly designed. @Marvin is pointing at some issues you can deal with while using them in your graphic interface.

Amazon has been kind enough to overcame this hindrances for us :

  1. Their feedback is super-fast
  2. The user can go directly to the item she wants to go

Ben Kamens from Khan Academy explains you how. A must read article : those guys where quite cunning and incredibly smart.

Below, the image that rocked my world a few weeks ago :

enter image description here

I should add, of course all those tricks are useless if the content is not well organized and the layout is not neat: content beeing the most important thing to consider.

  • Try not to use too many special effects like the fading (I do follow a rule that says: if it is useless do not use it).
  • Be clear in what is going to be displayed (Try to avoid "More", it is no so appealing as you may think)
  • Do not be scared to use room, white space helps (or what is the point using hover menus, isn'it ?)
  • As Steve Krug says : try to cut your text in half, then cut it in half again
share|improve this answer
    
Don't think "underhanded" is the word you're looking for here. From merriam-webster.com/dictionary/underhanded: marked by secrecy, chicanery, and deception : not honest and aboveboard : sly <an underhanded attempt to gain power>. –  Patrick May 28 at 0:14
    
You are right @Patrick. I'll edit. –  Gildas Frémont Jun 10 at 14:17

Make it intuitive and proceed observantly.

In 2009 a Nielsen Norman Group finding Big, 2-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices.

This sounds great... but (and this is all very old by internet standards).

In 2010 they revised their statement after researching and finding more and more bad examples of the mega menus.

Mega Drop-Downs Are a Design Canvas

In the bigger scheme of things, the usability problems mentioned here aren't too serious. They'll reduce site use a few percent, but they won't destroy anyone's business metrics. But still: why degrade the user experience at all, when the correct design is as easy to implement as the flawed one?

As I stated last year, mega drop-downs can enhance the usability of website navigation. But, as these new examples show, megas can have usability problems of their own.

Of course they can.

Trying to stay on the bleeding edge can lead to bad design if you throw planning out the window. Remember to follow-up your design with statistical analysis and user feedback to see how much of a menu is wasted space or what can be reorganized to make it easier on the user. Test on the various devices and in the browsers your users use based on your analytic feedback. Bleeding edge functionality is not always backward compatible and may result in a bad user experience.

That being said, here's a 2013 exploration of Amazon's new mega menu.

share|improve this answer

The example you have given here is a hover menu. Hover menus can help in defining a large navigation and allow users to clearly see the child and sub child nodes of a main navigation and they also save on vertical space.However they are not excellent for usability as this article shows

One of the worse things about hover menus is that they force users to skillfully move their mouse through hover tunnels. Hover tunnels are passages that users have to tunnel their mouse through to click a menu item. Older users who are less tech-savvy will often have trouble doing this. Even tech-savvy users can find it annoying that their mouse has to move through a confined path to click a menu item.

This not only makes the menu harder to use, but it makes it less efficient for users to complete their navigation task fast. This is because when the menu opens, users can’t move their mouse directly to the menu item they want. If they do, they’ll accidentally close the menu. Instead, they have to carefully move their mouse through the hover tunnel each time they want to click a menu item. There’s no reason users should have to work this hard to navigate a website.

enter image description here

Another point stated by the article which calls out why Hover menus are hard to use is

Hover menus make peripheral items slow and hard to click.

Hover menus will close right when the mouse moves outside the menu. This makes peripheral menu items harder to click because they’re closest to the edge of the menu. Users can’t move their mouse fast to click a menu item. They’ll have to slow it down as they get closer to peripheral menu items that are farther away. And since most menu items are text links in small fonts, it makes the target smaller, which further adds to the slowness.

share|improve this answer
    
I don't think the OP is asking about hover menus. There's nothing to indicate that he isn't asking about menus that require a physical click. Your answer would be better suited to the question Are hover menus in headers easy to use? –  3nafish Apr 30 '13 at 21:18

If you have just a few buttons and only one button with a submenu, then it's not bad user interface. However, if many of them have submenus you might want to consider a side page menu. Otherwise it will be hard to read and not very clear what you are trying to communicate.

menu

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.