The Visual Identity and User Interface of Live Titles


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:

Twotargets

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:

Twodiggs

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.

Live Titles

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]
Bookmarksliveui
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:
Propertiesdialog
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:
Creationchart
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.

Advantages

I believe this design has four advantages:

  1. 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.
  2. Consistency: The favicon and feed icon now both support clicking and dragging. Every item in the bookmarks sidebar supports navigation with a single click.
  3. 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.
  4. 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.

Contributing

An editable version of this document is located on the Mozilla Wiki.

Discussion

Please comment on these ideas on mozilla.dev.apps.firefox, to reduce the number of places that new Firefox features are discussed.

Information and Links

Join the fray by commenting, tracking what others have to say, or linking to it from your blog.


Other Posts
Tufte and Graphical Live Titles
Hello World

Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

I like this idea very much. The obligatory suggestions, however:

The small feed icon tag appended to the bookmark’s icon might be too small to be distinct. How about an orange (rounded) border around the icon instead?

If we’re trying to blur the distinction between live feeds and titles, then maybe the feed icon should be shown in the location bar if there is only a microsummary available (and no feed).

In fact, live feeds and titles would now be integrated so deeply with bookmarks that they would be essentially one and the same thing. So, how about getting rid of the feed icon in the location bar altogether and just showing the orange border (or the small feed icon tag) on the page’s icon instead?

There’d then be the question of what to create when the user dragged the icon to the bookmarks toolbar/sidebar; I’d suggest the works – live feeds and titles if available.

If “Single clicking on any item in the bookmarks sidebar always navigates the browser the the URL associated with that item” means that clicking a live bookmark folder would show the page from which the live bookmark was created, the user could do that if all they wanted was a simple bookmark.

Otherwise, they could open the bookmark’s Properties dialogue and switch it to a simple bookmark pretty easily. Or a group of radio buttons mimicking the new top half of the Properties dialogue could be added to bookmarks’ context menus.

But to summarise, yes please.

Alex -

There’s some great stuff in here! A lot of progress towards untangling a bit of a mess. A few thoughts (in no specific order):

* A clarification point: are you proposing to use the Feed icon in the URL Bar to represent both feeds and microsummaries? It sounds that way from your mention of dragging it to create either a Live Feed or Title.

* It seems to me like we might want to take a step back and consider a bigger picture. Feeds are only now starting to get any kind of real penetration into a wider market (we’re finding that we can mention RSS to less technical clients now and their eyes don’t immediately gloss over, so that’s some progress). Is the world ready for a UI that gives them a choice between a bookmark (which they almost all understand), an RSS feed (which a minority get), and a microsummary (which a tiny little percentage dig)? There’s obviously a difference between the words “Live Title” and “Live Feed”, but I’m unconvinced I could explain it to most of the people who I provide casual tech support for.

* I really like your interaction diagram for how people can add Bookmarks and I think the idea of making the Feed icon draggable makes a lot of sense. Does it make sense that dragging a Feed to the Bookmarks bar should try to take your Feed preferences into account or should it just make a Live Title/Feed?

* I agree with Greg that the little RSS icon is probably too small and would add that we want to be careful that we’re not only differentiating on something like colour as it will cause all kinds of accessibility concerns. I think you’re headed in the right direction when you say that “the distinction between information retrieved from microsummaries, and RSS / Atom is blurred” - I would suggest that we consider going even further down that path. What if we just removed the distinction entirely? Looking at your mockup of the Bookmark Properties for Woot, it looks like the difference between a Live Title and a Live Feed is just that the Feed has children and the Title doesn’t. So maybe the root of the distinction is really “Bookmark” and “Live Bookmark” in which a Bookmark is static (i.e.: what it was when it was defined), and a Live Bookmark has a dymanic title if a microsummary is available and children if a feed is too?

* Undo is critical to feeling safe in your exploration of the UI - I’m really glad to see it included.

Nice work!

