Dao and Markus have already started to land bugs pertaining to the new theme/ui:

Windows:

• #544999 – New toolbarbutton style for the main window – You may have noticed this on trunk
• #547752 – Adjust toolbarbutton paddings and margins for small and big icon modes

Mac:

• #546874 – New style for the bookmarks bar

Some new theme bugs have been filed

Windows:

• #548027 – Tweak New Toolbar Button Style to Match Designs
• #546259 – enable aero glass for the main window
• #549061 – [Windows] New Style for Tabs

Mac:

• #547787 – New style for the tab bar

Mockup Iterations now on SVN

I posted the mockup Photoshop files to an SVN repository: http://svn.mozilla.org/design/projects/newtheme/

This can be accessed through the web or with an SVN client.

Note: I haven’t filed any Linux bugs yet and the Wiki page is out-of-date. Still working out some details there and should have that resolved this week.

This week I filed the first round of Bugs for implementing the new theme:

• #544815 – Allow for placing Tabs over the Navigation Bar with option for Tabs under the Navigation Bar
• #544816 – Attach combined Stop/Go/Refresh button to the Location Bar
• #544817 – Create Bookmarks Widget with placement dependent on Bookmarks Bar status
• #544818 – Progress “Line” indicator for background loading tabs
• #544819 – Create a basic Home Tab linking to the current Home Page
• #544823 – [Meta] Theme Visual Refresh
• #544820 – [Windows] Theme Visual Refresh
• #544821 – [OS X] Theme Visual Refresh

This is a pretty exciting step for me after having worked on the design for so many months.

Wiki Updates

I also spent some time getting all the mockups and thought processes on the Wiki current:

• Theme and UI Revamp
• Windows Theme Mockups
• Theme/UI Direction and Feedback
• Mac Theme Mockups
• Mac Specific Visual Design

One area that animation would be very beneficial is with tab interactions. Specifically moving/arranging tabs on the tab strip, closing/opening tabs and tearing off tabs into new windows. Presently the feedback here isn’t as good or as elegant as it could be.

New Tab Animation

Some of the goals for animation are to make browsing feel faster, adding visual affordances that makes tasks more understandable and to make the browser more visually appealing. There is much more detail on the Wiki articles linked above. My goal was to quickly demo how this would actually look and feel because still images and wireframes can only convey so much.

Click the image below for the animation that shows how a new tab animation could look. It’s pretty short and fast.

It is hard to tell from the video how this would work frame by frame. The general idea is that after you click the new tab button that button itself grows into the new tab.

Tab Tear Off

This demo shows both tab rearrangement and tab tear-off.

This week I have been working on a few things:

1) App Button

One of the more challenging, not to mention contentious, aspects of the Firefox UI update has been how to handle the MenuBar. On our first pass we were informed by how Safari and Chrome had handled this problem by paring down all menu items into two separate Page and Tools buttons. This approach has a few advantages but also some disadvantages. The new proposed approach to this problem is an App Button which is similar to the single menu approach taken by Windows 7 native applications (Paint, WordPad) and by MS Office.

The UX team feels this approach has several advantages over the previous idea:

• It is less complex
• Takes up less space
• Instead of two potentially conflicting locations for menu items, there is now only one unified location
• Can be placed in the upper left analogous to the Menubar paradigm it is replacing
• Similar to the far more ubiquitous Office 2008/2010 + Windows 7 application menu
• Reduces clutter on the Navigation Toolbar
• It also creates a more flexible and rich canvas for perhaps doing some decidedly non-menu-esque things

Appearance and Placement

One of the benefits of the App Button is that it is similar to the way Microsoft is treating its native apps and Office. Another benefit is that the placement is closer to where the Menubar would be and therefore it is more familiar.

One idea that we have already explored with the Pages and Tools buttons is to use text on the button instead of an icon. This is also reminiscent of the Menubar’s textual display and removes any ambiguity involved with icons. This approach is also explored in the most recent Office 2010 beta with the tab simply being labeled “File”. We discussed naming our App Button simply “Firefox” because it contains all the actions that apply to Firefox.

