Improving tabs

There’s been a lot of recent forum and blog posts on the subject of tabs. Brian Clark’s and Aza Raskin’s posts got me thinking about how tabs are one of the tiny changes that redefined the web browsing experience, but they still have plenty of shortcomings. These shortcomings are primarily in the areas of preview and search, and are exacerbated when people use a superhuman number of tabs at once. The system wasn’t quite designed for this, but if it’s how people work best the system needs to adjust – not the users.

Here’s some problem with the current system:

  • No way to preview content in tabs
  • Current tab disambiguation with favicon and title often identical for many tabs
  • When many tabs are open, most are obscured under excess tab menu. This prevents the user from quickly finding the tab they want and getting a sense of how many tabs they have open (see Aza’s post).
  • No way to detect multiple instances of the same tab.
  • No way to search open tabs textually or visually.
  • No way to tell loading status of tabbed content.

Over the past couple weeks, I’ve been sketching some possible first steps at solutions to these problems.

Prototype 1: Tab preview

The first prototype is for a quick way to preview tabbed content as thumbnails. The user goes to any tab and drags down to see thumbnail previews of the tabs at the top. If the user continues to pull down, he sees thumbnails of previously obscured tabs. If a tab is only partially loaded, this is represented by a semi-transparent loaded bar over the tab.

This addresses the problem of many tabs looking identical by allowing the user to get a quick view of what’s open and what’s loaded.

The user can drag a tab to the left, right, or bottom of the screen to move all of their tab previews.

Sketch 2: Tab Management

These sketches are for a separate “tab management” window, where the user can organize and view tabs visually. They can view open tabs as a grid, a list, or in “scatter,” mode. Scatter mode provides the user with a free-form arrangement of tabs (and possibly history) which they can organize spatially. The user can choose to view their tabs in scatter mode:

  • By site. This groups tabs together by what domain they were reached through. If the user has ten articles open from the New York Times, these will be grouped together with the New York Times homepage being largest.
  • By topic. This groups tabs together by what searches they were accessed through. If the user has performed a Google search on San Francisco restaurants, all tabs resulting from this search are grouped together.
  • By recency & frequency. Using the idea behind the Awesomebar, sites which are visited frequently and recently appear larger in tab view and are thus easier and faster to recognize and click.
  • In freeform.  The user can resize and move tabs, grouping them in whatever way fits with their working model for a project.  They can add labels and fields to help create organizational systems and save their tab configurations for future sessions.

More details and sketches on these prototypes can be found in the wiki.  I’d love to hear thoughts and feedback. These are in no way final solutions, but more of a way to move the discussion forward by addressing specific tab concerns.  So, please feel free to reply to this post or email at jboriss at mozilla dot com.

27 Comments

