Humanized Puzzler #2: Firefox Tabs

Puzzler

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:

In Firefox 2.0 a “feature” was introduced that dealt with the edge-case where there were many tabs in a new way. It takes a giant step backward by actively concealing information.

Previously, as the number of tabs grew, each one’s size would shrink. Eventually, there would be so many tabs that you couldn’t even read their titles. But, while this clearly wasn’t ideal and led to a certain amount of hunting for tabs, you at least always knew roughly where it was: “an inch or so from the right side of the window”. Now, however, the tabs remain mostly readable but can scroll off-screen.

To access off-screen tabs you need to click on the little arrows on the left or right of the tab bar. For allowing a only a subset of the tabs to be readable at a time, a lot has been sacrificed:

1. Scanning your eyes across the tab-bar no longer guarantees you’ll see all of the tabs — this has tripped me up a number of times: I’ve ended up with 3 or 4 identical because I didn’t realize that I already had the tab open;
2. You can no longer associate a tab-bar location with a certain tab because they shift around every time you scroll — the interface doesn’t feel stable anymore;
3. Scrolling through tabs is quite slow — I find that it is often the case that opening a new tab is faster then finding the old one.

Well, here’s the thing. Mozilla is listening. They want a better solution and are willing to put it into Firefox if it’s good.

Let me backtrack a bit. I had the honor of meeting Alex Faaborg while speaking at CHI2007 this year. Alex is a smart designer who really understands the harm that modes can cause to your train of thought. He has a nice proposal for entirely revamping Firefox’s messages to be mostly non-modal. We may also see transparent messages in Firefox sometime soon.

While at CHI, Alex and I discussed Firefox 2.0’s treatment of tabs and we mostly agree that it’s lacking. Alex rightly says that one of the downfalls of the current tab scrolling mechanism is that it doesn’t animate: The user is left guessing at what just happened when they click one of the scroll arrows. Alex mentioned that a sliding animation would help the user understand the current mechanism. That is certainly true. But not make it any more humane. However, this is just a band-aid fix, and doesn’t really address the main issues. Squirreling those tabs out of view really makes it harder and more time-consuming to access those tabs. The old adage says it all: “Out of sight, out of mind”.

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.

What’s the prize? Well, not only does the winner get a Humanized Puzzler t-shirt, but also the very real chance of their solution getting integrated into Firefox! Post your answers as blog comments. Also, prototypes and mock-ups get extra brownie points: there is no substitute for getting your hands dirty and trying out the solution.

there used to be a trick to have multiple rows of tabs when there were too many, avoiding having tabs that were too small to be identifiable, too bad it stopped working when the scrollable tabs were introduced.

Well that’s easy. User vertical tabs. I use the Vertigo extension and I couldn’t be more delighted.

One of the great advantages is that you can have a sidebar that is as long or as short as you want.

Only problem is that extensions like Séparé don’t work too well with Vertigo.

*use vertical tabs*

*as wide or as narrow*

And another thing I like very much is that I get a scrollbar when I go out of space (40+ tabs or so), so it’s very usable.

lots of people are saying vertical tabs, but I have a small screen, so the horizontal tabs are nice. (Maybe a way to trigger between the two?)

Anyways, what I propose is having Firefox 1.5 tabs, as in, infinite shrinkage. *HOWEVER*, the mouse has a zooming function when mousing over the tabs. (Kinda like the zooming function of the dock). So when you mouse over, that tab (and surrounding tabs) get wider, and you get a “tooltip” style full name of the website. That should be simple enough to do.

Or, for the more visual people, a “tooltip” format that shows a thumbnail of the page. (That would work out in vertical tab format by having something like the powerpoint left slide bar)

Finally, Firefox should seriously have more intuitive tab navigation. Like ctrl+arrow keys to move left/right on the tabs or something. Right now it’s ctrl+1 for the first tab… etc. By the time it’s ctrl+15, it’s really too much to count…

Vertical tabs buy you some more space but don’t solve the problem (they’ll have to scroll eventually). Some of the other solutions are interesting but have problems of their own (multiple rows of tabs could present information overload and definitely create some design problems; tab-groups just add another layer of data hierarchy; etc.)

What I think makes the most sense is to have wide tabs for your active tab and a few others in close proximity and narrow ones further away. This could be combined with a hover expand (like the OS X Dock) so that you can see enough of the title to figure out what it is on several tabs at a time. That way, you have instant access to limited information (via the favicon) and quick access to more information (via hover).

Here is my 10 minute brainstorm.

Initial analysis:

1. What we have are a set of open web pages in a browser window.
2. If helpful, it could be considered as a set of temporary bookmarks for the current session.
3. Problem one: what user interface elements should be used to present a large set of pages.
4. Problem two: how to dynamically organise the open web pages.

Ideas:

1. Organise the tabs in ‘tree’ structures:
• One main tab for any open domain, with any open pages within the domain displayed in a second level of tabs.
• Allow ‘folder like’ tab behaviour - if one tab is dragged onto another tab, a second level of tabs for the pages under the main tab is created. Subsequent drags onto the ‘folder’ tab add more sub tabs.
2. Allow sorting: sort by domain, sort alphabetically by page name.
3. Allow sending tabs to new or existing Firefox windows. (Also add ‘Open new link in Window 1′ to link right click menu.)

Why is it necessary to have only one tab row. We can have multiple tab rows.

i) Fix the size of the minimum length of tab to a length which is readable (might be percentage of the window.) size.
ii) if the number of tabs exceeds the capacity of the tab row, then add one more tab row below the existing one.
iii) Display two tab rows at a time, with an option to see all the tabs.
iv) Provide a vertical area on the left (like status bar at bottom) hovering on which will expand the show all the rows of tab bar(invisible ones+ visible ones.)

Though this does not solve the problem completely it addresses one important issue in usability.
i) existing behavior of the users does not need to change dramatically.

In proposing this solution, I am making an assumption that one does not open so many tabs so as to visually cross more than two rows. ( Mozilla can actually have a small plugin to collect this statistics.)

Why is it necessary to have only one tab row. We can have multiple tab rows.

i) Fix the size of the minimum length of tab to a length which is readable (might be percentage of the window.) size.
ii) if the number of tabs exceeds the capacity of the tab row, then add one more tab row below the existing one.
iii) Display two tab rows at a time, with an option to see all the tabs.
iv) Provide a vertical area on the left (like status bar at bottom) hovering on which will expand the show all the rows of tab bar(invisible ones+ visible ones.)

Though this does not solve the problem completely it addresses one important issue in usability.
i) existing behavior of the users does not need to change dramatically.

In proposing this solution, I am making an assumption that one does not open so many tabs so as to visually cross more than two rows. ( Mozilla can actually have a small plugin to collect this statistics.)

One of the possible so lutions could be an user activated mini window, that looks like an excel sheet. THis sheet would list all the tabs that the user has, thus allowing smooth scrolling from tab to tab. While it could be it’s own separate window, it could also be integrated to the tab bar, with a pull down menu, that could be activated with a macro like Ctrl+T.

However, the question is, is this a hierarchy waiting to happen?

One of the possible so lutions could be an user activated mini window, that looks like an excel sheet. THis sheet would list all the tabs that the user has, thus allowing smooth scrolling from tab to tab. While it could be it’s own separate window, it could also be integrated to the tab bar, with a pull down menu, that could be activated with a macro like Ctrl+Alt+T.

However, the question is, is this a hierarchy waiting to happen?

Sushu: You should try out the tabs in Opera. They give a fairly nice little tooltip display of the window.

Another thing that Opera does (what I actually use) is allow the tabs to be on any side of the window. By putting them on the left side, I get a lot of tabs on the screen, and they are all readable, and they don’t take away height from my main browser window. I have a widescreen monitor, so using up width seems somehow less expensive than using up height.

Warren: Your hierarchial tabs idea is essentially what I thought of as I was reading the original article, but I don’t think it really solves the problem. I fear that we would very quickly come to a place where we would have to search through the different branches of the tab hierarchy in order to find what is desired, and that could be as bad as a long, slowly scrolling list. A final thought on this: One level of division in the tabs can be emulated by just opening up several main Firefox windows.