Attaching the button to the top of the window further implies that this menu affects Firefox as a whole.

Status of the Titlebar

In all the mockups up to this point the Titlebar has been removed and the space reallocated for portions of the tabs. Enough room was left for traditional window dragging. The rational behind this change was to further shrink vertical space and to address the redundancy of having the page title in the Titlebar and the tab.

In the original approach you would lose approximately the width of one tab (or less!) due to the window widgets. This was before talk of placing an App Button or an Identity button in this area. As it stands now you would be losing much more. It seems the vertical space tradeoff doesn’t stack up quite as well when losing so much horizontal tab space.

It would be better to leave the Titlebar, giving full access to it and not losing any tab space. It also won’t be frustrating for someone wanting to drag the window.

State of the Menu

What will this single menu look like? Something like the sketch I posted previously but not exactly. Ideas on this are welcome. Thoughts about what should and should no go into this menu can be based on work already done for menu cleanup.

2) Refining Toolbar Button Appearance:

Some initial work has gone into making the toolbar buttons more visible on light backgrounds and more crisp and dimensional (pressable).

This is work I am constantly reevaluating since they appear on variable backgrounds.

3) Location Bar:

Created some very early visuals for reevaluating site identity. Also the location bar is now properly recessed instead of floating.

4) Retain Separate Search Bar:

With the LocationBar containing an increasing amount of functionality it may be best to retain a clear distinction between the two fields.

5) Bookmarks Widget:

On a default profile or existing profile that hasn’t modified the Bookmarks Toolbar it will be hidden by default and the Bookmarks Widget placed in the Navigation Toolbar.

If the Bookmarks Toolbar is shown the Bookmarks Widget will appear there instead.

Alternatives to Default Configurations

With Bookmarks Bar

Tabs Under the Navigation Bar

If tabs-on-top is not desirable you can change to the classic tabs under the navigation bar.

Tabs Under the Navigation Bar with Bookmarks Bar

App Button Variations

Several variations of the App Button have been explored. Various factors of consideration include what color to make it, whether or not to have an icon, just an icon, icon and text, part of the tab bar, a separate button or attached to the top of the window.

Presently it is orange and attached to the top of the menu simply labeled “Firefox”. The color plays off of the Firefox icon and is noticeable. The placement attaches the button to the top of the window and suggests that its items apply to the whole menu. It also corresponds to the area of the window where someone would look for the menu bar. Using text only is reminiscent of a menu item.

Firefox 4 and Firefox 3.5 Comparison

A visual comparison of the current iteration of Firefox 4 next to Firefox 3.5

There are many flavors of Linux with various themes. As well as two major desktop environments along with several other minor ones. All with their own unique style. Even though it’s challenging one really great thing about working on a Linux theme is how amazing these environments are looking now.

As I stated in my post about the Mac theme refresh one of the goals has been a greater cross platform visual consistency. This shouldn’t necessarily come at the expensive of a native look however. For 3.0 a lot of fantastic work was done on making Firefox on Linux use native controls and icons. It would be really nice to balance that with picking up some of the same ideas from the Windows and Mac theme.

Refresh for Firefox 3.7

In addition to theme and UI changes already discussed for Firefox 3.7 and 4.0, there are some proposed Linux specific visual changes:

• Consistent Back/Forward Buttons: Use the same back/forward shape as on the other platforms. The back button would use the same texture as the other buttons however it would be round and larger.
• Buttons vs Icons: Switching to a button+glyph style for the toolbar items. This would be instead of the more representational style that is widely used. It also is a deviation from the common system standard of having icons and then a button shape on hover.
• Curvier Tab Shape: Match the tabs to the proposed tabs on Windows and Mac while keeping the native texture and color.
• Removing Toolbar Separators: Goes a ways towards reducing visual complexity as well as external consistency.

Alternative Icon Treatment

Another idea would be to include the back/forward shape but use traditional icons instead of glyphs everywhere else. However this looks a little strange and doesn’t meet the goal of cross platform consistency.

