Full details about tomorrow’s show are on Air Mozilla Backstage.

Note that these icons are still not final, but if you would like to provide some feedback, please let us know what you think sooner rather than later. Also, I would like to encourage people to provide feedback regardless of how they feel, so we can start to get a better sense of overall public opinion.

Click through for the full mockup:

Also be sure to check out Justin Dolske’s post All Glory To The Hypno-Throbber. Assuming we can come up with a great design, we thought a simple and elegant throbber might help with establishing cross platform consistency, and Firefox 3’s identity.

Here is the navigation toolbar we will be using in the Windows XP and Vista themes for Firefox 3 Beta 3. Please note that these icons are not yet final, and the image below is currently just a mockup created with the source artwork.

OS X will be using a similar shape for the navigational controls in Beta 3 as well, while Linux will be using native GTK icons from the OS theme. For more information about the design, see my previous post The Shape of Things to Come?.

Before the code freeze for Beta 3 next week, we are going to land one of the shapes we are considering, which we are calling Keyhole, in the Proto theme for OS X and the new version of our Windows theme. Here is a wireframe of the form:

Firefox 3 Beta 3 will also include revised versions of many of the icons being designed for our new Windows theme by the Iconfactory. The OS X theme Proto will land on land on trunk (we probably need to rename it since it isn’t a prototype theme anymore). Linux has been featuring a native look and feel for awhile now, but the Linux theme will be getting some improvements as well for Beta 3.

Awesome work Michael!

190 * 4

Firefox 3 will contain roughly 120 icons (190 if you count different sizes) on each of the four platforms. You can view an interactive inventory here (click on the items on the right to filter the list). I should note that the icons shown below are just the first iteration we’ve received from our designers. Many of these icons are still drafts, many are still missing, and there are some inconsistencies across platforms. Also, a lot of the icons already have some modifications planned.

Click through for the full sheet of icons:

While the icons are styled for each platform, we plan on using consistent metaphors and symbols to ensure that interacting with Firefox feels familiar as users move between platforms.

Visual Integration

As I’ve mentioned in previous posts about our goals for the Firefox 3 visual refresh, we are paying a great deal of attention to visual integration with the platform in this release. While Firefox is developed as a cross platform application, we are putting a lot of effort into making sure that Firefox feels native on every platform. In addition to feeling familiar and comfortable, I want users to think of Firefox as the browser their computer should have shipped with. On OS X I want you to feel like you’ve upgraded to latest large predatory cat, on Ubuntu the latest Adjective Animal alliteration, and on Windows you’ve just installed Service Pack Awesome.

A major component of our visual integration strategy is matching each platform’s conventions for icon design (Luna, Aero, Aqua, and Tango):

(my apologies to Johnathan for the use of lock icons, I had a complete set)

Windows XP Luna

The XP Luna style contains icons are colorful and fun. The icons appear as simplified illustrations.

We have decided to deviate from the XP Luna style in one specific way: our navigation toolbar icons are going to have a glossier finish than the default texture of XP Luna (we are planning to go with a finish closer to the Royale theme), while maintaining a similar color palette. Note that we just made this decision so the the change isn’t currently reflected in the sheet above.

Windows Vista Aero

The Aero style contains icons that are considerably sharper and more detailed than XP icons. The style is not quit photorealistic, however unlike XP’s Luna style, Aero icons are not created using a specific color palette, and the icons are generally more intricate, particularly for objects that exist in the real world.

The Firefox windows icons are being developed by the renowned icon design studio Iconfactory. The Iconfactory has previously worked on icons for mac applications like Coda and Transmit, Ubuntu 6.06, the Xbox 360, Mozilla Lab’s Prism, as well as the icons for Windows XP and Vista.

OS X Aqua

Application icons in the Aqua style are the most photorealistic, and often contain glassy elements. However icons inside of applications on OS X are often considerably simpler, and leverage softer gradients. The main Firefox window on OS X will have a unified metal appearance (if you are running Firefox 3 Beta 2, be sure to check out the proto theme for a preview).

Our OS X icons are being designed by Stephen Horlander and Kevin Gerich.

Linux Tango

On Linux Firefox will use native GTK icons where available, and the rest are being created in the Tango style. Other applications that have adopted the Tango style include the Gimp, Pidgin, and (most notably) the Gnome desktop. Tango icons are light, crisp, and simple.

Our Linux icons are being created by Andreas Nilsson, Kalle Persson, Ulisse Perusin, Jakub Steiner, and Lapo Calamandrei. Michael Ventnor and Michael Monreal are helping to make sure Firefox uses the native GTK icons from the current OS theme wherever possible.

New Firefox Application Icon