If I could have any interface I wanted, I think I would want something that worked about like Expose on my Mac. Make F11 (or something) sort of zoom out so all of the tabs are visible, maybe with a thumbnail. If I press F11 again (or maybe if I release it) without clicking on a tab, then it just goes back to how it was. If I click on a tab (or use arrow keys and press enter) then I switch to that tab.

Getting a little feature heavy, in the zoomed-out state, I would like to be able to drag the tabs around, so I could organize them into spatial groups, and once I switch back to normal view, the tabs would take the X coordinate of my spatial groups in order to determine their ordering on the small tab bar.

No, please! Don’t remove the scrolling tabs! I don’t see your problem. They are great. I hate it when I’m in other browsers like Safari which have oher solutions (safari has a dropdown at the end of the row).

Scrolling is so easy and fast. When I have 30 tabs opened, I know which “sections” there are. Say first thing in the morning I opened a news article, and from within that a few related links. Then I opened a project page and from within that a few links. These are at the right side of the bar. One single movement with the scroll wheel and I’m there.

I would like to hear more experiences or even see some user testing on this, because I bet I’m not the only one who likes the current situation.

If the Firefox team decides to remove them I’m personally visiting their headquarters to have them put back in!

I agree with the “multiple-row” solution (vertical space is not so much important in web sites, and opening so many tabs is not common anyway).
One IMPORTANT thing: the “tabs” must be more like “push buttons”: they must not change rows when you click them as the standard tabs on windows do.
I imagine more like multiple rows of push buttons (like windows taskbar): you click on them and the page changes.
By the way, such an approach could lead to a “group ‘tabs’ by site” option, that allow to optimize vertical space without sacrificing too much usability (you have one place to look for when you need an opened page).

TabMixPlus has an option to display several rows of tabs until there are too many to fit, at which point you begin scrolling rows of tabs vertically.

Works like a charm. I’ve got the limit set to 4 rows, and hardly get to fill 2. At my screen size/settings, a row contains 10 tabs.

I think as well as an alternative display solution there desperately needs to be better tab management. There needs to be some way to move tabs from one window to another without the page having to reload (given all the Web 2.0 stuff)

As I mentioned in the previous post, often having so many tabs open that it scrolls is a sign that you’ve not properly separated your tabs into different topics for different windows (which greatly improves manageability imo). But there will always be cases where you legitimately need lots of tabs open, so yes, we do need another solution.

I’m struggling to visualise the dock style shrinking/growing with tabs.

The two ideas that first come to mind are probably going to be mentioned by everyone else on the board here; I may have already been beat.

The first is making the tab section expand to fit new tabs on new rows: having multiple rows of tabs. (Note: it’s important that it does not behave like Windows control panel menus, bringing the current tab row to the front.)

The second is grouping the tabs, very much the same way a taskbar groups tasks. I find that when I use tabs, it’s either for opening a new page without losing my place (e.g. reading news aggregator sites) or for starting a new task. I think whenever a new tab is opened from a link in a page, the new tab should be grouped along with it. Then you can switch tabs within that group by clicking a pull-down arrow or something. I may add a mock-up later.

The problem with tabs is that it’s essentially random information that users have no real incentive to organize. That means people won’t usually choose their location; they’ll just keep getting added to the left/top/wherever.

You can’t utilize the power of language, either. Not only is web browsing usually done with the mouse, it’s also impossible to consistently assign key words to a given page, making a search function mostly useless. Let’s say you have an Enso-like system where I type “Go …” to go to a tab. What if the owner of a web page hasn’t properly titled the document, or worse yet, has titled it Untitled? We’d have to rely on that page’s text, which is going to give you mixed results and may not work at all. Combine that with the fact that people aren’t going to have enough tabs to warrant any kind of search or tagging, and you can eliminate language.

a. Fixed number of tabs, let it be 10, or their quantity may depend on a certain minimal width and current window size.

b. All next tabs are queued, waiting for being open, in the last tab, titled “15 more tabs are waiting” or something.

c. As you close a tab, next one from the query opens before the query tab

Here’s some mockups I did of the above ideas as I see them implemented:

http://www.export-japan.com/users/dranger/tabs01.png
http://www.export-japan.com/users/dranger/tabs02.png
http://www.export-japan.com/users/dranger/tabs03.png

I^m not so good in english but i will explain you my idea.

Firefox should memorys the way i’m open the page in a new tap then he should group it in a new page with open taps.
(mother and child system)

example Google search:
[1. page]
http://www.google.com = A
new tap (1. Google search)= A1
- open link in tap (1. Google search) = A1.1
- open link in tap (1. Google search) = A1.2
- open link in tap (1. Google search) = A1.3
- open link in tap (1. Google search) = A1.4
- open link in tap (1. Google search) = A1.4.1
- open link in tap (1. Google search) = A1.4.2
[1. page]
firefox ask or automatic groupe tap in new page
[2. page]
- open link in tap (1. Google search) = A1.4 = B1
- open link in tap (1. Google search) = A1.4.1=B1.1
- open link in tap (1. Google search) = A1.4.2=B1.2
[2. page]
firefox automatic close tap’s in [1. page]

firefox should do this only when you get to many “child” open

greez

I want my tabs to be spatially organized. Sort of like icons on a desktop, only better. It would be nice to move them around, put them into quadrants, ctrl-click a bunch of them and have them open in a new window.

Session saver is great, but sometimes my PC just can’t handle the memory load of having lots of tabs open. It would be nice if bookmarks weren’t confined to drop downs or scrolling lists.

To deal with this, I find myself saving web pages to a desktop folder and scooting the icons around on the desktop. It would be nice if the browser could do this.

Or maybe have a bin where you can order your tabs and make some tabs “active” and other tabs not-active, then “return to the browser” and just see the active tabs. Kind of like expose, except instead of picking just one, you can do more stuff…

Otherwise, when I open lots of pages, of course I want tabs, and I like the idea of multiple rows that can be collapsed with a drop-down at one end showing what’s dropped off the edge.

Oh, forgot to mention. In my “tab explorer” I’d want the ability to refresh state for all “tabs” so I can hover over the pertinent ones to see if I have new gmail, etc.

The ideal solution for me would probably do the following:

- Not hide tab information from me
- Make them easily accessible
- Be non-modal

Like Aza, I also prefer the FF 1.5 tab behaviour, and the only problem I have with it is not seeing the names of the tabs once you have more than 10 or so.

Something like Exposé might be useful.

Or maybe even a “Move all other tabs to sidebar” function, and the side bar would be pretty much like a vertical tab bar that can be preserved even if you close it. And the horizontal (normal) tab bar would be cleaned. This could also serve as a way to focus on less stuff at any one time.

Bah, I don’t like my solution, but maybe it’ll seed an interesting idea in someone.

Please please please do not:

a) Make me manage my tabs.
It is nice to be able to move some tabs around if I want to, but it should never be essential.

b) Use multiple tab rows, especially the windows style ones where the rows move around depending on what has focus.

We obviously run into issues when the tabs get so small the text is unreadable. However, sites often provide favicons now which helps identify pages. Why not also generate a synthetic page icon (arbitrary and abstract) to go next to the favicon (I’ve seen it done, can’t remember where). Then we have a unique way of identifying tabs even when they’re small enough that the text can’t be read.

Then again, that might be a hideous idea ;)

After reading all the comments I realize there are lots of preferences.

Personally I don’t see the problem with vertical tabs, because normal users don’t usually have so many tabs as to use up all the vertical space, and when they do, the scrollbar that appears is proportional to the amount of tabs and the thumb has a relative position, plus everyone is already used to scrollbars.

When using horizontal tabs, IMHO, a great solution for beginners would be like the OSX dock does (like others have explained here before).

All other alternatives I think are too specialized (tab “trees”, tab grouping, etc.), and are usually used by “power users”. Beginners would easily get confused by those, as I’ve seen many get confused by the mere and simple concept of tabs (”hey! where did that page go?”, “why do I want a tab if I can open another window? that’s just pointless”…)

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

I think a fundamental problem with a lot of these solutions is that people are trying to use tabs as bookmarks, and then faulting tabs for not acting like bookmarks. Large collections of hierarchically-organized URLs that can be accessed quickly without robbing us of screen space… this is a description of bookmarks!

