For a comment left at the Humanized blog on a post called Humanized Puzzler #2: Firefox Tabs.
Recently I wrote an article called Firefox 2.0: Tabs Gone Wrong. In it, I argue that Firefox introduced a new feature that represented a big step backwards in terms of tab usability:
…
So here’s the challenge. What’s your solution to the many-tab problem? I’ve already said that reverting to the Firefox 1.5 method of just making the tabs smaller and smaller is better than even the animated version of what’s in Firefox 2.0.
I said:
2 layers of tab space with limited tabs.
First layer is the normal tab layer, but only say 5 tabs are ever visible on that level.
Second layer is a line of squares that are color oriented. The squares represent a tab, but have no descriptive measure unless you maybe hover over one and it tells you the what tab it is.
The squares always represent how many tabs are open. So, if you have 3 tabs open, haven’t used up the limited tab description space, you see three different colored squares on the next layer. Once you open 6 tabs, you only see 5 in the first layer, but there are six squares below. You always know how many tabs are open by the number of squares. As you square grow in number, say to 100, they may shrink in size to accommodate so many squares, but you always see them on screen.
You can always view 5 tab descriptions at a time, so you highlight those five squares, which should be positioned next to one another. When you select any other square outside of those five, you get that set of five tabs shown in the descriptive tab space and those five are also highlighted.
Not sure how much sense that makes, but I might find time later to do a picture, or maybe someone else likes the idea and will try it instead 
Here’s a picture to accompany my idea Click for larger image
5 comments
Comments feed for this article
June 21, 2007 at 9:33 am
KoolGuy
Kool idea. But i think, its not easy to identify the tab with the colour alone.
June 21, 2007 at 12:30 pm
mattblass
The importance of the colored squares isn’t their direct relation to the descriptive tabs. The colors of the squares are only meant as a slight cue between the descriptive tabs and the colored squares, and also as a differentiating factor between single squares. Add a number inside a square maybe and on the tab, or use multiple shapes for more differentiation like square, circle, square, circle.
There are two possible processes happening with tabs. First, the person observes the tabs currently displayed. They decide if the one they want is shown, otherwise they have to search for it. Search initiates the second process where they need to identify the tab they want. The problem with the FF 2.0 scrolling tabs is that the search process is very slow. You’ve lost any orientation of tabs to one another, and have to re-establish that during the scrolling search process.
What the squares really offer is orientation of tabbed sites to one another to help the search process. The problem with the Firefox 2.0 scrolling tabs is that you lose orientation of tab order, which pretty much forces some level of cognitive context switching. With my tab idea, you know which set of five are currently being shown, and you know where they fall in the order of other tabs. If you don’t have too many tabs beyond the 5, then you might remember which you want simply by color or shape or whatever. If not, it gives you a better starting point to initiate your search. Best case, the shapes and colors help the process, worst case, you at least still have orientation based on order of tabs.
June 21, 2007 at 12:58 pm
mattblass
There are two goals in improving the current tabs. 1) Keep the descriptive nature of tabs as they currently are. You can read the titles or names of the sites open on the tab itself – you know what each tab is for. This produces a problem, though, because that takes up too much space. So, goal 2) is reduce the space required and maintain tab order association while still holding onto the more descriptive nature of current tabs.
My tabs idea accomplishes both. You maintain as much descriptiveness as possible by showing up to 5 descriptive tabs, but you also maintain the tab order by showing the symbols below.
A second iterative step would be to improve my idea is, how do you improve the second order, less descriptive tabs to help facilitate the search process of finding the tab you want?
June 22, 2007 at 9:11 am
mattblass
Not my comment, but added at Humanized by a commenter named Yaron. Instead of just using generic symbols, specifically use the bookmark site icons. So, as Yaron said, if you’ve got Gmail open, then in the second level world view of tabs, you see that Gmail icon in its tab location. If you don’t see that icon, it’s easily understood that you’ve probably closed it. Very nice touch.
July 2, 2007 at 1:53 pm
mattblass
Additional thoughts. You retain the FF2.0 functionality 100%. Scrolling for all those who liked it can stay. That won’t impact the value or use of the second level tab icons, which are kind of a small multiples principle for tabs. Also, there no reason this couldn’t work well with expose style tab management and other neat ideas discussed at Humanized. However, those solutions don’t solve the original problem with the FF2.0 scrolling tabs where my solution does.