How to deal with tab overflow of dynamic tabs?

Question

Tabbed interfaces where the number of tabs is up to the user employ different solutions for the point where tabs of the default size no longer fit on the screen.

Google Chrome begins to reduce the width of the tabs, and does this up to a huge and unusable number of tabs and doesn't provide any special means of navigation between tabs.

Firefox both reduces the width of the tabs, provides a navigation dropdown (from the very beginning - as soon as there's two tabs), and when you exceed a certain number also provides scrolling arrows at the right and left ends of the tab bar.

IE9 reduces the width of the tabs and at a certain point also provides scrolling arrows.

Axure RP doesn't reduce the width of the tabs (not by much in any case), and just provides the dropdown and the arrows.

Which approach is best and why? It's important to note that in my case, the labels may be very long (4-5 words) and not necessarily very descriptive when truncated.

Answer 1

I like how Tab Mix Plus handles this - using multiple tab rows...

This is one of the things I like about Firefox - great extensions.

---

You can also attempt to group tabs according to some criteria (e.g. site) in order to reduce the request screen space.

If you do group the tabs, preview of tabs and the option to drag over a specific tab in a group by activating the previewed tag on drag over, have to be enabled otherwise the grouping will block possible user actions.

An example for this is the task bar grouping in Win 7 vs the task bar grouping in XP and Vista which limited user actions on grouped tabs.

Answer 2

I really don't understand why tabs are generally considered a unique problem from the Windows taskbar, which has improved over time quite dramatically from when it used to behave quite similarly to Firefox and other browsers with a little scroll arrow to view overflow items to what we have now in Windows 7.

In general IE seems to be innovating the most in this realm recently. In IE8+, they've got dynamically colour-coded tabs which group tabs that were opened from one another:

It would seem to me that it would make sense to treat these dynamic tab groups (or something like them, like tabs that all share the same host) in the way that different applications are treated in the Windows taskbar, especially when the tabs overflow. In Windows 7, multiple windows from the same application group together. Clicking on a single group then pops up a list of the windows that it represents:

Image taken from the Engineering Windows 7 blog

Sadly even in IE8, even despite its tab grouping, the tabs overflow exactly as you describe above (as opposed to grouping/collapsing tab groups together):

Image taken from Chaks' Corner

In general the factors that come to mind as needing to be considered when dealing with tab overflow are:

1. Legibility
2. Spatial awareness
3. Aesthetics
4. Familiarity

I think Chrome's solution suffers on point 1 but succeeds on point 2. I believe Firefox's solution is the best of a bad bunch based on these requirements. For reference (since you didn't include it), here's how Safari deals with this problem (the tabs listed in the darkened section of the drop-down are the ones that are entirely overflown):

Perhaps the most novel solution to this problem is that of IE9. While I notice you mentioned how IE9 handles this problem, it's worth pointing out that IE9 was designed to generally accommodate 5 or so tabs (that's a really interesting article for you to read if you're interested in this topic anyway).

Despite the backlash that it invoked in power users (who are used to using huge numbers of tabs), what this design does is encourage users to spread their tabs over multiple windows sooner (effectively removing the need to manage an extremely large number of tabs in a single window).

---

Edit: There are a bunch of nifty Firefox add-ons that present creative solutions to dealing with very large numbers of tabs, including providing the ability to toggle specific tabs to show only a favicon and thus take up less space, or to "fisheye" tabs like the OS X Dock, such that the tab beneath the mouse/with keyboard focus is shown at full width but it collapses proportionately when not.

In the OS X Dock, the entire Dock itself scales down proportionally to accommodate more items until individual items are minuscule. As described, it can then (optionally) magnify the items closer to the mouse:

Image taken from Control Your Mac

Answer 3

Off the wall I know ... but why would this be a bad solution?:

^{download bmml source – Wireframes created with Balsamiq Mockups}

We used something similar at Oracle when our tabbed dialogs got too crazy. At least this way you can cope with longer names etc.

UPDATE

Some would argue that:

For browser-like apps, significant horizontal chrome is generally a bad idea, because there's a tendency to value horizontal space more than vertical (for various reasons: scrolling habits, horizontality of western text, monitor sizes etc). In that context, sidebars simply take up unnecessary horizontal space.

However we are talking about the context of a situation where the user is trying to work with many many windows (unusual in itself). In this context then the sorting of the windows does become part of the primary task and therefore I would argue probably does warrant more salience.

The suggestion is not that the vertical nav. is always there but only once the number of windows become unmanageable. In which case you should dedicate the appropriate screen space to this task and vertical presentation fits in much better with an endless list of windows.

Thinking about it logically who is really going to be dealing with these huge number of windows? Probably an expert user who probably also has a very large screen or possibly even two.

Perhaps you could even add some sorting or labelling tool at the top of the window (see second image).

Perhaps the context of use needs to be thought about a little more deeply rather than sticking with your classic solution. Unusual problems sometimes call for a rethink.

Answer 4

The Chrome approach is wrong, because you clearly cannot then navigate the tabs. I also don't like the IE approach because it can reduce the tabs to something you cannot then distinguish between.

Personally, I prefer the approach of leaving the tabs largely the same (or, at the most, reducing the white space a little), and then allows scrolling and dropdown selection - the Firefox and Axure style.

The only place I have ever had to work with many tabs is on Excel, with a large number of sheets open, and they use this style there, which i find easy to navigate through, because I can quickly see the sheet I need. In that case (and in this, it sounds like), seeing the name of the tab is important, whereas seeing how many tabs you have open (the Chrome/IE style) is less so.