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!

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.

Firefox:

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

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

(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

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):

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:

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

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)

The Ribbon UI is designed to hold a large number of document creation and editing tools, Word (2007)

So to clarify: a tab based and contextual UI designed for holding a massive number of commands for document creation (a Ribbon) doesn’t actually make any sense for a Web browser, and we do not have any plans to use a Ribbon for commands in Firefox.

Firefox 4.0 Proposal

The one thing about all of this confusion that strikes me as really ironic is that the feedback coming in has been based primarily around two points:

1) A UI designed for document creation and editing (a Ribbon) makes no sense for a present day Web browser (indeed, we agree)
2) We should not get rid of the traditional menu bar on Vista and Windows 7!

While I totally agree with the first point, the ironic part is that a traditional menu bar is also a UI designed primarily for document creation and editing. For instance, the most prominent commands in the traditional menu bar are File, Edit, New, Open and Save:

Word 2.0 (1992)

Web browsers actually have a long history of illogically following the lead of Office’s UI, for instance look at the interface of Mosaic 1.0, where document creation and editing controls like File, Edit, Open and Save are displayed as being more important than core navigational controls like Back and Home:

Mosaic (1993), note the number of similarities to Word 2.0

This is where it all started, although to their credit they were actually working on a Web that had notions of document creation and editing.

Now while I’m all in favor of one day creating a full read/write Web browser where it is just as easy to create a page as it is to view one, we aren’t there yet. So interfaces based around document creation, like the old menu bar, or the new Ribbon, simply aren’t a good fit.

And that’s why we (as well as all other major browsers) are shifting towards minimizing the command UI, and having a single button that acts on the page, and a single button that acts on the browser. Additionally, both of these commands are de-emphasized by placing them far on the right side, while core navigation commands get placement in the upper left (this is of course reversed for RTL languages):

Firefox 4.0 Proposal, right side contains a minimal command UI

So I believe that for the same reasons a Ribbon makes little sense for the Firefox UI, which is primarily about tabs and navigation, a traditional menu bar (despite 16 years of history in Web browsers) also makes little sense. And now after 16 years, mainstream browsers like IE, Chrome, Safari and Firefox are exposing a UI that is designed for the specific task of browsing the Web, instead of just mindlessly mirroring Office.

In many cases start up dialogs represent some form of failing, ranging from a failing of engineering (unable to find or implement a cleaner solution), a failing of design (unable to determine the best approach) or a failing of security (delegating a decision so that we can blame the victim). In all of these cases the dialog itself is simply the manifestation of a larger problem that we need to attack. So perhaps “eradicating start up dialogs” is an overly negative title, this is really more about “solving a range of complex problems, but entirely behind the scenes.”

To help up us prioritize and also make sure we have everything covered, I have two questions:

1) What do you think is the most annoying start up dialog
2) What do you think is the most obscure start up dialog that hasn’t been mentioned yet in the comments above the comment you are about to write

Caveat: One really significant issue we are working on is correctly handling the case where the user already has an acceleration model being provided by their mouse or mouse driver, in which case adding another one is obviously really problematic. If you are finding scrolling to be a bit out of control at the moment, you may be encountering double acceleration.

You can check out the full list of ideas on the mozilla wiki. If you have ideas on other things we should be considering please add them to the wiki or comment below.

But more importantly: what do you think is the single perceptual trick you believe would have the biggest impact on how fast Firefox feels? (simply saying “actually make ___ faster” doesn’t really count, and yes we are working on that as well).

I’m thinking we might next work on changing the rate of progress for all of our progress bars. Jeff Atwood over at Coding Horror has a fantastic blog post on the topic that really gets to the root of perceived performance vs. actual performance:

The idea that performance is determined largely by the user’s perception rather than actual wall-clock time can be liberating. Like a magician using skillful sleight of hand to perform magic tricks, you can seemingly alter reality.

Currently all the browser vendors are engaged in a pretty exciting race to see who can engineer the fastest Web browser. A lot of different aspects come into play when you are focusing on raw performance, including top speed (captured by a range of different benchmarks), zero to 60 (cold start up time, page load), and the slightly more amorphous topic of how well the thing handles (to quote Jobs, does it “scroll like butter”). We have loads of engineering resources focused on areas like top speed and start up, but we are also taking handling seriously.

Margaret Leibovic, an intern on the Firefox team has been working on what I believe will be one of the most important handling (or “perceptual performance”) improvements: adding an acceleration based scrolling model to Firefox on Windows and Linux.