In addition to refreshing all of the icons inside of Firefox, this release will also see a refresh to the Firefox application icon itself. We have contracted Jon Hicks to update our application icon for Firefox 3. Jon worked with Steven Garrity, Daniel Burka and Stephen Desroches to create the original Firefox application icon, so Jon is now getting a chance to re-imagine the original vision they had for the Firefox icon, while updating it to have a sleeker, more modern, and higher fidelity appearance. We unfortunately don’t have anything to show just yet, but Jon has posted a small teaser to his blog.

Discussion

We are releasing these icons publicly as soon as we receive them so that we can get feedback on them. Please feel free to post comments below, or over in a thread I’ve set up in dev.apps.firefox.

Over the past couple of weeks I’ve been driving the design of a cross platform shape and control set for Firefox 3. I’ve been working with the Firefox 3 drivers Mike Connor and Mike Beltzner, along with Mozilla’s interactician Madhava Enros, Dave Brasgalla from the Iconfactory, and our OS X theme contributers Stephen Horlander and Kevin Gerich. Here is the current design, which has already gone through a lot of iterations. We are very interested in people’s thoughts and feedback.

Our goals are to design an interface that is simple, modern, and visually lighter than previous versions of Firefox. A lot of careful thought went into determining which controls we could integrate or remove. We also focused a lot on how we could leverage visual design (namely grouping and patterns) to form a user interface that is both simpler and easier to use. All of this work is still in progress, but here is the current design for OS X, Windows Vista, and Windows XP. Click through for the full mockup.

The reason Linux isn’t shown above is that all of the feedback we’ve received so far indicates that Linux users would be happier with a theme that uses native GTK icons in the navigation toolbar, which rules out this type of customized visual treatment. Linux theme work is really active right now, see the details in my last post, and some really thorough coverage over at Ars Technica.

Here is a recap of what we changed, what we removed, what we added, and what we didn’t change. We are always open to lively debate about what should or shouldn’t be in primary UI, so feel free to voice your opinion in the comments. Note that the title of this post is a question, not a statement. This isn’t a final design for Firefox 3 as much as a snapshot of our current thoughts.

What we Changed

-The back button is larger than the forward button. We did this for two reasons: first, it’s a really important button. We could probably ship a Web browser with just a location bar and a back button, and a lot of users would be totally fine with that. By making the back button larger we make it easier to visually target and hit, which isn’t the kind of thing you will necessarily consciously notice, but the best improvements to usability are often things you don’t consciously notice. The second reason we are interested in making the back button larger is to create a unique visual identity. This form serves as a visual cue that you are looking at Firefox 3 (lengthy discussion below). On OS X we are experimenting with making the toolbar 15 pixels taller, and on Windows the toolbar height is currently remaining the same.

-The home button is now the first link on the bookmarks toolbar. We are planning on keeping it in the customization pallet so users can add it back to the navigation toolbar if they really want it there.

-The throbber is being relocated to the site button. This gives it a visual and conceptual mapping with the URL being loaded, and places it directly next to the stop button (and near the reload button and the navigational controls) so the user will immediately see feedback when interacting with these controls, as opposed to having to move their gaze to the far right side of the browser.

What we Removed

With the Web feed icon, star icon, go button, lock icon and drop down control all appearing on the right side of the location bar, we’ve recently been referring to this area of the UI as our “lucky charms” (purple horseshoes have sadly been pushed back to Firefox 4 due to a lack of developer resources, but we are accepting magically delicious patches). In these wireframes we’ve downsized from 5 lucky charms to 2: Web feed and star.

-The lock is being removed from primary UI, and Firefox will now use a metaphor based on identity, rather than security, which will appear on the site button if an SSL or EV certificate is available. The super short explanation for this change is that the user might have an encrypted connection to criminals, so telling them that they are safe is a false cue. For an in-depth discussion of why we are moving away from the metaphor of a lock, watch Johnathan Nightingale’s Mozilla24 presentation Beyond the Padlock.

-The go button now only appears when you are typing in the location bar, replacing the Web feed and star buttons as the only item on the right side of the location bar.

-In this design the drop down marker in the location bar now only appears when you hover the mouse on the location bar. The rationale was that we wanted to keep the control around for people who regularly use it (and already know that it is there), but are otherwise hiding it to reduce the overall visual complexity of the right side of the location bar, and because we don’t feel that this control needs to be discoverable.

What we Added

-The right side of the location bar now has a star icon that allows users to bookmark a Web page with a single click. We’ve found that a lot of users don’t bookmark pages anymore because it is actually easier to just search Google for any Web page that you want to visit again. So our objective when redesigning bookmarking in Firefox 3 was to create a system that was even faster for users than searching Google. Here is how it works: a single click on the star icon bookmarks the page and ensures that Firefox will never forget that you visited it. You can now search for the page again by entering any part of the title or URL In the location bar, which is more efficient than sending your search across the network, waiting for Google to generate a results page, and then locating and selecting the correct result on that page.

