Firefox 4: Windows Theme / UI Update

[Night Owl]

Stephen Horlander, Product Visual Designer at Mozilla has posted some updated UI concepts for the upcoming Firefox 4.0:

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.

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

Source

[*dcs18]

Nice update, Night Owl. :)

[spootnack]

I'm too impatient !

Firefox 4 will rox !! :dance2:

++

[Marik]

gawd damn.....v4 looks smecksy

[JessicaLeigh]

Merry Christmas, everyone...

I don't know why they're so hellbent on changing the overall look and feel, when we have a metric ton of add-ons at our disposal to suit our styles, needs and tastes. I'd prefer them to put that time and energy into stabilizing the core components and find definitive ways of maintaining the browser's speed and performance; regardless of how many add-ons you're using. I know they intend to give us the choice of classic or new style, and I'm EXTREMELY happy about that. I don't like the tabs upright (a la Chrome) at all. I think it makes the browser look sloppy and unfinished. Just my two cents...

[Night Owl]

@dcs18: Thank you. :)

@JessicaLeigh: I agree with you. I'm OK with tabs on the top, but I prefer tabs the way they are now. The only reason is that it is very easy to read the title; however, with Google Chrome, SRWare Iron, and others, if you have a few tabs open, you have to mouse over a tab to read the full title. I hope Firefox develops better integration with Windows 7. For example, integration with Aero Peek and Jump Lists.

[HX1]

Well I think they are making great strides of changing FF and bringing it up to speed with the face of applications today..

Now.. myself.. PERSONALLY.. I hide the menu bar.. I use hot-keys to show/hide and navigate it..I do the same thing for the tab bar.. and hot-key to move from one to the other..( hot-key here.. hot-key there.. everywhere a hot-key.. ) ..I like the improvements..( loading indicator on the tabs..is hawt :wub: ) I like the idea for the menu bar as well..but I am hoping for Windows 7.. to come along and be as easily customizable as my Windows XP SP3 is.. and in that effect I am hoping for my favorite applications as well.. which usually, faithfully do as well.. I mean for any of you that had a look at my desktop a while back you know what I mean.. I go for minimal mod.. clean approach.. ( for those of you who missed it.. My desktop Image viewable at full size from Download..)

As far as the other part is concerned I have faith in Mozilla doing what needs to be done...Moving into HTML 5 .. and several other changes will take some times and writing a whole new program will take some intuition.. planning testing and forethought.. I hope for something new and ground-breaking.. They do a great job as it is.. I think a lot of the problems they face now.. are issues created by extensions .. and people expecting too much out of a sub-category upgrade beta version or even the alpha..

I personally do not see them as really ever being down for the count.. I always seem them come to the table with something better.. almost as if it was second nature..( no pressure here either )

[bashar]

Great UI Improvements , of which we already can use by the windows glass add-ons

the new style looks promising , but It's true , they should be able to contain the Speed and the memory uses on FF ,

that's what brought FF to the best , the speed not the look i guess ,

and they should keep on it

Waiting to test :ph34r:

[Bizarre™]

I think Mozilla should concentrate on FF's memory consumption

[DreamHaters]

@Bizarre

Yeah, im not too fussy with the looks of it..but they should focus on the memory leaks that occur.

[Bizarre™]

If heath28m didn't introduce BossKey, I wouldn't have known about its useful capabilities :)