6

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

  • Related: ux.stackexchange.com/a/22934/687 – Danny Varod Jun 27 '12 at 21:34
  • 4
    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
5

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.

  • +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
0

First, multiple tab rows is the way to go if you want frequently opened tabs most quickly found and accessed. At least for Desktop PCs. But to ID them quickly, first use the FT Deep Dark theme for beauty and screen real estate. And TabMixPlus (as long as it lasts, or becomes a web extension) to reduce tab width, to maybe around 65, depending on your screen size and resolution. And to chose multiple tab rows.

Then choose distinct formatting options for active tab (italics, color, etc.). Also install Colorful tabs and choose to highlight the active tab, and to make it blink if you want. And to color based on domain. enter image description here

  • 1
    I hope you meant this as a joke! It's impossible to tell which is the current tab - tabs headers are too small, too colorful and blinking!? – Danny Varod Oct 31 '17 at 11:51
  • Why is the highlighted tab in red italics not distinctive from the rest? All you need to do is quickly scan looking for these chosen distinctives. Look again (or just look for the last tab opened). You can make the active tab blink if needed. – PeaceByJesus Oct 31 '17 at 18:11
  • The lighter shade of yellow with the reverse borders doesn't stand out immediately - you have to look for it. Also, this would be a color blind person's nightmare. Please take a look at the W3C contrast guidelines, the active tab need a significant contrast difference. Also, so many colors is very distracting. – Danny Varod Oct 31 '17 at 21:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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