Tabs, tabs, tabs

May 1, 2010

Choosing the web browser as the application for most of your daily tasks means that it better well be usable. In my case that primarily means dealing with lots of tabs. So it happens that much of the time I’m spending hacking Firefox is on improving the tab story.

Lazy tab loading FTW

A few months ago I was fed up with the long (re)start times of a tab encumbered Firefox and came up with BarTab, a Firefox add-on that changes tab loading behaviour so that they’re loaded only when they’re accessed. As I wrote in a blog post then, it was initially intended for tab addicts like myself, but thanks to lots of feedback from all kinds of users — tab addicts and novices alike — BarTab has continually improved to serve related use cases as well.

Firefox after a restart. The three tabs on the left haven't been loaded yet, hence their dim appearance.

I’m really overwhelmed by BarTab’s popularity. It’s been reviewed by various online journals such as LifeHacker, scrutinized for its memory and CPU cycle conserving powers, featured on Rock Your Firefox and suggested for integration into Firefox proper. That’s a steep career for an add-on that’s barely three months old!

Making bookmarks obsolete

On the other hand, three months was enough time to take a step back, observe my own interaction with the browser and analyze the user feedback. I think there’s some real usability potential in lazy tab loading.

Novice users typically don’t keep a lot of open tabs. What many of them do is bookmark regularly visited sites. This behaviour is encouraged by the bookmark toolbar being visible by default in Firefox. However, with bookmark-related UI elements in the location bar, a toolbar, the sidebar, and the menubar, I’m sure you’ll agree that the usability of the current implementation could definitely be improved. Or in the words of a Reddit user:

“It’s like someone taped a bunch of cats together.”

I would even go as far as challenging the whole concept of bookmarks. I think they require too much user interaction. Tabs, on the other hand, are easy to open, close and discover. They’re a reasonably simple concept and one that’s part of the browser already anyway. When the brower supports lazy-loading tabs via a BarTab-like mechanism, tabs can essentially serve as bookmark substitutes. You simply remember a site by keeping its tab open. The difference to bookmarks is that you don’t need to do anything to “bookmark” them. In fact, you have to do one thing less: close them. Memory wastage won’t even be an issue with smart unloading. BarTab already supports this, albeit in a crude manner.

Improving tab discoverability

Eradicating bookmarks in favour of tabs will, at least to a certain degree, make everybody a “tab addict.” This has a few scalability implications. There’s of course the challenge of making the tab mechanism itself scale to hundreds, possibly thousands of tabs. That certainly is a tricky one to say the least, but I’ll leave that aside for now. Another real issue is the tab UI.

First there’s the tab arrangement. There are very good reasons for having a vertical arrangement to the side of the browsing window. Most computers have widescreen displays these days, so vertical screen real estate is more valuable than horizontal one. More to the point, a vertical arrangement provides more space for more tabs, so it scales better to a higher number of tabs. When I maximize Firefox on my laptop, I can see about 14 tabs in a horizontal and 40 in a vertical arrangement. That’s a factor of about 3 or half an order of magnitude more.

About 14 tabs are visible in the horizontal tab bar.

With a vertical tab arrangement one can overlook about 40 tabs.

Of course not everybody needs to or wants to see that many tabs. The novice users just have a few sites they visit regularly. In this case, one could still make good use of all that vertical space, for instance by showing thumbnails for each site. This scales well even to tens of tabs and helps users visually recognize their sites.

But even tab addicts might be interested just seeing a selection of all tabs available. The current tool of choice here is Tree Style Tab. It not only displays your tabs vertically, it also allows you to arrange them in arbitrary trees. In addition to that it has about a million other features. Don’t get me wrong, it’s a fabulous and brilliant add-on, but I think it’s a bit too complicated. And the complication comes at a price: Yes, thanks to BarTab restarting Firefox with about 100 tabs is quite fast — until you enable Tree Style Tab and have it restore your tree hierarchy.

