Today Myk and I spent some time talking about the visual identity and user interface of Live Titles. I think I’ve come up with a way to streamline the bookmark UI in Firefox and I would love to get some feedback …
The Current Bookmarking UI
First, let’s go over how creating bookmarks currently works in Firefox, and some of the various quirks with the current design.
To create a Bookmark or a Live Bookmark, the user is given two targets in the location bar:
Each target requires a different interaction. Single clicking on the feed icon on the right will create a Live Bookmark (either in Firefox, or in an external application). The favicon on the left can be used to create a bookmark as well, but the user must drag it to either the bookmarks toolbar, or the bookmarks sidebar. If you drag the feed icon, or click the favicon, you’re out of luck.
Another point of potential confusion in the current bookmarking UI is the visual difference between Bookmarks and Live Bookmarks:
The first is a Live Bookmark of Digg’s RSS Feed, and the second is a normal bookmark to the Digg home page. Single clicking the first icon expands the list of bookmarks, while single clicking the second icon navigates to the bookmarked page.
In the back of my mind the past couple of weeks I’ve been thinking about how we should integrate Live Titles into this interface. One potential solution is to create three targets in the location bar, adding a new icon next to the RSS icon when a page contains a microsummary. I am reluctant to do this for two reasons: First, a lot of people don’t even understand the metaphor of the current feed icon, trying to create a metaphor for titles that automatically update is even more abstract. Secondly, I am determined not to let the right end of the location bar turn into an equivalent of the Windows System Tray.
Changes to the Bookmarks UI
In this proposed design, every entry in the bookmarks sidebar / menu / toolbar can potentially be one of three things:
- Normal Bookmark (URL)
- Live Title (URL + Microsummary)
- Live Feed (URL + Microsummary + RSS / Atom) or (URL + RSS / Atom)
Note that in this design Live Bookmarks are now referred to as Live Feeds, to better differentiate them from Live Titles.
Here is what the three different types look like. Note that the orange background is probably too extreme, this could be replaced with a different font color, underlining, italics, etc. [update: the orange is definitely too extreme :). Also, it would cause contrast problems with Graphical Live Titles]
In this design, the distinction between information retrieved from microsummaries, and RSS / Atom is blurred. For instance, the first orange line is a combination: the root element is a microsummary, and its children are retrieved using RSS.
Here are design rules used:
- Single clicking on any item in the bookmarks sidebar always navigates the browser the the URL associated with that item
- Orange background (or whatever convention we use) always means “this content is regularly updated,” regardless of the mechanism used to update the information (RSS 1.0, 2.0, Atom, Microsummary, etc.)
- Feeds are differentiated from bookmarks by adding a small Feed icon tag to the lower right hand side of the favicon
At any point the user can modify an existing item to change what type it is. By right clicking on an item and selecting properties, they will get a dialog that looks like this:
The lower section hasn’t changed, but the user now has the ability to specify what type of item they would like. The “Live TItle” option only appears if the site contains a microsummary, and the “Live Feed” option only appears if the site contains a RSS / Atom feed. If the site contains more than one microsummary, the “Name” text field turns into a drop down list, and if it contains more than one feed, the “Location” text field turns into a drop down list. By default Live Feeds also use Live Titles, if one is available. However, the user can choose to turn the Live Title on a Live Feed off by selecting a static name. Changes in the lower section of the UI are reflected in the preview in the upper section of the UI.
The initial type of the item (Bookmark, Live Title, Live Feed) is determined by the way the user creates the item:
In the Bookmark Properties dialog box, the item type default is based on how the dialog was invoked. For instance, if the user clicks on a favicon, the type “Bookmark” is selected by default. If the user clicked on a feed icon “Live Feed” is selected by default.
I believe this design has four advantages:
- Simplicity: Support for Live Titles is integrated into the UI without adding a new type of feed icon. Orange always means “update,” regardless of the mechanism used to provide the update.
- Consistency: The favicon and feed icon now both support clicking and dragging. Every item in the bookmarks sidebar supports navigation with a single click.
- Discoverability: Even if the user has never clicked on the feed icon, they can discover Live Titles and Live Feeds through the Bookmark Properties dialog box when they are creating new bookmarks.
- Undo: The user can change the behaviors of any item (like changing a Live Feed into a bookmark and vice versa) regardless of how that item was originally created.
An editable version of this document is located on the Mozilla Wiki.
Please comment on these ideas on mozilla.dev.apps.firefox, to reduce the number of places that new Firefox features are discussed.