Feedback

Check out her post for details, and please comment there with feedback so we can start to refine the scrolling model and work out any bugs.

If you have other ideas of how we can improve handling, please add them to this wiki page about perceived performance.

There are 5 new privacy features introduced to Firefox with the 3.5 release. Here is a description of how each one works:

Tools > Private Browsing (Proactive Privacy)

If you would like to browse the Web without Firefox recording history, Private Browsing allows you to quickly launch a browsing session that will be completely off the record:

After launching into private browsing mode, you receive a confirmation explaining that Firefox isn’t going to remember anything:

It’s great to get private browsing mode into a shipping copy of Firefox, since private browsing mode was previously both targeted and canceled for Firefox 3 (and in the interim it was added to IE and Chrome, which is really great for users). Private browsing mode actually has a long history of not quite making it into a final release, way back in 2002 Blake and Asa prototyped it for Netscape. We all owe a huge thanks to Ehsan Akhgari who worked incredibly hard to get the feature fully implemented.

Tools > Clear Recent History (Retroactive Privacy)

Let’s say that you’ve been browsing around the Web for awhile, perhaps shopping for an engagement ring, or researching a medical condition, and you realize that you really should have been in private browsing mode. The Clear Recent History feature is kind of like Private Browsing, except it works in reverse. (All good interfaces support undo!)

After selecting Clear Recent History, you will be asked what time period you would like to erase:

If you expand details you can see the somewhat arcane list of things being removed, but the short version is that “history” refers to everything that is implicitly collected by Firefox as you browse the Web (and we really mean everything). You can also use this dialog to max out the time range and effectively reset Firefox, similar to the old dialog.

Thanks go to Drew Willcoxon, Shawn Wilsher and Johnathan Nightingale for implementing this feature.

History > Forget about this Site (Retroactive Privacy)

If you don’t want to clear a specific time range but would rather selectively delete items out of your history, Firefox now offers the ability to remove all of the history of a particular Web site. For instance you can select this article in your history (either through the Library window, or the History Sidebar), and then use “Forget About this Site” to remove every visit to blog.mozilla.com.

This is a bit more powerful than deleting individual visits if you are interested in pruning your history. This feature was implemented by Shawn Wilsher.

Simplified Privacy Options (Proactive Privacy)

We’ve also significantly simplified Firefox’s privacy options. By default Firefox will remember where you go on the Web:

However, if you are extremely privacy conscious, or you are setting up a computer that will be in a public location and used by many different people, like a hotel lobby or a computer lab, you can now very easily set Firefox to never remember history. This is basically the same thing as always running Firefox in private browsing mode, except that the mode is always on.

Of course if you have previously changed your history settings, or are interested in micromanaging exactly what Firefox will and will not store as you browse the Web, the full range of settings are still available:

This feature was implemented by Ehsan Akhgari.

Ability to Control What Appears in the Location Bar Search Results (Proactive Privacy)

When we expanded the capabilities of the location bar to search against all history and bookmarks in Firefox 3, a lot of people contacted us to say that they had certain bookmarks they didn’t really want to have displayed. In some cases users had intentionally hidden these bookmarks in deep hierarchies of folders, somewhat similar to how one might hide a physical object. Having something from your previous browsing displayed to someone else who is using your computer (or even worse) to a large audience of people as you are giving a presentation, is really one of the most embarassing things that Firefox can to do you. So now in Firefox 3.5, users have complete control over what types of information are displayed in the location bar (or suggestions can be turned off entirely):

This feature was implemented by Ed Lee and Dietrich Ayala.

Even More Control!

But what if the five privacy tools described above still aren’t enough? You want to be able to save both bookmarks and history, but in a way that only you can access the information.

The most direct way to do this is to create a new user account in the operating system you are using, and to give it a password. Firefox will create a separate profile for that user, and you can use this new profile to store bookmarks and history.

Alternatively, you can launch Firefox and display the profile manager. This is a feature that is intentionally hidden from the normal Firefox UI, since it is a bit more complicated than creating a new user account in your operating system, and is more commonly used by developers who are testing Firefox. Instructions for accessing Firefox’s profile manager vary by operating system, but we have a detailed article explaining the feature.

The third, and perhaps most extreme way to keep your bookmarks and history private, is to use something called Portable Firefox. This allows you to put both Firefox and your profile onto a USB thumb drive. You can then place the thumb drive into a physical box, and literally lock it, bury it, etc.