This is why I’ve started work on Vertical Tabs (code on GitHub). Its proposed feature set is simple and much constrained: arrange tabs vertically in such a way that looks native on all platforms and allow grouping of tabs. In a second iteration there might be room for some additional group features such as previews and automatic unloading of tabs (via BarTab) when groups are collapsed. But all in all I’d like to keep it simple, fast and open to as many types of users as possible.

Tabs arranged with Tree Style Tab. A bit too much structure, methinks.

Tabs arranged in groups with Vertical Tabs.

Outlook to history

To sum up, a simple experiment with tabs has shown that the browser UI and is concepts can yet be improved. Merging tabs with bookmarks to a unified concept, both in terms of the UI as well as the underlying mechanics, is without doubt a challenge. But conceptually I think it makes a lot of sense.

What’s more, this way tabs become invariably linked to the browsing history. They essentially represent an open window or link to a certain item in that history. A loaded tab is an active link, an unloaded tab is a inactive link that just happens to be represented in the UI as a tab.

This, no doubt, should make us think about how to represent the browsing history as a whole in the UI. Of course the browsing history is riddled with information that you’re normally not interested in, so you need some sort of filter. This is what the tab bar could eventually become: a filered view on your browsing history.

16 Responses to “Tabs, tabs, tabs”

  1. Patrick Says:

    Hi,

    I’m an avid Tree Style Tab user and can’t think of ever returning to a horizontal tab bar.

    After reading your post I installed your add on into the latest Firefox nightly build but unfortunately it doesn’t work, the tab bar is still on top.

    I hope you’re fixing this issue soon as I really like to test your implementation of a vertical tab bar.

    Greetings


  2. I agree with most (if not all) of your points above, but vertical tabs have always bothered me. I think it’s mostly just a styling issue, but I find it difficult to read web pages when there’s something on the left inside the window. I’ve never kept a sidebar open. I think Preview.app’s approach of a right hand side, visually distinct “drawer” may be more appropriate.

    But even then, I actually tend to have only four or five tabs open, in which case top tabs (ala Chrome) seem to work best for me. I don’t use bookmarks either (I use Google or address bar history to find things I’ve come across previously). Sometimes, I’ll open a new window to group together a few extra tabs if I’m doing something unique, but that’s uncommon.

    Martin


  3. Where I found tree style tabs really useful was in demoing functionality in client meetings. I open up a tab for each ‘story’ ticket then open sub tabs for related mock-ups and the demo site.

    I agree that the excessive nesting you tend to get with tree style tabs is annoying, but I would want an easy way to open tabs in new groups. I don’t have FF 3.7 installed, so I’ll just hand wave a bit, but I think the right approach might be something along the lines of:

    shift-middle-click (open link in new group): Opens a new tab as part of a new group, the new group uses the title of the tab for its title.

    middle-click (open link in new tab): On a tab within a group, open the new tab within the group.

    • philikon Says:

      I agree that easy ways to do grouping are absolutely necessary. There will definitely be a context menu item along the lines of “Open in new group” that could also be bound to some modifier key.

      Vertical Tabs is still in its early stages. Suggestions like these (as long as they’re not too radical) are very much welcome.

  4. romanofski Says:

    I’ve seen a lot of new users who rather prefer to browse sequentially, rather than browsing simultaneously with a lot of tabs. I think, those users are more like “reading” the web in the way they browse.

    Tabs are rather technical and remind you more of a filing cabinet.

    • philikon Says:

      I’m not so sure I agree. If tabs are “rather technical”, bookmarks are *extremely* technical, and a lot of novice users love their bookmarks. I think it’s the distinction between tabs and bookmarks (and history) that’s the technical bit users don’t care about. But in the end they all represent sites that the user has visited before and may want to see again.

      It really boils down to better UX and UI. BarTab is a first step in terms of UX, the thumbnails I mentioned may be a good step in terms of a UI for novice users.

  5. Gurtz Says:

    I completely agree with you! In fact, it amazes me that, given how long browsers have been around, it has taken so long for someone to propose the merging of tabs and bookmarks into one unified concept. It makes perfect sense!

    I have always been frustrated by bookmarks. (1) it takes a few annoying steps to create a bookmark (which usually means I avoid doing so), (2) once a bookmark is created, it takes a few annoying steps to get rid of it when it is no longer needed (so it usually just stay around forever), (3) bookmarks get forgotten because they’re not easily visible, (4) and so on…

    Tabs solve all of these issues: As long as I am interested in a site or page, it is visible. When I no longer need it, I close it and it’s gone. The only downsides are memory and CPU resource utilization (which you have solved with BarTab🙂, and organization/grouping (which you seem to be working on with your vertical tab manager). With those two issues solved, bookmarks are completely obsolete.

    Keep up the great work!

  6. aleth Says:

    Thinking some more… how about this for a classification?

    – A history item is transient (last n days).

    – A bookmark is a history item that is persistent and tagged (either minimally by the ‘star’, or more explicitly by comments or tags. Folders are secretly just tags.).

    – A tab is a bookmark that is tagged as “current” and therefore visibly “stays present” until this tag is removed.

    • aleth Says:

      Since my initial comment seems to have been lost, I thought I’d restate that while I think making bookmarks and tabs more seamless is a great idea, I feel there is a distinction in usage (at least for me). Bookmarks are archival and should be out-of-sight. You bookmark something so you can forget about it. Hence search is key (this could be much better than it is at present). Tabs have more presence – you can have a tab open partly as a reminder to come back to it.

      I agree that the relative weighting in Firefox seems to be wrong. There is a lot of accumulated crud around bookmarks, while tabs are really a key but underdeveloped part of the workspace. Vertical tabs with grouping seem like an excellent idea!

      Another way of putting this would be to suggest that maybe what you are aiming at is more removing the distinction between tabs and history, than between tabs and bookmarks?

  7. e-head Says:

    Do you think this extension is ready to run on anything other than 3.7a5?

    I have the latest stable 3.6 version and would love to try this out.

    • philikon Says:

      I’ve just released VerticalTabs 0.4. It requires Firefox 4.0 beta 1. It does not or ever will work on Firefox 3.6, sorry.

  8. Robin Says:

    Hi philikon,

    I love the concept, that’s exactly the way I like to browse, always having hundreds of tabs open.
    I was using BarTab (thank you !) and Tree Style Tabs but Tree Style Tabs is indeed to slow so I switched to trying Vertical tabs.

    I would like to report some bugs (0.5):
    – When i try to close the tab that is currently open, it doesn’t close it just switches to the first tab in the list.
    – Sometimes the tab close button (X) does show only on the current tab but not on any other.
    – After resuming windows from hibernation, I lost all my tab groups (this was on 0.4, didn’t try on 0.5)

    Hope this will help you develop this amazing plugin !

  9. Noxchi Wolf Says:

    Bartab is The Best Addons For Firefox at all !

    it’s Save a lot a lot of My Time !

    But there is a small problem with browsing using Multi Windows …

    When i tray to Drag a tab from Window to another on the tab Become Without Title !

    stay like this ( Loading…)

    Hope to find Fix for this issue in the next Version of Bartab

    thanks a lot and sorry for My Bad English😦

  10. py Says:

    I’m a tab addict.
    I’m waiting for such feature since a soooo long time. (I used to use Opera since a long time, because it was the only browser to support browsing sessions).

    Then I switched since 2 years to Firefox, because there does exists nice (imho. better) session manager.

    But I had always had hard times with memory consumption, and tab organisation. I’m really fanatic of what is happening in Firefox 4 with panorama and sync. as it really fills an existing gap!

    How can I support your work? How can I thank you for that? (I’m a desktop application software developer and webmaster)

    Best regards from France,


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: