15

We're in the middle of a redesign of our client portal, and there's been some discussion about whether to pursue a multi-level tab design or a dropdown menu (used on the current version of the application).

Having read through questions like Elegant, simple and obvious sub-tabs?, and articles like Why hover menus do users more harm than good, I find myself wondering whether there is any real usability data either way.

To illustrate what I'm talking about, here is the pending design for the new navigation method:

Suggested new design

and here is the current design:

enter image description here

From my perspective, the proposed new design has as a primary advantage the ability for the user to see and navigate to other subsections without necessarily having to open a menu. It's also more attractive (to me at least).

The disadvantage is that I have the hover navigation problem described in that article I cited. I could deal with that through either:

  1. A jQuery delay on the hover (used on E*Trade and QuickBooks online), or
  2. Requiring that the user click the tab to either display the sub-tabs or navigate to the main section page upon clicking the tab. The former risks losing the benefits of the default display being a "you are here" depiction. The latter may cause delays since a user will have to visit the main section's primary page before being able to navigate to the desired sub-page.

Unfortunately I don't have the luxury of performing user testing, and even if I did the preference would probably be skewed in favor of dropdowns more because of the distaste for change than real usability. Our user base pretty much has to use the system, so I don't have to worry about losing traffic if the change is initially uncomfortable. I'd rather go for ease of use and simple aesthetics.

Improve this question
2
  • looking at the options in your current design's drop-down, it looks to be a very task-centric menu. As such, I would say this is much more akin to your standard software menus and is probably a decent solution already.
    – DA01
    May 30, 2012 at 4:31
  • 1
    If you can find just two people inside or outside of your team to test mocked up alternatives, you can afford user testing to some degree. A little is more than zero, imperfect is better than nothing. It might not be comprehensive, but it will give you more to go on than nothing.
    – Todd Sieling
    May 30, 2012 at 14:52

2 Answers 2

Reset to default
10

I haven't seen, nor was I able to currently find any studies specifically evaluating tab-based navigation vs. drop-down menu based navigation.

I believe that this type of question of which navigation is better almost always boils down to which is better for the context. Thus when considering the specific examples you have posted above I do have a few things to note.

  • You'll find that actually vertical navigation is a bit easier to scan (depending on how you lay it out) and thus your drop-down menu is in theory a quicker "read" than the multi-level set.
  • There are a batch of sites and studies arguing for and against drop-downs. As you can see in your example though, one thing is very clear. Depending on the width of your user's browser window, you can fit more items in a drop-down menu. This circles back to the point I made earlier on context being king for your menu choice. Jakob Nielsen notes in his article on "Tabs, Used Right" that multi-level tabs (as in if one of your tab levels wrapped its options) should in general be avoided so this could definitely be a problem with viewers of your site accessing from lower-resolution devices.
  • A clear benefit to the multi-level tab-based approach you have shown in your question is that you can see more categories on the fly, without having to move your house to hover or click to show the menu.

In summary I would generally lean more towards the mega drop-down menu. While there are indeed some clear negatives to the mega drop-down menu, with tabs you will have problems with them wrapping on different devices, and you cannot fit as many options easily. I should note though that if you were able to perform even some really basic hallway usability testing, you might find that the majority of your user base only accesses a certain subset of information on your site, at a specific resolution and thus the tab-based interface may be 100 times better. So if you can test in any way, I would greatly push for that.

Additional information/reading:

As an aside: I almost wonder if your example here of multi-level tab-based navigation could be considered a form of mega drop-down menu, just with the alignment of the text switched.

Improve this answer
2

Any site on the Web should start accounting for the growing number of touchscreen users. And, since some users can change their User-Agent string, they may be getting the desktop version of your site even if you try to detect mobile browsers. The chances are good and increasing that your users are visiting your site using a touchscreen and hover does not work on touch devices. This is a problem in addition to the problems in the article you cited. My recommendation is to avoid hover in whatever solution you choose.

Vertical menus will offer advantages for users scanning the text in the menu and allow them to spend less time looking at- and thinking about your navigation and focus on the actual content of your site.

Take a look at: https://webmasters.stackexchange.com/questions/5448/pros-and-cons-of-horizontal-menus-versus-vertical

And, consider the F-shaped Pattern: http://www.useit.com/alertbox/reading_pattern.html

Improve this answer
2
  • Good point on the mobile users. We're still discussing whether to go with a single responsive site or a separate desktop site and mobile site.
    – Josh Anderson
    May 29, 2012 at 21:56
  • Many mobile users can "request the desktop site" with their mobile browser. If you make a separate mobile site, there's a good chance that mobile users will still see your desktop site. You may be better off using Responsive Web instead of a separate mobile site.
    – mawcsco
    May 30, 2012 at 13:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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