What’s Next?

While Firefox’s profile manager is currently more of a tool designed for developers, with emerging tools like Mozilla Lab’s Weave, users may soon be logging into their Web browsers to access all of their personal information. The great thing about this is that similar to Web mail and other online services, users can create multiple accounts. Also (unlike Web mail and most other online services) Mozilla Lab’s Weave encrypts all of your information, so you can be assured that you are the only one who has the ability to access it.

Firefox takes your privacy incredibly seriously, and we hope that you enjoy using all of the great new features we’ve added in Firefox 3.5, which is available for download starting today!

New 16×16 Version (All Platforms, but primarily Linux and Windows)

Based on the feedback coming in to the previous post about the new Firefox icon, we’ve gone through several quick iterations on the 16×16 version. Here is the set of iterations which appear in chronological order from left to right. The icon now packaged in RC3 appears on the far right:

Dock Shadow Cropping (OS X)

We moved the position of the 128×128 icon on OS X down slightly so that the automatically generated shadow created by the dock is not as cropped off. This is technically an OS X bug, but the problem isn’t as obvious now (and we are in alignment with other OS X icons):

Higher DPI Shadow Effect for 512×512 (OS X)

This was something that we missed but someone in the community caught: the previous shadow on the highest resolution OS X icon wasn’t being rendered by Illustrator at a high enough DPI:

As always feedback is welcome in the comments below.

I want to thank everyone who provided feedback on the icon during the design process. But more importantly I want to thank the new icon’s creator Anthony Piraino from the Iconfactory. He did a great job with the design work, he very quickly adapted iterations as we changed our direction and sent feedback, and he wasn’t the slightest bit fazed by a completely transparent process that designers often find to be a bit uncomfortable.

The updated Firefox icon is based on sketches and conceptual artwork by Jon Hicks and Stephen Horlander. It is also of course an evolution of the previous rendering of the Firefox icon which was created by Jon Hicks, based on a sketch by Stephen DesRoches and the creative direction of Daniel Burka and Steven Garrity. More information about the history of the Firefox icon is available in our creative brief. All of the designers on Mozilla’s original visual identity team provided feedback on this update, along with Mike Beltzner, Asa Dotzler, John Slater, Paul Kim, Tara Shahian, Alexander Limi, Jennifer Boriss, and the broader Mozilla community.

Files for the new Firefox icon are below, as well as on wiki.mozilla.org.

Download everything (2.9 MB)

Shadow

16×16

22×22

24×24

32×32

48×48

64×64

128×128

256×256

512×512

No Shadow

16×16



22×22



24×24



32×32



48×48



64×64



128×128



256×256



512×512



Icon Files

Windows ico
OS X icns
(Linux: just packages individual png files)

Favicon (to replace an ico)
Favicon (to replace a png)

PSD grid with all pixel polished resolutions

Word Marks

Logo + word mark vertical
Logo + word mark horizontal
Word mark

Vector Files

We will also be releasing vector files for the new Firefox icon (to help with crop circle planning, etc). However we need to finalize a license agreement to accompany them (please do not sell unauthorized physical copies of Firefox with nice box art). We should have those files ready soon.

More information about the project can be found in these earlier posts:

5/06/09 – Thinking about Refreshing the Firefox Icon
5/14/09 – Evolving a Product Brand
5/15/09 – Creative Brief for the New Firefox Icon
5/15/09 – New Firefox Icon: Iteration 1
5/15/09 – New Firefox Icon: Iteration 2
5/17/09 – New Firefox Icon: Concept Rendering by Stephen Horlander
5/20/09 – New Firefox Icon: Q&A
5/20/09 – New Firefox Icon: Iteration 4 + Modified Creative Direction
5/20/09 – New Firefox Icon: Iteration 5
5/21/09 – New Firefox Icon: Q&A, Mostly about Orange Juice
5/22/09 – New Firefox Icon: Iteration 6
5/22/09 – New Firefox Icon: Iteration 7
5/26/09 – New Firefox Icon: Iterations 8 and 9
5/28/09 – New Firefox Icon: Iteration 10
5/30/09 – New Firefox Icon: Iteration 10 in Context
6/02/09 – New Firefox Icon: Iterations 11 to 14
6/06/09 – New Firefox Icon: Iteration 14 in Context
6/17/09 – New Firefox Icon: Q&A