No one uses 30 tabs at the same time. You may have them open, and you may switch back and forth frequently, but you’re only using or thinking about a few of them at any given moment. Maybe I’m alone in this, but I think of tabs as “what’s useful to me now” and bookmarks as “what’s useful to me at some other time”. It’s short-term memory vs. long-term. Conscious vs. unconscious. I don’t think tabs were ever meant to be an archive, nor should they be forced to act as one. And having 30 tabs open isn’t optimal for the computer’s short-term memory either (RAM).

Perhaps we actually need to revisit the bookmarking system, because we don’t seem to be able to utilize it fully. I think the true source of the problem is the gap that exists between these two functionalities. The “Bookmarks Toolbar Folder” begins to close that gap, but maybe what it still lacks is dynamism. If we could juggle its contents faster, or if it had a layer that was more session-based, maybe we’d never feel the need to have so many tabs open in the first place.

As for the quick fix, I vote for the dock-style non-scrolling single-bar tab system.

Here’s a quick pic of my idea (Image at bottom of the post):

New tabs idea for Firefox

I disagree somewhat with Andrew Clarke’s divide between short and long term useful tabs; I always leave an iGoogle page open on the far right, and commonly use as many as 20 tabs to look through sub-categories on NewEgg. As near as I can tell, a full solution to the bookmarks-tab problem needs to take into account a more gradual continuum between short- and long- term usefulness.

As for the topic of tabs itself, what about a hiding tab bar, similar to an autohidden taskbar in windows, that appeared when a user first opened a new tab, and flashed when subsequent new tabs were added to it? It could open when moused over, and would allow room for elegant dock-like, multiple rows, etc. solutions inside it.

How about a count of how many non-visible tabs are at each end?

Start with horizontally compressing them (as usual), until a minimum per-tab width is reached.
Then start putting new ones on a new tab row (make them look more like buttons or whatever if worried about the tabs-within-tabs association of multiple tab rows).
Allow the whole thing to be dragged to the left or right side of the screen -for those with large resolutions- turning it into a vertical tab bar, resizeable in width.
Allow the whole thing to be collapsed/partially hidden if user desires, and to expand on mouse-over / key combination.
Remember last-used preferences, and allow setting preferred behavior in Settings.

It seems the previous posts indicate that different solutions work for different people.
Here are a few suggestions, yes I know some are repeats, but I think multiple options are the solution.
Lets start with too many tabs, vertical works for a lot of people, especially since the tabs will only overlay adds etc. I think multiple rows are good too. Lets try opaque rows rather than solid. With a solidify option when hovered over. Or a single row with an expand when hovered over.
I, personally, would like to see a tree structure for pages called from pages. I want to see my progress path through pages so I can back track easily.
Why can’t we have them setup as personal preferences. You want vertical, I want rows, set the way you want them displayed. They are an important part of browsing and more specifically accessing information, the whole point of browsing.

Another suggestion:

Add another layer of indirection. Windows are too bulky to have many of, but tabs take up space really quickly. What to do? Allow users to add new “workspaces.” Each workspace can have its own set of tabs, so if I’m working on say, programming, I can open a programming workspace and have all my online manuals, tutorials, mailing lists, etc., in that one workspace, and my daily news articles in another workspace, YouTube in another workspace, and so on. Combined with the previous idea, I think you could allow as many tabs as you could really ever want without sacrificing too much screen space and without forgetting everything is.

I also want to clarify on my previous post: basically whenever a link automatically “opens a new window” or you middle-click on the link, it will open up the tab as a “child” of the current tab. This can happen multiple times too, effectively creating a tree structure, but it’s a natural hierarchy instead of a forced one. The other important thing is that the “close” button (whether it’s on the tab or on the side”) should only close the current page in the tab, NEVER the entire tab “tree”.

Ok I just finished Jef Raskin’s book and am an enthused user of Enso, so the following ideas should seem familiar.

When the user is viewing a page, his attention is on the main content area of the browser - this vast area is fit for displaying a load of information. But when the user wants to switch to another page, his attention moves away from this vast area and to the area of the browser dedicated to tabulistic navigation (dibs on that word). This section of the UI is itty-bitty, and it’s got a big job to do. Meanwhile the other 95% of the UI is out of sight and out of mind considering the user’s current objective. So I’m thinking that however it’s done, we’re going to have to take advantage of some of this unused space.

So here’s an idea along those lines:

Just for this idea, let’s say we get rid of tabs all together. When the user wants to switch to another open page, he holds down a button (keyboard or mouse) to activate a quasi-mode in which a thumbnail view of all open pages is displayed, similar to IE7’s “Quick Tabs” thumbnail view. This view would be overlayed on top of the main content area of the browser and would be visible as long as the button is held down. Each page is displayed as a thumbnail with an associated label and can be indicated with either the arrow keys or the mouse cursor. Releasing the button makes the selection, the navigation view fades away, and there’s your page.

This method can support many more pages before sacrificing effeciency, it leverages the users’ spatial memory, and it provides a more “content-representive” view of each web page (a thumbnail and label, instead of just a label).

We might display these thumbnail views simply as a list with each newly-opened page placed right after the other. The thumbnails are put on the next row as you start to build up a large amount of open pages. But since we’ve got a good amount of room, there are other ways to display these thumbnails too.

(basic illustration here).

(Disclaimer: I actually quite like the TabMixPlus solution of having repeating rows of tab. I make a lot of use of tabs, and can readily have a couple dozen tabs open at once. So long as I can use ctrl-page up and ctrl-page down to select tabs, I’m happy. This is pure bells and whistles speculation.)

Suppose the tabs were organised not as a linear list, but like a Mind map. Instead of moving up and down a list, we start moving around the tabs, in a much more web-like way.

Rules for building the tab-map
There is always a root node, which never changes. This is not a selectable node.

When the browser is opened, a child of the root node is created. This is the first tab.

Each tab opened from a direct user command (such as Ctrl-T) is also a new child of the root.

Each link opened from an existing window is a child of the current node. This includes both links opening in a new window (which I assume are opened as a tab) and links the user chooses to have open in a new tab (using the middle button).

I’m not sure what to do when a tab is closed. You could have the node disappear, and any children get attached to the parent. But then you lose the history. So perhaps the node should stay, but is only not readily selectable.

The content of each node would be like a current tab… an icon, and the first few words in the page title, and maybe a download progress bar.

Each link between nodes is labeled with the text of the link that was followed to a new node.

Viewing the tab-map
The browser presents three views of the map:

1. A local-map showing nearby nodes at readable size. The local map is small, say a few square inches. The user can select another node using this view, effectively changing tabs.
2. A mini-map showing the entire may, but very small and zoomed right out. This cannot be used to select a page. Instead, there is a view port showing the area currently displayed in the local map. The user can drag the view port around, changing the area shown in the local-map. (This is similar to some modeling tools such as StarUML.)
3. a full size view can also be shown, taking over the main page area and showing the map in full detail. Any node can be selected, and becomes the active tab.

The mini-map provides the overall view, so tabs don’t get forgotten, but doesn’t really provide enough info to select a tab. The local view provides enough detail to select nearby pages, which are presumably of most current interest. The full view gives, everything, showing all tabs.

Screen real-estate being what it is, there’s bound to be problems finding space to host local and mini views. I’m guessing these could be next to the swirly icon thing that shows when a page is being downloaded, since the toolbar area is the only space to put things that isn’t taken over by the main page area. It’s important to have these always visible, since changes to the page help the users to place themselves in a larger map.

Moving around the map
An algorithm would need to be supported to provide one dimensional movement around the map. This allows Ctrl-PageUp and Ctrl-PageDown to be supported, as well as some buttons doing the same thing.

Each time a new tab is selected, the local and mini-map update to show the new location.

A rough outline of an algorithm is:

• If there is a child of the current node, Ctrl-PageDown moves to that child.
• If there is node, then Ctrl-PageDown moves to first child of a parent node (with some logic to avoid cycles)
• If the previous node is not the root, Ctrl-PageUp moves to the parent.
• If the previous node is the root, Ctrl-PageUp moves to the next root node.
• If the user is at the last root child, then they cycles back to the first root child, so the list is ultimately circular. (Testing to verify if this is useful.)

There are probably issues with this algorithm, but it’s basically a tree traversal problem, so first year comp-sci has the answer.

Advantages of the tab-map
The tab-map is a visual organisation of all tabs. People are more able to remember visual info than if a list. A predictable layout (say, new nodes are added clockwise) could allow quick to locate a particular node, without requiring movement through a linear list of tabs. The updating of the local and min views helps people mentally model the tab behavior.