How Would This Look with Various System Themes

As I talked about above there are a wide variety of distinct themes available for Linux. The most ideal approach to this would be to use the native button style, theme specific icons and replace the glyphs based on color scheme.

Some examples of how this could work out:

Refresh for Firefox 4.0

As discussed perviously a goal for 4.0 is to reduce the UI footprint of Firefox. Adding tabs to the top of the UI accomplishes this (along with other things).

Please keep in mind this is all customizable.

For this configuration the menubar would be hidden and Page and Tools menu buttons would be aded to the toolbar. The titlebar would extend down behind the tabs.

Ongoing Discussion and Feedback

If you would like to leave feedback on these designs or just follow along there are few places to do that. You can comment on this blog or visit the Linux Theme Refresh wiki page.

Subsequently I have turned my attention to how these changes would look on a Mac. The overall design changes for Firefox 3.7 on Mac are mostly the same as what is being proposed for Windows. Structurally they are the same with the notable exception of the menubar not being hidden. Since the menubar is not being removed that means the Page and Tools buttons will be off by default.

One goal of this visual refresh is an increased amount of cross platform consistency where it makes sense. This means we have tried to incorporate similar(or even identical) shapes for items such as buttons, glyphs and tabs. The changes to make these things fit in are how they are styled and textured.

Feedback that would be most helpful is constructive criticism specific to visual treatment. For example that button is too glossy, or that bit isn’t native enough, or maybe this color would work better, etc. Or any other kind of appearance feedback and ideas. Since this a very visual topic if you feel like a mockup would be better at conveying your ideas that would be great!

Refresh for Firefox 3.7

These are the changes from the current Mac theme:

• Button Shape: Using rounded rectangles instead of the curved-end buttons found in 3.0–3.6. This will match the native button shape as well as the shape planned for Windows.
• Button Texture: Deviation from the current bright and flat gradient to a slightly darker gradient. Also added a slight gloss and edge highlight for some added dimension/depth.
• Removal of Bookmark Bar Texture: Removal of the glossy bookmarks bar texture for less visual complexity and more streamlined look.
• Tab Shape: Slightly more defined tabs. Also rounded edges connecting to the toolbar.
• LocationBar Shape: Use a rounded rectangle LocationBar instead of a curved-edge. This creates a visual distinction between the LocationBar and the SearchBar even though the LocationBar is still technically a search field.
• Hiding the Tab Overflow Icon: Hide the tab overflow icon unless there is actually overflow.

Differences from the Windows theme:

• Back/Foward Arrows: Use system standard back/forward glyph shapes instead of the Windows arrow with a tail.
• Hanging Tabs: Instead of the tab attached webpage style seen in Windows we retain the hanging tabs approach from 3.0. This is the de facto system standard (e.g. Safari, Terminal, most 3rd part apps with tabs).
• No Icons on the Bookmarks Bar: This reduces icon overload and matches Safari.

An example of how it would look with “Small Icons” enabled.

Other Tab Ideas and Experiments

• Page Attached Tabs: In addition to the hanging tabs idea there was also some exploration with having page-attached tabs. This approach would match other platforms more closely as well giving a direct visual link between the webpage and the tab containing it. However it is less clean visually as well as feeling foreign on the system.
• Page Integrated Tabs: A more experimental idea are tabs that actually acquire attributes from the webpage. Such as approximating background color. This gives a direction visual link between the page and the tab and could help to quickly identify tabs.
• Rectangular Button Tabs: An experiment with tabs that are not attached to the toolbar or the page but are more like tab buttons.

Refresh for Firefox 4.0

Style changes from 3.7 to 4.0 are fairly minimal except for new elements that must be styled. In particular how to handle tabs-on-top as well as:

• Extensions Area: Proposed idea is to be stylistically different from the rest of the toolbar. Lighter and slightly raised.
• Identity Button: The Identity button can be seen in the upper right of the mockup. The idea is to be attached to the window, much like a label or a tag.
• Search Selector Style: The Identity button can be seen in the upper right of the mockup. The idea is to be attached to the window, much like a label or a tag.

