Insights by Danielle Fong

Jenny Boriss and the Mozilla Labs team have helped spark a wildfire of discussion. What can we do to make browser tabs better? I’ve been considering this question for a while now (heck, I practically *live* in Firefox), and Aza Raskin’s recent posts have finally inspired me to weigh in.

This may sound strange, but if you look at it a certain way, the introduction and popularization of tabbed browsing represents a tipping point in the history of computers. And, as they have altered and improved our ability to multitask, they represent crucial advances in the history of human thought.

There’s no fundamental difference between a tabbed web browser and an operating system taskbar. They are tools for multitasking. They are intended to make accessible each distinct thing which we seek to do, on our computer, so that we might easily glance at, remind ourselves of, or focus our attention on, whatever is most profitable, intriguing, or demanding of attention. Tabbed browsing popularized as web documents and applications overwhelmed their desktop counterparts. Computers had altered part of our working memory. Now, the web plays a leading role.

Computers have caused such an increase in our ability to multitask that they have precipitated what is one of the greatest generational shifts in patterns of thought since the scientific revolution. Quite literally, when we alter the way we multitask, we alter our minds.

Dangers

This is not without dangers, of course. We can still only keep so many things in mind (7 plus or minus 2, for most of us). Computers can display more tasks and more information than we can handle, and attention remains a finite resource. Computers are only a level two cache. If we don’t carefully control how we drink from this firehose, our attention may shatter, rendering us totally useless. For some, in today’s YouTube generation, this seems to have happened.

If tabbed browsing is a tool for thought, then we might expect that even small alterations in tab behavior will affect habits of mind. Consider the popular method of conducting research. One begins with a search, and lands on a Wikipedia page, or blog article. As one scrolls down the page, we middle click, opening tab after tab in the background. But where do they go? If the tabs land go directly to the back of the list, ordering tabs by age, we end up with something kind of strange. People tend to move to the next tab in the list, and so, the tendency is for our poor researcher to perform what is known in tech circles as a breadth-first-search.

There’s something to be said about this. Breadth first surfers only skim topics. They’ll cover many in one sitting, certainly. But they’ll tend not to learn in much detail. They will, in other words, learn many sides of many things, superficially. Shallowly. This could be one of the major reasons why, online, so many people talk so much about things they know so little about with zero apparent knowledge of this fact. Draw your own conclusions.

If, by contrast, tabs are opened directly behind the parent tab, we lure our researcher into a trap of a different sort. A depth-first-search.

Usain Bolt wins the 100m! Who’s he? Let’s check the Wikipedia… ah, it says here he was born in  Trelawny, interesting name — it’s a parish? Isn’t that like a religious thing? Hmm, it can be, but maybe it’s a civil parish, which is, hmm, a subdivision of the United Kingdom? Huh? Oh — I guess it’s part of the Commonwealth. What’s with that name anyway… seems kind of random… for “the promotion of democracy, human rights, good governance, the rule of law, individual liberty, egalitarianism, free trade, multilateralism, and world peace“, I guess those are good, especially… individual liberty… heh… I wonder how many times Dubya has trumpeted that one… Dubya… Maybe this has a list of Bushisms… which are apparently malapropisms… there’s a mouthful… where was I?

It’s easy to joke about, but it’s no laughing matter. It happens to the best of us. It wastes our time.

A Personal Note

People don’t always read straight through the tab they have open, and move onto the next. They zip around. Or they’d like to. Or, at least, I like to. When tabs first came out, I used to fill my browser with bajillions of them. You’d barely be able to click on one, much less recognize one by its hidden icon or title. There were tabs a pixel wide. Less, if I could get away with it!¹

So what did I do when I wanted to switch back to, gmail, say? I couldn’t find the old gmail tab. That would be impossible. So, I’d open a new one!

Soon, I’d have a zillion gmails, which would slow my computer to a crawl. And the tabs would be almost completely useless: it was totally impossible to switch around, all I knew if that there a lot of articles I wanted to read in there, and if I just kept working on the pile, then eventually the titles would see the light of day and I could use my tabs again. Usually I just crashed the browser. Oy.

Firefox 3 changed a lot of that, but not entirely for the better. Instead of trying to squeeze fifty tabs into one space, it just hides them offscreen. But the same problems come up: I still opened googles of gmails, and my browser would slow to a crawl. Like cold molasses, running up a hill. Honestly.

I’ve learned a little since then, and I’ve made some improvements. Some are technological — little plugins, restoring my sanity. The first is ‘aging tabs‘, by Dao Gottwald. It’s a brilliant little Firefox plugin that makes tab headers fade with age, from light to dark. It helps by reminding you what you were reading most recently.

The second is Tabhunter. Those familiar with Quicksilver or Enso will recognize its function: you just press ctrl-alt-t, type part of the name or URI of the open tab you’re looking for (like ‘gm’ for gmail)², and a list of matching tabs is displayed. Press up or down and enter to select the tab, and you’re there. There are a few minor problems with the design I think; for one, it’s modal (a box pops up, and you need to hit enter to dismiss it), and it saves your old patterns instead of clearing the input, requiring more keystrokes than I’d appreciate, but overall, it’s been a huge boon for me. It makes it much easier to switch between tabs, and I love it.

Finally, I use fullscreen mode. I found having a list of tabs staring me straight in the face had the effect of luring me away, towards something else, whenever things got hard. Now, with fullscreen mode and Tabhunter, I can concentrate on my work or reading, and switch around, only to do something definite, when I need to. This changes everything.

Suddenly, keyboard shortcuts became best of friends: ctrl-1 shifts to the front of the list, ctrl-9 shifts to the back, ctrl-w closes the current tab, ctrl-shift-t opens the last one you closed (or the second, third, fourth last one, in order), ctrl-d bookmarks, ctrl-l focuses on the Awesome Bar, ctrl-k zips to the search bar. alt-left or alt-right to go backwards or forwards. It’s way faster. The first time I started to surf this way, I had nearly 60 tabs open. I just kept reading through, fully completing each task in front of me, dismissing it when done (closing by ctrl-w), moving onto the next item in the list. I was absolutely startled, in just an hour an a half, my browsing was complete. I almost couldn’t believe it.

This has changed my life. You might laugh, but too many times I’ve stayed up, dozens of tabs tormenting me, unable to close them, afraid of sleep, of losing mindstate. I browse faster, concentrate better, and learn more. And now I am free.

Concentration

The lesson, I think, is that computers hold great powers.³ They can remember what we need to do, and what we need to know, freeing our minds from needless memorization, allowing us to concentrate on the task at hand. Or, they can present to us an endless stream of distracting tasks, tweets, and you-tubes, shattering our attention, and any hope of getting work done.

With each distraction, my mind thrashed. Heisenthoughts collapsed. Mindstate was lost. And for what? It takes far too long to start upon challenging work. Frequent taskswitching rendered me barely capable of any challenging work at all.

With the tab window hidden, my world changed. No longer was I tempted endlessly by the idle promises of articles unskimmed, tweets unheard, posts missed. I simply had to concentrate on the thing in front of me, and judge it worthy of time and attention, or not. It worked like magic.

I stopped being distracted by thoughts that there might be something marginally better that I could be doing. Instead I just did it. When I was done with it, I closed the tab. It might be, much more closely, a breadth-first-search, but, damn it, it worked.

Troubles

The trouble with this approach, I found, was that I was literally following a breadth first search with my browsing, which was not always what I wanted. Often, Tabs would present themselves in exactly the wrong order. Yet I’d still be tempted to go through them.⁴