Nice study, indeed. I’ve got some suggestions however:
- First, having used URL bar for interaction (clicking or d’n'd-ing icons), a better distinction between active and passive icons would make it easier for non-geek users. I suggest to put both icons (favicon and feed icon) to the left side of the URL bar.
- Second, I like the idea of applying live titles to live bookmarks (live feeds). However, using a common icon for feed and microsummary makes it more confusing and thus presents a potential problem they won’t be extensively utilized since the feed icon has been a standard for feed channels only. Here, I suggest following the standard and use the feed icon for feeds only.
- Third, highlighting availability of microsummaries for the displayed page remains unsolved in your design unless you display the feed icon for pages with microsummaries but without feeds. In such a case, dual-meaning would add confusion. I suggest to draw a superimposing small black triangle, now used for live bookmarks icon, over the site favicon. Clicking on such a way modified favicon would display a drop-down list of all available live titles. Clicking of such a title then would create new bookmark featuring the corresponding live title.

In general, I really like the idea. It’s definitely a work in progress, yes, and probably has a few issues to iron out before making it live, but in general, I think it’s the right direction.

Some points:

- The RSS icon is a teeny bit small, and hard to spot, I agree that something slightly more prominent is probably warranted.

- I’m also not sure about giving Live Titles the same status as feeds. One describes a document, and the other describes many documents, probably not including the document itself.

- In particular, I don’t think the idea of showing a feed icon where the page has a microsummary, then dragging it into the bookmarks but only then providing a microsummary, makes sense.

- I’m also not sure if we need the feed icon any more, but we do want some way to identify that a page has feeds. I think the best way to do this would be that, whatever indication is given that the bookmark contains a feed, should happen to (around/etc, however it is done) the favicon for the URL instead. That’s more consistent. For this, you will need to have something outside of the icon itself, otherwise people can create stupid icons that pretend this.

- You’ll probably want text and/or tooltips explaining the concepts of what each thing is in there.

- Yes the orange is too extreme. Also, as pointed out by others, you need to be careful with accessibility.

- You need a little more clarification in the diagrams about how you plan to handle multiple feeds and/or microsummaries.

- I slightly worry what a granny will do when presented with the unified bookmarks interface. It might be a bit overwhelming. Perhaps it could be hidden somewhat, or put the OK button also at the top. Just ideas, you need to make sure it’s powerful but not too cluttered.

In general, I love the idea though. I can see traces of my recent suggestions to Myk mixed in there (e.g. clicking the favicon), that’s always good for personal geek points :)

Ian

PS: You need to provide a preview button and also say whether email addresses will get shown. I’m using my ‘2′ email address instead in case it gets shown in plain text.

On a somewhat related note, this somewhat does break the potential idea of having a centralised feeds system, along the lines of Sage or what IE7 does (which is, unfortunately, easier to use than FF’s Live Bookmarks).

What might solve this could be something like OPML where you can tie a bunch of feeds within Firefox itself into a single larger one, then click on just that to see them all.

Also, what happens with regards to bookmarking more than one page from the site? Because the RSS feed isn’t really associated with the single page on the site, the relationship gets a bit confused when bookmarking multiple pages on the same site with the same RSS feed.

Just another comment about your blog itself. I assume you are using some sort of comment moderation, which is why the comments haven’t shown up right away. It might be nice for your visitors if you put a little note about that.

Please feel free to delete this comment rather than put it up.

Thanks everyone for the feedback. If you would like to post additional comments, please post to mozilla.dev.apps.firefox:

http://groups.google.com/group/mozilla.dev.apps.firefox/browse_frm/thread/fafabc4a75a6c3b8/6bdea2920039ea2e?

-Alex

I actually was inspired by your article for this idea, I know improving User Experience is the key for a successful product.

So why not go out and make Firefox something different, it has been always about that.

I remember Lindows (maybe called Linspire now, I can’t remember atm) they had this gallery of apps which you could select from and then it allowed to install in 1 easy step and run it.

My idea is almost similair, but why not make Firefox run only by the mouse. Of course not all of Firefox cause that is impossible, but only those important functionalities or aspects of Firefox.

Meaning by a few a clicks a person could have his favorite web site bookmarked without having to go the bookmarks menu or pressing Ctrl+D.

Maybe adding some extra icon beside the web site favicon, allowing functionality behavior to change for Firefox. I haven’t tried to switch to Firefox 2, cause I’m already satisfied with Firefox 1.5.0.8. I have seen some pictures, don’t know if those are true pictures of Firefox 2. In those pictures contained a redesign of the search bar, it looked a bit similair like IE7. Maybe the new address bar with a similair look could allow my fictional browsing methodology.

Alex,
I am sorry but I disagree with your approach due to several reasons, most of them already mentioned:

- the bookmark dialog is too confusing, especially for people who never heard about RSS and LF (still the majority of users!). I know a lot of people who would see the dialog and getting confused by the choices. Sometimes less choices are better.

The first two choices are in fact one: bookmarking a page (either with a [given] static name or a live title) having its right place at the name field, “simply” needing a better presentation there then now.

The third choice is different since you do not bookmark the same page as above, but a different one (the adress of the feed). Is mixing them really a good idea?

- I agree with you on the dragging issue for fav-icon and rss-icon :)

-The rss-icon overlapping the favicon is to small (and I can hear a lot of designers cry what has been done to their poor icons ;) - why not display to the right of the title (and as big as the fav icon)?