Places:Firefox 2 User Interface Ideas: Difference between revisions

Places:Firefox 2 User Interface Ideas (view source)

Revision as of 20:43, 17 February 2006

4,444 bytes added , 17 February 2006

no edit summary

Ben

525

edits

@@ Line 1: / Line 1: @@
 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 =
@@ 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: 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 ===
@@ Line 700: / Line 705: @@
 === 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>
-  |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>
-==== 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>
@@ Line 727: / Line 737: @@
   | Location:    [ http://www.foo.com/          ] |
   | Tags:        [ Work, Play                   ] |
-  |               common tags: work, play, goats  |
+  | File into:   [ Bookmarks Menu             :^] | <-- (1)
   | > 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 ) |
@@ Line 734: / Line 767: @@
 </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>
@@ Line 741: / Line 779: @@
   | Location:    [ http://www.foo.com/          ] |
   | 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>
-==== 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>
-+------------------------------------------+
+  |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>
-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 ===
+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 ==