A suggestive User Interface for accomodating Multiple Tabs

Question

I have been reading and researching on multiple tabs, and one thing is pretty clear on the usability aspect, that having multiple rows of tabs is a pretty bad idea, and should be avoided. Also discussed here: Is it ever okay to have multiple rows of tabs?

However, if there needs to be a scenario for multiple tabs (which I am in), I could not find good alternatives or suggestions for accommodating them in a single row. I have come up with this UI, and would appreciate feedback/comments, if this is easy to comprehend/use?

Notes:

1) Initially the tab row design, leaves space for that extra tab that could get selected.

2) So, if user selects a tab from the ones hidden in the drop-down, that tab shows up in the space.

Appreciate your time!

EDIT: To provide more context, there is certain limitation wrt release time/dev support - which called for maintaining the current tab structure. Since the scenario required incorporating more tabs, this was an attempt to see if this could be an option. But seeing the community response, I think I will push for moving away from tabs - which is pretty understandable too.

Answer 1

In larger sites, it's preferred to have mega-dropdown menus rather than simple tab navigation, where you might need to scroll or flip down to see all the options. In this case a Mega dropdown menu works very well since users don’t have to rely on short term memory (when scrolling) and it’s faster to navigate. Only one required step instead of three with usual navigation.

Look at an online clothes shop. Regular navigation uses hierarchy like Clothes > Men’s ware > T-shirts and Vest instead of the image below:

When designing you should group the options in larger meaningful chunks of information making the dropdown even more easy to use. Grouping is important not only to the layout of the web page but also on larger elements as well, such as a drop down menu.

Jakob Nielsen have tested it on real users and presents it in his article Mega Drop-Down Navigation Menus Work Well. In the article you’ll find other topics such as Simplicity, Accessibility and Speed (in terms of timing) which would cover your question.

To use it, you'll need to improve the hierarchy of the site and not allow so many headers. Maybe a grouping session with the customer will solve the issue of having a too wide and shallow navigation?

Answer 2

I think this is not nice from a ui point of view even if a clever solution.

The tabs should be iconified so that they take up less space so there's never a need for >> at the end of the tab bar for extra tabs that don't fit.

1. provide on hover tooltips to bring up the label or
2. on hover expansion of the tab to reveal its label

Answer 3

Its a little hard without some context but could you abandon the tabs and use a scrolled approach with scroll spy and an affixed menu list? Similar to bootstrap site if that is what you are using for tabbing. See below or here http://getbootstrap.com/css/#overview