This idea is based on the concept I submitted to the Mozilla Design Challenge 09. I try to regroup fields of interest via a tree structure – without knowing the tab contents.

Because I am now focusing on creating tab groups according to certain rules, there should be no problem in exporting this idea to other projects. My goal is to create as few tab groups as possible, these groups being useful and well organized. To avoid confusion I’ll explain my idea step by step.

Open browser. A “Birth Tree” is created that opens the start page. As the name “Birth Tree” suggests, this is where trees are born – “tab trees”. The first branch of the tree is the start page. There is an extra rule for the “Birth Tree”: “Each newly opened tab (superior tab) first belongs to the “Birth Tree”, as long it has not opened another tab (sub tab). If another tab (sub tab) has been opened, both (superior and sub) tabs get bundled into a new Tab Group. This kind of extraction applies as long as the Tab Group is comprised of more than one website”. “Superior tabs” are tabs that are created by clicking on the plus-symbol or pressing CTRL+T – “sub tabs” arise when clicking on a link (middle mouse click on a link, for example). This kind of birth process prevents a user from opening 50 tabs with CTRL+T and getting 50 tab groups. In the following explanations, I’ll concentrate exclusively on tree structure and a tab-group that has gone through the birthing process (from now on all tabs are “sub tabs”).

Until now our tab group would look like this:


The highest point on the picture (the star) is the “starting point”; it is the founder of the group. The upper white box is the first website and the other, the tab that was created from it.

The “Birth Tree” rule would make no sense for “adult tabs”, that’s why I invented another rule for them: “When you open more than two tabs from one website, you move higher up in the tree structure until this rule is broken again or until you reach the starting point, in order to branch off the tab tree and to create a new Tab Tree Group.

This rule sounds somewhat complicated, but pictures should help understand it better.


As you can see, the new group (yellow) gets integrated into the existing tree. The advantage of this procedure is that the allocation remains flexible. This fits the need of the user who can “jump” to higher tabs – from the point of view of the tree structure – and create new tabs from there. The following example will help you better understand what I mean. We assume that the user creates enough tabs at a higher branch point to build a new Tab Tree Group. This would affect the other groups (especially the second one) as follows:


As we all know, you can not only create tabs, but you can close them too. So how would this kind of tree structure work when we close tabs, or better, how would it work if we closed tabs that are important for multiple Tab Tree Groups? If a tab gets closed, the lower structure will become attached to the upper one. The same principle applies to a group that no longer fulfills the Tab Tree Group criteria, it would be integrated into the next higher group. A special case is when a branching point/tab gets closed (marked with an ‘x’ on the pic.) and two groups become related to one tab: which group should be allowed to integrate it?


The answer to the question is that the tab further belongs to the group it was last belonging to. This prevents tabs from always jumping between different branch groups.

Until now, it was not important for the user to know whether a tab belonged to one or to another Tab Tree Group and if a group was created or closed, because all tabs were still open according to my concept. It’s only when you minimize a Tab Tree Group that the tabs they contain become important: we could say that they are stored in another place and no longer in the big “tab pool”. Take a look at the next picture that shows a Tab Tree Group with one click on it – actually, you see two Tab Tree Groups.


It would be very unpleasant if you were to close a few tabs within a minimized Tab Tree Group and the whole Group would suddenly disappear – because it would no longer comply with the rule – and would become linked to another group. To prevent such an occurrence, I suggest freezing the minimized tab structure. The user could then close individual tabs without having the minimized Tab Tree Group integrated somewhere else. If the user chose to reactivate only one single tab from a Tab Tree Group, this tab would “de-freeze” and the standard rules would apply again.



When you save a Tab Tree Group, you also save the underlying tree structure. Because the user can add further tabs to a Group that has already been saved, I suggest to integrate it directly below the starting point (star). In this way, the existing group structures would not be affected.

Positive sides of this method:

It enables the user to open many websites and to bundle them into a few well-structured groups that clearly show the user how he has arrived there. I’ll give you a quick example: let us suppose that the following picture represents a Google search. The first website would be the result of the search. Different search results would follow as open tabs. One of these tabs would be a Wikipedia entry from which we open further links. As long as we don’t open more than two tabs starting from the same website, the whole structure belongs to the “Google Group” (red). As soon as the user opens more than two tabs starting from the same website, a new Tab Tree Group appears (yellow). The new Tab Tree Group holds all tree tabs up to the Wikipedia entry (also included). It is not so relevant to the user to know how the second Tab Tree Group was created. It is more important for him to see in the second Tab Tree Group where he has come from, i.e. from Wikipedia.


Negative sides of this method:

In most instances, the user will not understand why a new Tab Tree Group was created – I don’t see it as a real problem though, since we have reached our target of bundling tabs. Only a field test can show how practical my method really is.

I would like to add that I find automatic tap grouping solutions far better than those that are left to the user’s discretion. Another basic rule should be to keep the number of clicks to a minimum and mouse movements as short as possible.

That’s about it! I’d be really happy to get your feedback and to know what strengths/weaknesses you see in the suggested method.



PDF: Idea – A Practical Way to Group Tabs

Creative Commons Licence: Attribution 3.0 United States


This is my concept for the Design Challenge Summer 09 from Mozilla Labs.

The question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”

Tip: view the video full screen and in HD (if video is jerky, download it via this page or plug-in) – mockup 1, mockup 2, mockup 3