Most importantly, the tab-map builds up a record of how browsing led from site to site. Sources of links become more visible, possibly promoting evaluation of web info. (For example, it fills in the missing details of xhcd’s problem with Wikipedia. )

The tab-map can be saved and loaded, providing a way to store a session. In some cases, this is much more useful than bookmarks. For example, the tab-map could turn a surfing session into a useful research document.

It’s also an exotic idea. Bells-and-whistles speculation, remember?

I don’t know if someone has mentionned it before, but :

I would propose a mix of horizontal tabs and vertical tabs.

First, the horizontal panel would fill up until there is no more space on the user screen. Then, the next tab you add, it would fill in your “secondary tab panel” (the vertical one)

That way we would have the best of both worlds : The easiness and non-obtrusive aspect of horizontal tabs and the “unlimited” aspect of vertical tabs.

I don’t know if this would be intuitive enough for everyone though.

I got a comment on my site about my tab idea above, and I thought I’d explain here what I wrote on my site.

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.

The importance of the colored squares isn’t their direct relation to the displayed 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.

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.

What’s your solution to the many-tab problem? =(boils down to)= how do you build a better car?
Shame on you Aza, you showed us that you know better then this.
http://www.humanized.com/weblog/2007/06/05/iterative_design_isnt_design_by/

So which problem in particular do we need to address(better milage OR off-road capability)?
(1) Incomplete information- Scanning your eyes across the tab-bar no longer guarantees you’ll see all of the tabs
(2) Dynamic associations rather then static associations - You can no longer associate a tab-bar location with a certain tab
(3) Needlessly time consumption - Scrolling through tabs is quite slow
(4) “Confusing” interface - ‘The user is left guessing at what just happened when they click one of the scroll arrows’
*(5) You are “encouraged” to open new tabs rather then finding old ones (because it’s to slow/ didn’t realize a tab was open)

*i derived (5) from problems (1) and (3), but problems (2) and (4) add more “encouragement”.

In a way, you ’solved’ all of these problems simply by ‘reverting to the Firefox 1.5 method of just making the tabs smaller and smaller’, you just removed the problems completely- but now we have no way of knowing if we actually achieved anything.
We can also simply remove the tab-bar, make firefox installation include installing an application that gives the OS expose like capabilities for firefox, revert to the original multi-window no-tabs browsing used by the old IE versions, and thus force firefox fans to only move between browsing windows threw expose.(Alejandro Moreno- you might like this)

The only problem with these solutions is that they are both valid only if we are accept “removing the problem” as a solution, and we can’t unless we know were “keeping the benefits” which because we didn’t define them we can’t know

From the comments I compiled this limited list of “goals”:
(I) ‘make them easily accessible’ (Alejandro Moreno)
(II) ‘don’t hide tab information from me’ (Alejandro Moreno)
(III) ‘Don’t remove the scrolling tabs! ‘ (matthijs)
(IV) ’spatially organized ‘ (brightgarden)
(V) ‘don’t make me manage them’ (Adam Sanderson)

My solutions:
(a) Add a button that switches between firefox 1.5 and firefox 2.0 (basically a merger between Aza’s idea and matthijs request)
problem: nothing is actually solved- just keep the problems from both versions, and let the users divide themselves according to “which sack of troubles do you want?”, also i personally feel that this will add a hell of a lot of confusion to the interface (generic typical user: “what did i press? what happened? how do i get it back to the original way? did i brake anything?”)
(b) Have a button that makes the current page your viewing switch to a “organize bookmarks” page which has all the open tabs arranged in a grid, or an expose like solution as Tommy Visic suggested
problem: can’t see any major flaw, except that we are hiding the complete-tab-information, granted in a consistent place and easily found, but I can’t ignore the fact that we add a barrier to complete-tab-information. Also, the interface is still unclear to the i-don’t-think-at-all user, and even if we label the button he/she probably won’t know what it means and thus will never press it

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?

I THINK I HAVE IT!

I talked with my friend Lutzky (http://yasmin.technion.ac.il/ohad) about my earlier post, and i think we came up with a good solution

use the suggested “expanding tab” mouse-over, but also add the following twist, if the mouse-wheel is scrolling outside the browser window, while Firefox is the chosen application, the tabs will “mouse-over” one by one startng from the current tab

by using the third wheel you gain maximum control over the mouse-over without having to physically mouse over the affect

and because all you need to do to go to this “tab-browsing” state is move the mouse violently to the edge of your screen, you can move between “choosing tab” to “reading content” with practicly no thought involved

those that like the new 2.0 version still get the benifits, as well as those that like the old 1.5

Sorry about the spelling mistakes above, I the comment and didn’t review what I wrote.

As was mentioned by unwesen earlier, TabMixPlus answers the complaint without upsetting the people who like scrolling tabs. Just set it the way you want it.

To me, visible tab labels is not as important as managing tab history–when I finish following a link path, I want a trail of bread-crumbs. When viewing a page, I usually know which page I was viewing before, and I want an easy way to get back to the previous page. TMP allows this, by having settings that control tab focus, and where tabs open, and where focus goes on closing. The only thing I had to add was a custom “Close Tab” button right next to the “Back” button, so when Back is inactive, Close Tab does just what I would want Back to do.

Yaron, the alternate/hidden tab view is interesting, and an expose style view is quite tasty, but for me, tabs are great because they’re there on screen (mostly) for really quick access. The problem with scrolling is precisely that it is off screen, that I have to go someplace else to see my tabs.

I still like the alternate expose style tab view, but I’m not sure it’s solving the FF2.0 problem of scrolling tabs precisely because it’s hiding information, which requires a re-orientation with that information when it’s redisplayed. This is why I think the second layer symbols option is so nice. You still have an orientation as to other tabs, while still allowing that instant (single click) access to tabs. Plus, there’s no reason you can’t have scrolling with that solution, but it doesn’t disrupt your orientation in the same way.

I could see the alternate tabs view being a nice compliment, especially for more experienced users. However, for people with single button mice or just no scroll wheels, it’s possibly asking too much.

MyNameIsMatt, I like where your going but I think we can add a bit more to the concept, instead of squares and triangles we use website icons, this will solve problem (5) , because now you have an orientation of the websites by location and also by web-site-brand

Another benefit of this, if for example I have 50 tabs open, and I close my Gmail tab at some point, by going to the location in the symbol bar I remember it was located and seeing that there are no Google “G” icons, I realize faster that I need to open a new tab for Gmail, however if I didn’t close it I will know because of the icon in the symbol bar

We can also color the background of each icon in the symbol bar, so the colors help you remember where you “parked” the tab you want

The last twist that should be done is have a common underline for the icons of the current 5-descriptive-tabs, in the symbol bar below.
The color of the underline must not blend with the background color of any of the 5 tabs being displayed

The best thing about your Idea MyNameIsMatt is that for users who aren’t aware/don’t understand the perpose of the symbol bar, the experience remains unchanged, and for advocates of Firefox1.5, they can ignore the 5-expanded-tabs and use the familiar really-really-small tabs there use to

So your solution gives the best of both designs with the added benefit of removing some of the disadvantages with a few simple tweaks to the design, Well done

‘Firefox’ on Spinach (2 Years)

‘Firefox’ on Melange (5 Years)

I just got sent a link to
this plugin for (mac) Safari that creates an expose effect for all tabs by pressing F7.

It seems to be an interesting approach to providing rapid visual selection of hidden tabs - I know a few people have suggested this approach, so I did a quick screen movie so you can see how this particular implementation works. Not sure how well this would scale with 30+ tabs…?

Thought it was interesting to see it in action. Worth saying I have no connection with these guys, just adding to the conversation :-)

Thanks, Yaron. I really really like idea of using bookmark icons too. That’s a much better cue than generic symbols, and helps make that second level “world view” much easier to understand.

Thanks, Yaron. I really really like idea of using bookmark icons too. That’s a much better cue than generic symbols, and helps make that second level “world view” much easier to understand.

Why not just make the scrolling mechanism more effective? A lot can be learned from the drag scroll that can be seen on sites like Apple’s iTunes. The user could access the extra tabs by dragging right or left rather then having to click. This activity could be made easy by having a slide bar below (like in iTunes) and/or when mousing past the last visible tab, have the tabs automatically slide for the user. Simple dragging/sliding movement is makes interacting with an interface a lot simpler then the point and click metaphor.

