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:
THIS PAGE IS BEING EDITED RIGHT NOW BY BEN - MAJOR CHANGES DO NOT EDIT.  
THIS PAGE IS BEING EDITED RIGHT NOW BY BEN - MAJOR CHANGES DO NOT EDIT.  
= Note =
Do NOT edit this page directly unless you are on the [[Places]] team. Comment on the [http://www.mozilla.org/community/developer-forums.html mozilla.dev.apps.firefox newsgroup].


= Background =
= Background =
Line 177: Line 181:
XXX open issue: how to handle a long list here? scroll (status quo, IE-compat)? overflow into submenus?)
XXX open issue: how to handle a long list here? scroll (status quo, IE-compat)? overflow into submenus?)
XXX open issue: if Bookmark this Page... bookmarks into the Bookmarks Menu and the tag button does not, should the Bookmark this Page... menu item go at the end of the list to show that it applies to this list (and potentially other lists)? Ditto Bookmark all Tabs?
XXX open issue: if Bookmark this Page... bookmarks into the Bookmarks Menu and the tag button does not, should the Bookmark this Page... menu item go at the end of the list to show that it applies to this list (and potentially other lists)? Ditto Bookmark all Tabs?
XXX open issue: it is not clear that Bookmark this Page is different from the star button.


=== History Menu ===
=== History Menu ===
Line 700: Line 705:
=== Adding Bookmarks ===
=== Adding Bookmarks ===


Existing methods for adding a bookmark (Add Bookmark menu item, drag and drop) are retained. A new button is added to the toolbar and the existing RSS/Subscription UI is updated:
The objective for adding bookmarks is to create a lightweight experience for marking pages while supporting the traditional methods of filing bookmarks.


<code><pre>[ @ http://www.foo.com/                      |v|+|S]</pre></code>
==== Add Bookmark Dialog ====


The Subscribe icon moves out of the location bar (where it lives in 1.5) and into a more visually clickable button area that through graphic design techniques appears more visually connected to the location bar, but outside the white area. The bookmarks button is present on all bookmarkable pages (most). The Subscription button appears and disappears, taking space from the location bar, when feeds are advertised.  
The Add Bookmark Dialog is a more heavyweight way to add a bookmark. It has several display modes:


To add a bookmark, the user simply clicks the bookmarks button and a Bookmark is automatically added to the default folder with the default title, url etc. An info tip is shown explaining what happened:
===== Tagging =====


<code><pre>
<code><pre>
  |v|+|S]
+-----------------------------------------------+
    +---------------------------------+
| Name:        [ Foo                         ] | <-- (1)
    | Bookmark Added to 'Foo'        |
