Archive for June, 2008

Is visual navigation ahead for Firefox?

The release of Firefox 3 has happened, and there was much rejoicing. And now, our sights are set for Firefox 3.1 and beyond.

As I wrote in a previous post, a lot of people’s sights are on better ways to incorporate visual navigation into Firefox (see posts from Madhava, Aza, Bryan, and Andy.)

Some ways of incorporating visual navigation are relatively minor and would actually bring more consistency to the Firefox interface, allowing the same navigation for tabs as already exist for bookmarks and tags. Two of these are:

  1. Awesomebar results giving indication if an item is already opened in a tab (see Madhava’s post )
  2. Tabs shown in the sidebar, and thus easily scanned, deleted en masse, and grouped by characteristics such as domain and frequency of visit

Another quick way to add visual navigation to content is to expand tooltips to include information such as thumbnails.

These changes are fairly basic and nondisruptive to the current workflow. However, more substantial ways of browsing content could pay off in increased efficiency online.

In brainstorming what some of these could be, I thought about the drawbacks of the current system of tabbed browsing. One problem is that tabs are displayed linearly, while the tasks they contain can be sprawling and nonlinear. In the following sketch, the user is visiting five domains, but the tab structure gives no visual indication of the link between the tabs other than the favicon and title:

Being able to group open tabs by domain is one way to address this problem. In the following sketch, based on an idea by Jay Sullivan, the user clicks and holds down a tab. This produces a drop-down menu which shows all tabs open for that domain. This interaction mirrors the operating system method of seeing all windows open for a particular application in that application’s menu.

Another way to bring visual navigation to Firefox would be to expand the metaphor of the desktop and bring its interactions into the browser. The current Firefox library is similar to an OS file directory, but with none of the visual navigation that OSes do well. Allowing the user to navigate their library visually would draw on a familiar metaphor, give visual navigation only when needed, and perhaps ease users into the browser and desktop beginning to merge. Certainly one could imagine dragging a “file” from the Firefox library onto the desktop, turning the item into a web application.

As always, more details are in the wiki and comments are very welcome!

What’s Google doing in Hong Kong?

No really, what are they doing?  I ran into this outside Admiralty MTR station.

Giant Google map pointers in  Hong Kong

Browser Functionality vs. Extensions

It was great to get so much valuable feedback in response to my last post about possible future interactions with tabs.

There was a lot of discussion about the role of browser functionality vs. optional extension functionality.  This is definitely a useful conversation to have, as our notion of what features should be in the browser will certainly change as we redefine what the browser is.  I do think that the extensions that are the most useful to the most people are the ones that eventually should work their way into the browser.

The way I see the browser is the way I see my beloved Honda Civic.  My Honda is not the sexiest car on the road, and it certainly doesn’t come with a ton of complicated features and aesthetic additions.  What it is is a solid and fun car experience for about any user.  And any feature added to a Civic, like seatbelts or a radio, has to pass many tests to be proven right for all drivers before it comes standard.  So one way to look at the incredible work of the Firefox extensions community is as a unique testing-ground for what users actually want the future browser to look like.  The features that are most popular give us a glimpse of how users want their browsing experience to change.  And because there are so many excellent extensions regarding tabs, I take that as a sign that people love their tabs but want them to work a little harder.

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.