People keep tabs around. They use their tab system as a to-do, to-read, or to-check-list. They keep tabs around as applications — things like gmail, and Facebook, and Pandora, which you might as well be logged into all the time. But keep too many things around, and you create a massive cognitive load. By hiding my tab list, I lessened that cognitive load. I outsourced prioritization to my computer. But my computer wasn’t any good at it. I switched tasks less often, which allowed me to concentrate, which helped me read, and helped me work. But it probably didn’t direct me towards the best thing I could have been doing. I worked, but, in some sense, on the wrong thing.

Priorities

I explained this dilemma to my friend Joel, breadth-first/depth-first analysis and all. He said that I had a linked list of task, and what I needed, instead, was a priority queue.

Duh.

Okay. So that’s goal one. Tabs are tasks: make it easier for us to prioritize our tabs, and we make it easier to prioritize our work.

Memory

Tabs serve as a kind of memory. We use tabs as a way to remember things we intend to do. But what aging tabs shows us is that we can also use tabs to remember things that we’ve done: specifically, what we’ve recently been looking at. What else might we be able to show?

First, let’s give ourselves a great big space to work. Suppose, say, when we hold down ctrl-tab (quasimodally), a great big transparent tab display appears over our window. We can zoom in or out, and drag the display around. We can even give it momentum: physics, just like the iPhone. We can toss it around. On it, what might we show?

Let us channel Edward Tufte for a moment. Let us maximize information density. Let us minimize data ink.

A Paper Mockup for FoxGlide

We can show content. We can display a title, with the favicon, atop a thumbnail of the tab. This is much better than just showing the favicon, as screenshots are far more likely to be distinct, and inform the user of the nature of their content. We can also show which bookmark folders that tab has been placed in or which tags the tab has adopted.

We can show order. Lay the tabs out horizontally, in the order in which they were opened. (Just like the current default, in Firefox).

We can show time. Near the top of the screen, make a small ticker, and mark the horizontal axis with small, vertical ticks: by clocktime, at distant regular intervals, and with icons at every change in activity.

We can show link structure. Connect every parent by an arrow to their children.

We can show relatedness. If two tabs share a domain, if they commonly are switched between, or if they share a large amount of semantic content, draw a faint line between them, to be highlighted when the tab is selected. In this way, we can automatically cluster groups of tabs used for a shared task or activity, and remind the user of tabs habitually used together.

We can show history. Turn the ticker at the top into a lifestream. At each tick, denote the activity by a little icon. Suppose you’ve done a bunch of typing: this is a writing tab, we can represent this with a little ‘key’ icon. Suppose instead that you’ve just scrolled and read: show scroll buttons, up and down. Suppose we’re idle: show an ellipsis. Suppose we open a new tab: show a sprout. Suppose we open a tab in the background, creating another branch: show an arrow branching into two.

We can show age. Let the tabs fade with disuse, as in aging tabs.

We can show status. Make the title of as yet unviewed tabs blue, as in unvisited hyperlinks. Make the title of visited tabs purple. And instead of wiping closed tabs off the display, make the titles brown, and let them inhabit a ‘history gutter’ nestled quietly at the bottom of the screen — to view it more fully, pull-up. when a tab is closed, maintain the arrows, connected to parents and children, but fade them so that they do not distract. By keeping closed tabs accessible, we seamlessly integrate browser history with the tab display, enabling browsers to enhance our memory still further.

Finally, we can show priority. Let the vertical axis represent priority. Higher implies more pressing. Priority can be set automatically: Age lowers priority. Activity raises it. Or you can set it manually. You can drag each tab along the vertical axis to set the priority, or you can strike a number, to alter the priority of the tab currently viewed, or otherwise selected. We can even use a hybrid approach: after a while, an algorithm harness the implicit, ambient information from our browser use, to learn which sites, keywords, and activities you consider high priority, and set priority for every other site you visit accordingly.⁵

To make it easier to set the priority for large groups of tabs, the priority of related tabs, for example, parents and children, influence each other. This implies that, while raising the priority of one tab, the arrows connecting parents and children pull the related tabs up elastically. We can also uncover tab relatedness by whether they share a domain, or if we would like to get really fancy, we could even link tabs by shared usage of ‘statistically improbable phrases’, as Amazon might.

