Tabbed Browsing/User Interface Design/Possible Features

⚡ Warning: The content of this page is obsolete and kept for archiving purposes of past processes.

Introduction

As internet applications gain ground over desktop applications, managing running internet applications will be as important as managing desktop applications. Currently, managing desktop applications is limited to arranging windows and tabs. This model does not meet the needs of current internet browsing.

One problem with the window and tab model is that it does not allow for easy navigation and preview of content. The current Firefox browser window is like a deck of cards with only the top card face up: it may have many tabs open in it, but the window only shows the currently activated tab and the names of a few others. The rest of the content remains hidden. This problem is exacerbated when each tab could be a fully running application rather than just a webpage.

In addition to being able to preview tabbed content, finding a particular tab is challenging in Firefox. Current tabbed content only gives the favicon and title as disambiguation, and these are often identical for many websites under a domain name. If windows must be viewed together to complete a task, finding and keeping track of the right ones is more difficult. For example, a user may which to create a Google spreadsheet based on data from an article on BBC news. To do this, he must navigate what could be many Google documents tabs looking for this spreadsheet, tear that tab off, and then navigate what could be many BBC articles looking for the correct one.

Problems with Current Tab System

• No way to preview content in tabs
• Favicon and start of title often not enough to disambiguate sites under same domain
• When many tabs are open, most are obscured under excess tab menu
• No way to detect tab multiple instances of same tab
• No way to visually navigate tabs
• No way to tear off tab into different window
• No way to tell loading status of tabbed content
• No way to search for a particular tab
• No way to quickly get a sense of how many tabs are open and which could be closed to speed up connection

Prototype 1: Tab Preview

This first sketch prototype emphasizes previewing tabs by allowing the current system to be expanded into a gallery-type view.

Expandable Tab Previews

This is the outline of the current Firefox browser with many tabs opened. Some tabs are displayed with their favicon and title at the top and the rest can be accessed with the tab button on the right.

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 seems thumbnails of previously obscured tabs.

Move Tab Previews to Another Side of the Window

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

Partially Loaded Tabs

The user can see visually on this screen if tabs are not yet fully loaded.

Customizeable Workspace

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.

Prototype 2: Tab Management

This second sketch prototype looks at ways tabs could be organized and managed.

Accessing Tab View

The user begins in a current Firefox window where many tabs are open, but most are obscured. He begins by clicking the tab button on the right and sees its drop-down menu. The user selects tab view.

The current tabs are displayed in a grid of thumbnails by default. (bug 436304)

Performing a Search

When the user begins to type in the search bar, matching tabs are highlighted until the correct tab is found.

Organizing Tabs Spatially

The user clicks on scatter mode, and current tabs are grouped according to domains they were reached through. Unlike in current tab preview mode, if the first part of many sites is the same for one location, that part of the URL is removed. For instance, if every BBC article begins with “BBC News”, that is removed and the tabs are instead shown grouped around the BBC News homepage.

If the user hovers over one of the pages, the thumbnail expands and the full title shows. This tab can now be selected, deleted, opened, moved, resized, bookmarked, and tagged.

Scaling Tab View

Using the scale widget on the left, the user zooms into one section of the tab display to see more detail per thumbnail. He then scales out and gets an overview of the tabs that are open.

Moving and Resizing Tabs

The user can move and resize tabs individually, or select multiple tabs to manipulate as a unit.

Unstructured Organization with Labels

By moving items and adding customs labels, users can create arrangements of tabs that help them stay organized and complete tasks.

Extending labels creates fields into which tabs can be sorted by category. This allows tab management to be a spacial process - like shifting papers on a desk than rather than sorting files in directories.

The fields automatically become folders, and their contents become bookmarks in these folders.

Organization by Topic

The tab view can also be sorted by topic. These clusters could begin with a search engine query and include websites visited as a result of that query, no matter what the URL or root site.

Organization by Frequency & Recency

Tab view can be organized by the frequency and recency the user vists particular tabs. Tabbed sites that are commonly visited are automatically scaled larger and thus easier and faster to recognize and click.

Idea courtesy of Aza Raskin

Scenario for Use: Photo Organization

Tab view would be especially useful for tasks involving images. While a list of bookmarks provides the URL for a file, this is not an efficient system when sorting is done visually. This is especially true when photos uploaded from cameras often have meaningless file names such as "DSCN4073.jpg." With this system, users can visually sort as they might on a desk with actual photographs. The ability to place photos next to each other also makes sorting by color, style, and subject matter easier, allowing users to create "albums" of photographs.===Scenario for Use: Photo Organization===

Scenario for Use: Collecting Research for a Paper

Sorting in tab view could allow better organization for projects which require a large amount of documents, such as conducting research or writing based on the work of other sources.

Scenario for Use: Frequently Used Bookmarks

Tab view could also be used as a visual representation of bookmarks, where people can visually group the pages they navigate to often.