Chime in Leave a Comment

  1. I like how some of your initial sketches look exactly like my Tab Sidebar extension 🙂
    I’m not sure of the use of categorising a large number of tabs, seems to me that that is more along the lines of bookmarking and tagging.

    Reply to comment by David Townsend:

    Hey Dave –

    I agree that categorizing is for bookmarking and tagging – my thought was that sometimes one might want to move directly from having large amounts of tabs to having large amounts of bookmarks and tags. The use case I envisioned is that temporarily storing a large amount of URLs as an “arrangement” – like a single item – could be useful for projects which require many URLs that you would not bookmark individually to clutter up your bookmarks folders. There’s no current way to do this, so I’d say the use case is new.

    – Boriss

  2. Just as a note – your ideas surely go way further than this – but SeaMonkey implements a tab preview in the tab’s “tooltip” popup panel, i.e. you get a preview image popping up when you point the mouse over a tab and let it there for a short time.
    We experienced thought that this feature (on by default) is a subject of heavy discussions, with one part of users loving it and another hating it.

    Reply to comment by Robert Kaiser:

    Hey Robert –

    I think that SeaMonkey preview is a great idea and a great start. It definitely beats the problem of having to waste time going to tabs to remember what’s in them. I’d be curious to know why the people that hated it did so – maybe because of load time or blocking the content under it?

    – Boriss

  3. possom says:

    I like how your initial sketches look just like my Tab Sidebar extension 🙂
    I’m not sure whether promoting the behaviour of opening masses of tabs and allowing organisition of them is a good thing. Surely it would be better to make it easier to do that sort of thing through bookmarks and tagging?

    Reply to comment by possom:

    Hey possom –

    Your Tab Sidebar extension a good example of adding previews to tabs. Another good one is the web browser Shira.

    I’m not sure what you mean by better and worse as it relates to tabs. Certainly currently the browser experiences performance drawbacks with multiple tabs, but this doesn’t necessarily mean that it’s a bad working model and the browser cannot be improved to keep up. And I agree, this sort of system could definitely work with bookmarks and tabs – perhaps with histories as well.

    – Boriss

  4. Sandy says:

    Thank you for sharing these ideas and giving the community a chance to provide feedback. I’ll warn you right now that I’m pretty opinionated about this topic, so please don’t take my criticism personally. Hopefully you consider it constructive, on the whole.

    Ruthless first impression because I just woke up: extensions like this exist, and most users get along fine without them. Personally, I hated all such extensions except for one which allowed me to hover over a tab and see a small live preview of the content (forget the name, I don’t have it installed right now).

    All of the samples you have demonstrated would slow me down in my day-to-day work. I have a great window manager that would let me do all of the things mentioned above if I only used windows instead of tabs, but I still use tabs and manage it all on my own. The idea in that last sketch seems like total overkill to me, for example.

    As for progress…I can currently see that a tab is still loading via the in-tab throbber. What other progress indication do I need on an average website with an average (fast) internet connection? I don’t care if a site is 25% or 75% done loading, I just care that it’s done or not done.

    Personally, here are features I could use:
    * Ability to tear a tab out into a new window or into another window’s tab group.
    * Ability to interact with tabs in the overflow menu via drag-and-drop and context menus, just like you can when they appear in tab form.
    * Hover over tab to see preview of content (perhaps even with a clever overlay indicating load progress like you’ve drawn). There’s already an extension for this.

    The rest seems highly personal. I have deployed Firefox for hundreds of users including friends and family, and only advanced users use tabs in my experience. Most users are used to window==task, and if you start to add layers to that they feel uncomfortable. Therefore tabs complicate their experience. As for advanced users, they all seem to have their own favorite ways of managing their tabs. Do you really think you will find the One True Way?

    I know my tone is a little harsh here, but I would really hate to see Firefox take more steps into becoming the bloatware browser it was originally intended to save us all from. We have a *very* large and *very* active extension community…it shouldn’t be hard to implement these ideas as extensions and see which (if any) become overwhelmingly popular. I plead with you that they be tried there first, before they are included by default in the browser.

    Reply to comment by Sandy:

    Hey Sandy –

    Thanks very much for the comments – don’t worry, I’m happy to get critical feedback!

    I did want to make clear that these are absolutely not anything as final as proposed Firefox 3.1 features. I’m just sketching possible future interactions based on what some users may find helpful to start the discussion going – and I do think it’s important to even overstep the line of what would be immediately developed during brainstorming.

    Some of the features you mentioned, like tear-off tabs and hover previews, are very good features that could be immediately useful. I’m pretty sure the tear-off tabs feature at least is currently in the works.

    It is true that many users of Firefox don’t use a lot of tabs, and many use none at all. But I’d argue that many of Firefox’s features are this way. I’d be surprised if most users used session restore, live titles, live bookmarks, etc, yet they massively improve the user experience for those that use it. An important distinction is that these kind of features do not get in the way of Firefox’s performance. The browser has to be an excellent experience for an elderly grandfather who never uses more than one window at once and the developer who thoroughly utilizes tabs. When looking at new features, I’m trying to think of developments that cater to the working model of as many users as possible. I do think that a feature such as this should be tested to see if, indeed, it does work with people’s working models. And if it doesn’t, as in your case, it should be easily disabled.

    It’s a very valid point you make that Firefox has a large and active extension community, and many add-ons do address some of the tab-problems I’ve mentioned here. It’s in part the popularity of some of these add-ons that’s encouraged people to begin brainstorming about what future Mozilla releases might do to improve tabs. And it’s an incredible benefit to have this community – by seeing what add-ons are used, it’s possible to even get a sense of what people want and need and see the browser becoming.

    – Boriss

  5. This looks really awesome! One thing I’ve been thinking about in this context is integrating it closely with the history.

    For a lot of sites, it’s you may not care whether you have a tab open currently or not, you just want to get back to the page. Though it would make sense to distinguish that case by e.g. bolding the title, having a thumbnail next to it, etc.

    Reply to comment by Colin:

    Hey Colin –

    I agree – there’s definitely room to integrate history-browsing in a system like this. I’ll be addressing that in future posts. 🙂

    – Boriss

  6. I love the new sketch-style UI for Firefox 4! 🙂

    Seriously, though, some interesting ideas here. I’m particularly intrigued by the automatic scatter-by-site view… Tab previews are nice (and some extensions are already exploring this space), but I think I’d find automatic organization mechanisms much more useful. Without that, it seems like tab management would quickly get bogged down by having to manually sort and arrange things — better to have the browser do that for me.

    Tying frecency to size is also a clever twist. Although, I’d want to see that in action — I’d be a little cautious that the highest-ranked sites are not necessarily the sites I want to most see in a preview. Perhaps it’s due to generic top-level pages (google, BBC, etc) I visit a lot, but only as jumping points to other more-interesting page. For example, I find that the “Most Visited” Smart Bookmark Folder isn’t very useful for me because of this. It’s a bit counter-intuitive.

    Reply to comment by Justin Dolske:

    Hey Justin –

    I agree with automatic organization being more useful, and would imagine this being the much-more-frequent use case. Automatic organization seems like the day-to-day find-tabs-and-see-what’s-open mechanism, whereas free sorting seems like more of a workflow for a particular project. Some examples of these projects could be sorting photos or organizing research.

    That’s a good point about frequency and recency not necessarily being the most important factors for tab view. After all, if a person is in tab-view and looking for a tab, it’s likely that they’re looking for something more obscure and less visited than Gmail. Perhaps other factors, such as how recently a tab has been visited, could also play into how the arrangement is generated.

    – Boriss

  7. bharuch says:

    couple of thoughts.
    1. as for the view under “tab management” where you want frequency and recency … see http://www.marumushi.com/apps/newsmap/newsmap.cfm for an interesting idea (news with most sites reporting it, and the most recent, is larger, and brighter shade).
    2. it be nice to be able to take a tab and start a new window
    3. the “freeform” view where you can group tabs, and label the grouping … very similar to virtual spaces (on the mac) is very cool, and very useful for research stuff (where you might not want to tag each site you visit).
    4. how much (if any) performance hit is there going to be when you go from Left Upper to Right Upper view on your tab preview –> Ie. to make all the preview, and move all the drawn tabs X width lower?

  8. bharuch says:

    btw… what kind of time frame are tab improvements being thought of 1.9.1 or 2.x? because some of the blogs that you linked to are already dated.

    Reply to comment by Bharuch:

    Hey Bharuch –

    Thanks for the feedback. Newsmap is definitely a good example of the “size=importance” representation. Of course, the difference here is that the content is new to the user, to rather than searching for a particular item the users is gaining a sense of what is important through visually scanning and noticing size. A very cool idea.

    Re tearing off tags, I believe that’s in the works.

    Re timeframe, I’d say that these are just sketches and brainstorms for now rather than features targeted at a particular release. Certainly changes this major will happen in Firefox 4, but before then it’s hard to say. Other releases of version 3 might have smaller tab improvements, such as the aforementioned tab tear-off.

    The linked blogs are dated, but I didn’t feel that mattered because they’re part of the backlog of brainstorming that the Mozilla folks always keep in their heads. There’s a large pool of ideas here, bits and pieces of which float into releases at one time or another. Our imaginations are (rightly) bigger than our capacity to develop!

    – Boriss

  9. John says:

    Keep it simple…

  10. Marco says:

    I really like how deep thought is being put into tab management. Keep at it! 🙂

    Personally I never used IE7’s or Opera’s tab preview pages because I didn’t think that the grid layout was intuitive enough to justify opening a whole page where performance penalties may occur, since (in my mind) you’re opening and previewing all of the tabs. It’s too much effort for too little intuitive-ness. I wouldn’t mind that if the layout was indeed intuitive and usable, and the Scatter idea certainly is both.

    That being said, even though I don’t find grid layouts very intuitive, I’d certainly use them if it took little effort to use, and the first prototype fulfills that trait well if you’re just dragging a boundary! Also, if the performance were smooth enough and the layout worked well, I’d jump all over the Scatter view in a *second*!

    I think the grouping feature in the Scatter, list views, etc., may have some really powerful implications, mainly that it may make Firefox a really powerful research tool. In that sense, it may just be me, but the grouping feature may actually feel like feature bloat, if it makes a “humble browser” like Firefox that powerful? I like to think that browsers should simply be browsers, and there shouldn’t be too many extraneous features — ether that, or maybe it’s just the natural “evolution” of web browsers taking place, but either way, I’d think about that.

    Other thoughts:

    “I’m not sure whether promoting the behaviour of opening masses of tabs and allowing organisition of them is a good thing. Surely it would be better to make it easier to do that sort of thing through bookmarks and tagging?” -possom

    I’d circumvent this by putting the bookmarking star button on each tab, themselves, so you can easily bookmark any tab you want as you see it. For scatter, list view groupings, you can even have a big bookmarking star that bookmarks all tabs within the group, and have a specific UI for that. I don’t think it’d be too big of a problem.

    “I know my tone is a little harsh here, but I would really hate to see Firefox take more steps into becoming the bloatware browser it was originally intended to save us all from. […] It shouldn’t be hard to implement these ideas as extensions and see which (if any) become overwhelmingly popular.” -Sandy

    This is a good point. As much as I love the scatter view, it may contribute to feature bloat (though again is this just browser evolution, this feature?) That being said, I think the first prototype as a whole, with the boundary dragging, etc., would be no problem to have by default, and I think it’d be fitting for a Firefox 4, etc., release. I don’t think *that’s* too bloated on its own — I’d think about the second prototype being bloated, but I think the first is okay. 🙂

    Reply to comment by Marko:

    Hey Marko –

    Very good points. Definitely the difference between useful features and creating bloatware is a subtle one – it will take a lot of thought to decide exactly what the browser benefits from incorporating. And a lot of this is making guesses about what the browser is becoming. The browser metaphor today may be like a window looking out onto content, but as the nature of the internet changes the shape of the browser will change too. Perhaps it will become more interactive, as people start calling the internet web 2.0, 3.0, etc.

    – Boriss

  11. Ryan Paul says:

    I think it’s great that people are thinking about ways to making tabbing better. For me, tab previews are completely useless because thumbnails tell me a lot less than the title and favicon. What I find immensely useful is the Tree Style Tab add-on: https://addons.mozilla.org/en-US/firefox/addon/5890

    I’d honestly like to see Firefox tabbing move more in that direction, so that if there are too many tabs horizontally, they will switch to a vertical display with a structured hierarchy and *optional* thumbnails.

  12. funTomas says:

    I’ve tuned my FF2 with Tab Preview extension (http://ted.mielczarek.org/code/mozilla/tabpreview/) and TabMixPlus to achieve most of your points. Simple, isn’t it?

  13. monk.e.boy says:

    Haha, I love the *change* *fear!!!!!* comments. I don’t use 1,000 tabs at the same time, so I don’t think this is a problem. But I can see that people who do have lots of tabs open have problems.

    I’ve always thought FF is becomming more like a window manager. Why not (for windows) just put the ‘tabs’ at the bottom and colour them blue (like the task bar) Move the menu down there and put all the sub menu items into a nice friendly ‘start’ menu 😉

    Then fullscreen mode would be really cool.

    Adobe Air and FF Prism could install into this menu under ‘programs’…. Add virtual desktops.

    Actually virtual desktops inside FF isn’t a bad idea.

    Anyway, hasn’t this GUI already been thought out?

    monk.e.boy

  14. MarkC says:

    The tab management screens look similar to my own submission to Aza’s competition:

    http://wiki.mozilla.org/index.php?title=Markc:Firefox_Tab_Mockups

    Your mockups take things further in some areas, with some very nice ideas.

  15. mmc says:

    One thing I sometimes miss is the possibility of having two tabs open at the same time in the same window, split vertically or horizontally (like you can do in emacs).

  16. Joe Clark says:

    There isn’t a “tab preview page” in Opera. You can select an option to show thumbnails when you hover over a tab. Also, Opera lets you duplicate a tab (a useful feature).

  17. Jose says:

    On Windows I like applications which use child windows within them because I can quickly navigate from application to application(alt tab) and from within applications(control tab). I would like to see more Windows-like child window behavior of the firefox tabs(I would like to be able to arrange and resize tabs within one(or more^^) firefox application window(or each open firefox window).
    The advantage I get out of using this child window behavior with other programs is utilizing all the space of the window while focusing in on select portions of the content of those child windows without them being of negligible size.
    An additional area of improvement would be to have the ability to manipulate the focus area of single tabs. For instance, if I were to log into my e-mail and read a letter, I would like to maximize the space occupied by the letter I am reading while pushing away(or out of view) the remaining portion of that Web page(I believe Adobe reader exhibits similar zoom aspects.)

  18. Fantastic informations the following ! Did you search for and find these on your own or is there a source hyperlink I can go to check out out other folks?

  19. LandisTwo says:

    how did we go from ‘improving tabs’ to a couple of coders deciding to drop the feature altogether?
    in 21.0a2, a couple of coders dropped ‘Tab.Preview’ because it was stray code.. Why and How do We get it back. You talk a lot here, about productivity studies, yet one of the most productive features (Tab.Preview) has just been ripped away.
    see bugzilla report: https://bugzilla.mozilla.org/show_bug.cgi?id=670684

    Please do what you can to get this feature back. It is so much more productive than tab.list, allowing reorganization and all those fancy terms you’ve used in reference to user studies on usability… Thanks.

    Спасибо,
    Landis.

Trackbacks for this post

  1. Browser Functionality vs. Extensions « Boriss’ Blog
  2. Aza’s Thoughts » Blog Archive » Firefox Mobile Concept Video
  3. Is visual navigation ahead for Firefox? « Boriss’ Blog
  4. Dubroy.com/blog - The future of tabbed browsing
  5. Tabs Want to be Seen « Boriss’ Blog
  6. Aza’s Thoughts » Firefox 3.1 Proposal: Tabs in the Awesome Bar
  7. Enhance Multitasking to Improve Our Minds. « Essays by Danielle Fong
  8. Toolness » Blog Archive » Tab Navigation: Tradeoffs

Comments are now closed for this article.