\n — @adurdin is thinking aloud

Tabs Don’t Scale

Tabs are a great answer to the UI question: “How can I efficiently manage a number of different windows in the same space?” Tabs achieve their usefulness by providing four key benefits:

• Summary. At a glance, you can see all the available tabs, and scan their labels.
• Spatiality. Each tab is always in the same place, so you know where to find it.
• Convenience. Activating another tab takes a single click.
• Context. The active tab is displayed more prominently, so you know where you are.

But—like most other UI elements, but quicker—tabs become unmanageable as their number increases. Try a little experiment in your favourite browser: open 10 different pages in tabs; now another 10; how about 50 tabs altogether?

After about 4 or 5 tabs, most applications begin to reduce the tab size to fit more of them on the screen. And after a few more tabs are opened, the application will hide some of the tabs. Here’s how three popular browsers behave, with a window 1000 pixels wide:

Safari hides the extra tabs in a popup menu, accessed by clicking the chevron on the right.

The popup menu shows all the tabs.

Firefox allows the whole tab bar to scroll horizontally, either with a mouse wheel or with scroll arrows at either end.

Here you can see the tab bar scrolled to the right, and the active tab is no longer visible.

Chrome never alters its behaviour, but continues to shrink its tabs.

And even continues to do that to the point of absurdity.

Each of these solutions compromises at least one of the core benefits of tabs. Chrome retains usable tabs the longest, although not far beyond 15 tabs the labels are truncated enough that summary is severely impaired. Safari loses some of each benefit—but only temporally: the menu preserves summary, spatiality, and context, although it must be opened. Firefox takes quite an odd approach that loses both summary and convenience, while preserving spatiality. But it’s the least usable solution: manipulating the scroll arrows is tedious and clumsy; even using a scroll wheel is quite slow. And it’s unituitive that a vertically-oriented scroll wheel should cause horizontal scrolling.

Of course, none of theses are quite so awkward as this gem from the early days of tabbed interfaces—where the rows would exchange places to keep the active tab on the bottom, horribly compromising spatiality:

But, anyway. Given the awkwardness of the scrolling tabs in Firefox, I was initially surprised to see that Apple implemented horizontally scrolling tabs in Keynote on the iPad. However, with the directness of touch input and the ease of flick-scrolling on iPhoneOS, it appears that this interface becomes convenient once again.

(YouTube link)