Posts Tagged ‘Experimental’

Windows Theme/UI Update

Recently there has been a lot of work going on refining the ideas for the Firefox 4 redesign on Windows. This work has involved evaluating feedback on previous direction, polishing visuals, tweaking all kinds of things and exploring totally new ideas. The evolutionary work that was supposed to span 3.7 and 4.0 has now shifted full focus to the latter.

Firefox 4 - Tabs-on-Top - App Button

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

Windows 7 and Office 2010 App Button

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

Firefox 4 - Tabs-on-Top - App Button - w/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.

Firefox 4 - Tabs-Under-NavBar - App Button


Tabs Under the Navigation Bar with Bookmarks Bar

Firefox 4 - Tabs-Under-NavBar - App Button - w/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 - App Button - Variations


Firefox 4 and Firefox 3.5 Comparison

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

Firefox 4 and Firefox 3.5 Visual Comparison


Tags: , , ,
Posted in Firefox | 282 Comments »