Firefox3.1/themes/visual navigation

Introduction

In Firefox 3.0, managing content such as bookmarks, tabs, and history is very limited. While the awesome bar came a long way in improving targeted search for a particular item, browse-based interactions for bookmarks, history, and tabs is still missing. The only way to really "browse" this content is either by using the library, which is truly on an OS-based file management system, or by using tabs. Both of these systems do not allow users to preview, search, and navigate content visually. The library system only provides text descriptions and favicons. Similarly, tabbed content only shows a favicon and part of the title, and beyond a handful of tabs the rest are obscured in an overflow dropdown menu. This system makes searching for a particular item and browsing content difficult.

There have been many add-ons and unrelated programs which have experimented with novels ways to browse content. Among these are:

• Spacetime: Visual 3D search for Yahoo! Images and Google Images, displays in visual "stacks"
• Live Lab's Seadragon (ZUI): Introduces navigation based on extreme zooming. Content is laid out and zooming into an area brings you to that content. Zooming in to specific area on a page opens up new content.
• Bumptop: "Realistic" desktop with physics model so items can be tossed, stacked, shuffled around like weighted objects
• PicLens: Firefox extensions which presents sites and images as a 3D wall in space, can sort objects by a search query
• Thumbstrips: Firefox extension which displays previews of open tabs as strip of thumbnails which can be hidden
• Flock's Media Bar: a social networking-focused browser built on the Firefox codebase, where media is browsable by a preview bar at the top of the window
• Pogo: At&t's not-yet-released 3D spacey browser, with files fading off into the background in fish-eyed 3D stacks
• Opera and IE: Pages visible as a grid of thumbnails

While many of these interactions are interesting and novel, they may not be the best features to come standard with Firefox. For instance, PicLens is an interesting way to browse content and many Firefox users have it as an add-on, but creating something this CPU-intensive as part of the browser would not likely serve the needs of many users.

I've been doing some sketches and thinking about what kinds of features related to previewing and searching content may make sense for the next version of Firefox. I've taken the sketches that I feel have the most potential and grouped them into three categories, based on how easy they might be to implement and how big a change they will cause.

Evaluation for 3.1:

• Canvas3d is available
• Problems storing / retrieving image data quickly enough
• Needs immediate consultation with the platform team
• potentially low benefit (don't use coverflow, do use grid view)
• Seems like rich ground, might need a bit more exploration
• Smaller change & implementation (see below) may be appropriate for 3.1, while more major changes may need to wait until 4.0
• Many methods of visual navigation are already available as addons

Smaller Change & Implementation

These are subtle changes to the existing UI that could make navigating content easier and more efficient.

Tab Icons in Awesomebar

Currently, the awesomebar displays an icon to show the user that an awesomebar result is a favorite or a tag, but it gives no indication if an awesomebar result is open in another tab. Showing open tabs here not only is consistent with the current UI, but also helps the problem of accidentally opening duplicates of the same tab. By alerting the user of open tabs, the user can choose to either navigate to that tab or create a new instance of the URL.

Tab List in Sidebar

This isn't so much an idea for a design as much as a move to make the Firefox interface more intuitive. Currently history and bookmarks can be shown in the sidebar, but not tabs.

By grouping tabs by domain in the list, users can more easily get a sense of where their tabs are and what tasks they are in the middle of. An important features of this arrangement would be to close a group of tabs by domain. For example, if someone is finished with their online banking, they can close a group of Bank of America tabs rather than hunt around for the individual tabs and windows.

Thumbnail Previews in Tooltips

This small and relatively low CPU-draining feature would give the user an indication of what item they are nagivating to. This interaction is already used online in several addons to preview where a link will go, prevent rick rolling.

This could be used in the library:

Over a tab:

In the sidebar:

Or in the bookmarks menu:

Mid-level Change & Implementation

Dropdown Domain-Specific Menus from Tabs

A common problem in the current Firefox tab menu is that the user may be performing many different tasks in a single window over many tabs. These tabs are not currently grouped by domain nor tasks, but are layed out linearly in the order they were created. This makes completing a task which requires many tabs difficult and forces the user to hunt for the tabs they need.

In the above example, the user is engaged in multiple tasks in multiple domains, but the interface gives no clear affordance of this.

Being able to group open tabs by domain is one way to address this problem. In this sketch, which came out of a conversation with 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 interactions mirrors the operating system method of seeing all windows open for a particular application in that application's menu.

Pull-down Thumbnail Grid

This is a 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.

This is similar to the interaction in Thumbstrips, but a lighter-weight solution that's easy to pull out and in. A point Aza made is that this is not an elegant solution, but possibly more of a halfway fix, since obscuring your view certainly does not allow the user to navigate and preview at the same time.

Adjustable Workspace

This is a possible interaction for almost any of these sketches. It's shown here with the pull-down thumbnail grid, but could just as easily work by selecting two list items in the tab list sidebar.

The user wants to create a spreadsheet based on data from an article. So, he needs his workspace to have both a spreadsheet and an article in view. He clicks the first tab he wants to be open and then the second. He opens them both by double clicking.

Both tabs open next to each other, providing a workspace for the user to utilize both windows. The user can change the window layout to edit his workspace

Ability to View Library Content as Folders and Thumbnails

This system would function very similarly to a current operating system: folders of content would be displayed in a grid as folders and URLs would be given thumbnail previews. Internet Explorer and Opera have similar systems of viewing tabs as thumbnail grids, though they don't so far as to use folders for directories.

Larger Change & Implementation

Separate "Tab Management Window"

As described in the previous wiki, this tab management window would work like a more visual version of the current Library. 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.

History/Tab Tree

Another way to show content not as individual items but as steps in longer navigation tasks is by visually linking them. In these sketches, the navigation the user has taken is represented in a tree structure; whenever the user clicks a link, a branch is drawn from the location they were at to the one they are navigating to. This makes it easy to see the path the user has taken.

Time-Based View

An issue with the current tab system is that many tabs can be opened, ignored, and forgotten about over time, silently eating up CPU in the background. With a timed interface, the user can see when they viewed which websites and perhaps delete unused websites accordingly. In the sketch, websites drift towards the left over time, so that new sites appear in the right-most column.