UI Round Up: Too Many Tabs

The UI paradigm of layout out things horizontally - such as tabs or the toolbars - is by now commonplace. But with this design there is a painful drawback: what do you do when you run out of horizontal space? Since, I am about to have to implement something like this for work, I did a little research on how this problem is handled. The representative sample I chose are Firefox, Safari, IE 7

, Chrome, and TextMate. 

Firefox

Firefox Tabs

In Firefox, there's a minimum width beyond which the tabs will not shrink. Tabs that cannot fit into the real estate are hidden, but can be gotten to via the left and right scroll arrows(on the left and right of the tabs) or via the tab drop-down icon on the far right.

Safari

Safari Tabs

Safari works similar to Firefox, except that it does not have the left and right arrows.

IE 7

IE 7 Tabs

IE 7 has everything Firefox has, plus a thumbnail view button on the far left, which when clicked will show you all your tabs as thumbnails in the content area.

Chrome

Chrome Tabs

Chrome is the most curious of all. It will display all of your tabs, regardless of how many of them you have opened, or whether or not you can read the title of the tabs.

TextMate

TextMate Tabs

TextMate - the only non-browser in my sample set - handles this much like Safari, except that in the "extra tabs" drop-down, checkmarks next to an item indicates that the file is the one currently displayed in the editor, whereas in all the browser UIs we've seen, the currently displayed tab is always made visible on top.

blog comments powered by Disqus