The following is a step-by-step explanation of my idea and gives more insight into it. I have already pointed out to some of these aspects in the video (Mozilla asked for short videos).

From ideation to solution:

First, I thought of replacing tabs by images in order to gain more space. But then I realized that tabs plus website-icons can contain much more information than a lot of small images do. The solution should also make it possible to handle a lot of tabs, including navigation. Another very important aspect was that I didn’t want to lock out people from Asia and Africa by creating a system that assumes a lot of computing power (they will probably still have slow computers with low screen resolutions for the next five years). I noticed that I was treading the wrong path and would not reach my goal that way – so I left it. “Normal programs can be minimized, why not do so with tabs too,” I thought. I soon recognized that it would not make much sense to use only single tabs, so that the idea of using tab groups lay at hand. Developing my idea and going further on my new path, I had some accompanying thoughts on how to implement it the best way. I came up with the following solution – which cost me some sleep (I was up thinking about the idea until 5 a.m.).

Structure and explanation:

From the very start, I wanted to disturb as few people as possible with my new concept.

They should not be forced to use my system, it should be more of a “if you wish you can, but you don’t have to” kind of invitation. In the end, the only thing I added was the small bar (Tab Group Menu) that displays when you move the cursor over the currently activated tab.


All other buttons are a logical development of my main concept and its structure (except for points 1 & 2 – I couldn’t resist submitting this idea, too).

Zoomansicht - Minibild 1

Zoomansicht - Minibild 2

Zoomansicht - Minibild 3

Erläuterung - Großansicht

1 – With Button No 1, you can switch between the different screen modes.

Normal Mode = shows standard Firefox display | Small Mode = shows only necessary items (including bookmarks on the top bar – see point 2) | Full Mode = equivalent to F11 mode.

2 – Here, Bookmarks are stored in the top bar with other control elements – when Small Mode is activated. There are only as many Bookmarks on display as there is space – starting from the left. Bookmarks that can’t be displayed because of space limitation are only visible under Normal Mode.

3 – Loading status

4 – Button No 4 is activated. The “Tab Group Menu” displays as soon as you move the cursor over the currently activated tab. Another button becomes visible when you activate button No 4: the “Minimize All Tabs and all Groups” button (see point 5 below).

5 – As the name already says, the “Minimize All Tabs and all Groups” button downsizes all tabs to minimized Tab Groups (see arrow No 13). Minimized Tab Groups are always on the right handside.

6 – The “Save Tab Group” button saves all tabs belonging to the group at the time you press this button – and can be processed later if needed. You can save Tab Groups in the same way as you save Bookmarks, the only difference being that you start a new folder instead of a Bookmark. All Bookmarks within a Tab Group belong to this one Tab Group. You can add tags to Tab Groups as you do to “normal” Bookmarks. Yet, you cannot retrieve Bookmarks from a Tab Group Folder in the same way you retrieve “normal”  Bookmarks using the URL Bar. The idea behind this is to prevent unwanted websites displaying as “normal” Bookmarks.

7 – Button No 7 is for text search within the Tab Group (see picture). The possibilities offered by this functionality are obvious.

8 – Button No 8 has a double function. First, it shows how many tabs are in the Tab Group. Second, when you click on it, it shows the list of all the tabs within the Tab Group. Since this list is a drop down menu, there is far more space available to show tab-related information than there would be with horizontal tabs.

9 – Button No 9 minimizes all Tabs in this Tab Group as well as the Tab Group itself. The icon of the website or the reference page that is highest in the hierarchy displays on the right side of the tab bar (see arrow No 13). I’ll explain further on how to build Tab Groups.

10 – Button No 10 closes all tabs within this Tab Group. In order to retrieve a Tab Group that has been closed by error I suggest an extra button on the new empty Tab Page that will come with Firefox 3.5.

11 – With the green arrow, you can minimize or retrieve single tabs. This is very useful when a Tab Group is minimized because you can still monitor it.

12 – Button No 12 closes single tabs – same advantages as above under No 11.

13 – Button No 13 shows a minimized Tab Group. You open the “Tab Group Menu” with a left mouse click on it – the arrow shows an activated menu.

How to obtain Tab Groups:

The automatic Tab Group generation is the core of my idea. To make it clearer I would like to use a small metaphor:

– You “plant a tree” in the browser when you open the first website.

– Each Tab you create from the reference page is a “branch” of this same “tree” and therefore belongs to the same Tab Group.

– When you start an empty tab or a Bookmark, you – so to speak – plant a new “tree” that can have as many “branches” as you wish.

– You also create a new “tree” when you start a further tab starting from an already existing “branch”. In doing so, the original tab used to create the new tab becomes a new “tree”. It sounds more complicated than it is.

Thanks to this method it is possible to put different websites together in one Tab Group

without the negative effect of having the group proliferate when you open new tabs. The following picture illustrates this using a Google Search.


Finally I think that there should be a drag & drop functionality for single tabs between the different Tab Groups – how it could look is an other question.


Each new idea you bring into the world can always be further developed. That’s why I have decided to stop here. Of course, I could integrate small pictures to reinforce the clarity of minimized tabs within their group. Or I could give a specific color to all tabs within the group, and so on and so forth. As a creative person you have to choose a form. I hope you like the one I chose, and I invite you to come along on this path with me.


Mozilla Labs Design Challenge Summer 2009 – Minimizing Tab Groups – PDF

This work is licensed under a Creative Commons Attribution 3.0 United States License (