Firefox3.5/Features/Nice To Have/tab preview

Introduction

In the scoping process for Firefox 3.1 (Shiretoku), there has been a great interest in incorporating visual navigation. While the awesomebar came a long way in improving targeted search, finding a particular tab while only having a vague idea of what it looks like is not currently possible in Firefox. This is especially difficult when many tabs are open, leading to an annoying process of opening one tab after another to find the a particular tab.

At Mozilla, brainstorming has been taking place about how best to incorporate visual navigation (see wiki pages here and here.

While ideas for visual navigation in brainstorming have ranged from adding completely new interfaces to doing away with tabs completely, a more workable solution for 3.1 is probably a more subtle feature that adds visual navigation without distrupting users' current workflow. Some reasons for this are:

• A gentle introduction to visual navigation can serve as a base for more substantial features for future releases by getting users acquainted with the concept of searching visually
• Not disrupting Firefox's current workflow will allow users to "opt-in" their use, allowing Mozilla to guide future developments based on whether or not the change is well received
• Creating features which are taxing on CPU would disadvantage users with older computers
• Creating a vastly different navigation system is unecessary, as many add-ons already exist for the (likely) small user set that would benefit from 3D browsing, fireworks, and a marching band

Review of Ctrl-Tab plugin

A currently existing add-on which has many of the features a potential Firefox could benefit from is Dão Gottwald's Ctrl-Tab.

The Ctrl-Tab add-on has two modes:

1. When the user presses control-tab in any window, a filmstrip-stype preview appears. The filmstrip shows three tabs at a time in most-recently-used order and cycles through all the tabs open in the current window.

2. When the user clicks an icon in the top right corner of their tabs, a grid of all open tabs in all windows displays. The user can select any tab and, by using the search box at the top, filter the tabs.

What Ctrl-Tab does well

• Gives visual previews of all tabs without disrupting current workflow or cluttering the UI
• Allows quick-key access for as-needed use
• Allows for quick search of tabs
• Saves time hunting for tabs

What Ctrl-Tab could do better

• There seems to be little point in having two types of view (filmstrip and grid). The current design of the filmstrip only shows three tabs at a time and scrolling through them requires a separate click for each scroll. The only functional differences between filmstrip and grid view is that the filmstrip only shows the tabs for one window and in most-recently-used order, while grid view shows the tabs for all windows and not in any order.
• The search box for grid view does not incorporate awesomebar functionality such as bringing often-used URLs to the top of a search.
• The look & feel of the add-on could tie in more closely with Firefox's design
• The user cannot use their cursor to select a thumbnail in filmstrip view
• Only middle clicking a thumbnail will close it, which is not visible and can't be used without a three-button mouse

Possible Feature for Firefox 3.1

For the reasons mentioned above, I feel Firefox's users could greatly benefit from a feature similar to Dão's Ctrl-Tab in the 3.1 release. In the following sections, I will outline a possible design for a Firefox 3.1 Ctrl-Tab feature, which I'll refer to as Tab Preview.

Functionality

Tab Preview consists of:

• A small icon on Firefox's chrome, to the right of open tabs in a window
• A single preview mode with search
• Quick key commands

Tab Preview is accessed either by clicking the button on the interface or by holding down Ctrl-Alt. This toggles the tab preview mode, which persists after the keys are let up. Clicking outside of the window dismisses it.

I'm using Alt in this wiki because, as far as I know, this key does not overlap with current functions of Firefox in different operating systems. Control, as Dão used, doesn't work in OSX because Control-Arrow Keys changes desktops and thus couldn't change the highlighted thumbnail.

When the user presses and holds Ctrl-Alt, they see a grid view which displays a thumbnail for all open tabs in all windows. A small border on the upper left thumbnail indicates the tab is currently open, while an embossed border which slightly magnifies the thumbnail shows which is being highlighted. At the top of the grid is a search box which allows users to combine visual search with textual search. The search box works similarly to the awesomebar, matching content as well as titles and URLs.

After the user has accessed Tab Preview with Ctrl-Alt, they can navigate the thumbnails by pressing Alt to scroll horizontally through the thumbnails, using arrow keys to navigate directionally, or selecting an item with the cursor. Releasing Alt when a tab is selected, or clicking on a thumbnail, opens the activated tab.

Use Case

1. Bob wants to find his online banking page, but he has many tabs open in many windows.

2. He clicks the Tab Preview icon by his tabs.

3. Bob sees all of the tabs he has open. However, he has only a vague recollection of what his bank's website looks like and needs to filter his thumbnails.

4. He types "bank" in the search box. The two open tabs that match Bob's query appear, and the rest vanish. Bob recognizes his bank's website.

5. Rob mouses over the thumbnail, which expands slightly and highlights. He clicks to open the tab.

In this scenario, Bob has combined his visual and textual recognition to quickly find his tab. While he may not know exactly what the page looks like or its exact title, he can combine his partial rememberence of both to locate the tab he wants quickly.