Fisheye zooming of tabs with pages from same domain grouped when there are more than 20 (or something) tabs open with additional Exposé or CoverFlow lookalikes to flip though open tabs visually, perhaps?

I think vertical tabs or multiple rows would cause a lot of stress and lack of clarity, a vertical list is also currently available via a pulldown menu near the tab scroller.

I’ve tried FishEyeTabs (dock style shrinking), Tab Preview and Firefox Showcase (Exposé), and none of them really appeal to me. I tend to forget they were there when I needed them. I typically use the keyboard shortcut to skip to the next page, as I use open tabs like a kind of inbox.

I propose an internet ZUI similar to what Aza showed in his talk at Google. There are no space limitations: you can zoom in or out as much as you like. You can arrange the pages how you like, so no more hunting for tabs or exposé windows. Need to read that text the designer thought needed to be in 8 point? Just zoom in; No need to increase the text size and destroy the page’s layout.

Right now, Firefox has the option to begin finding as soon as you start typing (as long as you aren’t in a text field). Bring that over – with an Enso-esque transparent message showing you what you’re typing – but search all of the pages you have open, starting with what you have in view then expanding to the rest of your open sites. That way the entire page becomes its own “title”, eliminating the problem of having many sites with different content but identical titles.

But what if what you type isn’t found? Maybe it’s a bookmark you thought you had open. Well, if nothing’s found, search the bookmarks too. If there’s a match, display a “Hey, we found this bookmark!” message, and give the user a way to open the bookmark. (Press enter/return, click it, arrow to it then release a semi-modal button if we’re stealing from Enso…)

Maybe there are no matches found in your open sites or your bookmarks. Search the internet! (Making it easier to search through FF by not having to move to the little search bar means more money for Mozilla.) In fact, take out the address bar completely. Want to go to a URL? Just start typing and hit enter (or hold the semi-modal button etc.). If there’s a match, it goes to the site. If not, FF googles it.

That’s what I’ve got.

Amy H, I dig it. Maybe this could be a foothold for the ZUI.

I like Amy H’s thinking, but in case that is too “far out”, here is a more limited proposal:

1. Ctrl+Tab would bring up a dedicated tab-selection UI that stays up as long as the user continues to hold down the Ctrl key (i.e. it is quasimodal).

2. The tab-selection UI would take up a lot of space and show plenty of information to allow the user to quickly identify a window visually or through incremental search. (In spirit, it would be similar to IE7’s “Quick Tabs”.)

3. It would also be possible to bring up the tab-selection UI with the mouse. There is something on the screen that makes this obvious. (Perhaps through a button at the start of the tab strip or it comes up when hovering over the tab strip as suggested by Mark Reader above.)

4. In the case where Ctrl+Tab is used to bring up the tab-selection UI, generally the way the user would make it go away after selecting the desired tab (either through pressing Tab to flip through the tabs or incremental search) would be to release the Ctrl key. In the case where the user brings it up with the mouse, generally the user would click on the tab of interest which would close the tab-selection UI and switch to the selected tab. You could also use the mouse after bringing up the tab-selection UI with the keyboard or the keyboard after bringing it up with the mouse, though in this case you would need to press Enter to activate the selected tab.

Advantages:

1. Keyboard support would make switching tabs very fast and minimally distracting. When using the keyboard, the action is completed simply by releasing the ctrl key.

2. It wouldn’t be “easy to discover”, it would be hard not to discover. Also it is the “same, but better” so there is almost nothing new to learn and old habits will still work. If you want to switch to the next tab you press Ctrl+Tab, just like before (though you briefly see the tab-selection UI). Also, users are probably already familiar with incremental searching and the details of its behavior in Firefox so being able to use that power to find Tabs would be a happy addition. (Same but more widespread).

3. A large dedicated tab-selection UI can make improving the task of selecting tabs in future releases something to build on without compromising the rest of the UI (such as taking up content space with multiple rows of tabs). It could display some helpful text and perhaps some controls similar to you get after pressing Ctrl+F.

4. It uses the de factor Windows standard for switching tabs.

5. If Firefox adds a incremental-search-supporting, large-and-information-rich quasimodal, tab-selection UI, people will wonder why Microsoft and Apple didn’t do this for Alt+Tab.

Influences:

1. “The Humane Interface” for general thinking.

2. Stephen (above) for his comment that it also needs to support the mouse. I agree it needs to support the mouse (despite the benefits of having only one way to do something), but I disagree that poorly titled pages represents a major problem. I think most sites are titled adequately (for sites you actually want to visit).

3. Tommy Visic (above) for pointing out IE7’s “Quick Tabs”. I never discovered it.

4. Visual Studio 2005 also brings up a window selection UI when you press Ctrl+Tab. It‘s a nice improvement but doesn’t support incremental search and other key features needed to make it truly good.

I’m tempted to add some more ideas/details and maybe I will later but I think the above proposal, while vague, has the most important points (incremental search, quasimodal, dedicated, same but better) and some small chance of not having any mistakes.

Followup: I read (instead of skimming and skipping to the picture) Tommy Visic’s post and am embarrassed to see that he already said most of what I said. I did this in a rush to post “my idea” after seeing this page today. I think I added to his proposal the idea of using Ctrl+Tab as the key sequence for activating the quasi-mode.

Also I’m a little embarassed that I never discovered “Quick Tabs” despite it appearing just how I proposed - a button at the front of the tab strip. I guess I don’t have the many tabs problem much.

Microsoft must have spent a lot of effort developing “Quick Tabs” and it has many nice features. So why didn’t they add any keyboard support there at all?

Gradually reduce the size of the favivons and titles as more tabs are opened, up to a predefined minimum text size.

Allow user to mouse-drag tabs to create new windows with them, and drag them to an existing window.

A menu item that invokes a thumbnailed display of all open windows and tabs (as suggested by others). Make the titles big enough to be readable, and group together thumbnails of tabs by window.

Record which page was opened from which, when, and how it was actively viewed each time (some function of time focused and, perhaps, scrolled). Have a command to display this as a multi-graph where each page is a node, represented as a thumbnail of the page, with the and title, and dates and durations of viewing written next to it.

Allow the user to make arbitrary annotations on any parts of a page. Allow search of annotations.

If this info is easily accessible, the user does not need to manage tabs, and the system can be smarter about loading of pages into memory.

Doesn’t CTRL+TAB switch a tab? Why would a user press CTRL+TAB 20+ times to switch to some far-away tab? Do you think it’s logical to press CTRL+TAB once (switch to some irrelevant tab) and then select the desired tab with the mouse? It feels strange to me… :-/

I prefer the simplest solution: go back to FF1.5 behavior (no scrolling tabs) and show multiple tab rows when more space is needed. Maybe when creating a new row don’t move tabs around (just start a new row with one single tab), so existing tabs don’t change their position.

This will work even for those who permanently overload their browser window with 100s of tabs (though, how many users are doing this *permanently*, anyway?). Most of those other solutions are really missing the point. All we need is that tabs don’t change their position when you switch between tabs. IOW, all of them must be always visible. Now, a “fisheye” tab list compression might be a nice addition, but it really doesn’t solve the problem that at some point you’ll still need more space than a single row can provide.

Waldemar: Yes, CTRL+TAB already switches. You wouldn’t press CTRL+TAB 20 times, you would press CTRL+TAB and start typing a portion of the title text until it finds the tab of interest and then release TAB. This is similar to the Enso GO command that is another way you can switch tabs — and solves the issue of not needing to know which window the tab is in if you have multiple windows open. I agree with the tab compression behavior but I think screen real-estate is too precious and searching visually is too slow. I also agree that it isn’t ideally logical. It also doesn’t solve the more general problem of getting where you want (such as if you know you went to a page recently but you aren’t sure if it is in a separate tab or in your history) without having to think about it.

(Correction to above: I mean “release CTRL” not “release TAB”.)

Edwin, I don’t know how big your hands are, but mine are pretty big and nevertheless when I hold down CTRL I find it very difficult to type something on my keyboard (esp. the upper row). I could imagine that many more people will have the same problem. IMHO, this is an uncomfortable method to switch between tabs. CAPSLOCK works much better than CTRL.

