Reinventing tabs for the browser

The road to Firefox.next: Making tabs better.

Let us start with a screenshot from a well-known tech news site. Don’t click the Digg button — even though I know you want to — it won’t do anything:

So, what’s going on here? It’s quite obvious that:

• The current way multiple pages are handled in browsers isn’t doing its job well enough, at least not for the advanced users.
• There seems to be no one-size-fits-all when it comes to having multiple pages open at once, and an astounding number of add-ons to modify tab behavior.

When tabs first started appearing in browsers — Opera and Firefox being the ones at the forefront — the web (and computers!) were in a very different state than now. People were exceptionally happy to be able to have 6-7 pages open at the same time, and using only one window to do it.

Fast-forward to 2009, and a lot of users are pushing the limits of what browsers can handle with regards to how many pages they have open at once. There are significant memory and CPU costs to this new-found power — but nowhere is the problem more apparent than in the user interface. Different browsers deal with a large amount of tabs in various ways, from allowing multiple rows of tabs (Opera), to having pulldowns that list all available open tabs (Firefox, Safari). None of these approaches work that well, which is why Mozilla has been looking at alternative approaches to manage multiple pages for a while now.

Table of contents

Since this is a long post, here are some section links if you want to link to specific sections from your own content:

• If it ain't broke, don’t fix it
• Existing approaches
• A note about instrumentation
• Proposal: Some exploratory steps for Firefox
• For novice/intermediate users: Thumbnails reloaded
• For power users: Quicksilver, meet Firefox
• Testing the Power User UI, today
• Combinatorics
• How to participate in the discussion

If it ain’t broke, don’t fix it

We realize that tabs were the reason a lot of people switched to Firefox in the first place. The first thing people say when we indicate that we are looking into alternative approaches is usually “But I like my tabs. Please don’t take away my tabs!”

So, let us just state for the record: We don’t see tabs going away for a long time yet. They will be around in a form similar to the current one, because tabs work really, really well for most people. The large majority of users have no problem with tabs, and they are a very natural and elegant solution to the problem as long as you don’t push them too far.

What we do want, however — is to find a better solution for the users out there that are currently frustrated and unhappy about using tabs to manage a lot of pages. For the tabs case, let’s establish some very broad categories of users for the sake of this discussion:

Novice users

These are the users that currently don’t use tabs at all. These people are like my grandma — although a tech-savvy grandma, she only visits 4-5 sites, and has no use for tabs.

Intermediate users

These people are the users who are currently happy with the way tabs work. They typically work with 5-10 tabs open.

Power users

These users have a lot of tabs open — everyone has this friend that has over 100 tabs open in his browser, and never closes any page — she just forks off a new tab instead. Or maybe you are that friend.

Pardon the unimaginative names for these categories. They used to have more colorful ones, but then people would say “But my grandma…” — they just exist to frame the discussion.

Existing approaches

Of course — as the screenshot above told you — there is no lack of effort to try to make the situation around tabs better. Even Mozilla Labs is currently hosting their Summer ’09 Design Challenge: Reinventing Tabs in the Browser — and the previous Spring ’09 Design Challenge asked people to envision how browsing would look like with as minimalist a user interface as possible.

One of the add-ons for Firefox that has seen quite some uptake among power users lately is the Tree Style Tab add-on.

The reasons for its popularity are easy to understand, it fits the power user’s needs well:

• It lays out the tabs in a vertical fashion as a sidebar instead of horizontal, thereby maximizing the possible amount of visible tabs.
• It makes use of the horizontal space that more and more users have available due to the widescreen monitors now being the dominant standard for new screens. (Widescreen monitor shipments surpassed standard aspect ones in Q1 2006 for notebooks, for instance)
• It automatically groups the tabs based on where they came from, e.g. if you spun off a new tab from a Google search, it would become a nested tab like the Apple tab in the screenshot above. Currently, people use different windows, or colors, to group related tabs in other browsers — and use tab drag/drop between windows to accomplish the grouping they want. This solution is much more elegant.
• It makes it easy to navigate more tabs than will fit on the screen with a close-to-zero effort gesture: using the scroll wheel.