Navigation

With the tab display active, we can quickly type to find the tabs we want. Type ‘wiki’, and all the tabs matching ‘wiki’ are shown, filtering the others out, which fade away. Hit left or right to progress through the history of open tabs: in the same order as is currently used by Firefox. Hit up (or enter), and we switch to the the highest priority tab (that isn’t being currently viewed) matching the filter we typed. Hit down, and we instead decrease priority, stepwise.⁶ It’s like Tabhunter, but using less keystrokes.

The labs team has already come up with a decent navigation system. They suggest that we put navigation in the Awesome Bar. If someone goes to the Awesome Bar and types a pattern that matches an open tab, pressing enter will take them to it, while pressing option enter will open a new tab.

I worry about this a bit. As much as I like the Awesome Bar, keeping focus on it is modal. And you need to select it (ctrl-L, or a mouse click), and then type in the name, making it a bit more complicated.

Also, it messes with important prior behavior. Most people will expect to go to somewhere on the current tab when they hit enter on the awesome bar. Changing this behavior might confuse users, conflicting with previous program models, doing so in a way that does not make evident that program behavior has changed.

Finally, compared to the approach I describe above, it simply doesn’t show as much information. It’s not as useful as it could be (note: see the mozilla labs wikipage on visual navigation for more ideas.)

Status

Where might you be able to download this? You can’t, yet. It is, for now, just a twinkle in my eye. But we’re on the cusp of something. The Mozilla team is just now in the process of deciding what new tabbed browsing features they want to build into Firefox 3.1, and are soliciting ideas. If you like this concept, or think, at least, that some of the ideas are worth considering, or if you have your own ideas, please, get involved in the conversation!

Also, if you’re interested in helping to do some mockups or some Firefox extension coding, please let me know (email me at daniellefong at daniellefong dot com). It will stay a small, open, simple project; this won’t be my fulltime thing. But for me, at least, I cannot ignore the chance we have to deliver ourselves from cognitive overload. To free us to explore the web more fully. To enhance tools for thought, and thus enhance thought itself. As whimsical as that might sound, this hope shines far too bright for me to simply let go.

Notes:

[1] – In other words, without crashing the browser. Opera was much better in this regard than Mozilla.
[2] – This actually works with regular expressions too.
[3] – With great power comes great responsibility.
[4] – This was not the only problem. sometimes, I’d see a link, and I’d want to follow it, just a little ways, to see what was there. But if I opened it in the background, I’d have to finish all the other tabs just to get there. Ahh! Instead, I just followed the link without opening a new tab, with the hope that I’d remember to return to the parent page and alt-left backwards. Soon I found the hotkey for flipping to the end of the list (ctrl-9). That helped a bit. I could open a tab, and flip to it in back, though I’d have to use Tabhunter to get back where I started.
[5] – It’s *Xobni for Firefox*! The web is the killer app! (I promised myself I’d never say things like this, but I actually kinda like it.)
[6] – Note that under this key scheme, ctrl-tab doesn’t switch to the next tab like it used to. That would now be done with ctrl-tab-right.

Thanks

to Alex Lang, Nick Pilon, and Joseph Perla for reading drafts of this, Sasha and Patrick from BaseShield, for the encouragement, the Mozilla Team, for running this wonderfully open design process, Blacktree and Humanized, for showing me how good navigation could be, Jenny Boriss, for sparking the tabs discussion, and Joel Muzzerall, for the inspiration.

PS

I’ve given some thought to the name. I, personally, like FoxGlide, which also exhibits the wonderful feature of my having parked it.

Please Leave Your Comments!

This post has sparked some interesting on Hacker News. What do you think? Does the design pass the Phone Test? Are the angles I haven’t considered? Are like features you’d like to see?