May, 2008


14
May 08

Firefox 3 Themes

If you are reading this post odds are you are one of the 1.2 million people currently enjoying a beta or nightly build of Firefox 3. However are you a big enough Firefox fan that you like to run it simultaneously on 4 different platforms? If not, here are some screen shots of the new themes for Firefox 3 for Vista, Linux, OS X and XP.

(Note to press and bloggers: even our screenshots are open source, source files for all of the images used in this post are available here).

Main Window

Mainwindowcomposite

The overall goal of the Firefox 3 visual refresh was visually integrating with the platform, while still maintaining a unique identity and presence by using the keyhole form for the navigation controls.

Keyholes

The one exception to this cross platform visual identity was Linux, where we decided against using the keyhole form in favor of uplifting the native OS theme’s navigation controls. On many Linux distributions we are often already the default browser, so there is less of a need for us to establish a visual presence, and it makes more sense to seamlessly integrate with the rest of the desktop environment.

Library

Librarycomposite

On OS X the Library window is reminiscent of the Finder, and on Vista the window has a similar visual style as other media collection applications, like Windows Media Player and Windows Photo Gallery.

Site Identity Contextual Dialog

Siteidentitycomposite

The customs official icon in the identity dialog demonstrates how each platform uses different types of textures ranging from glassy to smooth to soft.

Options / Preferences

Optionscomposite

Page Info

Pageinfocomposite

Add-ons Manager

Addonsmanagercomposite

The set of icons in the Options, Page Info and Add-ons Manager windows show how we use consistent physical metaphors across the four platforms so that it is easier for users to transition between operating systems without having to adapt to a new interface. However, there are a few exceptions where we favor consistency with the OS, like the icon for Applications and the Themes icon on Linux. Even though the physical metaphors are largely identical, each platform is given a specific color palette, level of detail, and overall design aesthetic for object icons.

Gears

Even the last icon the user views before closing Firefox has been carefully crafted to fit in with the rest of the operating system.

Savetabs

Why do We Believe Visual Integration is Important?

We decided to focus heavily on visual integration with the platform for the following reasons:

-Cross platform applications that use a consistent appearance across different operating systems (like RealPlayer, or applications developed using Java Swing) feel foreign and strange
-The Web browser is a central part of the user’s computing experience
-We want the user’s first impression to be feeling comfortable with the UI
-If the transition in and out of Firefox is jarring, the user won’t achieve flow when completing tasks (like when you are driving a car and you realize you haven’t been thinking about driving for quite awhile, or when you are reading an interesting book and you turn pages without conscious thought).
-We want Firefox to feel like the browser your computer should have shipped with

Did We Achieve Our Goal for this Visual Refresh?

Back in October I wrote:

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.

Let’s start with Linux. Linux wasn’t mentioned in the original goal since on many distributions we don’t have a pre-installed native browser to compete against, but how did we do in terms of competing with ourselves? I think it is pretty clear that we decimated ourselves: Firefox 3 is way ahead of Firefox 2 when it comes to visual integration with the desktop environment on Linux. From using native gtk widgets in the content area to uplifting the OS theme icons, we have made an incredible amount of progress with this release. Hopefully KDE users will be able to have Oxygen style icons in Firefox using the same method for extracting gtk icons, although I am not sure if they have this working yet (if anyone has more information on this please comment below, I was able to find a bug filed against gtk-qt-engine-kde4). The new icons for Firefox were designed by the same team that creates the icons for GNOME, which certainly helps when you are going for a perfect level of visual integration with the GNOME desktop environment.

Similarly, on Windows our icons were created by the Iconfactory, the same design firm that designed the icons for Windows XP and Vista. In terms of overall visual integration, I believe on XP we clearly met this goal. Firefox 3 visually integrates with XP by using the platform’s color palette while tweaking the style enough to still appear modern on an aging OS. In stark contrast IE7 doesn’t even have an XP theme. On Vista we do a great job visually integrating with icons and with our set of secondary windows, although the main window is notably missing support for Aero glass. Users will hopefully be able to get this functionality using an extension during the life cycle of Firefox 3, and we will have glass support added to XUL for the next release of Firefox.

On OS X I believe we have made the most progress relative to Firefox 2. However, do we visually integrate with the platform better than Safari? Overall I think it is pretty close. While Firefox is not technically a native application, Safari 3.1 does a number of things wrong that we get right has a number of curious inconsistencies, from not muting the glyphs on their icons when the window is inactive, to using Aqua style controls in the window frame.

Safaricomparison

We should be really proud that this is the level of detail that we are now competing at on OS X, even if users aren’t necessarily going to consciously notice these minor details. And overall that’s the whole point of our efforts for visual integration. We don’t want the user to think about the theme too much, we want the browser to perceptually fade away so that the user can focus on what it is they are actually doing. In a sense it is a little ironic, the harder we work to make Firefox fade away the less likely it is that the user will notice the amount of effort that has gone into crafting the interface. However, the very best user interfaces go completely unnoticed, that is what makes them good.

Credits

Initial wireframes and design direction throughout the project were handled by myself and Mike Beltzner. Icons for Strata, the theme for XP and Vista were created by the Iconfactory. Firelight, the OS X theme, was created by Stephen Horlander and Kevin Gerich. Tango, the theme for Linux, was created by Lapo Calamandrei, Michael Monreal, Andreas Nilsson, Kalle Persson, Jakub Steiner, and Michael Ventnor.