Browsing Your Personal Web

I’ve been wanting to write this post for a few years now. During the development of Firefox 3, I worked on the design of the awesome bar (iteration 1, iteration 2), and on the design of Places (an internal name for History and Bookmarks in Firefox). This post details what I’ve imagined as the next chapter for both, but here’s the interesting part: it’s actually the same story.

The Fundamentals: Search vs. Browse Interactions

Searching and browsing are completely different styles of interaction. Search-based interfaces (like Google, Quicksilver, or the awesome bar), are very fast, they rely heavily on keyboard interaction, and they require you to know for the most part what it is that you are looking for. By contrast, browse-based interfaces (like Yahoo’s Directory, DMOZ, or Firefox’s Bookmarks Sidebar) are slow, rely heavily on mouse interaction, and are most effective when you only have a general idea what it is that you are looking for.

User interface designers usually differentiate between which interface, search or browse, is better suited for a particular task with the terms “recall” and “recognition,” referring to what is going on in the user’s mind. If the user is relying on recall, they are able to proactively retrieve what it is they want out of their memory. For instance, the traditional command line, is a recall, or search (with tab completion), based interface. In contrast, if the user is relying on recognition, they need to be able to see particular terms or objects on the screen before they are able to make a decision on what to do next. For instance, the standard GUI is fundamentally a recognition, or browse-based interface.

Often people focus more on the examples given than the fundamentally different aspects of the two types of interfaces, and assume that one type of UI is better than the other:

I used to use the command line, but then the GUI became popular, I hate remembering stuff, browse is better! Recognition beats recall!

I used to use the Yahoo Directory to find stuff on the Web, but then Google came out, I can quickly get to stuff, search is superior! Fast beats slow!

Or, in the case of the Firefox UI: I used to use the bookmarks sidebar to access things, but now I just use the awesome bar, it’s so much faster, search is the future!

Searchvbrowse

But battling the different interface examples against each other somewhat misses the point. It isn’t about which interface, search or browse, is better than the other, it’s about which is a better match for the user’s particular task, and which is a better match for the user’s mind. So it is critical to provide the user with both, and to make sure that both are extremely well designed.

In Firefox 3 we spent most of our time focusing on improving search to navigate to specific bookmarks and history, with the introduction of changes to the location bar that a lot of people felt were awesome. The awesome bar redefined how we handled search in our UI, allowing users to match any part of the title or URL, monitoring the rate that users revisited sites, and learning to adapt to which search results they were most likely to select for particular search queries. After a little while you and your awesome bar started to know each other really well: in many cases you could type in a single letter, and it would serve up the exact page you were looking for. We pretty much nailed search.

But for user interfaces and information retrieval, getting search right is really only the first half the story.

Bookmarks == Files?

Historically Web browsers have handled bookmarks and history with an interface similar to the OS file system (and in some cases browsers have literally used the file system). Web pages are usually cast as little 16×16 files, and you can move them around using a traditional two pane window with folders. Perhaps because computer scientists were involved, there are a lot of hierarchical structures to expand broadly or deeply.

Organizers

Firefox:

Organizerfirefox

What’s really ironic is that these interfaces are always completely removed from direct act of browsing the Web. Sometimes they are in a totally separate window, sometimes they are sort of tacked onto the side of the browser in a sidebar, and sometimes they are layered over the browser in a tab. But these browse-based interfaces never really leverage the fact that the user is interacting with an application whose sole purpose is to browse things.

Browsing Your Personal Web

The Web browser UI has a lot of useful core controls for browsing information, a home control to take you back to the beginning, back and forward to explore a timeline of recent navigation, and a location bar lets you jump directly to an entirely new destination. These controls could be really useful for browsing history and bookmarks, in addition to browsing Web pages. So I believe we should fully integrate bookmarks and history into the Web browser interface.

Here is what this means specifically:

1. You can start to dive into history and bookmarks from the Home Tab

Hometab