---

Another noteworthy approach is the way the SafariStand add-on for Safari handles tabs.

Some of the things SafariStand gets right are:

• Same as with the Tree Style Tabs plugin: It makes it easy to browse a lot of tabs, since you can use the scroll wheel if you have more tabs than will fit on the screen.
• Tabs are very visual, and easy to recognize.
• Tabs have a large click target.
• Most importantly, SafariStand has what we here at Mozilla refer to as partial thumbnails.

A full thumbnail screenshot of a page is not really useful in identifying the page, especially if the page is mostly text. By taking a screenshot of the upper left corner of the page (enough to grab the logo + some of the page title), a partial thumbnail becomes dramatically more useful in identifying the page you’re looking for. In the screenshot above, the Wikipedia page on “User Interface” is recognizable even if you had three other Wikipedia pages open.

---

To illustrate what the previous approaches get right, let’s look at what the Opera 10 beta does. It includes a similar way to view tabs, but there are a number of issues with this implementation compared to the others:

• Here you see a good illustration of why full-page thumbnails are less usable: The Wikipedia page couldn’t be distinguished from a different Wikipedia page in thumbnail form.
• By putting the thumbnails on top instead of on the side, they steal a lot of space from the content area — you already want to have the top part of the window be as slim as possible, which is why Chrome and — until recently — Safari 4 went to such lengths to use the window border for additional tab space: it gives you more space for the web page.
• One thing that can’t be seen here: If you add a lot of tabs, the thumbnails shrink their width to become unusable as a visual aid for finding the tab you’re looking for.
• Even if this implementation allowed you to scroll sideways by using the mouse wheel — instead of letting the thumbnails become 2 pixels wide when you have 40 tabs open — it wouldn’t have been something a lot of people would even try. Using the vertical scroll wheel to scroll horizontally?

As you can see, Opera tries a similar approach as a couple of the add-ons that already exist, but unfortunately missed out on a lot of the smaller details which make these add-ons work well.

And for the record — I’m a big fan of Opera, and have been for many years. One of my close friends even worked as their lead UI designer until recently. So I’m not picking on Opera here, it was just a great illustration for this discussion.

A note about instrumentation

Before we move on to some of the things we want to explore, a quick note on the research and statistics side of this:

Dealing with tabs is a case where more data on usage patterns would be very helpful. Luckily, the Test Pilot instrumentation project from Mozilla Labs is moving ahead with the aim of letting us instrument the browser to get some real numbers on how people use Firefox.

Using this tool, we could poll for useful numbers — like what the tab distribution is among our test pilot users: how many people use 2-5 tabs, 10-20 tabs, 50+ tabs, etc. I’m pretty convinced that not a lot of users have more than 5-10 tabs open — but of course the ones that have 50+ tabs are really the power users that switched to Firefox in the first place, and we should make them productive.

You can actually graph your own tab usage over time using the Tab Grapher, which is an add-on for Jetpack. So if you want to see where you fit on the scale of tab usage, running this extension could be an interesting way to find out.

Data is always good, and we’re looking forward to get a lot more of it in the near future, making it possible for all users to help us make Firefox better.

Proposal: Some exploratory steps for Firefox

As mentioned earlier, there is no obvious approach that will solve the shortcomings of tabs for every type of user. What we should do, is allow you to choose what type of handling you prefer, and seamlessly move between them — and/or providing natural transition points as detailed below.

Also, keep in mind that this is a smaller part of a much bigger picture that we will detail over the coming months when we start winding up for Firefox.next, now that version 3.5 is close to shipping. There’s much more to this proposal than is apparent from this first post.

For novice/intermediate users: Thumbnails reloaded

If the existing tabs interface works so well for the intermediate users, why should we even look into changing it? The main reason is that the people that fall into this midway classification are getting more and more demanding as users. They start using more tabs, and suddenly over half of them are in territory that we just a few years back defined as power users.

