What are the requirements from a multi-row tab control in order that users will be able to intuitively tell which tab is active?

Question

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.

Firefox's TMP - with tab selected on top row

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).

VS's Tab Well - with a red tab selected on bottom row

VS's Tab Well - with a green tab selected on bottom row

VS's Tab Well - with a pinkish tab selected on middle row

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.)

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.

Answer 2

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.