-The left side of the location bar now contains what we are calling the site button. Clicking on this button displays information about the identity of who you are connected to (SSL or EV certificate) if available, and in future releases we may also include actions that are contextual to the Web site you are on when you click the site button.

-On Windows we are experimenting with a small control between back and forward called the history button. This is functionally the same as the integrated drop down menu in IE7, although we believe the clock metaphor will hopefully be more descriptive than a down arrow. In particular, this is one part of the design that we are still iterating on.

What we Didn’t Change

There are lots of things we didn’t change, but I think these two decisions in particular are notable:

-The search bar and the location bar are still two different fields. Overall it seems like this is pretty redundant UI, especially since the location bar in Firefox 3 behaves a lot more like a search field (it even now contains the self describing text “Search Bookmarks and History”). However, integrating the two fields is certainly a non-trivial UI problem. Specific challenges include the fact that you should always show the location that the user has navigated to, but novice users will be reluctant to edit and replace any text that they don’t understand (and most URLs are not human readable.) Also, users who are concerned with privacy enjoy knowing when Firefox is making a network connection or not, and they don’t necessarily want everything they type into the location bar handed to a third party search engine. Additionally, the best way to integrate search suggestions with location bar auto-complete results isn’t very clear. If anyone has solutions to these three UI problems, by all means please post an answer in the comments.

-Stop and reload are not the same button. A lot of people have suggested that we follow Safari’s lead and integrate stop and reload. There are also some Firefox extensions out there that do this. The reason we decided not to integrate the two buttons is the case where you are thinking “this page is taking forever to load, I’m going to stop it” but then, a split second before you down-click, during the time in which your brain has sent the signal to your hand to carry out the action, the page finishes loading, the button changes state, and you end up doing the opposite of what you actually wanted, and think “@$%&!” Overall I think the speed of the user’s connection plays a large role in determining how often they will hit the wrong control. For instance, I rarely experience this problem when using Safari on a broadband connection, but I do commonly experience it when using an iPhone on the edge network. So to avoid potentially frustrating the user, we don’t think we should integrate the two buttons. However, integrating the two is a pretty big visual simplicity win, and the annoying situation is a boundary case, so there are definitely two sides to the debate.

Notes About the Design

In addition to the comments above, here are two accompanying mockups that explain in detail some of the very specific visual design and interaction attributes of the current iteration of wireframes:

Notes on the Design

Circle to Square Height Ratios on Various Platforms

Platform Integration vs. Cross Platform Identity

In a previous post about the visual refresh for Firefox 3, I discussed our goal of visual integration with each platform. This strategy has a number of advantages, including presenting you with an interface that feels familiar, and reducing the negative feeling of adding something foreign to your system. We also what to ensure that as you move between Firefox and other applications on your system, the transition does not feel jarring.

However, morphing Firefox to visually integrate on each platform has one very serious downside: we risk losing Firefox’s identity. How do we achieve perfect visual integration with OS X without looking like Safari? And how do we achieve perfect visual integration on XP without looking like IE6, and Vista without looking like IE7? In a lot of ways these two goals, achieving visual integration on each platform, and maintaining a consistent cross platform identity, are diametrically opposed. However, we’ve been working on trying to pull off both.

Our strategy is to divide up the different visual variables across the two different objectives. Contrast (value), color (hue) and texture are used to integrate with the platform, while shape, position, orientation, and size are leveraged to create a cross platform identity:

Note: the visual variables shown in this diagram are from a slide by professor Rob Miller at MIT

Another way of thinking about this strategy is that the objects remain the same across platforms, but the materials that these objects are made out of (metal, glass, plastic) change based on what OS you are running Firefox on (OS X, Vista, XP). For instance, here is the iconic shape for back and forward that gives Firefox a cross platform identity:

And here is the same object constructed out of metal, glass, and plastic, for visual integration with the different platforms:

There are a few exceptions to this approach, in particular the stop and reload buttons appear as glyphs on shapes on OS X, instead of glyphs floating in space, and each design leverages platform specific curve ratios. Also, we are playing around with the idea of a history button on Windows, but we are still working on that design.

Establishing Identity Through Shape: Iconic Forms

Taking the discussion to a much more theoretical level, I want to discuss why I think it is important that Firefox 3 has a unique shape, and the fundamental role that shape plays in establishing identity. When we think about identity, we often focus on brand names and logos, but many objects are so visually unique, that their shape is the only thing needed to differentiate them from every other object in existence. We are so good at processing visual information that even a simple wireframe results in us easily recognizing an object. For instance, consider common tools:

After interacting with these tools, their form becomes extremely recognizable, even when shown in 2D using a simple outline. For these tools their form is dictated by functionality, as opposed to a desire to be recognizable. However, some objects have become iconic due to their clearly recognizable form. For instance, consider this hat:

