As many may know, language is really important to me. I’m one of the first people to jump into any mud wrestling battle drenched in “defining the damn thing”. I love semantics, or more importantly I treasure appropriate semantics. So to support the design challenge, I thought I’d write about metaphors, and more specifically about the metaphor we are so happy to be-friend: the tab.

Lately, metaphors have been growing on my mind like ivy on the side of a Boston rowhouse. First, there is my recent talk on Foundations of Interaction Design that I did in Vancouver in February. But if that wasn’t good enough I did a cut-down version of it in Washington, DC for ReDUX DC. Then I’m in the midst of teaching a Perception & Cognition class as part of my job at the Savannah College of Art & Design where my colleague and co-teacher for the class, Bob Fee, reminded me so poignantly that not only is metaphor in everything digital but a good 90% of our language structure and semantics is rooted in metaphor. Finally, this fine publication along with the organization I helped to establish, IxDA, partnered with Mozilla Labs to create a summer Design Challenge whose topic is tabs in a browser.

Why metaphors at all?

Before we can answer why, we have to answer what. Well, we all took grammar in school and were told that a metaphor is an analogy that unlike a simile does not use the words like or as to declare a relationship.

My life is an adventure whose journey passes through wonders ridiculous and sublime.

Microsoft Bob, the worst metaphor OS ever

Of course, life is not an adventure, but at times has the feel of an adventure. As one of my students stated earlier this week, by creating the analogy without a prefix of like or as it is reinforcing the analogy as a truism which can’t be easily rebutted.

But why? Why do we need metaphors? What value do they add? The answer is quite simple. There is a density of complexity in the world around us. Analogies by themselves often create mental maps between intangible concepts that are difficult for us to understand. And tangible entities that have properties that we can associate between them, thus creating a definitional relationship, which we can use to aid our comprehension of the intangible concept.

A great example is how we talk about expenses: we say they are either rising or falling. Value or Expenses are neither additive or reductive. They just are. We give them a sense of size so that we can relate it to the experience of stacking coins which can go up as there is more, but prices, expenses, value in and of itself has no physical embodiment especially none that relates to altitude. Time is also very tied to metaphor. Does time really “pass”? I don’t think so. Nor does it fly or slow down.

In the digital world the metaphors around us are easier to see. Trashcans, files, folders, paths, etc. And our new favorite metaphor The Tab.

Tabs have existed in user interfaces for quite some time. With files & folders already among even the oldest WIMP (Windows Icons Menus Pointers) operating systems, it only makes sense to continue the office supply metaphor. I don’t know when they first entered the world of the GUI, but I remember them in the world of Windows settings dialogs as a way of presenting collections of options in usually arbitrary categories

I think the next major use of tabs was in the web world. Not in the browser (other than in dialogs) but in web sites themselves. The #1 prognosticator of the use of tabs as a form of web navigation was Amazon.com. They were also the first to realize and deal with the fact that tabs as a navigation/organizing form does not scale.

Older than Amazon but oft forgotten is that Microsoft Excel was using tabs as the means for navigating worksheets for quite some time.It was the main example of using tabs as a means of organizing separate work environments with minimal relationship within a single window instance. Following on its coat tails rather quickly was Visio (before its acquisition by Microsoft and after).  The assumption by both these applications was that there was no need for scaling up to lots & lots of tabs (just like Amazon).

Other applications like Fireworks and Dreamweaver then by Macromedia started using the tab metaphor to manage multiple canvases within the same windowing environment as well. And around this same time tabs were introduced through Netscape’s Navigator and then Mozilla’s Firefox to the browser world (now a de facto standard of all browsers).

The Challenge

The Mozilla Design Challenge for this summer put forward the following.
First the design challenge question:

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

Then this explanation:
“Tabs worked well on slow machines on a thin Internet, where ten browser sessions were “many browser sessions”. Today, 20+ parallel sessions are quite common; the browser is more of an operating system than a data display application; we use it to manage the web as a shared hard drive. However, if you have more than seven or eight tabs open they become pretty much useless. And tabs don’t work well if you use them with heterogeneous information. They’re a good solution to keep the screen tidy for the moment. And that’s just what they should continue doing.”

And they are correct. Tabs for many users are broken. A quick poll of my class demonstrated that they are indeed not fulfilling the user requirements mostly in terms of scalability, but also not in terms of mapping the need of organizing their browsing experience (as it is done today) compared to that of tomorrow. And this is where it gets interesting. The line “… the browser is more of an operating system than a data display application; …” complicates things tremendously. It implies something greater that needs to be done which contradicts the seemingly limited question of the challenge itself. I don’t say this to be critical, but to guide (and I will not be a judge in this competition) participants that maybe “redesigning tabs” is not really the right question, just like “designing a bridge” is not always the answer to “Design me a bridge”. Sometimes you just need to design the appropriate means of getting from point A to point B across water or air.

Dissecting the metaphor

All metaphors should have a solid analog in the physical or tangible universe and Tabs is clearly in that category. When a metaphor fails, you should go back to its analog. Does it fail in that space? If it does maybe it means the metaphor itself is inappropriate. If it doesn’t, you need to understand what about its physical incarnation gives it advantages over its virtual.

In the case of Tabs there is one piece of the dynamic that must be understood when doing a proper analysis. This is that Tabs in the real world have depth. This means they can scale a lot more than the 2D virtual version.  This depth allows for stacking which means the only limitation becomes not the tabs but the depth of the draw in relation to the thickness of the content being held within the tabs themselves. And before anyone goes out there and build 3D tabs, please realize that 2D UI controls in 3D interfaces are not usable to the mainstream, at least not w/o major advancements in the UI control methods.

My advice

Continue doing three exercises:

1. dissect the existing problems;
2. explore what it means to transition from data delivery system to window of a cloud-based computing architecture;
3. understand not the usability of tabs, but rather the orientation of human needs towards organizing multi-tasking, and cross-referencing.

I hope other smart people will offer their advice for participants in the comments below.

I’d like to close, though, with the first part of Adaptive Path’s Aurora concept browser for inspiration:

This article is written as part of the Mozilla Design Labs Challenge: Summer 09. For this Design Challenge we are focusing on finding creative solutions to the question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”

Mozilla Labs Concept Series, together with IxDA and your very own Johnny Holland, have launched the second in their series of Design Challenges. The Summer ’09 challenge – Reinventing Tabs in the Browser – closes on June 21st.

About the Design Challenge

The Design Challenge is a series of events to encourage innovation, and experimentation in user interface design for the Web. The aim is to provoke thought, facilitate discussion, and inspire future design directions for Firefox, the Mozilla project, and the Open Web as a whole.

Design Challenge: Summer 09

For this Design Challenge Mozilla Labs decided to team up with IxDA, a network dedicated to the professional practice of Interaction Design, and Johnny Holland (of which we’re really proud). Each one of us will provide two panelists and we’ll also be available for help (via @ixda or @johnnyholland). During the challenge Johnny will provide the teams/designers with inspiring articles related to the subject. In this Summer 09 challenge we are focusing on finding creative solutions to the question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”

Tabs worked well on slow machines on a thin Internet, where ten browser sessions were “many browser sessions”. Today, 20+ parallel sessions are quite common; the browser is more of an operating system than a data display application; we use it to manage the web as a shared hard drive.

However, if you have more than seven or eight tabs open they become pretty much useless. And tabs don’t work well if you use them with heterogeneous information. They’re a good solution to keep the screen tidy for the moment. And that’s just what they should continue doing.

So why are you still here? As Dan Saffer urged us: don’t wait for permission and face the challenge.