This past week at the Mozilla headquarters in Mountain View, we talked to user experience design expert Alex Faaborg about the Firefox 3 visual refresh. He shared some insights about the interface design process and talked about some of Mozilla's goals for refining the look and feel of the Firefox user experience.

An integrated experience

Platform integration has been a very high priority for the Firefox 3 development cycle. Visual consistency with the underlying operating system is important, says Faaborg, because it creates a more seamless user experience and makes it easier for the user to focus on web content rather than on the web browser.

This is a significant reversal from the strategy behind the Firefox 2 theme, which was designed to have a similar appearance across all platforms. For Firefox 3, separate icons and themes have been implemented for Windows XP, Windows Vista, Mac OS X, and Linux.



Firefox 3 theme for Vista







The Firefox 3 theme for Windows XP







The Firefox 3 theme for Linux







The Firefox 3 theme for Mac OS X

Although platform consistency is strongly emphasized in the individual Firefox 3 themes, Faaborg also labored to ensure that the layout of the user interface is similar enough on each platform so that users can transition between operating systems and continue using Firefox without having to retrain their muscle memory or adapt to new user interface paradigms. Another one of his goals was to create several specific user interface characteristics—such as the keyhole shape for the back and forward buttons—that could be employed consistently across all of the platforms to establish a universally recognizable visual identity for the browser.

Creating the Windows Vista theme posed some unique challenges because the developers had a bit of trouble figuring out where to use certain Vista-specific aesthetic flourishes like black dialog toolbars. Another weakness in the Firefox 3 Vista theme is the lack of support for transparency. Faaborg says that full compositing-based transparency support isn't planned for Firefox 3 but will eventually arrive in a future version. This will mostly likely be implemented as a special CSS property so that individual Firefox themes on Vista will be able to use it too. For now, he says, there are already some third-party themes that use various hacks to add transparency support.

Community coders... and artists

I asked Faaborg about the extent of community involvement in Firefox artwork development. Members of the open-source community have contributed many icons and have helped in a number of other ways. Some of the custom Linux icons, for instance, were created by the Tango designers. Few artists were interested in doing the Windows work, however, so Mozilla ended up hiring The Iconfactory to do complete sets for Windows Vista and Windows XP.

Faaborg has watched user feedback closely throughout the entire design process and made some changes in response to valid criticisms. One example of this is the Home button, which was controversially placed on the bookmarks toolbar by default in a previous beta build and has now been moved back to the navigation bar because of complaints from users who didn't have their bookmarks bar enabled and consequently couldn't find the Home button.

Google beats bookmarks

Although the visual style and theme of the application are the most highly visible aspect of his work, Faaborg notes that interaction design goes much deeper than the browser's surface. Many subtle usability enhancements that are included in Firefox 3 improve the overall user experience and make complex features more easily accessible. One example that he cites is the new single-click bookmark system. Usability testing revealed that many users eschew bookmarks entirely and simply use Google because it often requires less effort. The single-click bookmark system removes a lot of unnecessary complexity and makes bookmarks a valuable feature for a broader segment of the user population without crippling some of the more advanced bookmarking capabilities—like support for nested hierarchical structures—that are appreciated by power users.





The Firefox 3 bookmark popup

The work done by Faaborg and many others to improve theming and usability in Firefox 3 is very apparent in the recent beta and nightly builds. The browser finally fits in with the rest of the operating system and shines with a level of polish that we have never seen before in previous versions of Firefox.