Places:Firefox 2 User Interface Ideas: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
=== Note ===
Do NOT edit this page directly unless you are on the Places team. Comment on the discussion page.
=== Background ===
=== Background ===


Line 38: Line 42:
+-----------------------------------------------------------------------+
+-----------------------------------------------------------------------+
</pre></code>
</pre></code>
== Search Results ==
<code><pre>
+-----------------------------------------------------------------------+
| +----------------------+ Search: [ real estate  :^] v                |
| | @ Visited Today      | +------------------------------------------+ |
| | @ Visited This Week  | | Name              | Location            | |
| | @ All History        | |--------------------+---------------------+ |
| | @ Most Visited      | | MLS Listings        http://www.mlslis...| |
| | @ Updated Today      | | L.J. Hooker          http://www.lhhook...| |
| | @ Bookmarks Menu    | | Barfoot & Thompson  http://www.barfoo...| |
| | @ Bookmarks Toolbar  | | Century 21          http://www.centur...| |
| | @ Subscriptions      | |                                          | |
| | @ Bonjour            | |                                          | |
| | @ Folder 1          | |                                          | |
| | @ Folder 2          | |                                          | |
| | @ Folder 3          | |                                          | |
| | @ Folder 4          | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + NF ) ( # ^ )          ( S |#P#)        ( @ Save this Search... ) |
+-----------------------------------------------------------------------+
</pre></code>
= Grouping Options =
* '''Group by Page''' - flat list of all pages
* '''Group by Site''' - host/site based grouping,
showing entry page as folder and other pages on site as
children
== History ==
<code><pre>
+-----------------------------------------------------------------------+
| +----------------------+ Search: [              :^] v                |
| | @ Visited Today      | +------------------------------------------+ |
| |#@#Visited This Week##| | Name              | Location            | |
| | @ All History        | |--------------------+---------------------+ |
| | @ Most Visited      | |  MLS Listings      http://www.mlslis...| |
| | @ Updated Today      | |  L.J. Hooker        http://www.lhhook...| |
| | @ Bookmarks Menu    | | v Barfoot & Thompson http://www.barfoo...| |
| | @ Bookmarks Toolbar  | |    Epsom Stunner!    http://www.barfoo...| |
| | @ Subscriptions      | |    Grammar Zone      http://www.barfoo...| |
| | @ Bonjour            | |    Charming Cottage  http://www.barfoo...| |
| | @ Folder 1          | |                                          | |
| | @ Folder 2          | |                                          | |
| | @ Folder 3          | |                                          | |
| | @ Folder 4          | |                                          | |
| |======================| |                                          | |
| | <  November 2005 > v | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |    CAL FILTER      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + NF ) (*#*^*)          (#S#| P )        ( @ Save this Search... ) |
+-----------------------------------------------------------------------+
</pre></code>
= Grouping Options =
* '''Group by Page''' - flat list of all pages
* '''Group by Site''' - host/site based grouping,
showing entry page as folder and other pages on site as
children
== Building a Search ==
<code><pre>
+---------------------------------------------------+
| Search: [                  :^] v                  |
| ------------------------------------------------- |
| Pages containing the words: [                ] + |
| Visited [ from :^] [ 27 July, 2005 ]            + |
| ..                                                |
|                                                  |
| [x] Show no more than [ 30 ] results, selected    |
|    by: [ most recently visited :^]              |
+---------------------------------------------------+
</pre></code>
== Subscriptions ==
A case study of smart folders. Show all folders whose type is "feed", and their contents. Should show additional column for published date and author. Should also show read state (bold = unread, normal = read)
= Aggregation View (View by Post) =
<code><pre>
+-----------------------------------------------------------------------+
| +----------------------+ Search: [              :^] v                |
| | @ Visited Today      | +------------------------------------------+ |
| | @ Visited This Week  | | Name              | Location            | |
| | @ All History        | |--------------------+---------------------+ |
| | @ Most Visited      | | Blog A Post 1        http://www.bloga....| |
| | @ Updated Today      | | Blog Q Post 1        http://www.blogq....| |
| | @ Bookmarks Menu    | | Blog P Post 1        http://www.blogp....| |
| | @ Bookmarks Toolbar  | | Blog A Post 2        http://www.bloga....| |
| |#@#Subscriptions######| | Blog A Post 3        http://www.bloga....| |
| | @ Bonjour            | |  ...                                    | |
| | @ Folder 1          | |                                          | |
| | @ Folder 2          | |                                          | |
| | @ Folder 3          | |                                          | |
| | @ Folder 4          | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + NF ) ( # ^ )          ( F |#P#)                                  |
+-----------------------------------------------------------------------+
</pre></code>
= Feed View (View by Feed) =
<code><pre>
+-----------------------------------------------------------------------+
| +----------------------+ Search: [              :^] v                |
| | @ Visited Today      | +------------------------------------------+ |
| | @ Visited This Week  | | Name              | Location            | |
| | @ All History        | |--------------------+---------------------+ |
| | @ Most Visited      | | Blog A              http://www.bloga....| |
| | @ Updated Today      | |  Post 1            http://www.bloga....| |
| | @ Bookmarks Menu    | |  Post 2            http://www.bloga....| |
| | @ Bookmarks Toolbar  | |  Post 3            http://www.bloga....| |
| |#@#Subscriptions######| | Blog P              http://www.blogp....| |
| | @ Bonjour            | |  Post 1            http://www.blogp....| |
| | @ Folder 1          | | Blog Q              http://www.blogq....| |
| | @ Folder 2          | |  Post 1            http://www.blogq....| |
| | @ Folder 3          | |                                          | |
| | @ Folder 4          | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + NF ) ( # ^ )          (#F#| P )                                  |
+-----------------------------------------------------------------------+
</pre></code>
== Places Pane ==
The Places Pane is the pane on the left that shows the top level of the Places root. Its contents include several predefined entries. Some are "special" and cannot be removed because doing so would obscure access to areas of the user's navigation history or Bookmarks. Users may also add items to the list.
The Places Pane might include entries for:
* Pages visited today
* Pages visited this week
* All browsing history
* Most visited pages
* Pages that updated today
* The Bookmarks Menu
* The Bookmarks Toolbar
* All the user's subscriptions
* Bonjour sites
* Saved Searches
* Archived Collections
The Bookmarks Menu and Toolbar scale only to a small number of Bookmarks before they become overwhelmed. Add too many bookmarks to your toolbar and they fall off the end into the overflow menu. Add too many bookmarks to your menu and the menu begins to scroll, which slows access significantly. Both of these UI elements are convenient ways for fast access to commonly used links, but they are often (especially in the case of the Bookmarks Menu) misused.
A simple approach is to support collections at the top level in the Places Pane, encouraging users to "Archive" older, less frequently used collections of Bookmarks there where they'll be picked up by search but not be in view when browsing around.
Further enhancements might include smart population of the Bookmarks Menu based on content access frequency/freshness, but this is outside the scope of the first phase of this project.
== Menus ==
= Item Context Menu/Options Menu =
<table class="menu" cellspacing="0">
<tr><td><strong>Open</strong></td><td> </td></tr>
<tr><td>Open in New Tab</td><td> </td></tr>
<tr><td>Open in New Window</td><td> </td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr><td>Get Info</td><td> </td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr><td>Remove Item</td><td> </td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr><td>New Folder...</td><td> </td></tr>
</table>
= Search Menu =
<table class="menu" cellspacing="0" ID="Table2">
<tr><td><strong>In All Folders</strong></td><td> </td></tr>
<tr><td>Only in Bookmarks Bar</td><td> </td></tr>
</table>
= Browser Menu =
When loaded, the Places View should attach a controller to the parent window that enables/disables and changes text on menu items. Need to make sure that page operations are not enabled for the places view.
'''File Menu'''
<table class="menu" cellspacing="0">
<tr><td>New Window</td><td>Ctrl+N</td></tr>
<tr><td>New Tab</td><td>Ctrl+T</td></tr>
<tr><td>Open Location...</td><td>Ctrl+L</td></tr>
<tr><td>Open File...</td><td>Ctrl+O</td></tr>
<tr><td>Close Window...</td><td>Ctrl+Shift+W</td></tr>
<tr><td>Close Tab...</td><td>Ctrl+W</td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr disabled="true"><td>Save Page As...</td><td>Ctrl+S</td></tr>
<tr disabled="true"><td>Save Frame As...</td><td> </td></tr>
<tr disabled="true"><td>Send Link...</td><td> </td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr disabled="true"><td>Page Setup...</td><td> </td></tr>
<tr disabled="true"><td>Print Preview</td><td> </td></tr>
<tr disabled="true"><td>Print...</td><td>Ctrl+P</td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr><td>Import...</td><td> </td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr><td>Work Offline</td><td> </td></tr>
<tr><td>Exit</td><td> </td></tr>
</table>
'''Edit Menu'''
<table class="menu" cellspacing="0">
<tr><td>Undo</td><td>Ctrl+Z</td></tr>
<tr><td>Redo</td><td>Ctrl+Y</td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr><td>Cut</td><td>Ctrl+X</td></tr>
<tr><td>Copy</td><td>Ctrl+C</td></tr>
<tr><td>Paste</td><td>Ctrl+V</td></tr>
<tr><td>Delete</td><td>Del</td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr><td>Select All</td><td>Ctrl+A</td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr><td>Find in Places...</td><td>Ctrl+F</td></tr>
<tr disabled="true"><td>Find Again</td><td>Ctrl+G</td></tr>
</table>
'''View Menu'''
<table class="menu" cellspacing="0">
<tr><td>Toolbars</td><td> </td></tr>
<tr disabled="true"><td>Status Bar</td><td> </td></tr>
<tr><td>Sidebar</td><td> </td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr disabled="true"><td>Stop</td><td>Esc</td></tr>
<tr disabled="true"><td>Reload</td><td>Ctrl+R</td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr disabled="true"><td>Text Size</td><td>Ctrl+V</td></tr>
<tr disabled="true"><td>Page Style</td><td>Del</td></tr>
<tr disabled="true"><td>Character Encoding</td><td>Del</td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr disabled="true"><td>Page Source</td><td>Ctrl+U</td></tr>
<tr><td>Full Screen</td><td>F11</td></tr>
</table>
'''Go Menu, Tools Menu, Help Menu'''
As is.
'''Bookmarks Menu'''
<table class="menu" cellspacing="0">
<tr disabled="true"><td>Bookmark this Page...</td><td> </td></tr>
<tr><td>Bookmark All Tabs...</td><td> </td></tr>
<tr disabled="true"><td>Show All Bookmarks</td><td> </td></tr>
<tr class="separator"><td colspan="2"><div class="separator"/></td></tr>
<tr><td>Bookmark</td><td> </td></tr>
<tr><td>Bookmark</td><td> </td></tr>
<tr><td>Bookmark</td><td> </td></tr>
<tr><td>Bookmark</td><td> </td></tr>
<tr><td>Bookmark</td><td> </td></tr>
<tr><td>Bookmark</td><td> </td></tr>
<tr><td>Bookmark</td><td> </td></tr>
<tr><td>Bookmark</td><td> </td></tr>
</table>
== Keyboard Bindings ==
<table border="1" class="accelerators">
<tr>
<th>Key</th>
<th>Action</th>
</tr>
<tr>
<td><kbd>Ctrl+F</kbd><br /> <kbd>/</kbd><br /> <kbd>'</kbd><br /><kbd>F3</kbd></td>
<td>Focus search box</td>
</tr>
<tr>
<td><kbd>Del</kbd></td>
<td>Delete Selection</td>
</tr>
<tr>
<td><kbd>F2</kbd></td>
<td>Rename Selected Item</td>
</tr>
<tr>
<td><kbd>Ctrl+I</kbd></td>
<td>Show Info for Selected Item</td>
</tr>
<tr>
<td><kbd>Ctrl+C</kbd></td>
<td>Copy the Selection</td>
</tr>
<tr>
<td><kbd>Ctrl+X</kbd></td>
<td>Cut the Selection</td>
</tr>
<tr>
<td><kbd>Ctrl+V</kbd></td>
<td>Paste the Selection</td>
</tr>
<tr>
<td><kbd>Ctrl+A</kbd></td>
<td>Select All Items</td>
</tr>
<tr>
<td><kbd>Enter</kbd><br /><kbd>Cmd+O</kbd></td>
<td>Open Selected Item</td>
</tr>
<tr>
<td><kbd>Shift+Enter</kbd><br /><kbd>Shift+Cmd+O</kbd></td>
<td>Open Selected Item in Tab  ???</td>
</tr>
</table>

Revision as of 02:40, 21 November 2005

Note

Do NOT edit this page directly unless you are on the Places team. Comment on the discussion page.

Background

A common view of Bookmarks and History, with a back end that allows for flexible presentation and searching of the data in a way that makes it useful and accessible.

User Interface

Hierarchies are bad (difficult to create and maintain*), so default presentation deemphasizes them, but retains support for advanced and existing users.

* It is easy to create too many categories, or a highly nested structure that obscures the available categories, such that it is difficult to categorize links effectively and the amount of work required to do the task exceeds the benefit provided, given searching tools.

Showing Bookmarks

+-----------------------------------------------------------------------+
| +----------------------+ Search: [               :^] v                |
| | @ Visited Today      | +------------------------------------------+ |
| | @ Visited This Week  | | Name               | Location            | |
| | @ All History        | |--------------------+---------------------+ |
| | @ Most Visited       | | CNN.com              http://www.cnn.com/ | |
| | @ Updated Today      | |                                          | |
| | @ Bookmarks Menu     | |                                          | |
| |#@#Bookmarks#Toolbar##| |                                          | |
| | @ Subscriptions      | |                                          | |
| | @ Bonjour            | |                                          | |
| | @ Folder 1           | |                                          | |
| | @ Folder 2           | |                                          | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + NF ) ( # ^ )          ( + NF )                                    |
+-----------------------------------------------------------------------+

Search Results

+-----------------------------------------------------------------------+
| +----------------------+ Search: [ real estate   :^] v                |
| | @ Visited Today      | +------------------------------------------+ |
| | @ Visited This Week  | | Name               | Location            | |
| | @ All History        | |--------------------+---------------------+ |
| | @ Most Visited       | | MLS Listings         http://www.mlslis...| |
| | @ Updated Today      | | L.J. Hooker          http://www.lhhook...| |
| | @ Bookmarks Menu     | | Barfoot & Thompson   http://www.barfoo...| |
| | @ Bookmarks Toolbar  | | Century 21           http://www.centur...| |
| | @ Subscriptions      | |                                          | |
| | @ Bonjour            | |                                          | |
| | @ Folder 1           | |                                          | |
| | @ Folder 2           | |                                          | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + NF ) ( # ^ )          ( S |#P#)         ( @ Save this Search... ) |
+-----------------------------------------------------------------------+

Grouping Options

  • Group by Page - flat list of all pages
  • Group by Site - host/site based grouping,

showing entry page as folder and other pages on site as children

History

+-----------------------------------------------------------------------+
| +----------------------+ Search: [               :^] v                |
| | @ Visited Today      | +------------------------------------------+ |
| |#@#Visited This Week##| | Name               | Location            | |
| | @ All History        | |--------------------+---------------------+ |
| | @ Most Visited       | |   MLS Listings       http://www.mlslis...| |
| | @ Updated Today      | |   L.J. Hooker        http://www.lhhook...| |
| | @ Bookmarks Menu     | | v Barfoot & Thompson http://www.barfoo...| |
| | @ Bookmarks Toolbar  | |    Epsom Stunner!    http://www.barfoo...| |
| | @ Subscriptions      | |    Grammar Zone      http://www.barfoo...| |
| | @ Bonjour            | |    Charming Cottage  http://www.barfoo...| |
| | @ Folder 1           | |                                          | |
| | @ Folder 2           | |                                          | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| |======================| |                                          | |
| | <  November 2005 > v | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |     CAL FILTER       | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + NF ) (*#*^*)          (#S#| P )         ( @ Save this Search... ) |
+-----------------------------------------------------------------------+

Grouping Options

  • Group by Page - flat list of all pages
  • Group by Site - host/site based grouping,

showing entry page as folder and other pages on site as children

Building a Search

+---------------------------------------------------+
| Search: [                  :^] v                  |
| ------------------------------------------------- |
| Pages containing the words: [                 ] + |
| Visited [ from :^] [ 27 July, 2005 ]            + |
| ..                                                |
|                                                   |
| [x] Show no more than [ 30 ] results, selected    |
|     by: [ most recently visited :^]               |
+---------------------------------------------------+

Subscriptions

A case study of smart folders. Show all folders whose type is "feed", and their contents. Should show additional column for published date and author. Should also show read state (bold = unread, normal = read)

Aggregation View (View by Post)

+-----------------------------------------------------------------------+
| +----------------------+ Search: [               :^] v                |
| | @ Visited Today      | +------------------------------------------+ |
| | @ Visited This Week  | | Name               | Location            | |
| | @ All History        | |--------------------+---------------------+ |
| | @ Most Visited       | | Blog A Post 1        http://www.bloga....| |
| | @ Updated Today      | | Blog Q Post 1        http://www.blogq....| |
| | @ Bookmarks Menu     | | Blog P Post 1        http://www.blogp....| |
| | @ Bookmarks Toolbar  | | Blog A Post 2        http://www.bloga....| |
| |#@#Subscriptions######| | Blog A Post 3        http://www.bloga....| |
| | @ Bonjour            | |   ...                                    | |
| | @ Folder 1           | |                                          | |
| | @ Folder 2           | |                                          | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + NF ) ( # ^ )          ( F |#P#)                                   |
+-----------------------------------------------------------------------+

Feed View (View by Feed)

+-----------------------------------------------------------------------+
| +----------------------+ Search: [               :^] v                |
| | @ Visited Today      | +------------------------------------------+ |
| | @ Visited This Week  | | Name               | Location            | |
| | @ All History        | |--------------------+---------------------+ |
| | @ Most Visited       | | Blog A               http://www.bloga....| |
| | @ Updated Today      | |   Post 1             http://www.bloga....| |
| | @ Bookmarks Menu     | |   Post 2             http://www.bloga....| |
| | @ Bookmarks Toolbar  | |   Post 3             http://www.bloga....| |
| |#@#Subscriptions######| | Blog P               http://www.blogp....| |
| | @ Bonjour            | |   Post 1             http://www.blogp....| |
| | @ Folder 1           | | Blog Q               http://www.blogq....| |
| | @ Folder 2           | |   Post 1             http://www.blogq....| |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + NF ) ( # ^ )          (#F#| P )                                   |
+-----------------------------------------------------------------------+

Places Pane

The Places Pane is the pane on the left that shows the top level of the Places root. Its contents include several predefined entries. Some are "special" and cannot be removed because doing so would obscure access to areas of the user's navigation history or Bookmarks. Users may also add items to the list.

The Places Pane might include entries for:

  • Pages visited today
  • Pages visited this week
  • All browsing history
  • Most visited pages
  • Pages that updated today
  • The Bookmarks Menu
  • The Bookmarks Toolbar
  • All the user's subscriptions
  • Bonjour sites
  • Saved Searches
  • Archived Collections

The Bookmarks Menu and Toolbar scale only to a small number of Bookmarks before they become overwhelmed. Add too many bookmarks to your toolbar and they fall off the end into the overflow menu. Add too many bookmarks to your menu and the menu begins to scroll, which slows access significantly. Both of these UI elements are convenient ways for fast access to commonly used links, but they are often (especially in the case of the Bookmarks Menu) misused.

A simple approach is to support collections at the top level in the Places Pane, encouraging users to "Archive" older, less frequently used collections of Bookmarks there where they'll be picked up by search but not be in view when browsing around.

Further enhancements might include smart population of the Bookmarks Menu based on content access frequency/freshness, but this is outside the scope of the first phase of this project.

Menus

Item Context Menu/Options Menu

Search Menu

Browser Menu

When loaded, the Places View should attach a controller to the parent window that enables/disables and changes text on menu items. Need to make sure that page operations are not enabled for the places view.

File Menu

Edit Menu

View Menu

Go Menu, Tools Menu, Help Menu As is.

Bookmarks Menu

Keyboard Bindings

Key Action
Ctrl+F
/
'
F3
Focus search box
Del Delete Selection
F2 Rename Selected Item
Ctrl+I Show Info for Selected Item
Ctrl+C Copy the Selection
Ctrl+X Cut the Selection
Ctrl+V Paste the Selection
Ctrl+A Select All Items
Enter
Cmd+O
Open Selected Item
Shift+Enter
Shift+Cmd+O
Open Selected Item in Tab  ???