This means that we need a more graceful way to let tabs scale — or at the very least give people the option to opt into an interface like this, and make it as seamless as possible.

The ideal novice ⟷ intermediate interface would have the following properties:

• Give a good experience for the people who only use a few sites, and only a few tabs.
• Make it even easier than it is today to graduate from using one to using more tabs.
• Effectively make use of modern widescreen displays, but have an option for resolution-constrained displays too.
• When pushing up against the limits what the interface can handle, provide a way to scale to the next order of magnitude.

Of the solutions we have explored so far, a sidebar-based solution gives us an array of new options and possibilities.

It’s worth noting that for some people, the fixed sidebar approach doesn’t work — it takes away too much screen real estate. One solution for this could be the slidebar — note the L — concept that Mozilla Labs have been exploring as part of their work on Jetpack, also present in the current Fennec mobile browser UI. The basic concept is the same as with a normal sidebar — although it makes use of the screen edge to let you quickly slide out a panel with the content instead of having it visible at all times. This could be a great solution when you are resolution-constrained. Other similar solutions can be found in the Opera sidebar, which expands when clicked. In any case, there are lots of potential ways to make the sidebar temporarily hidden.

These wireframes explore a variety of functions:

• Starts out as an interface similar to SafariStand, with partial thumbnails in a sidebar as the main way to switch between open pages.
• Some conceptual similarities to a TV “channel picker” — novice users would probably just have their favorite sites in the sidebar all the time. It would open the page if not already open, and switch to it if it already is.
• Some indicators/buttons can be added to the thumbnails, like RSS icon and favorites — but we should keep it very minimalist.
• There’s a large, empty tab available that makes how to create new tabs very discoverable.
• The new tab also has an option to perform a search directly from the tab — turning into the search results page on activation.
• Once the number of open pages reaches a threshold where it doesn’t make sense to show partial thumbnails anymore, we transition to the favicon + title approach of Tree Style Tabs. This way, we make it easy to discover the next level of tab management.
• You can of course also choose to be in one mode or the other explicitly with a mode selector along the top.
• There’s a “filter tabs” kind of search box that allows you to narrow down the list of tabs based on title/content. 
• Similarly, you can opt in to the slidebar behavior for the sidebar if you are resolution-constrained. Tapping the side of the screen with the pointer will then slide out your page overview. This will probably be the default for small-screen devices like where Fennec operates.

Oh, and we haven't rendered the back/forward buttons, address bar, etc. in these wireframes — they would of course still be present. We have some changes to these areas that we will detail in coming articles, so we left them out of the wireframes to not confuse the issue.

One cool consequence of this is that open pages — “tabs” — and bookmarks can be the same thing for the simple use cases. Similar to the Mac OS X dock, it doesn’t care whether the application is currently open or closed. This is something we will talk more about in a later article, but to keep the discussion focused, we will leave it on the table for now.

We now have an interface that arguably scales down better than the existing interface for people like my grandma, as well as seamlessly transitions once you start pushing it beyond the range of 8-10 tabs.

For power users: Quicksilver, meet Firefox

A pattern that we have observed among the power users is a propensity to get rid of as much of the browser user interface as possible. They often hide all the toolbars, get rid of most of the buttons — all to get more space for the content, minimize distraction, and because they use keyboard shortcuts for almost everything. They are comfortable without any physical reminders of what the browser’s functionality is — they just want as much space available for their content as possible.

Another interesting pattern that you may have seen if you have used application launchers,^{1 1}Tools like Quicksilver or LaunchBar for the Mac, the launch/search interfaces in OS X (Spotlight) or Windows Vista, or any the various application launchers on Linux. you probably also know that power users are also comfortable keeping the knowledge that their file or application is somewhere on the computer, and care less about where it is actually located.

What this indicates is that:

• Power users like the UI to “get out of the way,” and be as minimal as possible.
• Power users are comfortable keeping the details of what pages they work with in their head, and don’t need UI for bookkeeping.

