Tracked by: bug 328605

Goals & Objectives

• Must-haves:
  • update global icons to fit with modern iconography styles
  • update Windows theme to fit with XP/Vista look & feel
  • update OS X theme to fit with OS X 10.4 (Tiger) look & feel
  • update Linux theme to fit with Gnome look & feel
• Nice-to-haves:
  • better native theme support for Windows (allowing for flexibility based on selected windows theme, luna vs. vista vs. classic)

Planned Milestones

Overview

The icons and default themes for Windows, OS X and Linux are now 2 years old, and popular icon styles and colours have changed in the interim resulting in our set looking somewhat dated. The goal of this feature is to update our visual appearance to bring it in line with modern applications. This involves:

• updating the icons
• updating the themes to better match native OS look and feel

This will be tightly related to the planned work around changes to the new bookmark/history system as well as behavioural changes planned for the Location Bar.

Background

The visual apparance of an application is directly related to its acceptance by users. Evidence has shown that users give lower satisfaction scores to applications with interfaces that do not feel native to the target platform, or that do not appear modern and organized. The default theme of Firefox contributes significantly to the user experience and first impression of the browser.

For Firefox 1.0, a default theme was chosen that was friendly and that put visual emphasis on the aspects of a web browser which were most familiar to users. Elements like the forward, back, stop and reload buttons were represented using simple shapes with a minimum of decoration. Emphasis was also placed on making the themes as close as possible to native system applications.

The NSITheme code allows us to get information about colours, fonts, etc from the underlying OS, and we should use that information wherever possible so that if a user changes a system setting, that setting is picked up by Firefox.

Use Cases

There are two use cases we need to consider:

1. A new or returning user to Firefox.
2. A returning user to Firefox who had previously installed and selected a third party theme.

Functional Requirements

• no visual elements that are purely decorative
• refreshed icons that are contemporary with today's applications
• icons which carry meanining across all locales
• native look and feel on Windows, OS X and Linux
• migration support for users who had selected a third-party theme

Plans & Design Documents

• User Interface Design
• Default Theme Update
• Test Plan
• FX2_Visual_Update/Documentation/Documentation Changes

API Changes Required

no changes required

Impact

The current design impacts the following areas of development ...

Extensions

• What will the impact be on theme compatibility?
• How should we communicate these changes with other theme authors?

Localization

• icons need to be chosen to ensure that they are meaningful across all locales & cultures

Update

no impact

Eggplant Automated Testing

• icons and font changes will force image recapturing. The scope of this could be quite large. (However, this is making me think conservatively in my use of image compare and design modularly during Eggplant test suite development. Actually a good thing. -tracy)

See Also

• Location_Bar
• Places (new bookmark/history system)

Discussion & Implications

Caveats / What We've Tried Before

Themes and "attractiveness" are very subjective, and design-by-committee never works. We need to gather requirements and examples of what are considered to be attractive user interfaces and then strike a working group which can iterate designs based on feedback. Input should be sought from a broad community by publishing initial directions and asking the community and web-at-large for feedback. However, at the end of the day we should have a small group of arbiters who can make final decisions to ensure the effort does not stall.

The final design should not attempt to be "flashy" or "new", as those attributes generally work against native look and feel and make the interface stand out in ways that many users find uncomfortable. This was tried in Netscape Navigator, where good ideas (such as bump-affordances on toolbars, etc) were included to the ultimate detriment of the product. Instead, we should look to be "contemporary", "conservative", "streamlined" and "sleek".

Security Implications

no new security concerns

Privacy Considerations

no privacy concerns