I’d rather have CTRL+PgUp/Dn or CTRL+ALT+TAB jump 5 tabs at once for quick navigation.

1. Make the “List all tabs” popdown button a bigger target by adding a label such as “All Tabs (21)” before the arrow (where 21 is the count, a la Eclipse). Remove icons for pages that don’t have custom icons.

2. Make the Tooltip for the “List all tabs” popdown larger and have it automatically shown when the popdown is expanded. The tooltip text on Windows could be:

Drag and select, then release mouse button.
Press Ctrl+Shift+9 and select, then release Ctrl key.

The first line is for Windows users that don’t know Firefox supports modal + quasi-modal menus like Mac (yay!). The second line is for a possible new behavior. The regular modal behavior in both cases would work also.
The changes to Tooltips and supporting both quasi-modal and modal could apply in general. See Outlook 2007 for an example of richer tooltips.

[Weldemar, I agree that typing while holding down Ctrl (for example, in a dedicated tab-selection/manipulation overlay) is a bit awkward but one thing to keep in mind is that it costs almost nothing from the UI perspective since the alternative is that typing while holding down the Ctrl key does nothing. Trying to keep coming up with unique/easy shortcut keys is hard and gets harder with each release.]

I just found this on reddit (I didn’t make it) scroll tabs

Stephen, Bret Victor made that demo, and to be honest I don’t know why he didn’t post it here before.

Anyway, his scroll tabs idea is the best I’ve ever seen, second only to an actual zui. My idea included a zui, but Bret’s scrolling tabs are much easier to implement than what I had, so I won’t even bother :P

High-five Bret!

Stephen & Corey: Aza pointed me to this challenge a few days ago, and I actually made that demo in response. :) I hadn’t gotten around to posting it here yet.

The “one long page” thing was somewhat inspired by Jeremy Ruston’s awesome TiddyWiki, and probably Jef’s Canon Cat as well. You can tell I’m a fan of long pages.

I think Scrolltabs would work especially well for TiddlyWiki-like micro-content. These days, websites have become huge applications that expect an entire window for themselves. (Not unlike software in the Apple II days, that expected to “own” the entire computer.) It would be interesting to imagine a web where sites were designed to coexist in the same space with one another.

Have the tabs grow on mouse-over back to a readable size.

Keeps the “about one inch from the right” when there are a lot of tabs while still providing for readability.

A modest proposal for the tab problem:

Simply use a modified “fisheye” tab bar. Provide absolutely no minimum size to the tabs themselves. Have the tab you’re currently looking at expand to the maximum tab size just below where you’re mousing over. That way the tab expansion does not interfere with rapid navigation. Since tooltips of the page title are currently displayed below the tabs, users are already expecting the tab UI elements to take up that space.

Adding the # of tabs in each direction to the scroll buttons would help. Making it more obvious that there were tabs to scroll to would help also. Right now the button turns from light gray to a slightly darker gray. Better scrolling animation would also be a big help. Why not make the scrolling automatic happen on mouse over, rather than having to click the over arrow?

Vertical tabs would allow many more tabs by default. Stacking something that is longer than high the long way will never gain you more space.

Additional constraints people may be missing:
1) This is an EDGE case, 90%+ of Firefox users will never go past the edge of the tab list. Therefore the solution should not hamper those people in any way.

call me an apple apologist, but safari has the best solution. firefox’s old method of infinitely-shrinking tabs left me without the ability to find *any* of the tabs i wanted. the new method means i have to scroll around and don’t have an easy way to visualize all of them at once. safari’s simple solution is just to put in a menu that you click on to see the full names of the run-off tabs you have open. clean and simple.

Oops, my Ctrl+Shift+9 proposal doesn’t make too much sense. (I was thinking it is like Ctrl+9 to select last tab.) But this is to bring up a menu, so on Windows it should use Alt plus a letter mnemonic. So perhaps the button would look like this:

| Tab List v |
(that’s an arrow at the end)

Pressing Alt+L brings up the tab list menu. The menus could be changed to behave such that if you press Alt and then use arrows while holding down Alt it ends the menu when you release Alt.

Here is a mockup of my proposal.

If you don’t see a link on “mockup” go to:
http://home.pacbell.net/eevans2/puzzler.htm

(I thought it worked in the live comment preview, but maybe I messed something up.)

OSX-style dock.

No tab overflow whatsoever. The selected tab is near-normal size, tabs on either side shrink in proportion to their distance from the current tab (in overflow situations). All fit in the current space allocated to the tab bar.

On mouseover the “focus” is on the tab that would normally be positioned at that point if all tabs where the same size, and it expands OSX-style (with the current page tab shrinking away). Bonus points for implementing a quick smooth “scroll” where intermediate tabs briefly animate as you mouseover one at the opposite end of the bar.

The advantage of this scheme is that you can see the current tab and nearby (presumably related) tabs easily. When selecting other tabs you don’t need to worry about tooltips, you can see the full favicon and title as you mouse over it. Tabs are never hidden offscreen. And reordering tabs will not only work but be a lot more precise as tabs will expand as you drag near them, allowing you to order tabs accurately even when you have 20-30 open.

Plus, it’s intuitive. No fancy key combos or dropdowns or hidden tabs or random facts to memorise. It Just Works, and it’s familiar to current and v1.5 Firefox users.

I’m a big fan of the TabMixPlus multi-row feature. It gives you three rows to work with, which on my screen is 27 tabs (9 tabs per row). When I don’t treat my tabs as bookmarks, I rarely go over 18 tabs at a time. I like the way TabMixPlus implements multi-row and would like to see it as an option if not default in Firefox 3.

For Firefox 4, the idea of Scroll Tabs mentioned by Stephen has some cool functionality ideas that could be added vertically or horizontally. The ability to click on an object like an orange scroll bar and then press left or right arrows to move seamlessly from one page to another and the ability to close a tab by throwing it in a garbage can seems like a cool idea (or, my own idea, tearing it off and moving it to another window/open a new window by moving it to another window or the title bar of the current window for a new window).

I think this is solving the wrong problem. Overflow is OK and will always happen and solving it with scrolling, or multiple tabs doesn’t address the real problem.

The problem is not overflow but that the interface doesn’t allow for larger sets of active ideas/pages.

Luckily this problem has already been solved in other applications and the solution can be elegantly applied to the FF UI.

The Linux desktop has dealt with this issue in the taskbar UI by allowing users to have multiple desktops. The solution isn’t to allow scrolling on the taskbar. Instead you eliminate the problem by giving users an alternative:

Checkout the multi-workspace mockup

I’ve shown a quick illustration of how multiple browser “workspaces” can be done. Once a user starts to have 6 or more tabs you can allow them to switch workspaces giving them a clean slate to continue working.
The workspaces are simple and predictable. They don’t get in the way of a beginner and they are a great power user tool that has more flexibility then alternatives that try to address overflow.

I contributed to the tab overflow design in Firefox 2. I was unhappy with the scrolling solution, and came up with several fixes, including the overflow menu (which got implemented to some degree) and a much better animation system for scrolling (which didn’t happen). This animation system was not just about making the movement of the strip smoother; it involved acceleration a la the iPod scroll wheel selection, and I felt it would help quite a bit in the getting-from-one-end-to-the-other case, but we just never made it.

Much of the initial design was done before I entered the picture, but maybe I can shed some light on things.

There were several issues with the various tab overflow solutions people examined. The existing “infinitely small tabs” system in Firefox 1 had serious accessibility problems for novice users and people with physical handicaps; it was difficult for people to target their tabs properly unless they could use a mouse well. Additionally, below a certain size, most people seemed unable to remember exactly where a tab was and just used ctrl-pgup/pgdn or its mouse equivalent (picking all the tabs one by one) to try and find what they wanted. Finally, aesthetically the tiny tabs looked broken. These were some of the reasons we didn’t just stay with the current solution.

Designing a new solution is hard. I don’t think a perfect solution exists. So many different usage patterns for tabs drive different directions that you will always upset someone: grandma who can’t use her mouse, the Opera fanboy who is angry that his 96th and 97th open tab are too hard to find, someone who’s gotten used to a solution in another product with tabs and wants it replicated exactly.

