Places:Firefox 2 User Interface Ideas: Difference between revisions
No edit summary |
|||
| Line 1: | Line 1: | ||
= Note = | = Note = | ||
Do NOT edit this page directly unless you are on the Places team. Comment on the discussion page. | Do NOT edit this page directly unless you are on the [[Places]] team. Comment on the discussion page. | ||
= Background = | = Background = | ||
Revision as of 01:44, 19 January 2006
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 ) 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
History
+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| |[ real estate| ]| | Showing History for (date range) | |
| | @ All History | |==========================================| |
| | @ Bookmarks Menu | | Name | Location | |
| | @ Bookmarks Toolbar | |------------------+-----------------------| |
| | @ Subscriptions | | MLS Listings http://www.mlslis... | |
| | @ Bonjour | | 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 | | | |
| | | | | |
| +----------------------+ | | |
| | < February 2006 > | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +----------------------+ +------------------------------------------+ |
| ( + 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
Saving a Search Query
When search results are displayed:
+------------------------------------------------------+
| Search results for "foo" ( Save )(+) |
+------------------------------------------------------+
| Containing the text: [ foo ] (+)(-)|
| Visited [ from: ^] [ 27 July, 2005 ] (+)(-)|
+------------------------------------------------------+
| Name | Location |
|--------------------+---------------------------------|
| Barfoot & Thompson http://www.barfoots.co.nz/ |
| |
When a search is saved it is entered as a Place in the left bar. When a place is selected, the following is shown:
+------------------------------------------------------+
| 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 (View 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 (View 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 | | | |
| | | | | |
| | | | | |
| +----------------------+ | | |
| | < January 2006 > | | | |
| | | | | |
| | | | | |
| | | | | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder ) Group by: (#Feed#| Post ) |
+-----------------------------------------------------------------------+
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 History or Bookmarks. Users may also add items to the list.
The Places Pane includes entries for (in this order):
In the static area:
- Search Field
- All History
- Bookmarks Menu
- Bookmarks Toolbar
- Subscriptions
- Bonjour Sites (Phase 3)
In the user-editable area:
- Most often visited (Phase 2)
- Updated Today (Phase 2)
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
| Open | |
| Open in New Tab | |
| Open in New Window | |
| Get Info | |
| Remove Item | |
| New Folder... | |
Search Menu
| In All Folders | |
| Only in Bookmarks Bar |
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
| New Window | Ctrl+N |
| New Tab | Ctrl+T |
| Open Location... | Ctrl+L |
| Open File... | Ctrl+O |
| Close Window... | Ctrl+Shift+W |
| Close Tab... | Ctrl+W |
| Save Page As... | Ctrl+S |
| Save Frame As... | |
| Send Link... | |
| Page Setup... | |
| Print Preview | |
| Print... | Ctrl+P |
| Import... | |
| Work Offline | |
| Exit | |
Edit Menu
| Undo | Ctrl+Z |
| Redo | Ctrl+Y |
| Cut | Ctrl+X |
| Copy | Ctrl+C |
| Paste | Ctrl+V |
| Delete | Del |
| Select All | Ctrl+A |
| Find in Places... | Ctrl+F |
| Find Again | Ctrl+G |
View Menu
| Toolbars | |
| Status Bar | |
| Sidebar | |
| Stop | Esc |
| Reload | Ctrl+R |
| Text Size | |
| Page Style | |
| Character Encoding | |
| Page Source | Ctrl+U |
| Full Screen | F11 |
Go Menu, Tools Menu, Help Menu
As is.
Bookmarks Menu
| Bookmark this Page... | Ctrl+D |
| Bookmark All Tabs... | |
| Show All Bookmarks | Ctrl+B |
| Bookmark | |
| Bookmark | |
| Bookmark | |
| Bookmark | |
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
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:
[ @ http://www.foo.com/ |v|+|S]
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.
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:
|v|+|S]
+---------------------------------+
| Bookmark Added to 'Foo' |
| Click again to edit Name/Tags |
| |
| ( Remove ) ( Show Bookmarks ) |
+---------------------------------+
Organizing New Bookmarks
When the user clicks the button again, the URL bar is replaced by a more elaborate property editor:
+-----------------------------------------------+
| Name: [ Foo ] |
| Location: [ http://www.foo.com/ ] |
| Tags: [ Work, Play ] |
| common tags: work, play, goats |
| > More |
| |
| ( Remove ) ( Show Bookmarks ) ( Done ) |
+-----------------------------------------------+
When the disclosure widget is clicked:
+-----------------------------------------------+
| Name: [ Foo ] |
| Location: [ http://www.foo.com/ ] |
| Tags: [ Work, Play ] |
| common tags: work, play, goats |
| Shortcut: [ ] |
| Description: [ ] |
| [ ] |
| [ ] |
| |
| ( Remove ) ( Show Bookmarks ) ( Done ) |
+-----------------------------------------------+
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 ) |
+------------------------------------------+
This can re-use the code used to fill the advanced Add UI. (See above)
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.)