With this information in hand, we could imagine a power user / full screen interface similar to this:

• There is no UI until you press ⌘L (Ctrl-L on Windows/Linux) to enter new URLs. No tabs, no buttons.
• Pressing ⌘L will bring up the address bar (of course there should be a way to specify a different shortcut like ⌘Space or similar)
• Existing open pages have an indicator next to them, and selecting them from the pulldown will jump to that tab instead of loading then in the current tab.
• There’s an easy way to open the selected page in a new tab.

With this, power users have a great UI for working with hundreds of pages open at once, and at the same time we have a nice UI for full-screen browsing — for TV or projection use.

Switching between open tabs would then work like this:

1. Bring up the address bar by hitting ⌘L (or a self-defined shortcut, or a gesture like the slidebar only along the top of the screen),
2. Start typing the tab name in the address bar,
3. The open tabs that match what you just typed will show up as the top results in the address bar pulldown,
4. Selecting an open tab will switch to it,
5. You open new tabs in the usual way, ⌘T.

How would you enable the Power User mode? There wouldn’t be a mode switch, you would just turn off the elements you didn’t want on the page. If you turn off the address bar, it would work in the manner illustrated in the wireframe.

Testing the Power User UI, today

To get a rough idea for how this works in practice — “browsing with no UI” — you are encouraged to test parts of this using the 3.5 version of Firefox:

1. Turn off all the toolbars in the View menu
2. Turn off the Status bar
3. Use ⌘L to enter new URL, use ⌘T to open new tabs

What’s missing from the current version of Firefox that we should fix to make power user & full screen mode usable:

• You can’t currently turn off the tab bar. This should be possible.
• Full screen mode doesn’t work on Mac OS X. This needs to be fixed.
• When you use ⌘L to enter a new URL, the address bar lingers around after you have entered a URL, meaning you have to manually turn it off again. It should remember its state, and disappear if you already had it hidden. Update: This works in Firefox 3.5, but not 3.0 — although you get the tiny dialog version instead of the full-on AwesomeBar. Still, works great for experimenting in the meantime, and future versions will hopefully give you the full AwesomeBar.
• The address bar should match on already open tab names. This is huge. If we add this, suddenly you don’t need to care about where that tab with Slashdot went, you just start typing its name, and Firefox will produce it from the 200+ tabs you have open in your browser, and switch to it.

Combinatorics

Just so it is absolutely clear: you can pick and choose any variation of the capabilities mentioned above to suit your browsing habits.

• Power user, but like having a list of what you have open visible at all times? Close everything but the sidebar in collapsed mode to list your 200 LOLcat tabs.
• Want to set up a foolproof setup for the four sites grandma uses? Hide the URL bar and pin the four sites in the sidebar, and she can use it as a TV.

…and so on. As you can see, this adds some powerful new tools and abilities to your browsing toolbox.

How to participate in the discussion

At Mozilla, we welcome your participation, and we are certain that there are a lot of great ideas out there. While I personally don’t have comments enabled on my website for the same reasons as Alex Payne outlines on his blog, the best ways to participate are:

• Write up an article on how you think tabs in Firefox should work on your own web site. As long as you link back to my site and mention my name, I will find it, and read it. No, really. My previous employer was Google, that’s what we do — find things.
• Participate in the Mozilla Labs Summer ’09 Design Challenge: Reinventing Tabs in the Browser.
• If your comments are shorter, or you just want to add something to something that has already been written, you might want to post them in the dev.apps.firefox Google Group — also available in Usenet news group and traditional mailing list flavors.
• If you produce any mock-ups, wireframes or graphics related to this discussion, tag it mozconcept — on Flickr, Twitter or elsewhere — and we will see it.
• If you don’t feel like polishing up something to post for everyone to see — or just want to test my shiny new flame-retardant suit that I got handed by the Firefox User Experience Team as part of my welcome package — send me an email at limi@mozilla.com.

Thanks for listening! Looking forward to see what you will come up with to help us make tabs better in the next-generation Firefox.