Multiple rows of tabs, as many people here have suggested, had one primary failing: the physical position of a tab is even less stable than in the scrolling solution, where at least you keep relative (but not absolute) stability. With multiple rows, when you close a tab, many other tabs shift around, and ones on the ends of rows move to the previous row, changing position drastically. You can’t just not move other tabs to avoid this problem, either: that leaves you with all sorts of arbitrary gaps in your rows, and the only solution is to fill them with newly created tabs, which means tab creation puts tabs in arbitrary places.

A non-scrolling strip with chevron a la Safari has problems as well. It works when you don’t overflow, but when you need to work with a series of tabs that are in the chevron menu, you have to use the menu _every time_, which is extremely inconvenient, especially when you get, say, 80 open tabs and the menu itself overflows.

I agree with Ramjee’s comment on this subject. I had just posted a response on Alex’s blog and then ran through the responses on yours. My suggestion is similar to Ramjee’s accept I think there should be less options. Showing only two rows of tabs at a time should not be an option. The tab rows should simply continue to grow as you open more tabs. If you want more screen real estate back open multiple windows or start closing tabs you don’t need open anymore.

Screenshot of staggered tabs:
http://www.donttrustthisguy.com/?attachment_id=69

This is what I suggested on Alex’s Blog:

“I think the problem is the UI is attempting to accommodate lazy users. I use tabs to the point of overflow like none other. The problem is I may still have one or two browser windows open and will eventually forget I even had many tabs open? Why? Because there is no consequence if I open many. The interface HIDES them from me. My suggestion is a simple solution:

Don’t Hide Tabs.

Once you’ve opened the maximum amount of tabs in a given row start a new row, and another row, and another. The more tabs you open the more rows and rows of staggered tabs you should find yourself seeing. This does two things:

1.) It constantly keeps the user conscious of all the tabs they have open at any given time.

2.) It forces a constraint or consequence upon me. The more tabs I open the more vertical window space I end up losing. This is not a BAD thing. God forbid once I have 15 to 25 tabs open I could close about 6 or 7 I no longer need open.

It’s simple, easy, and more importantly, it’s intuitive and makes sense. It’s what you expect to happen. If you through toys into a box and it fills up the box does it magically become an endless black hole? No you need to get another box to fit the rest. It’s human nature.”

Not sure if this is in an extension or not, but the quick mock up below

http://img248.imageshack.us/img248/3260/tabprototypeuo4.png

is something I know I would dig. The screen shots optional really, you could do without it and just have the simple tab title. This would activate when you hover your mouse over smaller tabs.

Also what if more active tabs were larger and closer together, less active tabs smaller, and then implement dock style magnification on the lesser active tabs?

- Coz

Cozby, doesn’t it already display the tab title when you hover over the tab? It does on Windows and Mac. I like the idea of showing a picture also.

