Tabbed Browsing/User Interface Design/Possible Features: Difference between revisions

Jump to navigation Jump to search

Tabbed Browsing/User Interface Design/Possible Features (view source)

Revision as of 18:04, 4 June 2008

6,116 bytes added ,  4 June 2008
Adding content
No edit summary
(Adding content)
Line 16: Line 16:
* No way to search for a particular tab
* 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
* 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===
http://people.mozilla.com/~jboriss/wiki/tabs/1.png
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.
http://people.mozilla.com/~jboriss/wiki/tabs/2.png
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===
http://people.mozilla.com/~jboriss/wiki/tabs/16.png
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===
http://people.mozilla.com/~jboriss/wiki/tabs/3.png
The user can see visually on this screen if tabs are not yet fully loaded.
===Customizeable Workspace===
http://people.mozilla.com/~jboriss/wiki/tabs/4.png
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.
http://people.mozilla.com/~jboriss/wiki/tabs/5.png
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===
http://people.mozilla.com/~jboriss/wiki/tabs/6.png
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 <i>tab view</i>.
http://people.mozilla.com/~jboriss/wiki/tabs/7.png
The current tabs are displayed in a grid of thumbnails by default.
===Performing a Search===
http://people.mozilla.com/~jboriss/wiki/tabs/8.png
When the user begins to type in the search bar, matching tabs are highlighted until the correct tab is found.
===Organizing Tabs Spatially===
http://people.mozilla.com/~jboriss/wiki/tabs/9.png
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.
http://people.mozilla.com/~jboriss/wiki/tabs/10.png
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===
http://people.mozilla.com/~jboriss/wiki/tabs/11.png
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===
http://people.mozilla.com/~jboriss/wiki/tabs/12.png
The user can move and resize tabs individually, or select multiple tabs to manipulate as a unit.
===Unstructured Organization with Labels===
http://people.mozilla.com/~jboriss/wiki/tabs/13.png
By moving items and adding customs labels, users can create arrangements of tabs that help them stay organized and complete tasks.
http://people.mozilla.com/~jboriss/wiki/tabs/19.png
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.
http://people.mozilla.com/~jboriss/wiki/tabs/20.png
The fields automatically become folders, and their contents become bookmarks in these folders.
===Organization by Topic===
http://people.mozilla.com/~jboriss/wiki/tabs/14.png
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===
http://people.mozilla.com/~jboriss/wiki/tabs/15.png
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 [http://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/Spatial Aza Raskin]''
===Scenario for Use: Photo Organization===
http://people.mozilla.com/~jboriss/wiki/tabs/photos.png
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===
http://people.mozilla.com/~jboriss/wiki/tabs/papers.png
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===
http://people.mozilla.com/~jboriss/wiki/tabs/bookmarks.png
Tab view could also be used as a visual representation of bookmarks, where people can visually group the pages they navigate to often.
Jboriss
Confirmed users
954

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/95495"

Navigation menu