An example of how it would look with “Small Icons” enabled.

An alternate style with a darker background. This would make active tabs stand out more.

Identity Buttons Variations

Did some experimentation with how to handle the profile identity button. Something that I think is very strong is the attached/label version.

• Light Rounded Background Version: Slight background to imply that it is a button. Might be odd because that kind of background usually implies “selected”.
• Attached/Label Version: Attached to the window. Visually much like an identity label or a tag. This is branded as your browser.
• No Background Version: No background. Could have a background on hover/active. Fits in with other applications with elements in titlebar (e.g. iCal’s timezone switcher).

Ongoing Discussion and Feedback

If you would like to leave feedback on these designs or just follow along there are few places to do that. You can comment on this blog, head over to the dev.apps.firefox thread on this topic or visit the Mac Theme Refresh wiki page.

Yesterday I posted a new article to the Wiki. This article lays out more fully how the UX team wants to evolve Firefox for 3.7 and 4.0. It is broken in to a 3.7 section and a 4.0 section. The 3.7 section is a fairly firm proposal that is in the approval stages and the 4.0 section is in the more early brainstorming phases.

Feedback is welcome either on the Wiki Discussion page or I have created a new thread in dev.apps.firefox. Also blog commenting is available as well.

Next Steps:

Going forward I will be working on collecting feedback and refining these ideas for implementation. There is also plenty of work to be done with transitioning these proposals from Windows to Mac and Linux.

• Narrowed direction and focus for Firefox 3.7 and 4.0 Theme/UI changes

Next Steps:

• Menu item trimming/sorting
• File bugs related to implementation
• Start implementation

Specifics:

Had a lot of great progress this week. The UX team had a chance to narrow focus for future Theme/UI work. This resulted in a very productive design lunch talk by Alex Limi and Alex Faaborg. We also had some great meetings about needed platform capabilities (posted to the Wiki by Alex Faaborg).

We currently have some working directions for 3.7 and 4.0. Not set in stone of course, but a firm direction to start with.

Firefox 3.7:

• Hide menubar by default(on Vista and 7, not XP).
• Sort existing menu items into something like Page/Tools buttons (actual implementation to be determined).
• Move the bookmarks menu item to a bookmarks widget. This can live on the bookmarks toolbar(default) or on the navigation bar.
• Create a home tab. Loads homepage in 3.7 to have expanded functionality in 4.0.
• Combine stop/reload into one button. Optional separate stop and reload buttons in the customization pane.
• Progress “line” under location bar on active tab. At the top of the tab for background tabs.

Firefox 4.0:

• Introduction of “App” tabs
• Combine location bar and search bar (separate location and search items can be customized).
• Tabs-on-top option (possibly left/right as well).
• In bar search “button” with drop down of other types of search.
• Ability to attach stop/reload/go to location bar (TBD).
• Expanded home tab functionality.
• Disable bookmarks bar by default if it has not been altered from default.
• Remove status bar. Create a place for extensions.
• Profile/identity UI.

I have spent some time refocusing on 3.7. Exploring toolbar handling on glass, experimenting with different toolbar button visual styling and ideas on button hovering.

Bookmarks Toolbar Variations

Experimented with a few different styles for handling toolbars on Glass:

• Flat Box: Simple translucent background
• Inset Box: Similar to the above, but with an inset appearance
• Expanded Background (Translucent White): Expand a background from the tab strip to below the navigation bar. Translucent white to remain a neutral background
• Expanded Background (Translucent Grey): Darker but still neutral background
• Expanded Background (Translucent Light Blue): Match Windows 7 toolbar blue
• No Background: Floating toolbar items. Probably the least attractive option due to legibility concerns

Navigation Button Style Variations

Tried some different styles for navigation toolbar buttons. Smooth style(original), more glassy/sharp style and a more plastic variation.

The glassy style strikes me as probably too much. The plastic style might be something more suited to XP.

Button Hover Exploration

Some initial ideas on how to handle hover states. This might be a good place to integrate some color into the more neutral style.