Metaphor on the brain: Where else would it be

Related posts:


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

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?”

David Malouf

Professor of Interaction Design at the Savannah College of Art and Design

11 comments on this article

  1. I think there’s something else at work here. The trend of ever-richer in-browser experiences makes a pretty precarious assumption.

    The assumption is that I, The User of the Future™, have the time, patience and cognitive wherewithal to wrangle your (the Royal Your) organization’s peculiar treatment of the same fundamental concepts of navigating information. Moreover, in order to do so, I often have to execute your code — and do so on faith that it doesn’t send my CPU spinning or beam my credit card number across the planet. Why would I bother subjecting myself to any of this if I could have my own familiar front-end onto it?

    HTTP (and presumably what will supersede it) is fundamentally a data storage and retrieval protocol. The hypertext that traverses it is steadily improving in semantic quality. The advent of XML, feeds and RDF make it possible to retrieve just the data, ma’am. Web application designers are reverting to simple REST APIs, which are handily stateless, as Field-ng intended. When they realize that you can use content negotiation to overlap the APIs on top of the regular content, we’ll be looking at a Data Web Singularity.

    But we don’t have to wait for such things. What if, for example, you published a Google sitemap, and my browser polled for and pre-fetched it, and then offered me my own navigation? Or if you used microformats or RDFa, I could look at your page without looking at your page. Or if you didn’t, I could scrape it anyway.

    (As an aside, I remember when I was doing web design back in 2000, the first time I noticed the use my own CSS stylesheet setting in Netscape 4′s preferences and thought to myself — who would ever want to do that?)

    JJG captured the notion of data portability in some ways with his drag-and-drop data visualizations in Aurora, but still concentrated on the sovereign-window-with-branded-page paradigm more than I expect to see in the future.

  2. chofmann on

    Hey Johnny,

    Great Article, but just to set the record strait it was quattro pro 1.0 for windows that started the wave of tab use for spreadsheets and windows applications…

    From the far away land of 1993 when the desktop was in the middle of a revolution ;-)

    http://findarticles.com/p/articles/mi_m1563/is_n2_v12/ai_13990661/

    “… Quattro Pro provides a new twist on the old concept of working with numbers. Unlike Excel and 1-2-3 for Windows, which organize multiple spreadsheets into multiple display windows, Quattro Pro uses what Borland calls a Notebook metaphor. Individual spreadsheets in a Quattro Pro file are represented by separate tabs, running across the bottom of a stylized Notebook display. Initially marked with single letters (A, B, C, and so forth), the tabs may be assigned representative names. Quattro Pro’s Notebook metaphor results in a display that’s much less cluttered than either the Lotus or Excel screen and multiple spreadsheets that are much easier to access on the fly.”

    Right click context menus and ‘object inspection’ were also a big innovations in that quattro pro release. It was an amazing time. Check out the price for those innovations

    LIST PRICE: $495
    AVERAGE STREET PRICE: $305

    Shortly after that Microsoft did tabs, drove the price of spreadsheet apps to $15 a box, integrated it into the office suite and killed off Borland.

    Its good to see we are on the path to reexamine tabs a meer 16 years later. Your three points of advice on what to look at next are a good direction. If you ask a new or novice user to describe describe the web you get amazing and sometimes bizzare answers. I would venture to say average person has trouble understanding the connection and relationship between their browser application, internet service provider, search provider, and websites and web applications. Its all bound up in a hairball to them and what comes out is stuff like “the blue ‘e’ is my internet”, and “if I use firefox will I still be able to able to get to my mail (e.g. webmail)”

    It seem like stuff like that is going to make it hard to get a visualization of “a data delivery system and is a window of a cloud-based computing architecture”

    Is there some general user education needed or can we design something with a metaphor that catches the imagination and helps to explain away the complexity of the web.

    -chofmann

  3. Matt on

    While your analysis and explanations are wonderful, the core issue of what a tab represents (and what it is used for) is a larger part of the issue. Tabs within applications are not solving an application problem, but an operating system problem. With the context of a web browser, tabs are most frequently used as a window organization method. Rather than have 20 browser windows open, the user has one browser window with 20 tabs. The difference between this and an operating systems taskbar (dockbar, or whatever the particular OS happens to call it) is that the web browser has semantic information about what resides in each tab and how that location was reached.

    To properly address the issue, the navigation and usage concepts of the web browser need to be approached not as a collection of distinct, unique locations, but instead as a an organization of document views. I have come up with a few concepts, none of which have been submitted. The issue with each of them (and in my opinion, many of the already submitted concepts) is ease of use and screen real estate. You cannot assume that every user has a widescreen monitor and that every webpage doesn’t fill up the entire window. From a usability perspective, if the “document display” the user is looking for cannot be seen, conceptually, it is gone, lost.

    Users understand that when they want a “new” thing, it will take two clicks. To go to something they already have open, it should be a one click process. Unfortunately (or maybe fortunately), this means an entirely new, completely foreign, metaphor is needed to replace tabs that keeps the same space conservation but is expandable to a reasonable infinity.

  4. chofmann on

    Thinking more about this and your comment:

    > 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.

    You can from that link about the quatto pro 1.0 for windows release, the orginal metaphor was not “tabs”, it was “the note book” metaphor.

    Maybe somewhere along the way we got lost and it became just tabs. A notebook allows the user to do a little work to not only arrange collections of information in 3d (depth), but but by opening the ring binder the pages can be organized under (tab) categories.

    If you take Matts comment above:

    > web browser has semantic information about what resides in
    > each tab and how that location was reached.

    or even the simple notion of a tab listing each domain and on hover you might get a drop down of other pages on that domain you might come up with something interesting.

    A Tabbar looking like

    [google][facebook][linked-in][nytimes]

    and hover over the [google] tab gets any pages or apps that you might have opened within the google.com domain

    [google]
    [gmai]
    [search]
    [docs - budget page I'm working on]

    -chofmann

  5. I still have problem with the very definition of the job to do, when you say : “1. dissect the existing problems” I would prefer that you define the problem to solve. I discussed that on the mozilla forum and I had some answers but maybe you can give me others. For Now I listed three problems : 1/scalability 2/ fast access 3/dealing with webapp and I came up with proposition regarding those.
    I think that one of the best and broad innovation in UI design lately (besides tabs ;) is in the MS ribbon and they did it on a very precise analysis of user behaviors and need, the story of the ribbon is just a delight to read : http://blogs.msdn.com/jensenh/
    And I think that here we try hard to solve a problem that is not very well defined so if you can help me better understand it that would be great. From my perspective I think tabs are great and only needs a few minor tweaks to stay efficient up to 60 ones which is pretty much one can deal with before going crazy. Thanks in advance, yann.

  6. Paul on

    Thought I’d post this here since I can’t be arsed making a mock up and a video(!) etc for the Mozilla Labs thing. The comments here seem fairly switched on so maybe someone else finds these thoughts useful.

    I just read Oliver Reichenstein’s proposal (http://informationarchitects.jp/designing-firefox-32/)
    It does seem to be just a nicer view of bookmarks and history. Maybe if they’re presented better I’d use them more but the two problems I see are: Bookmarks need effort/thought to organise and sites must be important enough to save for later, while History is a mix of sites I’m interested in and others that I was just passing through, ie lots of noise.

    The thing I find useful about tabs is their ‘ad hoc’ nature. I tend to create ad hoc groups of tabs by opening a new browser window for each group. Even my girlfriend has worked out how to do this too. I very rarely would want to save these groups permanently (or bookmark any of the sites). It would be handy to be able get back one of the groups I had open yesterday though.

    The main thing I find annoying about the current mode in browsers is that it’s often hard to quickly find a particular tab once I have lots of them open. The windows task-bar only shows the title of the currently selected tab, and the browser’s horizontal tab-bar means that the page titles get truncated to just the first part (which will usually be common between pages on the same site).

    Being a browser snob I’ve never actually tried IE8 but it sounds like they have taken a step in the right direction, with a method for automatically creating ad hoc tab groups:
    http://blogs.msdn.com/ie/archive/2008/09/30/ie8-tab-grouping.aspx

    I really like the idea, but the implementation (single row of colour-coded tabs!) seems awful.

    What I think would be good is if there was some kind of view in the browser I could use to get a clear map of the groups and tabs I have open, to easily find the page I want to switch to. This might be a full-page view or just a sidebar.

    It’s interesting chofmann’s comment above about how ‘tabs’ became divorced from the notebook metaphor. So now every page is it’s own tab, which would be a strange notebook.

    Maybe the ‘groups’ become the tabs and the individual pages become items in a sidebar list.

    Groups need to be identified somehow. Ideally without me having to manually ‘name’ them. Maybe it could do something clever with the content of the pages in each group, eg pick out shared keywords.

  7. John Light on

    Metaphors can be useful for UI, but they are best left to the user, not the designer. Every metaphor has its limits, and only the person who creates it will be happy with the limits. If I make a methaphor (“This screen looks like a desktop”), I know what the limits of the metaphor are. If the designer makes something look like a desktop, it will work right up to the point where the user’s understanding differs from the designer’s. That may be good enough, but it might not.

    I would rather make a UI that is obvious and intuitive, even if there is no metaphor to describe it. I believe this is best done by providing a UI that draws on our precognitive perceptions. That is, it should grab our brains at a level below where metaphor operates. A good example of this is the use of meaningful images. Several early suggestions involve providing arrays of scaled images of web pages. While I think all of them have a long way to go, they have the essential element of being visceral, going right to the bottom of what it means to be human.

  8. Neal Johnson on

    In “More Than Cool Reason: A Field Guide to Poetic Metaphor”, George Lakoff and Mark Turner present a fascinating theoretical model (dubbed “The Great Chain of Being”) explaining what they contend are the regular and predictable mechanisms that define the power and utility of a given metaphor.

    The authors use cross-cultural examples of proverbs to illustrate their model, suggesting that the human cognitive experience of creating, learning, and using poetic metaphor is universal.

    Highly recommended to anyone looking for a theoretical model for analyzing how well a metaphor is likely to function when unleashed on the world as a teaching tools, or even a bit of software/hardware interaction.

  9. Pingback: Brad’s Ramblings » Links for 5/25 - 5/29

  10. Pingback: Anonymous

  11. Pingback: quattro pro