The Firefox 3 Visual Refresh: System Integration
As we get closer to moving Firefox 3 from the alpha stage to the beta stage, testers of Minefield (our nightly builds), and people who follow the user experience team’s mockups on bugzilla and forums like dev.apps.firefox are starting to see some glimpses of what Firefox 3 may look like. Since I haven’t posted to my blog yet about our strategy for the visual refresh, I figured I am long due for a post about what we are trying to accomplish, why, and when it is going to land.
Visual Integration with the Platform
Several weeks ago a mockup of the new places organizer hit digg, and public reaction was essentially “Looks nice for Vista users but what about OS X…”
This was subsequently followed by a mockup of Firefox 3 on OS X hitting digg, and comments once again started flying: “Yay now it matches…” The Firefox 3 theme for OS X is being developed by the immensely talented contributers Stephen Horlander and Kevin Gerich. We are also receiving a lot of feedback and advice from Aronnax of GrApple fame.
You may be detecting a trend. Visual integration with Windows and OS X is our primary objective for the Firefox 3 refresh.
Fitting in to the visual appearance of the native operating system may seem like a reasonably obvious decision, but it certainly isn’t one that every cross-platform application or windowing toolkit makes. For instance RealPlayer (image) uses a custom appearance across operating systems, as do applications built using Java’s Swing windowing toolkit (image). Personally I think a unified cross platform UI results in applications that at best feel foreign everywhere, and at worst don’t even feel like real applications. Making XUL appear truly native means we have to do some extra work when new operating systems are released, like Vista and Leopard, but I think this work clearly results in a superior user experience.
With this release of Firefox we are trying to achieve an even closer level of visual integration than we have had in previous releases. For instance, we are planning on having two different sets of icons for Windows: a set for Windows XP that uses the XP color palette, and will have the correct plastic reflectance, and a set for Windows Vista that will use a larger color pallet for objects, a smaller color pallet for glyphs, and the icons will be appropriately shiny. For Firefox 2 we weren’t able to ship two icon sets, so we literally averaged the two different aesthetics and created a theme that looked sort of right on each platform. If you are interested in the design guidelines for Windows icons, they are available for XP and Vista, and here are the guidelines for different visual variables I’ve set up based on these documents for the new Firefox icons.
[Update: I made the unfortunate mistake of not mentioning Linux when first posting because we still aren't sure what the best way to visually integrate with Linux is, given the number of different distributions. Mozilla's lead Firefox engineer Mike Connor and our user experience lead Mike Beltzner have both written followup posts about this. Some links to how you can join the discussion about visual integration on Linux appear below].
For OS X we are following the new unified style that is used consistently throughout all applications on Leopard. Firefox will look the same on 10.4 as it does on 10.5, similar to iTunes, and iLife 08. We are also looking into a variety of other little touches to visually integrate on the Mac, like the correct appearance of source lists (we call them sidebars), a cover flow-esque styling in the add-ons manager, and transparent panel styling (sometimes called HUD window styling) for the places drop down and the new identity button in the location bar (mockup coming soon).
One reason we want to focus to this level of detail on visual integration with various platforms is because the Web browser is an incredibly central piece of the user’s operating system, and we don’t want the user’s initial reaction to be that they have modified their computer to add some type of strange, foreign application. For instance, after you install Firefox on a completely fresh installation of Windows, we want you to feel like Firefox is a very carefully crafted part of your OS. This is particularly important on the Mac, since brand new computers only contain software that has been designed by Apple. Also, since Apple does a great job of including all of the applications that regular consumers commonly need for interacting with their computer, Firefox is in many cases the only third party application users install on OS X.
Visual design also goes beyond the user’s first reaction to the software application. As you move between performing tasks on the Web and interacting with the rest of your system, we don’t want the experience to be jarring. We view visual design as a part of interactive design, in that we want Firefox to blend into the rest of your system. Not in the sense that users no longer remember that their computer didn’t initially come with Firefox, but in the sense that the visual integration aids in achieving flow.
Mozilla’s user experience team literally wants to do a better job of visually integrating with Windows than IE, and a better job of visually integrating with OS X than Safari. I don’t know if we will be able to pull that off, but that’s the goal.
Maintaining Firefox’s Identity
One of the biggest challenges with this design direction will be achieving visual integration while still making sure that Firefox maintains a unique brand and identity. Traditionally we have had nearly the same user interface on every platform, so regardless of what operating system you are looking at, you can easily recognize Firefox. Correctly matching the color and reflectance (metal, plastic, glass) of each platform is going to diminish that effect. However, we can still leverage shape for cross platform consistency. For instance, we could come up with a unique shape for how the back and forward buttons integrate with each other, and style this form to match each operating system. The layout of controls will also likely still remain consistent between platforms. We of course also still have a very recognizable application icon.
Overall however, I personally think Firefox has in the past established its identity through interactions as opposed to the visual design of the interface itself. When users described switching to Firefox 1.0, they often talked about tabs (even though the icons were fantastic). I may have a skewed perspective on this because I’m far more of an interaction designer than a visual designer.
To give a specific example of how I see the next release of Firefox establishing its identity through interactions: Firefox 3 is going to include an incredibly useful feature where you can quickly navigate to a bookmark or history item by typing part of its name, or part of the URL (like the start and the end, which seems to be the only parts we remember anyway). Ideally (Seth is still working on this), the suggestions will learn and adapt based on the results you choose, so the interface will become even more streamlined over time:
This is the kind of feature that once you start to rely on it, you quickly think to yourself “how did I ever get by without this?” When you think about the difference between Firefox 2 and 3, or the difference between Firefox and other Web browsers, I think it is streamlined interactions like this, or one click bookmarking, that are likely to spring to mind, as opposed to the application’s unique visual style.
Specific Tasks for the Visual Refresh
Mac OS X:
- Design a new icon set for OS X (bug 399398)
- Implement unified toolbar (bug 303110)
- Implement a new theme for OS X (bug 397723)
Windows:
[Update: Linux Distributions:
- Decide if we should go with the Tango style of icons (dev.apps.firefox thread)
- Design a new set of icons (bug 381206) ]
The implementation work for OS X is already well underway. The refreshed icons will start to be dropped into nightly builds of OS X and Windows as we have them. [Update: The same will go for Linux icons once we decide on the correct direction for visual integration. ]
Firefox Icon Inventory
Firefox 3 will have about 120 different icons, appearing at a variety of different resolutions. To track all of the work we need to do for this visual refresh I’ve set up an inventory of all of the icons we need. The Web application being used to display this data is Exhibit 2.0 created by the SIMILE research group at MIT. In addition to sorting different columns and filtering search, you can also use the controls on the far right side of the window to perform faceted browsing:
For instance, how many high visibility icons are being introduced for the first time in Firefox 3, have a resolution of 16×16 pixels, and have myself as the user experience contact? 3! This is really a useful way to browse data across a variety of dimensions. I was planning on setting up an exhibit view of the Firefox 3 Products Requirements Document, but Mike Connor beat me to it. In both cases the data itself is stored in a Google spreadsheet, which gets syndicated to a JSON RSS Feed, and the Web app immediately reflects changes people make to the spreadsheet. You can learn more about Exhibit from this tutorial about setting one up, and this tutorial about linking one to a Google spreadsheet.
How to Contribute
Things are now underway with the new OS X theme and producing icons. If you are interested in getting involved, there are two areas where we would love for people to contribute:
1) General Feedback on both the design direction and actual work (either below or in the relevant bugs)
2) Specific ideas for theme tweaks to help Firefox fit in on various platforms. For instance, this blog post about tweaking the Firefox theme for Vista is exactly the kind of ideas we are looking for.
“The various platforms”? I only see 2 platforms mentioned here. What about Linux, Unix, BSD, and other open-source systems? I know there is a much larger variety of themes in these systems, but at least telling us how you plan to handle that would be useful.