Only three intersecting circles, but this is one of the most iconic forms the world has ever seen. Great designers are able to leverage simple and recognizable shapes to construct iconic forms that make their products memorable and easily differentiated from competition.

Firefox has been incredibly successful primarily because it is a fantastic product. The marketing around Firefox has also been extremely well done. Firefox has a great name, and a gorgeous and easily recognizable application icon. However, the tool itself has not been designed to contain an iconic form, a shape that you would recognize even if you only saw its’ shadow, or an outline. I believe Firefox 3 should be recognizable even if you are only viewing it momentarily, looking over someone else’s shoulder. Since the navigational controls are something we constantly view and interact with, that makes them a great candidate for trying to establish a recognizable shape:

This is just one example of the kind of shape we could use. Hopefully, whatever we end up going with, you’ll be able to catch a quick glance of it and still immediately know that just saw Firefox.

[Update: there is some very thorough coverage over on Ars Technica with lots of screenshots]

Looking at the Firefox team’s progress quantitatively, over the course of just three days we were able to identify 20 user interfaces in competing browsers that we felt could potentially improve Firefox, we found 60 usability problems with Firefox, and we brainstormed 40 ideas for directions Web browsing user interfaces can potentially take in the future. Notes from the sprint are located on the mozilla wiki. Mozilla also hosted happy hour events on Friday and Saturday in the evening and sprint participants consumed 15 pitchers of beer. For the next sprint we’ll try to get our stats even higher!

These usability sprints are incredibly valuable to Mozilla because with only three people in Mozilla’s User Experience team, it is great to increase our ranks, even if only momentarily. Also, working with talented user experience and interaction designers who have a completely fresh perspective on some of the UI issues we are facing is extremely useful. In particular I want to thank Min Wu, Chun-Yi Chen, and Jon Slenk for the prolifically critical heuristic evaluation of Firefox they did on Saturday. Also thanks to Daniel Schwartz and Jon Slenk for organizing the event.

If you are a user experience designer in the bay area, these sprints are a great way to meet other people in your field, to level up your skills, and to work on an interesting project. If you are running an open source project, these sprints are a great way to get high quality user experience consulting for free, and to considerably improve the usability of your application or site.

Improving the Refracting Experience

• We could package webapp bundles as extensions, and then have Prism search for matching extensions when the user is converting a Web application to a desktop application. These extensions would include various files to customize the Web application, like a webapp.css file to style the application, greasemonkey scripts, etc. In terms of the user interface, users would just see a screen shot of what the application will look like, along with a feature list when refracting an application out of their browser. For instance, if the user is converting Google Reader out of their browser (Tools > Convert to Application), they may see one bundle that has been downloaded by 10,000 people and another that has been downloaded by 3,000 people. After looking at the screen shots and feature lists, they choose which the one they want (or none). Users could switch which bundle they are using to modify the Web application at any point after refracting as well.
• Automatically convert the user’s favorite Web applications based on a white list of known applications and their frecency score in places? For instance, Firefox notices that the user visits 30 Boxes every day so it drops a shortcut to 30 Boxes in the Web applications folder of their Start Menu to alternatively launch the application with Prism. Since this is just a shortcut, it’s only going to take up ~1k of space on the user’s hard drive, but it still may not be a good idea since users generally have a certain chagrin for applications that proactively try to help them. There are also some privacy implications.

Content Handling

• Allow Web applications to register with the operating system to handle certain file types. Obviously there are a lot of security concerns with this, and this would only apply to applications that the user has personally refracted, there would need to be confirmation dialog boxes before uploading content, etc.
• Allow the user to drag and drop files onto refracted applications, or Firefox (which will load the Web app in a new tab and then upload the file)
• Get the process of uploading files to Web applications standardized through a group like the WHATWG, and supported by a few popular Web applications, like Zoho, and Google Docs

Integration with the Desktop Environment

Windows

• Minimize to the system tray

OS X

• Modify the dock icon (number of unread emails, web feed messages, etc.)
• Run as a menu bar item (we would need to convert the favicon to monochrome)

All Platforms

• Let Web application developers specify their own high resolution application icon so we don’t have to rely on upscaling
• Support for frameless windows (for more widgetish apps, or stylized apps like twitterrific)
• Get a notification api standardized through a group like the WHATWG, but leave it up to the client to determine how to deliver the notification to the user (we would probably go with growl on mac, system tray dialog bubbles on Windows, custom implementation on Linux, etc.)
• Launch application on startup

Improvements to the Web Platform (mentioned in the original announcement)

• Support for offline applications
• canvas3d

Partner Builds

• Make it really easy for application developers to deploy Prism along with their webapp bundle directly to users.