In his presentation at the ZURBsoapbox today, Firefox principal designer, Alex Faaborg, discussed the process of designing the Firefox Web browser. Firefox is used by 120 million people daily and is the second most popular browser in the World.
- There are two distinct approaches to design
- One focuses on user-research to find out what people need/want. This approach is exemplified by Microsoft and is used mostly to mitigate risk. The downside of this “user testing” model is that users can lead you astray. For example, if you ask everyone what their favorite color is the average will be gray.
- The second tries to bring a specific vision to life and an impression of the user they want to have. This approach is exemplified by Apple and can result in huge success or failure. The downside of this “strong designer” model is if designers don’t know what they are doing, it could be a disaster.
- Mozilla’s design team has a specific vision they want to bring to life but they do so in the open.
- In open source design, everyone has an opinion that needs to be heard so they stay engaged.
- The design team deals with all these opinions with this by focusing on core principles to make decisions and giving contributors freedom to explore.
- “That would make a great extension”. The extension model gets people out of debates –they can always build an extension to bring a feature they believe in to life.
- In open source, you need to elevate contributors who know what they are doing. The Firefox team nominated designers who were criticizing the logo to fix it.
- Flow: cognitive state people enter when they no longer focus consciously on the means of accomplishing the task they are doing –they just naturally do it. How can the interface fade away in software products?
- How to not draw attention to Firefox but still be unique? The team divided visual elements (shape, colors, textures, etc.) across two objectives: half were used to blend with the operating system, the other half were used make Firefox feel unique.
- Visual hierarchy: most common actions get the most prominent treatment. Tivo remote is a great example of this. Playstation 2 remote is an anti-example.
- Physical: how quickly can you get to where you want to interact? Cognitive: can you remember where the control is (similar to landmark recognition)?
- You can still tell what the controls in Firefox are even without the icons. They have a physical recognition.
- Quicksilver is a software product that molds behavior over time. It gets more streamlined the more you use it. Alex “stole” that idea for the Firefox Awesome bar. The Awesome bar meshes with how people use the browser address bar and gets better with use like Quicksilver.
- Selective variables: people can process visual variables in a single glance. Color works effectively to distinguish information. Google search results work this way: blue links, green domains/urls.
- Firefox 4 will finally put tabs on the top (after a lot of back & forth debate).
- It will have a locally hosted home page. The Web browser knows a lot of things about your Web surfing patterns. Could display, for example, RSS from pages you visit often.
- The team is exploring location to tune content on home page and “app tabs” as a more permanent element in the Web browser
- Private browsing mode in Firefox 4 has a very dark color.
- The Web is maturing into a full application platform. Have more access to things only the operating system could tackle before.
- Almost everything boils down to personal preference. The final solution to almost everything in Firefox is to “give the user the option”. This adds up to too many options and makes for a difficult UI.
- The role of a designer in an open source company is to facilitate ideas rather than be the source.