Tablets | Reinventing Tabs in the Browser

Submission for Mozilla Labs Concept Series Design Challenge: Summer 2009

by Ryan Cheung

Why the need for change?

Tabs can be thought of as a metaphor to the tabbed file folders often found in an office filing system. It seems in the real world, such a paradigm of organization works quite well. So much so, that there are GTD processes that use folders to organize people's workflow and lives. Notes and tasks are sorted based on deadlines or priorities. Similarly, the filing system at a family physician's office effectively categorizes documents alphabetically. One obvious problem with the tabs metaphor in a web browser, is that there is no categorization.

Tabs are merely a method of separating a document, or website, in plain site of the end user. An improvement would be to categorize or group opened websites based on a user's task or the application in use.

Features

Pills can contain multiple tabs, or Tablets. By grouping tablets, users can identify tabs by task or application. This allows for the relevant tabs to appear based on a task or application a user is actively using, making for less congestion in the tabs area.

Pills can also be bookmarked. If you think about Pills like sessions, then session management suddenly becomes more evident to the user. Clicking the bookmark star inside the Pill allows for a related set of tablets to be saved for similar tasks a user may perform again in the future.

Where traditional tabbed interfaces felt cluttered shortly into a user's session, Tablets minimizes this with the act of scrolling to relevant groups of tabs defined by the user or application. The filter-bar allows you to view tablets grouped numerically, or by domain name. This allows the relevant tablets to slide into view. A user should only have to see the tabs relevant in any given context.

Demo / Prototype

1

tabs - Google Search

Tab (GUI) - Wikipedia, the free encyclopedia

2

NBA.com: FINALS 2009

Yahoo! Sports Fantasy Basketball

3

Gmail: Email from Google

Welcome to Facebook! | Facebook

Twitter: What are you doing?

4

Tokyo travel guide - Wikitravel

Google Maps

Kyoto travel guide - Wikitravel

Osaka travel guide - Wikitravel

Presentation Video