Usability of multi-level tabs versus dropdown menu for navigation

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:

and here is the current design:

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.

Answer

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.