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.

In the implementation in Visual Studio 2010's "Tab Well" (a feature of the "Power Tools" extension), pinned tabs can be multi-row, non pinned tabs are in one scrolling row.

In Firefox's "Tab Mix Pro" tabs can be multi-rowed.

In "Tab Mix Pro" I can always easily and quickly tell which is the active tab.

In "Tab Well" it can take me a while to figure this out.


What are the things that should and shouldn't be done in multi-row tabs?


If you intend on answering this, please don't automatically assume that multi-row tabs are bad - keep an open mind.


Examples:


Firefox's TMP

Here supported sites have there own icon and selected tab is emphasized, new tabs have red text. Tabs do not have a border that continues from header.

enter image description here
Firefox's TMP - with tab selected on top row

enter image description here Firefox's TMP - with tab selected on bottom row


VS's Tab Well

Here each project has its own color and selected tab is slightly emphasized. Selected tab has a border that connects to the header (assuming header is bottom row - I find this confusing if selected tab isn't on bottom row).

enter image description here VS's Tab Well - with a red tab selected on bottom row

enter image description here VS's Tab Well - with a green tab selected on bottom row

enter image description here VS's Tab Well - with a pinkish tab selected on middle row

enter image description here VS's Tab Well - with a green tab selected on top row


An old settings dialog

This is from Word 6. I think I remember seeing this in Win95 settings too.
Here the tabs rows swapped if you click on the top row. Which was confusing, because if you click on were the previous tab was to go back, it was no longer there. (Thanks to Andre for the reference.)

enter image description here
This image's animation shows the different states.

share|improve this question
    
Related: ux.stackexchange.com/a/22934/687 –  Danny Varod Jun 27 '12 at 21:34
3  
You can assume they're bad but still work with them :). More to the point, any answer consisting of "don't use multi-row tabs" isn't an answer to the question as posed. –  Ben Brocka Jun 27 '12 at 21:45
1  
Yes but as a service to the community someone ought to say it... "Don't use multi-row tabs - very bad karma" –  Lisa Tweedie Jun 28 '12 at 11:43
    
And I would argue that it depends on the implementation. –  Danny Varod Jun 28 '12 at 12:01

1 Answer 1

As others have already mentioned, I must include the obligatory first answer of: avoid multi-level tabs if at all possible. They are extremely visually complex and are known to have problems. Just think about how if you have a selected tab in the middle of three rows, it either won't be connected to the content, or it will cause the other tab items to shift around in order to be connected to the content.

To answer your actual question however, you just need to make them visually distinctive enough so that the user can tell from a glance which tab is active. There are many ways to accomplish this but I would believe that you may need to combine several of them in order to make it stand out from the rows of inactive tabs. Here are some general suggestions for differentiating the selected tab:

  • Make the tab larger than the other inactive tabs. Grow it vertically as opposed to horizontally.
  • Highlight the tab, giving it a distinctive foreground color from the rest of the tabs. This is tougher to achieve if your tabs already all have different background colors. A way around this might be to make the background the same color on unselected tabs, but use a border around the tabs to differentiate types of content, etc.
  • Bold the label of the tab, (don't italicize it actually makes it harder to read).

As always it really depends on the scenario, but the above thoughts combined should make a selected tab distinctive enough to be easily spotted.

share|improve this answer
    
+1 For the suggestions. The link, however, only mentions multi-row tabs that jump (as in the Word 6 example). –  Danny Varod Jun 28 '12 at 16:31

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.