A lot of browsers have provided access to commonly visited pages. That’s great since it is a zero-configuration interface, and it’s something that we are looking into doing on our home tab as well. But in addition to viewing commonly visited pages, we want users to be able to navigate from the home tab into the bookmark folders and tags that they have specifically created. So for instance users can click through the chain of Home > Bookmarks > Recipes > Salmon with Mustard and Brown Sugar Glaze. You might be thinking, this seems slow, why not just type “salmon” into the awesome bar? Perhaps the user wasn’t able to recall (or perhaps even decide) what they wanted to cook for dinner. Or, perhaps they didn’t even realize that it was time to cook dinner until they recognized their recipes folder and it triggered the thought.

On a side note: recognition interfaces always have the potentially dangerous side effect of influencing and manipulating the user’s behavior. Perhaps the user was headed to “research” but then redirected to “recipes” instead. Or in the case of commonly visited pages being displayed on a new tab (Safari, Chrome): “I was going to get work done, but instead I went to slashdot and digg.” This is one of the reasons that we want to have a home tab. The home tab lets us have an interface that is entirely recognition based, rich, functional, but distracting as hell. And the new tab can remain purely recall based, a blank zen sea of perfect nothingness, but by itself completely useless.

2. History and Bookmarks are displayed in the content area

Bookmarksincontent
(Full Size)

Perhaps the most obvious way in which bookmarks and history can be fully integrated into the Web browsing experience is by rendering them not in a sidebar or separate window, but in the content area itself. The content area has a lot of nice properties: This gives us enough space to display thumbnails of bookmarks and history which allows users to quickly identify pages that they have seen before with a broad glance (we have an uncanny ability to remember colors and images and lizards). Additionally, the content area can be combined with a hierarchical sidebar for a traditional two pane organization interface.

3. These content area pages are part of your back/forward navigation queue

Backforwardhistory

Another nice property of displaying bookmarks and history ranges in the content area is that these locally hosted meta-pages can enter into the user’s back and forward queue. So for instance, you can go to your folder of bills, pay the first bill, and then return back to the bills folder to pay the next one. Or if you are scanning your favorite sources of news, you can use the back button to take you to the page that contains the rest of the sites you like to read.

4. You can navigate directly to a collection of bookmarks, or a range of history…

Of all of the aspects of integration, this is the one that I am the most excited about…

Search + Browse Operations: the Best of Both Worlds

Above I stated that it isn’t about which interface is better, search or browse, but which is the most effective for the particular task. Does the user need recognition-based, but slow, or recall-based, but fast. But there is also a third option, which is to seamlessly merge the search and browse interfaces, and create a UI that is perfectly optimized with the user’s ability to recall specific or general information, while minimizing the time spent navigating!

Here is what I mean: even if you can’t recall the information you want down to the most specific level of detail, you search on the slightly more general information that you do remember, and then browse from one step out.

So, ideally I would remember all of the different companies that I pay bills to each month, and I could enter each of them into the location bar (recall, fastest).

But instead, currently I have them all in a folder, which I access by displaying the Bookmarks sidebar, expanding the “bookmarks menu” folder, finding the “apartment” folder, expanding the “bills” folder… (recognition, slow).

However by fully integrating bookmarks and history into the Web browser UI, I can use the location bar to navigate immediately to my bills folder, and then start paying my specific bills (recall, followed by recognition, fast-ish):

Navigatebookmarkfolder

In this example “bills” happens to be a folder, but it could just as easily have been one of the user’s tags.

This hybrid interface also makes our history UI a lot faster. If someone is using the history sidebar, it’s usually because they can only remember partial information about what they are looking for (if they had all the information they would just use the awesome bar to navigate straight there), but they can recall the time range to search.

So instead of a small and clunky tree view, why not just let the user navigate straight to the time range they want to view:

Navigatehistoryrange

This of course means a lot of potential history range terms and string localization, but this is a considerably more efficient way to locate a page out of your history, especially when it is combined with viewing thumbnails in the full content area and leveraging your visual memory.

Introducing the Not-So-Universal URL

Personalurl

Using the Web browser’s location bar to navigate your personal Web somewhat breaks the current nature of URLs. While the user is using the location bar to navigate to pages that have Resource Locators, these Resource Locators are certainly not Universal. However, I think there are two interesting caveats:

