Places:Firefox 2 User Interface Ideas
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 Bmks & Hist ]| | Showing Bookmarks Menu | |
| | @ All History | |==========================================| |
| |#@#Bookmarks#Menu#####| | Name | Location | |
| | @ Bookmarks Toolbar | |------------------+-----------------------| |
| | @ Subscriptions | | CNN.com http://www.cnn.com/ | |
| | @ Bonjour | | | |
| | @ Most Visited | | | |
| | @ Updated Today | | | |
| | @ Folder 1 | | | |
| | @ Folder 2 | | | |
| | @ Folder 3 | | | |
| | @ Folder 4 | | | |
| | @ Folder 5 | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder ) ( + New Folder ) |
+-----------------------------------------------------------------------+
Search Results
+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| |[ real estate| ]| | Search Results for 'foo': ( Save )(+)| |
| | @ All History | |==========================================| |
| | @ Bookmarks Menu | | Name | Location | |
| | @ Bookmarks Toolbar | |------------------+-----------------------| |
| | @ Subscriptions | | MLS Listings http://www.mlslis... | |
| | @ Bonjour | | 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 ) ( + New Folder ) |
+-----------------------------------------------------------------------+
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 | | | |
| | | | | |
| | | | | |
| +----------------------+ +------------------------------------------+ |
| ( + New Place ) (#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 Place
+---------------------------------------------------+
| Create a Place |
+---------------------------------------------------+
| This place is a: |
| |
| (*) New Folder for Bookmarks |
| Name: [ ] |
| |
| ( ) Virtual folder containing all items whose: |
| Title contains: [ ] + |
| Visited [ from: ^] [ 27 July, 2005 ] + |
| |
| ( Cancel ) (( Create Place )) |
+---------------------------------------------------+
(PROVISIONAL)
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 | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +----------------------+ | | |
| | | | | |
| | CALENDAR VIEW | | | |
| | | | | |
| +----------------------+ +------------------------------------------+ |
| ( + New Place ) ( 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 | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +----------------------+ | | |
| | | | | |
| | CALENDAR VIEW | | | |
| | | | | |
| +----------------------+ +------------------------------------------+ |
| ( + New Place ) (#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.
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 Clipboard after the selection |
| Ctrl+A | Select All Items |
| Enter, Cmd+O | Open Selected Item |
| Shift+Enter, Shift+Cmd+O | Open Selected Item in Tab |
Adding Bookmarks
Organizing New Bookmarks
TBD.
Editing Bookmarks
Simple Inline Edit
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.
Properties Panel
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).
+------------------------------------------+
| Properties for "Foo" |
+------------------------------------------+
| |
| Name: [ Foo ] |
| Location: [ http://www.foo.com/ ] |
| 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 ) |
+------------------------------------------+
Changes to Existing UI
Removed UI
The following pieces of UI will be removed:
- All sidebars
- Bookmarks manager
- UI relating to older Bookmarks manager (properties dialogs, etc.)