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.

SingleTab




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.


Grouping-Tabs

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.


Conclusion

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.



Paradiesstaub


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

This work is licensed under a Creative Commons Attribution 3.0 United States License (http://creativecommons.org/licenses/by/3.0/us/)

Advertisements