When you sync your bookmarks and history with Weave, and log in to any instance of Firefox (4?), you will now be able to navigate your personal Web. So while not completely global (that would be a massive privacy violation), these bookmark and history pages are more universal than being stored only on a single machine.

Additionally, while Weave locally encrypts all of your data before transmitting it to guarantee total privacy, it would be interesting if users could choose to publicly share a particular folder or tag of bookmarks, which would subsequently give the page an actual URL, which is of course Universal and shareable.

Very Early Design Mockups

Here is the current set of mockups to document the new functionality. This project is still in a very early conceptual phase, and as always we would love to hear your feedback.

Accessing Bookmarks with the Location Bar
Accessing History Ranges with the Location Bar
Viewing Bookmarks in the Content Area (in progress)
Viewing History in the Content Area (coming soon)

37 comments

  1. Well, I think the direction you’re taking is awesome. The interface seems to be multiple times better and faster. I’ll be waiting for this to make it to a beta. =)

  2. Looks promising – I can see there’s been great thinking behind this.

    As long as you keep the bookmark sidebar as an option then there isn’t even a reason for the nay-sayers to say nay!

  3. I love that you’re going forward to a dual-approach. Today I’m testing Firefox 3.5 using just the AwesomeBar and while it works out, sometimes I still need easy and fast access to some bookmarks (i.e. bookmarklets or while I don’t have the hands on the keyboard).

    I think that the only rough point for now is about making the Recognition Based search fast enough to compete, while of course it will be still slower.

    For example, the main issues I’m suffering now from this “AwesomeBar-only test” are:
    1. The bookrmarks are hidden too much. Before I was using the toolbar, now without it the links are too much hidden.
    2. It doesn’t play well with OpenDNS (well, it’s not really a Firefox problem…)

    I think that the approach you’re following is interesting. I can just suggest to use a more information dense approach to the Home Tab: I’d love to see lists of bookmarks organized by areas. Or, maybe, a bookmark browser like the Finder Cmd+3 view could be an interesting approach. I don’t know at this time, I’m just sure something could be done. ;)

  4. You are awesome! (I already had some of these thougts and totally agree).
    You are the best usability engineer. It would be great if you would be involved in more opensource projects, like Openoffice or Gnome. They could need your help.

  5. Awesome, we should plan this asap because i see a lot of Places bugs that should be prioritized to make this possible.
    But i really like this.

    The only drawback is see in organizing bookmarks using sidebar and content is for users who have a really large amount of bookmarks (maybe the thumbnail view could change to a list view if number of entries > X).
    Also, looks like we are dropping separation between toolbar/menu/unsorted. otherwise it would become “bookmarks > toolbar > xxx”, than means i have to recall where i saved the bookmark and it is not funny.

  6. This is a really nice approach.

    I wonder what more will become of the Home Tab. Will it also be used for Weave management?

  7. I think bookmarks should definitely have universal URLs. For example, why not “about:bookmarks//”?

    This could have all sorts of potential benefits – for example, extension developers could access bookmark details using Ajax.

    Why do you say bookmarks can’t have universal URLs?

  8. That URL should be “about:bookmarks/{weaveusername}/{bookmarkname}?

  9. I like this a lot. I hope by ‘not-so-universal’ URL, you just mean that it’s not a *public* URL.

    I’m assuming you’ll use something like Chris’s suggestion, or something shorter like profile:bookmarks/apartment/bills (or profile://myprofileserver.com/bookmarks/apartment/bills).

  10. Great thinking, Alex. Also really like your lo-fi yet hi-fi enough mock up style (gray outlines on white for the context).
    With such a clever blending of recent, frequent and hierarchy of stored locations, the back button looks somewhat underdeveloped, aged and lost in that area and begs to be integrated into this system of fast retrieval some more. In other words there is great local optmization, but it would be worthwhile to rethink whether the iconic browser interface of:
    O X
    still makes sense in this context or whether this is an opportunity to rethink that also to make a better, overall more integrated experience.

  11. Nice! I love breadcrumb bars! :)

    Only problem here is that you can’t show as many bookmarks at once as you can with a more traditional layout (but I see your “Views” menu which would I suppose allow users to fix that if they didn’t like it).

    Using the Sidebar like the folders view in Explorer would help as well…

    Showing the bookmark address when visiting a page is slightly questionable I think. It might confuse some people and the people who don’t already look for a domain name may either not notice the change in the display of the site url or dismiss it as a quirk. I personally tend to associate websites more with URLs than a bookmark.

    Perhaps just displaying the bookmark name in bold in the address bar, perhaps with a special background color–similar to how one displays SSL sites–could be used to indicate the user is on a site they trusted enough to bookmark?.

  12. Wow, so you want to integrate Windows Explorer and Safari now into Firefox!

  13. Hi Alex,
    I really like your sentence:
    “But these browse-based interfaces never really leverage the fact that the user is interacting with an application whose soul purpose is to browse things.” So true!

    I wonder if you have a reference for the recall/recognize analysis. I’m supposed to know that kind of thing, but I’m a learning on the job kinda guy ;-).
    Thanks,
    jjb

  14. Alex,

    “While the user is using the location bar to navigate to pages that have Resource Locators, these Resource Locators are certainly not Universal.”

    The URL is a “Uniform” locator, not a universal locator (http://en.wikipedia.org/wiki/Uniform_Resource_Locator). However I think the distinction you may be after here is “Usable” vs “Unambiguous”. http://getfirebug.com is uniform and unambiguous, while “Get Firebug!” resolves to either a music group or a web page debugger, making it unusable for pure search UIs but very usable for pure browse UIs. “Universal” is well, Unattainable I guess ;-)

    jjb

  15. Alex, I think that in Firefox 3 development phase you had mockups where user can chose tag from address bar. And I guess that some sort of recognition interface is expected for that. And tag is just virtual folder.

    So it seems OK, just it is somewhat expected (except possibly nonURLs).

    This will surely improve interaction, but not revolutionize it. Full text indexing and proper integration of it would. Probably you are aware of that, but just to note. And there is no word for such thing yet, even for 4.0.

  16. Yeah, so I sort of messed up what the U stands for in URL. Anyway, what I was getting at is that unlike most pages that users encounter using Firefox, these are not going to be globally accessible. It’s kind of like we are introducing the concept of a very personal intranet. So this might cause some confusion (“what do you mean the URL didn’t work for you?”). I think this is especially true since Firefox is targeted more directly to consumers for use at home as opposed to corporate environments where the concept of an intranet is pretty common.

    Anyway, these personal URLs should certainly still be Uniform (although I’m also in favor of a more human readable breadcrumb display for bookmarks and history, with the URL appearing on selection, details are in the first mockup).

    There are some great suggestions above for the format of a Uniform bookmarks or history URL. I particularly like Chris’s idea of leveraging the user’s weave account in the path. What’s great about this is that if a page does get published and becomes globally accessible, the URL doesn’t need to change.

  17. (Your mockups would be much easier to navigate if they were HTML paragraphs with img tags. Where’s Mozilla Composer when you need it ;-) )

    Re: Viewing Bookmarks in the Content Area:
    a) It seems you’re proposing that all the functionality of Library becomes available in a tab when viewing Bookmarks > Apartments > Bills — it has the same menu except for Import and Backup. There still needs to be the equivalent of choosing Bookmarks > Organize Bookmarks… to get to this view.
    b) The way I think I’d use it is to always have a window open with my bookmarks (I choose Organize Bookmarks when I start and leave it open while I browse; I never ever use the Bookmarks Sidebar), navigate to a bookmarks folder, and sometimes choose Open in Content Area.
    c) Is the page thumbnail the way the page looked when you bookmarked it or the way it looks now?
    d) Please reuse the appearance of tabs: same favicon to the left, same font, same light gray background (so I can drag it to the tab bar). This design and the whole Ctrl+Tab saga ignore the continuity and recollection provided by that almighty UI breakthrough.

    The biggest problem I have with bookmarks is I desperately need full-text search of the pages in a bookmark folder. Take my comment here: If I bookmark your post, how will I ever remember that it’s where I requested full-text search of bookmarks? I can add a bunch of keywords and even rename it, but I’ll probably never find it again. The visual appearance of a page helps you re-find a site but doesn’t help you re-find information.

    This initiatives unifies bookmarks with the content area. Don’t forget about about unifying the Downloads window! It’s increasingly becoming the out-of-place orphan of unification. Downloads are just twinned bookmarks (the page I was looking at and the URL I saved) linked to the file:/// URL where I saved the content. They belong in Places!

  18. Great post Alex – this is a good summary of a lot of the thinking on Firefox’s future UI direction for people who missed the talks/brownbags. :)

  19. This sounds like the kind of idea only a Nazi would come up with.

    :-)

  20. Alex, I love this direction for unifying browsing and searching. I am not so sure, though, that your mock-ups go far enough. In your example, selecting the Bills folder displays it in the content area. This forces the user to switch contexts from a keyboard-optimized search interface to a more mouse-centric browsing interface. This is fine in many scenarios (such as managing bookmarks), but it can slow you down when you just want to get to a specific destination for which you have sufficient recall. My suggestion is to show the contents of the Bills folder inline by replacing the search results. This way, the user can very quickly drill down to a specific item. At the end of the results list would be something like a ‘Show in content area…’ command, which will display the current results in a richer view within the content area, allowing the user to switch to a more browsing-like interface when needed.

    I would also love to see what you have in mind for displaying tags instead of folders, since a bread-crumb trail is not really ideal for tags.

  21. I like to call this kind of design idea “Dangerously Logical”. What a wonderfully “of course” solution to a thorny problem.

    Please keep posting design ideas. Very nice.
    -JW

  22. Hi, Alex. Your article contains seven instances of the word “sidebar” and no instances of the words “library,” “organizer” or “manager.” Please don’t ignore or remove Firefox’s bookmark library/organizer/manager, which is vital for those of us who manage thousands of bookmarks. If and when the library/organizer/manager is further developed, please consider evaluating advanced graphical file managers — such as Total Commander (Windows), Directory Opus (Windows) and Krusader (Linux) — which have features that could benefit Firefox’s bookmark library/organizer/manager. One such feature, which is shared by Firefox itself, is tabs. I loved managing Internet Explorer’s favorites using a tabbed file manager back before Firefox/Phoenix was released. Thanks for your time.

  23. One problem I see with the new bookmark approach is that it seems to assume the user is relatively/somewhat unorganized. If, like me, you have your bookmarks neatly divided into folders and you know exactly which folder contains which bookmark, then the current system of (click) Menu->Bookmarks->Folder->Bookmark (click) seems relatively easy and fast to me. With the new proposal, it seems to me I have two options:
    1. Home tab->(click) Bookmarks-> (click) Folder-> (click) Bookmark, OR
    2. Location bar (take hand off mouse to type)-> select correct entry from a list (click)->select bookmark from content pane (click).

    I mean, I can kind of see where you’re going with this, and it may well be that for a majority of users, this will turn out to be easier. And maybe it’s one of those things where it’ll work better if I see it in person rather than a static mockup, but for me, at least, it seems like this will involve more clicking and hunting around.

  24. It is a very good idea that the web browser interface should allow the users to make good use of their recall and recognition abilities. But I have a few questions about the mockups.

    1. What is the difference between browsing history and bookmarks in the Home Tab as opposed to browsing them in a bookmark manager? It seems both features require the users to keep switching between tabs/windows if they need to browse and view multiple web pages. And I am assuming that there will be no bookmark management features in the Home Tab? So in my opinions, allowing the users to access bookmarks in the Home Tab definitely adds a lot of values to the Home Tab itself. But it doesn’t really improve the bookmark browsing experience. I also think that the bookmark sidebar can be used to provide a better browsing experience because it allows us to browse the bookmarks and their content at the same time.

    2. In my opinion, replacing the URL with the breadcrumb seems to introduce more problems than it’s worth. First, it requires the bookmarks to be organized for it to be useful. And that is a very big requirement unless there is a way to automatically add tag and put them in a meaningful hierarchy. Second, I think it is safe to assume that most people associate the identity of a website with its URL. Introducing a different convention will definitely confuse a lot of people. And given how inconsistent the breadcrumb can be, it would only make the matter worse. Also, the breadcrumb UI creates the illusion that a website is a file. I think the internet is already confusing enough to a lot of people (e.g. a lot of people can’t tell the difference between search engine and web browser) that Mozilla needs to be extremely careful about introducing a new convention.

  25. I’d plea for a better accommodation for the people who basically drag & drop bookmarks.
    Currently there are still a few bugs open, especially the moving bookmarks on the toolbar while dragging are irritating but there are more bugs that don’t get much attention.

    Normally I make bookmarks by dragging. About 7 times a day. It would be great if Firefox could provide a drag interface. At the moment you drop the bookmark it should open a pop-up with the possibility to edit he new bookmark. That pop-up should disappear after a few seconds or after clicking outside the pop-up. There should also be a pref to switch it off.

    Drag & drop is the fastest and easiest way to make a bookmark in my opinion. Please don’t neglect a great feature in the favor of something new. When drag & drop was broken for about 1,5 years I still never used the new interface but continued dragging but only in a more handicapped and clumsy way.

    To find an item the locationbar works fine. It is really a good addition. Maybe I would use it with more success (and thus more often) if it were easier to add tags and keywords.

  26. I have a suggestion , like the home tab in Firefox 4 , can we integrate bookmarks and tabbar together?
    Its similar like superbar in Windows 7 , pin few items and launch them when required , similarly we can ‘pin’ or bookmark some pages to the tab bar , and the will visually appear like that home tab button , when we click the button , it behaves like bookmark in bookmark bar and loads up…

    This way , u can reduce the clutter of bookmarks’ bar , and this will become bit more productive… ;)
    I hope u are getting my idea,,,
    ermm , a kind of screenshot is found here https://addons.mozilla.org/en-US/firefox/images/t/38448/1256969174. Once we click on , say gmail icon , it loads up and the buttons grows into a tab with title… and when we close it , it returns to its original position i.e a button.

  27. sorry for the typing errors .. time to upgrade my keyboard :P

  28. I like these new features

  29. Sounds like a great idea. I would recommend the thing called Weave be almost zero-config and transparent so that the feature is actually useful (unlike delicious). Otherwise, just let me know which version has this in it so I have a reason to start using bookmark tags.

  30. Hi Alex,

    One of the things that I don’t like of Firefox are the continuous updates of the browser and add-ons and the large amount of time that I have to wait all days to apply before starting the browser.

    This is a suggestion for improve the user experience of the updates in Firefox:

    http://www.tentandote.com/2009/11/28/improving-firefox-updates-en/

    http://www.flickr.com/photos/ftosete/4140761722/

    cordial greetings

  31. sorry, I have updated the prototype in my blog and on flickr adding the option “Automatically update” below right.

    http://www.flickr.com/photos/ftosete/4140080373/

  32. This is by far the most positive set of comments I’ve ever seen in response to one of your blog posts!

    It almost seems too easy…I’m suspicious.

  33. How do you do your mockups?

  34. Thanks for an enlightening article. I especially liked the rationale behind the separation of functions between the home tab and the “+” tab.

    I would like to add a minor observation:

    One of the reasons that the Awesomebar’s search doesn’t cover all bases is that it searches a bad database. Its database is primarily the bookmarks’ names; but those names are simply the titles of web pages, and these titles are rarely informative, and are usually polluted with SEO keywords. No regular user would actively re-write (or add tags to) all of his bookmarks; so this introduces a barrier to an informative search at a lower level, at the database level.

    Thus, I believe that recall would fail for the majority of bookmarks. (You implicitly recognize this in the “Search + Browse” section.)

    This explains why searching on folders (also mentioned in that section) is important: It’s high-quality data.

  35. It is very helpfull – “use the location bar to navigate immediately to my bills folder, and then start paying my specific bills”, good article

  36. In my opinion, the bookmarks manager and full-browsing should be moved to and handled in Ubiquity.

  37. why my mozilla firefox often hangs up and get crashed?

    dog cremation urns