Chapter 5. Firefox Design

Nikolay (unDEFER) Krivchenkov


Mozilla Labs declared design competition on replacement tabs in Firefox. And the unDE project team will participate in it.

In our concept many unDE ideas were used and if they will not be implemented in Firefox, they should be implemented in unDE.

In general the tabs idea is not bad. So it demands more likely not replacement, but improvement.

To begin present the mockup of start page Firefox caused at the first running:

The Firefox first page mockup

These are the reduced copies of web pages located on tabs. But by default it is all empty. I know, it is very similar to "Speed Dial" technology accessible in last versions of the Opera browser. But there are also distinctions. If the user clicks on one of rectangles (in the example on left top one) will see page which he/she usually sees at start Firefox:

The Firefox mockup after click on an rectangle

There is only one difference: the icon in the right part of the tab bar. This button allows to return to miniatures view. Let further the user will open set of tabs. For example 10:

The mockup of opened 10 tabs in Firefox

On miniatures these tabs will gradually fill all 9 rectangles. At first filling occurs from top to bottom, and then from left to right. To display this fact on tabs, it goes like stairsteps. The stairsteps going downwards means one column, and a step - lifting thus divides columns of miniatures view. Last 10th miniature is added in the end of the third column of miniatures:

The mockup of miniatures of 10 tabs in Firefox

Thus between an location of tabs and miniatures strict unambiguous dependence is created. It allows to find easily a miniature with knowledge where is located tab and on the contrary. Miniatures location in two-dimensional space allows to involve the human mechanism of spatial memory. Miniatures should be easily moved with mouse so well as tabs. Thus if miniature moves to any column between two others ones, lower miniature in the same column shifts on one unit. Simultaneously with this the tab on tab bar moves corresponding with the miniature.

The general algorithm of miniatures location at opening new tab:

  1. Let k - number of miniatures located in a column on one screen. On examples k=3.
  2. If in the current column less k elements the new miniature is located in the same column after current.
  3. If in the current column number of elements >= k, and in the following - less k, the new miniature is located on top of following column.
  4. Otherwise the new miniature is located in the same column after current.

Certainly, such scheme yet does not resolve the problems arising with tabs when them more than 20 ones. The first mechanism to help with them is tabs pages:

The mockup of tabs pages in Firefox

The page switcher should appear when the cursor is in the right part of the top panel. Here it would be desirable to tell a little about two approaches of access to the information which does not fit on one screen. Their only two:

  1. The scrolling. It is using now for tabs in Firefox. This access method is convenient exclusively in the presence of smooth scrolling with mouse scroller when information size is not so great. When information size very big to jump on big distances presence of scrolling bars becomes desirable, but in Firefox for tabs they are absent.
  2. Access by pages. Which we now consider. For this method convenience condition is instant browsing of pages and permanent elements location on page on scaling. This way has proved to be good in paper books. But so as one text page entirely is not fit on the screen because of the low modern displays resolution, and combination of these two ways (when the page scrolls, but to go on the next page you need to press button) is very not comfortable, in modern interfaces this way practically is not used.

So with access by pages the page change to following or previous one should be implemented also as page change by page number. Access by pages allows to work the mechanism of spatial memory: reading the book we often remember text location on the page. For example, we can remember that the text was on the left or right page of the book, and also that there were pictures on the page top. From the programmer point of view the information search by position on page is very similar to a hash method applied for search acceleration on big data files.

The second mechanism which can help to group tabs is multilevel tabs. In the unDE concept every tab easily turn into the whole tab bar with simple click on already opened tab:

The mockup of multilevels tabs in Firefox

It is necessary to notice that the opened tab content on the primary bar directly depends from tab chosen at the second level tab bar. The nesting of such tree should be limited only by computer resources. In the next mockup the third level tab bar is opened in a miniatures mode:

The mocup of tabs panel of third level in miniatyres mode in Firefox

Thus the opening the bottom level tabs can take too much space on the screen. So there should be a way to hide all top level tabs. For example, as gesture for this purpose can serve double click on opened tab. Double click on a miniature can open tab also in a mode of miniatures.

On the picture you can see that names and icons on both top level tabs has changed according to the child element contents. However 3x3 elements simultaneously displayed on the screen can be a little. Therefore scaling should increase their quantity. But it is recommended, that the quantity of such elements did not exceed 5x5. Because 25 tabs simultaneously displayed on one line it is still tolerant, but its increase to 36 can give fatal effect on its choice possibility with mouse.

The mockup of big amount of miniatures in Firefox

Besides tabs choice possibility on the tab bar and in miniatures, it is possible to give the third possibility - tabs tree:

The mockup of tabs tree in Firefox

The miniatures columns in the tabs tree are divided with shifts. As simultaneously shifts display also level of nested elements in the tree. For distinction of these signs for display of nesting it is better to use dashed lines.

On good the given concept should replace on functionality not only tabs, but also bookmarks, and also saving of pages (and ScrapBook plug-in). We will explain in more details:

Thus tabs are not simply replaced, it is supplemented with new methods of browsing and grouping. Each user will select the most convenient way for himself. And the main thing - at desire it can use tabs as before at all, without changing his/her habits. The backward compatibility is always very important.

Video explaining the mockup: Logo