Peter Kasting, I’m really curious what you think of my proposal (http://home.pacbell.net/eevans2/puzzler.htm). One the things I like about it is that the top priority item is to fix a (design) bug that I think led to so much of the problem. At some point someoneran into the problem of what to do when there wasn’t enough room for everything on a toolbar. The designer came up with the solution: stick a tiny unlabeled button at the end that works like a menu but has none of the rich keyboard support. Was my solution of turning this little arrow into a decent-sized keyboard-supporting toolbar button ever considered?

(It really shouldn’t be necessary for Firefox to fix an operating system design bug, but it would be cool if it did! The Tabs Menu plugin [https://addons.mozilla.org/en-US/firefox/addon/1242] has much of the same advantages as my proposal and is more standard. But my fix doesn’t cost anything if the user doesn’t use tabs, is probably where the user will look, and more naturally leaves room for future enhancements such as adding an icon, or a count to the label the first time that it no longer makes sense to try to squeeze another tab into the space available, or splitting it into a one side that brings up a dedicated tab selection UI. Also it is unfortunate that just adding the menu button doesn’t solve the case of hundreds of Tabs… because the OS has the same design bug when menus spill over!)

I agree with Warren - grouping tabs would be a great enhancement.

I would love to be able to open Digg in one tab, and open news items grouped beneath that tab.

However, this would not solve the tab UI issue being discussed.

Peter, I hope you’ve had a chance to read my comments. I think the solution is quite easy and elegant. It’s kind of a small multiples principle applied to tabs.

To reiterate, you have a second level below tabs. This is the world view of all tabs open. They’re small shapes like colored squares and circles, or the bookmark icon that websites create for themselves. Scrolling is still allowed, but you’ll only see 5 (arbitrary number) descriptive tabs open, and those 5 highlighted in the second level world view.

This seems like a very easy option for beginning users as the association between second level icons and open tabs is relatively obvious. You don’t lose spatial orientation because there are too many open tabs, and yet you still have all the functionality of FF2 tabs for people who didn’t mind them.

Please tell me a method to move tab bar to the right side of the window.

Thank You!

Big thanks to Peter Kasting, firstly for working on Firefox at all, and secondly for sharing the experience from the trenches.

/clap

There is an argument that people who open 80 tabs are edge cases, and there *isn’t* a good solution for them. Perhaps a focus on people who keep a more reasonable number of tabs open is in order, perhaps in the teens.

I’d love to see usage data on tabs — what percentage of FF users even USE tabs, what percentage of those open more than 10 tabs, more than 20 tabs, more than 50 tabs? It’s hard to design a solution without knowing what *most* users are doing.

My friend uses a plugin for Safari (hack, as it doesn’t natively support them) that moves tabs to a vertical bar on the right. Because of the extra space it is also easily able to have thumbnail previews of each page constantly (see here).

It works much better than I thought, as the length of time scrolling the bigger tabs (on account of the thumbnails )is somewhat made up for by the ease of finding the page you are looking for.

+ for multitabsrow

Could zooming be used to solve the problem?
But I guess if that though is followed through it would lead to getting rid of tabs all together, only have a big canvas of web pages??
(I never tried a zooming interface, what I’m aware of, so I’m not convinced of its excellence yet. I still find it interesting.)

PS. I’ve also had problem with the move of the tab-close button from the right side of the tab-row to to each tab. Also the way focus changes. It turns out I used the tabs to quickly load up a number of pages (say a number of Google hits) and flip through them by selecting the last on and click close to move to the previous without moving the mouse to do so.
(I’m not sure zooming would solve that, maybe pages should be “pillable” on demand?)

“What’s your solution to the many-tab problem?”

In my mind many in this case translates to more than the given UI solution supports. All of the solutions that are suggested here are aimed to increase the number of tabs that the UI can support in a useful way. I see these solutions as a way to postpone the problem and not a way to solve the problem.

My proposal is this - define a sweet-spot and encourage users to stay within that sweet-spot by penalizing them for being outside the sweet-spot. This means that the tab bar should degrade more and more as it gets further and further away from the defined sweet-spot.

I have a handful of wireframes and accompanying descriptions to illustrate my proposal.

What do you think?

Keisuke Omi: “define a sweet-spot and encourage users to stay within that sweet-spot by penalizing them for being outside the sweet-spot”

Your argument boils down to saying there is no problem, users just have to act the way developers want. Which is fine for people who do act that way, but not so fine for other people. j

Tim S: “I’d love to see usage data on tabs…”

All hail Tim!

When you hover the mouse over the “tab” section of the browser, toss up a tool tip style window that contains all of the open tabs with your current tab “highlighted”. When the user moves the mouse away from the tool tip section, it returns to normal. When the user selects a tab, the website for that tab pops up and that tab shows up in the center of the row of tabs with the tabs to its left and right appearing in their corresponding positions. Users can also choose to drag and drop the tab among the rows/columns in the tool tip to reorganize a tabs relative position. The tool tip only goes away when you click a tab or your mouse leaves the area.

@ Michael

I am saying that the problem needs to be scoped and follow through by telling users when they start doing something that is outside of the scope of the solution.

Are you proposing that a single UI solution be designed that supports ALL use cases for ALL users?

I had an idea similar to MyNameIsMatt, and have created a few mockups.

In this idea, tabs can be a fixed width. When the user opens enough tabs that they flow off the page, the tabbar extends to have a combination tab map and scrollbar above it, as in This example.

The size of the draggable section would correspond to the visible section of the tab bar. Clicking on an area in the tab map would display that section of tab bar.

If the user opened enough tabs, the tab bar would start another row, making this solution scalable in a manner similar to multiple rows of tabs, but without getting excessively large as quickly.

As you can see from that example, I also experimented with adding thumbnails to tabs, which makes the tab bar even bigger, may be functionally worth it.

Here are a couple more examples:

Single row with thumbnails
Tab map with just favicons

A few thoughts before I go. The slider should probably be transparent, making it more obvious that it directly represents the tab bar.

Also, if Tab Groups were to be implemented, group management could probably be easily done in the Tab Map. I’ll try to make up some mockups of these ideas soon.

Although not a solution to the problem at hand, I did just run across an extension that does the thumbnail preview that I was toying with. It’s called Information Tab.

I seriously suggest checking it out (though I’ve read that it doesn’t work with Tab Mix, which I know is a deal-breaker for some).

Strange, my previous comment came up as being screened for approval and has yet to post, yet my followup went through.

Just in case my origional post is lost in the vacuum, here are the mockups of my Tab Map idea.

Tab Map (Single Row)

Tab Map (Single Row, Thumbnails)

Tab Map (Single Row, Icons only, Thumbnails)

Tab Map (Multiple Rows, Thumbnails)

@Tim S.
There currently is a project in motion that will help gather FF usage data. It’ll be in the form of an extension. The ball just got rolling - check it out. http://mozmetrics.wordpress.com

@Tim S.
There currently is a project in motion that will help gather FF usage data. It’ll be in the form of an extension. The ball just got rolling - check it out. http://mozmetrics.wordpress.com

My idea for this is a combination of an Expose-like mode with a ZUI to provide a very flexible solution:

http://wiki.mozilla.org/index.php?title=Markc:Firefox_Tab_Mockups

Maybe I’m late to the party, but I’ve produced a mockup in Javascript of my solution. Here’s the mockup, and here’s my blogpost about the mockup.

Shirra has an excellent way of dealing with tabs that works very well its a tab dock at the bottom with a screenshot of the tab. And also an expose like feature.

But I personal use tab mix plus to use multiply rows of tabs. its the best way i have found and in fact that alone stops me from switching to any other browser.

Having too many tabs open is a sympton of misuse:
a certain basic operation is not available and tabs are used as a workaround.
I think this basic operation is: mark a link as “to be read later on”.

Tabs provide quick access to a set of memorized pages. When marking a link for later reading, very little is known about the linked page but the context from which it seems interesting. The linked page should not become a new tab as it is essentially unmemorized.
With more than ten tabs open, this becomes
obvious:
the user almost certainly can’t memorize the individual pages and thus the tabs become nearly
meaningless (thereby obscuring the few tabs which are memorized, too).

So with any fancy tab layout, the user will be doomed by too many open tabs. Instead of making all pages available within one click, the browser should support the user
by maintaining the context information.
This points to something like “reading lists” …

No mockups (yet), but maybe someone feels inspired?

Great comments thus far.

I might suggest that one of the problems we’re collectively running up against isn’t necessarily that this is a tab/tab metaphor problem but is instead a question of managing multiple documents within the same window.

Windows’ solution to this has been the MDI, which has been deteriorated over time to the strange “not quite MDI” of say, Office 03. (For instance, you can’t by default have two separate Excel windows with two separate Excel documents yet they appear as two separate buttons on the taskbar - disconcerting.)

The Mac’s solution has been to do away with attaching chrome and the like to the document window (as much as possible, that is) and moving commands up to a app-global menubar and, perhaps, toolbar. This puts focus on the document.

Maybe that’s what is missing overall: a focus on the web documents, as such. It feels more and more like tabbed browsing is a band-aid due to limitations within the overall OS interface. Windows falters when it comes to managing multiple windows in an app, concealing them behind a taskbar button. The Mac gets around this with Expose but, still, “out of sight out of mind” applies there. (At least it’s easy to get there from here.)

That said, a “tab expose” feature seems like a fairly logical solution coupled with piles/groups/what-have-you. I should be able to tear off my documents by dragging the tab to a new window, or another group, or (ideally) another app. The browser and/or the OS would need to convey to the user that she has x tab/document groups available… not sure how.

To summarize, again, I think this is actually a flaw with the underlying OS metaphors and limitations, and is just manifesting itself most visibly in Firefox/IE/Safari/Opera.

@Peter G

You’re half right. There are, as far as my experience goes, two ways of filling up the tab bar. One, is akin to a “To Read” list. The other is related to the Back button and history.

The first of which is as you mention. When browsing a blog, or similar site, I’ll middle click and often open a dozen or more tabs in the background, to be viewed later. As far as this interaction is concerned, the current implementation is perfectly adequate, because it’s uncommon that I need to locate a specific open tab, as I’ll be reading them more or less in whatever order they pop up.

The other usage is more complicated. That’s when I’m doing some form or research, or something similar. In this, more rare case, I’m opening a new tab to be read now, without fully leaving the site I was just on. Often, this process can lead to a large number of open tabs, where I do need to be able to find a specific one when I need it.

In my mind, it’s not that I need to be able to see all of these tabs. Instead, I need to know, intuitively, where they all are and how to get to them. I need to be able to find the tab I’m looking for without thinking about it.

I think that whatever the solution is, it’s going to have to involve recognition of the Parent/Child/Sibling relationship of tabs.

I’ve made up a mockup of a Expose-like screen that utilizes tab relationships.

Firefox Tab Relationships

It’s a bit rough, but you should get the idea. I considered many options for access to such a screen. The button on active tab seems best, since the screen’s contents will change based on which tab is active.

Of course, this screen would be best used with keyboard shortcuts, much like Safari’s speed dial.

Let me describe a use case for my mockup.

Here I am, looking through all the mockups of various tab ideas, all opened from this Humanized post.

While doing so, I noticed that Brian W has some interesting posts on his site, so I open those in a couple of tabs, to be read later.

I’m also reminded that many things can be done with Tab Mix Plus, so I do a Google Search. I open the addons.mozilla.org page, as well as the extension’s homepage to look at the forum and see what’s being worked on. But, I decide that can wait, and want to return to looking at mockups.

For me, it’s easy to remember the relationship between tabs, so I click the little green arrow on the active tab. I know that all of the mockups are children of this Humanized post, which is itself an orphan (I opened it from a bookmark). So, I look down at “Orphans”, see the screen shot, and select it.

Now, the tab bar itself is likely to be filled with mockups at this point, because I opened them up sequentially. So I can readily access them there. Or I can click the arrow again, look at “Children”, and see screenshots of them all.

I select Brian W’s page again, because I want to read the description of his solution. But, the javascript mockup he posted is in another tab, and I want to look at it. I click the arrow, go to “Siblings” (since both pages were opened from the same comment), and select the thumbnail of the mockup.

Paul said: “It feels more and more like tabbed browsing is a band-aid due to limitations within the overall OS interface.”

I’m not sure I agree with this. I see it from the opposite side. OS’s shouldn’t be blamed for applications that aren’t able to manage themselves.

Microsoft’s window management system using the bar highlights this nicely. I don’t want another new insert in the bar for every browser window I open up. I want browser stuff contained within its own context, which is the browser itself. The more browser windows open, the more they clutter up the bar, but if you tab those, then they’re within an understood context, and managed by the appropriate application, the original context holder.

In theory, I like the Expose idea and Jeff’s mockup, except I don’t really get it. I’m not sure I like the idea of a tab having tabs, the ordering or something doesn’t feel right. It only seems fair and logical to keep objects contained within their original context, which makes for easier reference when going back to something.

A comment on Jeff’s mockup, I’m not sure that the best option is adding functionality to tabs themselves. As I just wrote, holding context is good, but are there other “tabs” being burried behind parent tabs? If so, that seems like an easy way to lose orientation and positions of tabs. Say I’m opening links from humanized. I then jump over to Removing Complexity and open some there, then over to Ars Technica. I then later remember I had opened tabs of interest and completely forgotten about them, and I either have trouble finding them again, or just completely forget them.

@MyNameIsMatt

Could you better explain what you mean by tabs being buried behind parent tabs. I feel like I’m missing something.

As for your comment about the idea of tabs having tabs, I generally agree. It’s why I’m generally resistant to the idea of tab groups, or auto arranging of tabs. Unless the tab bar can be smarter than me, and always put the tab I want where I want it to be, it seems like it would cause more problems than it would help.

Which is why my idea leaves the tab bar itself alone, and is simply a map of tab relationships involving th