| Location:    [ http://www.foo.com/         ] | <-- (2)
    | Click again to edit Name/Tags   |
| Tags:        [ Work, Play                  ] | <-- (3)
    |                                 |
| > More                                        | <-- (4)
    | ( Remove ) ( Show Bookmarks )   |
|                                              |
    +---------------------------------+
| ( Remove ) ( Show All Bookmarks )   ( Done ) | <-- (5)
+-----------------------------------------------+
</pre></code>
</pre></code>


==== Organizing New Bookmarks ====
# A field that allows the user to edit the title of the page
# The location of the page
# A field that contains the list of tags applying to the item. This uses the Tag Autocomplete widget.
# Expands the dialog into the Full Disclosure mode (below).
# The Remove button un-tags the page. Show All Bookmarks shows the Places Organizer window, displaying the All Bookmarks collection. Done applies the changes and closes the dialog.


When the user clicks the button again, the URL bar is replaced by a more elaborate property editor:
===== Filing =====


<code><pre>
<code><pre>
Line 727: Line 737:
  | Location:    [ http://www.foo.com/          ] |
  | Location:    [ http://www.foo.com/          ] |
  | Tags:        [ Work, Play                  ] |
  | Tags:        [ Work, Play                  ] |
  |               common tags: work, play, goats  |
  | File into:   [ Bookmarks Menu            :^] | <-- (1)
  | > More                                        |
  | > More                                        |
|                                              |
| ( Cancel ) ( Show All Bookmarks )    ( Add ) | <-- (2)
+-----------------------------------------------+
</pre></code>
# A list of bookmarks folders is shown also by default in the compact view.
# Cancel cancels the addition of the Bookmark. Add Adds the Bookmark. Both close the dialog.
===== Full Disclosure =====
<code><pre>
+-----------------------------------------------+
| Name:        [ Foo                          ] |
| Location:    [ http://www.foo.com/          ] |
| Tags:        [ Work, Play                  ] |
|                                              |
| File into:  [ Bookmarks Menu            :^] |
| Shortcut:    [                              ] | <-- (1)
|  Tip: Type the shortcut in the location bar  |
|      to open this page.                      |
| Notes:      [                              ] | <-- (2)
|              [                              ] |
|              [                              ] |
  |                                              |
  |                                              |
  | ( Remove ) ( Show Bookmarks )        ( Done ) |
  | ( Remove ) ( Show Bookmarks )        ( Done ) |
Line 734: Line 767:
</pre></code>
</pre></code>


When the disclosure widget is clicked:
# A shortcut that can be entered in the location bar to load the page
# Some notes on the page.
 
===== Full Disclosure (Properties) =====
 
In property editing mode, the dialog does not show a "File into: " line for Bookmarks that are already filed into Folders.


<code><pre>
<code><pre>
Line 741: Line 779:
  | Location:    [ http://www.foo.com/          ] |
  | Location:    [ http://www.foo.com/          ] |
  | Tags:        [ Work, Play                  ] |
  | Tags:        [ Work, Play                  ] |
  |               common tags: work, play, goats  |
  |                                               |
  | Shortcut:    [                              ] |
  | Shortcut:    [                              ] | <-- (1)
  | Description: [                              ] |
|  Tip: Type the shortcut in the location bar  |
|      to open this page.                      |
  | Notes:       [                              ] | <-- (2)
  |              [                              ] |
  |              [                              ] |
  |              [                              ] |
  |              [                              ] |
Line 751: Line 791:
</pre></code>
</pre></code>


==== Editing Bookmarks ====
==== Filing Bookmarks ====
 
===== Any Bookmarks Menu =====
 
Bookmarks can be created in the any Bookmarks menu popup using the Bookmark this Page menu item. When this item is chosen, it will show the Add Bookmark dialog in the "Filing" mode with the selected folder selected. For instance, in the Bookmarks Menu, it would show the "Bookmarks Menu" folder selected.
 
XXX open issue: is filing into any folder in this way a good idea? What are the usage figures on drag and drop? This could be a way for folk to discover they can file into folders on the bookmarks toolbar.
 
===== Drag & Drop, Paste =====
 
Bookmarks can be created by dragging links into the menu, the Places Organizer, or onto the Bookmarks Toolbar. When this is done the item is inserted without showing any dialog, it is created with the attributes of the dragged item (title, url) and filed into the folder that it is dropped into.
 
==== Marking Pages As Interesting ====
 
More lightweight than filing a bookmark into a folder for later frequent use is marking a page as interesting later. We suspect this is what a lot of bookmark actions actually are, and the reason why people's Bookmarks menus become quickly cluttered with items they don't use a lot. For whatever reason, folk don't use Bookmarks a lot, part of the reason for this may be the scalability of the Menu and cryptic nature of the toolbar.


===== Simple Inline Edit =====
The "Tag" button on the browser toolbar (a clickable attachment at the end of the location bar, next to the Subscribe button which appears for pages with Feeds that can be subscribed to) provides a quick way to mark a page as interesting for later access.


We would eventually like to allow users to perform simple edits in-place in the tree widget for properties like name and URL. This is OUT for 2.0 due to toolkit limitations.  
<code><pre>[ @ http://www.foo.com/                      |v|+|S]</pre></code>


===== Properties Panel =====
Pages marked as interesting are stored in Bookmarks, but not in any folder. Rather, they appear only when the All Bookmarks item is chosen from the Places bar. They can be filed into folders from this location. They also contribute with History and Filed Bookmarks to Location Bar autocompletion, and can be searched for if they are marked with tags.


For the initial revision, a simple properties dialog similar to the one used in Firefox 1.x will be used, but this may eventually be coalesced with an app-wide info-panel (see separate wiki topic).
To mark a page as interesting, the user clicks the button and a Bookmark is added, but not into any folder, using the default title, location, etc. An info tip is shown explaining what happened:


<code><pre>
<code><pre>
+------------------------------------------+
  |v|+|S]
| Properties for "Foo"                    |
    +-----------------------------------+
+------------------------------------------+
    | Page marked.                      | <-- (1)
|                                         |
    | Click again to edit Name/Tags     |
| Name:     [ Foo                      ]  |
    |                                   |
|  Location: [ http://www.foo.com/      ]  |
     | ( Remove ) ( Show All Bookmarks ) | <-- (2)
|  Shortcut: [ f                        ]  |
    +-----------------------------------+
|  Folders:  [ work, play              ]  |
|  Notes:    [                          ]  |
|            [                          ]  |
|            [                          ]  |
|                                         |
|  Last Updated: Today, 30 minutes ago     |
|  Last Visited: 27 May, 2005 2:56 PM      |
|  Visited:      14 times                  |
|                                          |
|                    (( OK  )) ( Cancel ) |
+------------------------------------------+
</pre></code>
</pre></code>


This can re-use the code used to fill the advanced Add UI. (See above)
# XXX open issue: terminology!
# Remove (XXX open issue: better name ... unmark?) Show All Bookmarks shows the Places Organizer, with the All Bookmarks Place selected.
 
===== Tagging Interesting Pages =====
 
When the user clicks the Tag button again, an Add Bookmark Dialog opened in "Tagging" mode is shown. The user can enter some tags to allow easier access later, or expand the dialog to file it as a Bookmark in a particular folder, edit additional metadata, etc.
 
==== Editing Bookmarks ====
 
When the user visits a page that exists within their bookmarks, the Tag button lights up and can be clicked to edit metadata. When clicked, the Add Bookmark dialog is shown in either "Tagging" or "Full Disclosure (Properties)" mode, depending on how the disclosure widget was left the last time the UI was used.
 
From any Places view, when a user presses Ctrl+I or chooses the Properties/Get Info command from a menu, the Add Bookmark dialog is shown according to the rules described above for visiting a Bookmarked page.
 
===== Simple Inline Edit =====
 
Simple metadata changes can be accomplished in the tree view. This will not be done for 2.0 due to toolkit limitations.


=== Content Area Integration ===
=== Content Area Integration ===
On any page, a "Bookmark this Page..." menu item is available in the context menu.
XXX open issue: is this a good idea? Where does this file into by default? The Menu? What about "Mark page as interesting" functionality?


=== Tabbed Browser Integration ===
=== Tabbed Browser Integration ===


On any tab, "Bookmark this Tab..." and "Bookmark all Tabs..." menu items are available in the context menu.
XXX open issue: is this a good idea? Where does this file into by default? THe Menu? What about "Mark page as interesting" functionality?
Dit


= Differences Explained =
= Differences Explained =
TBD.


== From Firefox 1.x ==
== From Firefox 1.x ==

Revision as of 20:43, 17 February 2006

THIS PAGE IS BEING EDITED RIGHT NOW BY BEN - MAJOR CHANGES DO NOT EDIT.

Note

Do NOT edit this page directly unless you are on the Places team. Comment on the mozilla.dev.apps.firefox newsgroup.

Background

Improve the usability of Bookmarks and History, since roughly 20% of page visits are to pages visited > 10 pages ago.

Use Cases

From a UI perspective, make it easier to use Bookmarks and History, optimized for these tasks, in decreasing priority order:

  1. searching or fast access
  2. browsing
  3. organizing

The number one task someone usually wants to do with respect to Bookmarks or History is quickly find a page and open it. Then comes considered browsing which often happens as a result of either desire to kill time, process a list of tasks, or frustration at the failure of the search mechanism. Finally there is organization: assigning metadata to entries and sometimes filing them into folders.

At the same time, many folk are not adding bookmarks, perhaps for reasons such as:

  • UI for adding is not exposed where they'll find it (I have a feeling people don't interact with menus very much, unless something is wrong and they're frustrated and trying to fix it)
  • The addition experience has traditionally been awful. The dialog box presented forces the user to think about a categorization scheme. Ignoring it may make the user feel guilty for not taking part. The process seems heavyweight. It doesn't seem as trivial as simply saying "save for later" - like dog-earing a page.

Proposed System

The proposed system is described in this document.

Topics

The Places system is made up of the following components:

For access (use case matched in parentheses):

  • Places Search Popup (1)
  • Places Popup (2)
  • Bookmarks Menu (2)
  • History Menu (2)
  • Bookmarks Toolbar (1)
  • Places Manager (2, 3)
  • Autocomplete Fields (1)
  • Session History List (1)

Additional topics:

  • Search Result Ranking (1)
  • Place Item Context Menus (3)

For adding:

  • Add Bookmark
  • Content Area Integration
  • Tab Browser Integration

For organizing:

  • Bookmark Properties

Places Search Popup

Search History & Bookmarks Button

A new customizable button is added to the left of the Bookmarks Toolbar entries and is called "Search History and Bookmarks". (Displaying this text in a tooltip, showing only an icon). (XXX open issue: what to show as the text when this button is dropped onto a toolbar that is showing labels, too) 

|
+------------------------------------------------------
| @= | / PTBookmark 1 / PTBookmark 2 / PTBookma...
+------------------------------------------------------

Searching

When the user clicks the button, the following popup is displayed, visually connected to the button: 

|
+------------------------------------------------------
|#@=#| / PTBookmark 1 / PTBookmark 2 / PTBookma...
|    +--------------------------+
| Search Bookmarks & History:   |
| [                           ] | <-- (1)
|                        ( >> ) | <-- (2)
+-------------------------------+
  1. A text field that searches over Bookmarks and History, with autocomplete semantics defined in the Autocomplete Fields section.
  2. A disclosure widget that expands this popup into the Places Popup, allowing fast browsing. The state of this widget is persisted so that if the popup is expanded, it will be expanded the next time the popup is shown, too.

Search Results

The user can type some terms into the field, autocompleted according to the semantics defined in the Autocomplete Fields section. When they do this, after a short delay (to prevent excessive querying) results are displayed in the popup: 

|
+------------------------------------------------------
|#@=#| / PTBookmark 1 / PTBookmark 2 / PTBookma...
|    +--------------------------+
| Search Bookmarks & History:   |
| [ goat teleporter        (x)] | <-- (1)
|                               |
| +---------------------------+ |
| | The Goat Teleporter & You | | <-- (2)
| |  http://www.goatweekly... | | 
| |...........................| |
| | Livestock teleportation   | |
| |  http://www.arginews.c... | |
| |...........................| |
| | Goat species              | |
| |  http://en.wikipedia.o... | |
| |...........................| |
| | Teleportation Newsletter  | |
| |  http://www.ieee.org/a... | |
| +---------------------------+ |
|                        ( >> ) |
+-------------------------------+
  1. In this view, when the user has entered terms, a close box appears on the right side of the field to allow mouse-centric users to cancel the search and hide the results. Pressing the ESC key also accomplishes this task.
  2. Results are shown below the field, and the popup is sized to the number of results, up to a maximum height at which the results list begins to scroll. Clicking or pressing Enter on a result loads the page in the current tab, a modified click/Enter press opens in a new tab or window, as configured. (XXX open issue: show the URL below the title, for disambiguation for poorly titled pages)

Places Popup

When the disclosure button in the Places Search Popup is clicked, the popup changes to show the contents of a selected Place (by default: the Bookmarks Menu) (XXX open issue: should this be the All Bookmarks query?) 

|
+------------------------------------------------------
|#@=#| / PTBookmark 1 / PTBookmark 2 / PTBookma...
|    +----------------------------+
| Search Bookmarks & History:     |
| [                             ] | <-- (1)
|                                 |
| +-----------------------------+ |
| | / Foo                       | | <-- (2)
| | / Bar                       | |
| | # Baz                       | |
| |   / FooFoo                  | |
| |                             | |
| |                             | |
| |                             | |
| |                             | |
| |                             | |
| |                             | |
| +-----------------------------+ |
| Showing: [ @ Bookmarks Menu :^] | <-- (3)
|                                 |
| ( Organize... )          ( << ) | <-- (4)
+---------------------------------+
  1. XXX open issue: should searching at this point search all Bookmarks and History as before, or the currently shown Place?
  2. This list is a simple hierarchical view of folders and leaf items. It shows the content of the Place selected in the Place selector. The sort order for this list may be different from the sort order last selected in the Places manager, it is likely to be something more suitable for this fast-access view, although it should be overridable using the context menu.
  3. The Place selector lets the user pick a Place to show the content of. The contents of this list maps to the contents of the left bar in the Places Manager. XXX open issue: menu selector does not make it clear the list can be changed that easily. IE7 uses separate buttons for Favorites and History.
  4. The Organize button shows the Places Manager in a separate window.

XXXben: document context menu for the view itself

Bookmarks Menu

The Browser Menu Bar has a "Bookmarks" menu item containing: 

+-----------+
| Bookmarks |
|           +-----------------------+
| Bookmark this Page...      Ctrl+D | <-- (1)
| Bookmark all Tabs...              | <-- (2)
| Search in Bookmarks...     Ctrl+B | <-- (3)
| Organize Bookmarks...             | <-- (4)
| --------------------------------- |
| <items>                           | <-- (5)
+-----------------------------------+
  1. Show a dialog allowing the user to add a bookmark to the current page.
  2. Show a dialog allowing the user to add bookmarks to all of the pages opened in tabs within this window, in a new Folder.
  3. Show the Places Search Popup for quick searching of Bookmarks and History. (XXX open issue: keybinding)
  4. Show the Places Organizer Window for more detailed browsing or organization.
  5. Shows the contents of the Bookmarks Menu folder.

XXX open issue: insert items into this list in reverse-chronolgical? XXX open issue: how to handle a long list here? scroll (status quo, IE-compat)? overflow into submenus?) XXX open issue: if Bookmark this Page... bookmarks into the Bookmarks Menu and the tag button does not, should the Bookmark this Page... menu item go at the end of the list to show that it applies to this list (and potentially other lists)? Ditto Bookmark all Tabs? XXX open issue: it is not clear that Bookmark this Page is different from the star button.

History Menu

The Browser Menu Bar has a "History" menu item containing: 

+---------+
| History |
|         +-------------------------+
| Back                    Alt + <-  | <-- (1)
| Forward                 Alt + ->  | 
| Home                  Alt + Home  | <-- (2)
| --------------------------------- |
| Search in History...              | <-- (3)
| View All History...               | <-- (4)
| --------------------------------- |
| <session history for current tab> | <-- (5)
| --------------------------------- |
| Clear History...                  | <-- (6)
+-----------------------------------+
  1. Menu items for Back and Forward (advertise key bindings)
  2. Keyboard accessible link to Home Page (XXX open issue: where should this go?)
  3. Show the Places Search Popup for quick searching of Bookmarks and History. (XXX open issue: keybinding)
  4. Show the Places Organizer Window for more detailed browsing and searching.
  5. Shows the Session History List for the current document. The pivot (current page) in the list is represented by a bullet. See Session History List for more information.
  6. Clears the browsing history, with a confirmation dialog.

Session History List

The Session History is a list of pages visited by the user. The user navigates backwards and forwards in this list by individual pages using the back and forward buttons, or to a discrete point in the list using the History or Back/Forward button menus.

The pivot is the page the user is currently at in the list. There may be pages ahead and behind the pivot page in the Session History list.

To make navigation to recently visited pages faster, especially when the Session History list is deep (e.g. viewing a slideshow) page groups (grouping is determined according to the Session History Grouping Heuristic) are collapsed at either end when displayed in the UI to allow the user to quickly navigate in "chapters", e.g. back to the entry point of a site.

A complete display of a visual representation of the Session History list for the History Menu, with many pages before and after the pivot page: 

@ Chapter Stop
@ Chapter Stop
@ Page
@ Page
@ Page
* Pivot
@ Page
@ Page
@ Page
@ Chapter Stop
@ Chapter Stop

Grouping Heuristic

XXX open issue

Bookmarks Toolbar

The Bookmarks Toolbar is a Customizable Toolbar Item which contains the contents of the Bookmarks Toolbar Folder. Bookmarks, Live Bookmarks and Folders are shown here.

The user can drag links onto the toolbar (drop feedback shown to either side of each item) and drag them into Folders. When the user hovers over a folder during a drag for a few seconds, the folder opens and the user can drag the item deeper into the folder hierarchy.

Items that do not fit in the available space are removed from the view and a chevron menu appears at the end of the strip, containing a menu that shows each of the "overflowed" items.

When the user clicks on a folder to open it, the user is then able to move their mouse around over other folders on the strip to open them, without having to click again. This is especially useful for Live Bookmarks on the toolbar where the user can quickly scan new postings across several Live Bookmarks with a single gesture.

Each item on the Toolbar has the standard Places Item Context Menu, with the addition of items specific to the toolbar: 

|                          |
| ---------------------    |
| Change Folder...         | <-- (1)
| ------------------------ |
| Customize Toolbars...    | <-- (2)
+--------------------------+
  1. XXX open issue: this is probably uber-geek but fits with ideas i've heard people discussing. Shows a dialog that lets the user choose a folder or Place: query to root the toolbar on. This may let the user root their toolbar on a delicious folder, for instance, with a delicious extension installed. Related to this, it may be interesting to allow the instantiation of N instances of the Bookmarks toolbar to show the content of different folders.
  2. Show the Customize Toolbar dialog. Added to make it easier to show the Customize dialog since at present showing it means clicking on just the right button, and users will not understand the distinction. This menu item should be shown on all context menus for any Toolbar item.

Places Organizer

The Places Organizer is a window that allows the user to search, browse and organize their bookmarks. 

+-----------------------------------------------------------------------+
| File Edit View Help                                                   |
+-----------------------------------------------------------------------+
| [@ Search Bookmarks & History ] | @ New Folder @ Delete               |
+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| | @ All History        | | Showing Bookmarks Menu                   | |
| |#@#Bookmarks#Menu#####| |==========================================| |
| | @ Bookmarks Toolbar  | | Name             | Location              | |
| | @ Subscriptions      | |------------------+-----------------------| |
| | @ Bonjour            | | CNN.com            http://www.cnn.com/   | |
| | @ Most Visited       | |                                          | |
| | @ Updated Today      | |                                          | |
| | @ Folder 1           | |                                          | |
| | @ Folder 2           | |                                          | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| | @ Folder 5           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder )          ( + New Folder )                           /|
+-----------------------------------------------------------------------+

(Subsequent captures will show only the view area, excluding the toolbar and menu)

Places List

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 History or Bookmarks. Users may also add items to the list.

The Places Pane includes entries for (in this order):

In the static area:

  • All History
  • All Bookmarks
  • Bookmarks Menu
  • Bookmarks Toolbar
  • Subscriptions
  • Any other item that cannot be deleted by the user (e.g. Bonjour Sites)

In the user-editable area:

  • Most often visited
  • Any place: query that could equally have been generated by the user using the Save Search Query functionality.
  • User created Folders
All History

Shows a list of all of the user's browsing history, by default sorted in reverse chronological order so the most recent entries are at the top. This list can be sorted, or grouped according to the grouping options described in the History section below.

All Bookmarks

Shows a flat list of all pages that are Bookmarked. This includes pages that have been marked as interesting but not placed in any folder. This list can be sorted.

Bookmarks Menu, Toolbar

Shows a list of the contents of the Bookmarks Menu or Toolbar, grouped by folders. The user can reorder this list using sorting, or by using drag and drop.

Subscriptions

Shows a flat list of pages that represent posts from Live Bookmarks, sorted by Post Date by default. This list can be sorted, or grouped by Feed according to the Subscriptions section below.

History

+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| |[                    ]| | Showing History for (date range)         | |
| | @ All History        | |==========================================| |
| | @ All Bookmarks      | | Name             | Location              | |
| | @ Bookmarks Menu     | |------------------+-----------------------| |
| | @ Bookmarks Toolbar  | |   MLS Listings     http://www.mlslis...  | |
| | @ Subscriptions      | |   L.J. Hooker      http://www.lhhook...  | |
| | @ Most Visited       | | v Barfoot & Th...  http://www.barfoo...  | |
| | @ Updated Today      | |    Epsom Stunner!  http://www.barfoo...  ||
| | @ Folder 1           | |    Grammar Zone!   http://www.barfoo...  | |
| | @ Folder 2           | |    Charming, P...  http://www.barfoo...  | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| | @ Folder 5           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder )          Group by: (#Site#| Page )                   |
+-----------------------------------------------------------------------+
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

Searching

+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| |[ real estate|       ]| | Search Results for 'foo':     ( Save )(+)| |
| | @ All History        | |==========================================| |
| | @ All Bookmarks      | | Name             | Location              | |
| | @ Bookmarks Menu     | |------------------+-----------------------| |
| | @ Bookmarks Toolbar  | | MLS Listings       http://www.mlslis...  | |
| | @ Subscriptions      | | L.J. Hooker        http://www.lhhook...  | |
| | @ Most Visited       | | Barfoot & Thompson http://www.barfoo...  | |
| | @ Updated Today      | | Century 21         http://www.centur...  | |
| | @ Folder 1           | |                                          | |
| | @ Folder 2           | |                                          | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| | @ Folder 5           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder )          Group by: ( Site | Page )                   |
+-----------------------------------------------------------------------+
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
Advanced Search

When the user searches for some terms, they can specify additional keys by clicking the "+" button in the banner strip next to "Save". This adds a new constraint, from the following set:

Text Search

Matches items whose title, etc matches the specified terms. Future versions will scan page content. 

Containing the text: [ goat               ]

Visit Time

Matches items whose visit date falls within the specified range. 

Visited [ between   :^] [ 27 July, 2006 ] and [ 29 July, 2006 ] <-- (1)
Visited [ after     :^] [ 27 July, 2006 ] 
Visited [ before    :^] [ 27 July, 2006 ] 
Visited [ more than :^] [ 4 ] [ days   :^] ago
Visited [ more than :^] [ 3 ] [ weeks  :^] ago
Visited [ less than :^] [ 4 ] [ days   :^] ago
Visited [ less than :^] [ 1 ] [ months :^] ago
Visited [ today     :^]
  1. These are non-user-editable static date fields. When the user clicks in the field, a calendar picker is shown.

Location

Matches items whose location (URL) matches the specified terms. 

Location [ starts with :^] [ http://www.goats       ]
Location [ is          :^] [ http://www.news.com/   ]
Location [ is on site  :^] [ news.com               ]

Type

Matches items whose type matches the selection. 

Link is [x] a bookmark [x] a subscribed feed [x] a blog post or news item

Tags

Matches items tagged with the specified terms. 

Tags [ contain   :^] [ goat, teleporter            ] <-- (1)
Tags [ are       :^] [ goat, teleporter            ]
  1. This is a tag autocompletion field

Folders

Matches items within the specified folders. 

In folders: [ Bookmarks Menu, Goats       ] ( Add... ) ( Reset )

Maximum Results

Specifies a maximum number of results to return, e.g. 10. 

Limit to [ 10 ] pages

XXX open issue: option for default sort order.

Items are shown when they match all of the conditions set in each of the above areas.

Each criteria can be selected from a dropdown list when a new row is added to the view: 

+------------------------------------------------------+
| Search results for "foo"                 ( Save )(+) |
+------------------------------------------------------+
| Containing the text: [ foo                   ] (+)(-)|
| Visited [ after: ^] [ 27 July, 2005          ] (+)(-)|
+------------------------------------------------------+
| Name               | Location                        |
|--------------------+---------------------------------|
| Barfoot & Thompson   http://www.barfoots.co.nz/      |
|                                                      |
Saving a Search Query

The user can save a set of conditions as a Place to be shown on the Places bar. They can copy or drag the conditions elsewhere within their Bookmarks, e.g. onto their toolbar. The user saves the query by pressing the Save button on the banner: 

+------------------------------------------------------+
| Search results for "foo"                 ( Save )(+) | <-- SAVE
+------------------------------------------------------+
| Containing the text: [ foo                   ] (+)(-)|
| Visited [ from: ^] [ 27 July, 2005           ] (+)(-)|
+------------------------------------------------------+
| Name               | Location                        |
|--------------------+---------------------------------|
| Barfoot & Thompson   http://www.barfoots.co.nz/      |
|                                                      |

When a place is selected in the Places UI, it can be edited by clicking the Edit button in the banner: 

+------------------------------------------------------+
| Showing My Smart Folder                      ( Edit )|
+------------------------------------------------------+
| Name               | Location                        |
|--------------------+---------------------------------|
| Barfoot & Thompson   http://www.barfoots.co.nz/      |
|                                                      |

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 (Group by Post)
+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| |[ Search Bkmks & Hist]| | Showing All Subscriptions                | |
| | @ All History        | |==========================================| |
| | @ Bookmarks Menu     | | Name             | Location              | |
| | @ Bookmarks Toolbar  | |------------------+-----------------------| |
| |#@#Subscriptions######| | Blog A Post 1      http://foo.blogge...  | |
| | @ Bonjour            | | Blog B Post 1      http://bar.blogge...  | |
| | @ Most Visited       | | Blog A Post 2      http://foo.blogge...  | |
| | @ Updated Today      | | Blog B Post 2      http://bar.blogge...  | |
| | @ Folder 1           | |                                          | |
| | @ Folder 2           | |                                          | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| | @ Folder 5           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder )          Group by: ( Feed |#Post#)                   |
+-----------------------------------------------------------------------+
Feed View (Group by Feed)
+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| |[ Search Bkmks & Hist]| | Showing All Subscriptions                | |
| | @ All History        | |==========================================| |
| | @ Bookmarks Menu     | | Name             | Location              | |
| | @ Bookmarks Toolbar  | |------------------+-----------------------| |
| |#@#Subscriptions######| | v Blog A                                 | |
| | @ Bonjour            | |   Post 1           http://foo.blogge...  | |
| | @ Most Visited       | |   Post 2           http://foo.blogge...  | |
| | @ Updated Today      | | v Blog B                                 | |
| | @ Folder 1           | |   Post 1           http://bar.blogge...  | |
| | @ Folder 2           | |   Post 2           http://bar.blogge...  | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| | @ Folder 5           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder )          Group by: (#Feed#| Post )                   |
+-----------------------------------------------------------------------+

Browsing By and Changing Tags

In any view, items can be selected and tagged (marked as interesting for later use) using the tagging UI at the bottom of the main view: 

|
+------------------------------------------------+
| Browse Tags: [                            ]    | <-- (1)
+-------+      [                            ]    |
|  Edit |      [                            ]    | <-- (2)
+------------------------------------------------+
  1. The Browse tags panel lets the user filter the list by any combination of available tags.
  2. The Edit tags panel lets the user type new tags to be applied to the selection. The selected panel is remembered.

XXX open issue: is this the right UI? XXX open issue: which is the default panel?

Menus

File Menu
+------+
| File |
|      +-----------------------+
| New Folder...                |
| New Separator                |
| ---------------------------- |
| Import...                    |
| Export...                    |
| ---------------------------- |
| Close                Ctrl+W  |
+------------------------------+
Edit Menu
+------+
| Edit |
|      +-----------------------+
| Undo                 Ctrl+Z  |
| Redo                 Ctrl+Y  |
| ---------------------------- |
| Cut                  Ctrl+X  | 
| Copy                 Ctrl+C  |
| Paste                Ctrl+V  |
| Delete                  Del  |
| ---------------------------- |
| Select All           Ctrl+A  |
| ---------------------------- |
| Search Bookmarks/H.. Ctrl+F  |
| ---------------------------- |
| Properties...        Ctrl+I  |
+------------------------------+
View Menu
+------+
| View |
|      +-----------------------+
|   Reload             Ctrl+R  | 
| ---------------------------- |
| x Toolbar                    |
|   Show Columns             > |
| ---------------------------- |
| * Unsorted                   |
|   Sort by Title              |
|   Sort by Location           |
|   <cols>                     |
+------------------------------+
Help Menu
+------+
| Help |
|      +-----------------------+
| Using Bookmarks              |
| Using History                |
| Advanced Tips & Tricks       |
| For Internet Explorer Users  |
| ---------------------------- |
| Help Contents            F1  |
| Release Notes                |
| ---------------------------- |
| Check for Updates...         |
| ---------------------------- |
| About Mozilla Firefox        |
+------------------------------+

Tag Autocompletion

Search Result Ranking

Bookmarks and History results should show up in several autocomplete lists:

  • Places Search Popup search results
  • Places Organizer search results
  • Location Bar Autocomplete

When the user searches for a URL, the results are sorted ... XXX document

When the user searches for tags, the results are sorted ... XXX document

Adding Bookmarks

The objective for adding bookmarks is to create a lightweight experience for marking pages while supporting the traditional methods of filing bookmarks.

Add Bookmark Dialog

The Add Bookmark Dialog is a more heavyweight way to add a bookmark. It has several display modes:

Tagging
 +-----------------------------------------------+
 | Name:        [ Foo                          ] | <-- (1)
 | Location:    [ http://www.foo.com/          ] | <-- (2)
 | Tags:        [ Work, Play                   ] | <-- (3)
 | > More                                        | <-- (4)
 |                                               |
 | ( Remove ) ( Show All Bookmarks )    ( Done ) | <-- (5)
 +-----------------------------------------------+
  1. A field that allows the user to edit the title of the page
  2. The location of the page
  3. A field that contains the list of tags applying to the item. This uses the Tag Autocomplete widget.
  4. Expands the dialog into the Full Disclosure mode (below).
  5. The Remove button un-tags the page. Show All Bookmarks shows the Places Organizer window, displaying the All Bookmarks collection. Done applies the changes and closes the dialog.
Filing
 +-----------------------------------------------+
 | Name:        [ Foo                          ] |
 | Location:    [ http://www.foo.com/          ] |
 | Tags:        [ Work, Play                   ] |
 | File into:   [ Bookmarks Menu             :^] | <-- (1)
 | > More                                        |
 |                                               |
 | ( Cancel ) ( Show All Bookmarks )     ( Add ) | <-- (2)
 +-----------------------------------------------+
  1. A list of bookmarks folders is shown also by default in the compact view.
  2. Cancel cancels the addition of the Bookmark. Add Adds the Bookmark. Both close the dialog.
Full Disclosure
 +-----------------------------------------------+
 | Name:        [ Foo                          ] |
 | Location:    [ http://www.foo.com/          ] |
 | Tags:        [ Work, Play                   ] |
 |                                               |
 | File into:   [ Bookmarks Menu             :^] |
 | Shortcut:    [                              ] | <-- (1)
 |  Tip: Type the shortcut in the location bar   |
 |       to open this page.                      |
 | Notes:       [                              ] | <-- (2)
 |              [                              ] |
 |              [                              ] |
 |                                               |
 | ( Remove ) ( Show Bookmarks )        ( Done ) |
 +-----------------------------------------------+
  1. A shortcut that can be entered in the location bar to load the page
  2. Some notes on the page.
Full Disclosure (Properties)

In property editing mode, the dialog does not show a "File into: " line for Bookmarks that are already filed into Folders. 

 +-----------------------------------------------+
 | Name:        [ Foo                          ] |
 | Location:    [ http://www.foo.com/          ] |
 | Tags:        [ Work, Play                   ] |
 |                                               |
 | Shortcut:    [                              ] | <-- (1)
 |  Tip: Type the shortcut in the location bar   |
 |       to open this page.                      |
 | Notes:       [                              ] | <-- (2)
 |              [                              ] |
 |              [                              ] |
 |                                               |
 | ( Remove ) ( Show Bookmarks )        ( Done ) |
 +-----------------------------------------------+

Filing Bookmarks

Any Bookmarks Menu

Bookmarks can be created in the any Bookmarks menu popup using the Bookmark this Page menu item. When this item is chosen, it will show the Add Bookmark dialog in the "Filing" mode with the selected folder selected. For instance, in the Bookmarks Menu, it would show the "Bookmarks Menu" folder selected.

XXX open issue: is filing into any folder in this way a good idea? What are the usage figures on drag and drop? This could be a way for folk to discover they can file into folders on the bookmarks toolbar.

Drag & Drop, Paste

Bookmarks can be created by dragging links into the menu, the Places Organizer, or onto the Bookmarks Toolbar. When this is done the item is inserted without showing any dialog, it is created with the attributes of the dragged item (title, url) and filed into the folder that it is dropped into.

Marking Pages As Interesting

More lightweight than filing a bookmark into a folder for later frequent use is marking a page as interesting later. We suspect this is what a lot of bookmark actions actually are, and the reason why people's Bookmarks menus become quickly cluttered with items they don't use a lot. For whatever reason, folk don't use Bookmarks a lot, part of the reason for this may be the scalability of the Menu and cryptic nature of the toolbar.

The "Tag" button on the browser toolbar (a clickable attachment at the end of the location bar, next to the Subscribe button which appears for pages with Feeds that can be subscribed to) provides a quick way to mark a page as interesting for later access. 

[ @ http://www.foo.com/                      |v|+|S]

Pages marked as interesting are stored in Bookmarks, but not in any folder. Rather, they appear only when the All Bookmarks item is chosen from the Places bar. They can be filed into folders from this location. They also contribute with History and Filed Bookmarks to Location Bar autocompletion, and can be searched for if they are marked with tags.

To mark a page as interesting, the user clicks the button and a Bookmark is added, but not into any folder, using the default title, location, etc. An info tip is shown explaining what happened: 

  |v|+|S]
    +-----------------------------------+
    | Page marked.                      | <-- (1)
    | Click again to edit Name/Tags     |
    |                                   |
    | ( Remove ) ( Show All Bookmarks ) | <-- (2)
    +-----------------------------------+
  1. XXX open issue: terminology!
  2. Remove (XXX open issue: better name ... unmark?) Show All Bookmarks shows the Places Organizer, with the All Bookmarks Place selected.
Tagging Interesting Pages

When the user clicks the Tag button again, an Add Bookmark Dialog opened in "Tagging" mode is shown. The user can enter some tags to allow easier access later, or expand the dialog to file it as a Bookmark in a particular folder, edit additional metadata, etc.

Editing Bookmarks

When the user visits a page that exists within their bookmarks, the Tag button lights up and can be clicked to edit metadata. When clicked, the Add Bookmark dialog is shown in either "Tagging" or "Full Disclosure (Properties)" mode, depending on how the disclosure widget was left the last time the UI was used.

From any Places view, when a user presses Ctrl+I or chooses the Properties/Get Info command from a menu, the Add Bookmark dialog is shown according to the rules described above for visiting a Bookmarked page.

Simple Inline Edit

Simple metadata changes can be accomplished in the tree view. This will not be done for 2.0 due to toolkit limitations.

Content Area Integration

On any page, a "Bookmark this Page..." menu item is available in the context menu.

XXX open issue: is this a good idea? Where does this file into by default? The Menu? What about "Mark page as interesting" functionality?

Tabbed Browser Integration

On any tab, "Bookmark this Tab..." and "Bookmark all Tabs..." menu items are available in the context menu.

XXX open issue: is this a good idea? Where does this file into by default? THe Menu? What about "Mark page as interesting" functionality? Dit

Differences Explained

TBD.

From Firefox 1.x

From Earlier Versions of this Document

From IE

From Safari

Retrieved from "https://wiki.mozilla.org/index.php?title=Places:Firefox_2_User_Interface_Ideas&oldid=17720"