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.

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. enter image description here

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.

enter image description here

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

enter image description here

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

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.

share|improve this question
1  
Possible duplicate –  AndroidHustle Jun 27 '12 at 11:41
    
@AndroidHustle Interesting that I didn't find that question, although I searched for something like that :). In any case, I don't think it's a duplicate. That question discusses static tabs, where one is added each year. It's mostly a navigation model issue. Mine is about dynamic tabs opened by the user, and the detailed interaction design. –  Vitaly Mijiritsky Jun 27 '12 at 11:48
    
Well, yes. However, the user interaction issues with finding a suitable navigational strategy to switch between a large set of tabs is still translatable between the two cases. Nonetheless I can see your point in this being in a dynamic context and that you want answers revolving that prerequisite. –  AndroidHustle Jun 27 '12 at 12:01
4  
You forgot the worst option of all: creating multiple rows of tabs. Just for completeness sake :-) –  André Jun 27 '12 at 12:01
    
Actually, on second though - the possible duplicate is wrong. The original question was specific to tabs based on dates and should be edited to make that clear. –  Danny Varod Jun 27 '12 at 14:49

4 Answers 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.

share|improve this answer
    
In defence of Chrome, in my experience the favicons enable easy tab navigation even when there are a lot of tabs open. Chrome caters well up to quite a high number of tabs but admittedly you can expose a minor weakness by opening 100s of tabs, but is that a realistic use case? Another good feature is that it makes it really easy to move tabs into a new window - better than any other browser. This makes grouping really easy. –  Rob Jun 27 '12 at 15:18
    
I do not have a problem as such with Chrome, just that as an example for other applications, where there may be hundreds of tabs, it is not the way to go. IMO. –  Schroedingers Cat Jun 27 '12 at 15:47
1  
Fair point. I suppose I'm just not convinced that tabs are useful for accessing 100s of different pages. Vitaly, what sort of volume are we looking at realistically? 10s? 100s? 1,000s? –  Rob Jun 28 '12 at 8:05
1  
@Rob: I agree; Chrome allows the user to open multiple windows each with many tabs. If Microsoft's metrics can be applied to users of Chrome too, over 90% of users have never had more than 8 tabs open. –  Kit Grose Jun 28 '12 at 15:24

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

mockup

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.

share|improve this answer
    
Thanks Lisa. I'm talking about a browser-like app, not a predefined dialog. As a side note, this way longer names are much more harmful than they are in horizontal tabs, because each pixel of their length eats up another vertical strip reducing your content area. Even in your own sketch you had to cut the labels short :). –  Vitaly Mijiritsky Jun 27 '12 at 14:00
1  
I realise that.... but I don't see why you couldn't do it in a window. And my thought on the long names was that they could go over two lines so that the window simply took two lines of the nav... I realise it is not conventional at the window level ... i just don't see why not (: –  Lisa Tweedie Jun 27 '12 at 14:57
    
Edited wireframes to show tis... –  Lisa Tweedie Jun 27 '12 at 14:59
2  
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. –  dhmholley Jun 27 '12 at 15:05
1  
I actually really like this option in theory, but can't seem to adapt to it in practice. It's how OmniWeb manages tabs (although it used thumbnails as well). It also allows tabs to theoretically be hierarchical as in this Firefox add-on. The best part; using a scrollbar for overflow is as familiar as it gets! –  Kit Grose Jun 29 '12 at 7:12

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

Tabs in Firefox using Tab Mix Plus

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.

share|improve this answer
3  
Multiple tab rows are horrific UX. –  dnbrv Jun 27 '12 at 16:12
    
That is a matter of opinion. I have found that as long as that is is clear which tab is active the multiple rows is a good UX for me. –  Danny Varod Jun 27 '12 at 16:20
    
I have actually user tested multiple rows of user tabs against other design ideas ... They did not fair well! –  Lisa Tweedie Jun 27 '12 at 18:21
    
@LisaTweedie I have seen good and bad implementations - it all depends on the little details such as how much the selected tab stands out relative to the others, can the user scroll through tabs using scroll button above tab bar, is there a preview and more... –  Danny Varod Jun 27 '12 at 18:46
1  
The traditional reason why multiple tab rows are bad is that the tab "head" needs to be visually connected to the tab "body", that's the whole concept of tabs. And with multiple rows you can choose one of two evils - either disconnect them and break the model, or rearrange the rows to always keep the active tab at the bottom, which is extremely disorienting. But +1 for a novel direction that I hadn't considered. –  Vitaly Mijiritsky Jun 27 '12 at 20:19

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:

IE8's colour-coded tabs

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:

Tab overflow behaviour in the Windows 7 taskbar

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

Demonstrating IE8's tab overflow behaviour

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

How Safari copes with tab overflow

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:

The OS X Dock, showing the effect of magnification

Image taken from Control Your Mac

share|improve this answer
2  
+1 like your four point checklist... –  Lisa Tweedie Jun 28 '12 at 14:57

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.