416652 - Vista theme should mimic Windows "media" application toolbar style

Status: RESOLVED WONTFIX

(Firefox :: Theme, enhancement)

Description

[bpgarman]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9b4pre) Gecko/2008020904 Minefield/3.0b4pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9b4pre) Gecko/2008020904 Minefield/3.0b4pre

Firefox should look more like certain applications that shipped with Vista, such as Windows Media Player or Windows Photo Gallery. It should be possible to keep Firefox's proposed 'keyhole' identity while integrating better with other Vista applications. Having the toolbar look similar to control bars of other applications could go a long way to emulating a native look for Firefox.

I've thrown together a quick and dirty mock-up to illustrate what I'm talking about.

Major changes to the current proposal:
1. The sunken area covers the entire shape of the keyhole
2. The sunken area extends to cover the stop and reload buttons 
3. The back/forward arrows are the more like the ones used in WMP and WPG

Reproducible: Always

Comment 1

[bpgarman]

Attachment: vista theme proposal

Comment 2

[Victor Bielawski]

IMO, the back and forward buttons should look like just that - back and forward buttons, not play-backwards and fast-forward buttons. Perhaps the shape will be the same but with the B+F icons both blue and using the Navigation (not Play) glyph.

Comment 3

[Josh Tumath]

I like the idea a lot, but the forward button should be blue. I also like how the refresh and stop buttons are inside the box. 

Comment 4

[Mike Beltzner [:beltzner, not reading bugmail]]

See related bug 416531.

Not gonna block on this, but modifying the navigation toolbar to look more Vista like on Vista is a definite wanted. CC'ing Faaborg in case there's already another bug on this which we should dupe against.

(FWIW, putting the other buttons inside the sunken area is tricky to do since we allow users to customize that area; not impossible, but a little more complex)

Comment 5

[Alex Faaborg [:faaborg] (Firefox UX)]

This is very similar to our longer term goals for where we would like to go with our Vista theme.  One difference is that I was imagining the etch connecting all the way to the location bar. Since hitting back does effect the location shown in the location bar, it seemed like the controls should be visually grouped together.

The reason we are not doing the full encompassing etch yet (in addition to the customization problems that beltzner mentions) is that we don't have platform support for Aero glass, and the two lines of the etch + the bottom line of the menu bar + the bottom line of the navigation toolbar ends up being a lot of horizontal lines, and visually very noisy.  This isn't as much of a problem in your design because the larger back button creates some white space between the etch the boundary of the toolbar, but I wouldn't anticipate users to accept a UI that takes up that much vertical space.

Comment 6

[bpgarman]

Attachment: Mockup based on Faaborg's comments

Here's another pair of mock-ups, simply extending the etch to cover the location bar, as well as the search bar.

I think I agree with you about there being too many horizontal lines with this sort of size, it's visually confusing. Implementing glass may fix this however.

Comment 7

[Josh Tumath]

I like it, but somehow, it doesn't seem right. I think the toolbar should be above the file, edit, view bar.

Comment 8

[KLB]

The last thing I want to see is Firefox mimicking IE7 to the point that the navigation bar is above the menu bar. Since the very beginning, the menu bar has always been above the navigation bar, which makes sense as the navigation bar is used more then the menu bar and thus should be closer to the actual browser window. Putting the menubar below the navigation bar would put the navigation bar further away from the place the mouse spends most of its time (in the browser window clicking on links, etc.). 

IE7 is the first web browser to swap the position of the menubar and toolbar and it is what I hate most about it.  IE7 is an example of UI design gone horribly wrong.  Firefox should not be following down the same bad path, especially in regards to menu/tool bar order since these probably couldn't be manually changed back to their traditional order.

Comment 9

[Jordan]

In my opinion, the menu bar should be hidden by default in Vista anyway.

I don't know about the general opinion, but I find it to be a waste of screen space most of the time. I can understand why several of the Vista applications hide it, like the File Explorer, and IE7.

I use a plugin to achieve this behavior, and the menu is seldom missed. Pressing Alt brings it back when I need it anyway.

I like what you have done so far, with regards to the Vista theme.
There's one more thing I thought I should mention:

You are worried about too many horizontal bars. Vista does not use them very much, if at all.
I saw a mockup of the current Vista theme with the panel separators removed. Very smooth. Very neat, and easy on the eye.

I don't know what direction you are going in, but if you are keeping it similar to how it is now, you might want to consider removing them, if plausible.

Comment 10

[Kris Silver]

The second mock up in the second link is very nicely integrated for a much simpler more intuitive view.  I think Firefox 3's quite extensive UI changes are centred too much around colour, and not enough around clever space saving and simplifying of the interface like this.  

It'd be good if we could see a mockup of an integrated stop and reload, right of the url bar, same size connected.  I think this is a more intuitive place, especially by or even integreated with Go, all as much less used buttons.

Comment 11

[Josh Tumath]

We should take note of the changes in Windows 7. Go on Wikipedia to see a screenshot of Windows Media Player 12.

http://en.wikipedia.org/wiki/Windows_Media_Player_12

Comment 12

[Alex Faaborg [:faaborg] (Firefox UX)]

In terms of grouping controls, I have a blog post here explaining what our goals are (and why):

http://blog.mozilla.com/faaborg/2008/10/24/firefox-themes-the-contention-between-visual-hierarchy-and-toolbar-customization/

>We should take note of the changes in Windows 7.

Yes, any hard coded colors or images we are using in our theme need to be adapted to Windows 7.

Comment 13

[Dão Gottwald [:dao]]

Not going to happen, the new theme is going in a different direction.