Mac Theme Refresh

Recently the Firefox UX team settled on a firm UI direction for Firefox 3.7 and 4.0. The feedback was really amazing and I wanted to thank everyone who took the time to comment.

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

Hanging Tabs - Large Back Button

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.
Hanging Tabs - Small Back Button

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

Other Tab Ideas and Experiments

Some other ideas were also explored in regards to how to handle tabs visually. These aren’t necessarily things that are being proposed. However they might be a good springboard for discussion.

Tab Experiments - Attached Tabs Tab Experiments - Page Integrated Tabs Tab Experiments - Rectangluar Button Tabs

  • 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

Firefox 4.0 - Tabs-on-Top

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.
Firefox 4.0 - Tabs-on-Top - Small Buttons

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

Firefox 4.0 - Tabs-on-Top - Darker Background

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.

Firefox 4.0 - Identity Button Variations
  • 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.

Tags:

This entry was posted on Monday, October 5th, 2009 at 11:09 am and is filed under Firefox. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

59 Responses to “Mac Theme Refresh”

|
  1. The gaps between the tabs seem unnecessary; especially for the non-active ones.

    Also, how would thinks look on a “https/certified-green-thingy” site? And how (where?) would the search-engine-chooser-thing be on Firefox 4.0?

  2. Pino says:

    The rounded search bar in 3.7 theme doesn’t fit in really. What is the reasoning that it should not have similar curves?
    Also there actually is an icon on the bookmarks toolbar, what does that button do?
    And the last thing I notice is that you used a favicon example that perfectly fits in with the theme. It looks well with that favicon, but pretty bad with a favicon that doesn’t blend in so well I think. The problem can be seen at the Google logo in the search bar; it seems pasted over the theme, not integrated.
    Overall I think it looks pretty good, I don’t fancy tabs-on-top and don’t see much in Weave integration, but that is probably discussed enough already.

  3. Stephen says:

    The spaces probably aren’t strictly necessary. I like that it clearly shows them as tabs, gives them some depth and they don’t run together.

    Good question on the secure colored stuff. For 3.7, same as it is now. For 4.0… it’s still undecided how to handle that. There is still work to be done deciding how to integrate all those things into one bar.

    The search engine selection box is the blue rounded rectangle in the location bar. But it isn’t decided yet how that will be interacted with.

  4. Jesper Kristensen says:

    I think keeping the menu bar in place in the top of the screen is the right thing to do for Mac. However, I cannot see on the mockups how it would look like. I assume it would be the same two-item menu as on Windows, and not the old seven-item menu. Is that correct? Having the Tools->Options vs. View->Preferences being platform specific is annoying now, but having the whole menu structure different would be a complete hell. Both for cross platform users, but especially for support.

  5. Stephen says:

    @Pino
    Curved ends is the system default to indicate a search field.

    The icon in the bookmarks bar is the “Bookmarks” widget as discussed in the Windows Theme/UI proposal. It’s basically the bookmarks menu item.

    Yeah, there isn’t a lot we can do with favicons unfortunately.

    @Jesper
    The menubar will be pretty much the same as it is now. There is some menubar item cleanup that is taking place that will affect it, but it isn’t going to be trimmed to two items. If we keep it, then it needs to make sense. It’s the same treatment we will have on Windows if someone chooses to toggle the menubar on or when they press Alt.

  6. Eevee says:

    Stuffing the tabs into the title bar looks even more ridiculous here than on Windows. Please, please don’t do that. The point is to identify the window, and I can’t really do that if every app decides that saving eight pixels is more important than identifying itself at a glance. This is an even more egregious crime on OS X, where windows don’t have an app icon in the upper left corner; now I have to examine the window content itself to guess whether it’s Firefox or one of a dozen other tabbed applications.

  7. Stephen says:

    Tabs-on-top is designed to be optional. Still I don’t see how this would make it any harder to identify a window. Windows in OS X aren’t branded even if the titlebar is on.

  8. The_Decryptor says:

    I really don’t like the new style of toolbar buttons, they don’t seem to have the same amount of visual distinction from the background as the current buttons do, they look transparent but with a slight gloss. They also don’t look like any other toolbar buttons I’ve seen in other OS X apps.

    I think the “Page Integrated Tabs” is an interesting idea though, I wouldn’t mind seeing an extension or such that could provide that right now.

  9. C says:

    I love it!
    Could perhaps be a tad more polished, but it’s far better than what we use at the moment, nonetheless.

  10. Anonymous says:

    Since OS X forces you to have a menubar, how about this: what if you make the first entry in the menu bar “Firefox”, have that provide the contents of the “tools” menu, put a “page” menu next to that, and fill the remainder of the menu bar with the bookmarks bar contents?

  11. Anonymous says:

    /me eagerly awaits the “Linux Theme Refresh” post. :)

  12. David Naylor says:

    On the whole, looking very good!

    I agree the attached/label version of the identity button works best for its purpose.

    My only comment is that the statusbar (3.7) looks very flat. The current one is much better:
    http://farm4.static.flickr.com/3325/3429879856_02175a7f0f_o.png

    I’m curious to how the site identity button will be replaced. But I’m sure there are big minds at work on this issue.

  13. Tom says:

    I agree with James John Malcolm (first post above) that the separation between tabs is unnecessary and a waste of space. Safari does a good job of having a minimal UI to separate tabs: an s-curve line and a shadow — http://static.arstechnica.com/newloader.jpg

    Good Mac-like UI work has also been done for a long time by Arronax over at http://takebacktheweb.org/ — check out his work on tabs and tabs-on-top.

    “Page Integrated Tabs” is a really cool experimental idea, but it would probably work better as an Add-On first, rather than as a sudden UI shift for average users.

    There may be no Mac-like UI precedent for the attached/label version of the identity button, but I’d go with that one over the iCal location style. Just looks better.

    Also, please figure out how to effectively de-populate the Location field. We’ve got the URL, the site identity indicator, the RSS feed radio waves, the favorites star, and the down arrow for selecting top visited sites. Too much, too busy, too confusing.

  14. Tommy says:

    Wouldn’t it be nice to (finally!!)have the close button on the left side of the tabs?

    Or even better:
    When you hover above the favicon of a tab, it changes to a close button.

    Sounds good to me! :)

  15. Do people really change their profile that much or have multiple profiles that much? It seems to demand more attention than is necessary. How about just the icon without the label text?

  16. Pfenix says:

    Overall nice job of crossing over the theme.

    The buttons, however, need some more work as they blend too much into the background. If you aren’t looking to lighten the color to achieve this (due to it looking too safari-like), may I suggest upping the glossiness or utilizing another texture.

    Also, the location and search bars being inset, while fitting in with the overall mac theme, looks antiquated. Perhaps it looks too deep, maybe if you were to make it look more shallow?

  17. [...] Horlander has released a few mockup images of what would become the update Firefox theme in future [...]

  18. Anonymous says:

    Can we move towards hiding the statusbar by default?

    I do like the way it’s going, though. All the buttons look more tightly spaced, which looks better than the way the current theme is spaced.

  19. gxg says:

    I like the idea of “Page Integrated Tabs” very much.
    And I agree with others who commented here that the gaps between tabs are unnecessary.

  20. Omega X says:

    There doesn’t seem to be a whole lot of contrast between the toolbar and buttons. It makes the whole thing looks monotonous.

  21. Where did the bookmarks toolbar go in the screenshots? That’s the most heavily used portion of the UI in my browser, after the back button. Right now it’s also a natural separator between that portion of the UI that is site specific (content area) and the rest of the browser that never changes.

    I agree with Omega X that the whole UI feels kind of dull with all the grey and lack of contrast. The profile button doesn’t really make sense to me, unless your intention is to actually hook it up to your online identity to manage e.g. openid logins. That would be a good idea and one that was originally scheduled for Firefox 3.0.

  22. Mirek2 says:

    Really looking forward to the 4.0 version. I like the page-integrated tab idea, but it doesn’t seem like it would work with tabs on top… and I’d rather have those. The Home button gains an entire new meaning, I guess, if it really works like a tab, only always open, and it would be an interesting change. I’m wondering what would happen with multiple tabs for the homepage. Would that concept disappear, or would it be separated or integrated from this home tab? If it’s the old-fashioned link, it makes no sense to have it in the tab bar… The progress bar’s a great idea too…

  23. Mr Lizard says:

    Priority 1: Tab close button on the Left.

    Close buttons in OS X are on the left. The *only* exception is Firefox. There is absolutely no need to keep pretending that close tab buttons belong on the right. Please, please, use this opportunity to fix this issue :-)

  24. nixarn says:

    Looks awesome! I do welcome the tabs placed on the top! I love Chrome!

  25. Tiago Sá says:

    Yay for the small home button in the tab bar. AWESOME :D

  26. [...] Horlander ha publicado una serie de bocetos de lo que podrían ser una nueva actualización al tema de Firefox para las próximas [...]

  27. Nuss says:

    Overall I think it is nice. In comparison to the Windows theme revamp, these changes are hardly revolutionary, but I like the fact that Firefox will look more like Firefox whichever platform you may use.

    However, I have some constructive criticism. :)

    1. I think the new button gradient makes the buttons seem disabled and somewhat dull. The current theme has a more similar gradient as buttons in Finder etc. I think the brighter gradient work better.

    2. I think the tabs look better upside down (from a Mac perspective). That would make sense from a cross platform consistency perspective IMO. I think the new “progress line” looks better that way too, actually. Also, it would make the transition from 3.7 to 4.0 somewhat smoother. The 4.0 tab bar will be even more non native in any case, so I don’t think nativeness is a great argument in this particular case. Tabs on Mac

    3. As mentioned above: the toolbar buttons and awesomebar inset seems a bit non-native to me.

    4. Lastly, one thing that I don’t like about the current theme on Mac is the lack of contrast between the active tab and the inactive tabs. It seems slightly better in the mockup, but it would be really nice if the tabs were darker or if the text wasn’t etched or lighter. Or something else. :)

    Oh, one more thing. I have been thinking of this a while but haven’t gotten around to tell. The Bookmarks Toolbar I think is great. But it is only great now and then. What if the Bookmarks Toolbar was hidden, but slides down when you move your mouse pointer to the toolbar? When you move your mouse pointer to the content area it slides up again (after 500 ms or something). That way you could free some vertical space but still have its functionality.

    Cheers!

  28. [...] Mac Theme Refresh The Firefox team puts together some mockups for future designs of Firefox on OS X from Firefox 3.7 to 4.0. [Chromatic Pixel] [...]

  29. [...] Mac Theme Refresh The Firefox team puts together some mockups for future designs of Firefox on OS X from Firefox 3.7 to 4.0. [Chromatic Pixel] [...]

  30. zak says:

    does anyone have any idea where i could download either FF 3.7/4.0 “alpha” that has these UI looks?

  31. glaeven says:

    the second image (3.7, with small icons and hanging tabs) would convert me back from safari

  32. Cypher says:

    I didn’t notice a tab close button in the mockups, but I’d echo the request that they be on the left side like everything else in OS X. Also, the window gradient seems a little light when compared to Finder, Safari, and other native Mac apps. Other than that, though, they look really good. I’m excited to see Firefox evolving on each separate platform!

  33. Jimbo says:

    I have only ever used a single owner computer, but aren’t shared PCs more likely to have separate OS log ins rather than a shared OS log in but multiple Firefox profiles? Putting so much emphasis on a button to switch profiles seems kinda silly to me. That said, maybe more people would use this feature if it was clearly visible in the GUI.

    I don’t like the idea of having this additional button that I will never ever use, as I will never use profiles, but I guess the saving grace is it’s tucked away in a corner that would otherwise be blank, so it’s like other buttons are being changed to accommodate it.

  34. tree says:

    Don’t combine the stop and reload buttons, combine the reload button with the load button. It makes much more sense.

  35. Alex says:

    Oh my goodness I cannot wait until 4.0. I am such a stickler for screen real estate and this is going to enable my obsession so much. I love your take!

  36. [...] Horlander, a Visual Designer for Firefox, has revealed some Firefox 3.7 and Firefox 4 mock-up designs for Mac [...]

  37. Matt @ DVQ says:

    Very Nice! I am particularly excited about the search bar integration mockups.

    Are there any plans to overhaul the Bookmarks Sidebar UI?

    -Matt @ DVQ

  38. [...] ajuns, Firefox 4.0 imprumuta imaginea Internet Explorer 7 combinata cu Google Chrome. din fericire, inca se discuta pe tema [...]

  39. Erunno says:

    @Jimbo

    The button is more likely for the browser sync feature (aka Weave) which is currently scheduled for integration with Firefox 4.

  40. The blue progress bar integrated into the tab is an excellent idea. I think the throbber has had its day in the sun.

    Oh, and don’t do tabs on top. Bad idea because people will say you’re copying Google Chrome.

  41. Bob says:

    I have to say I don’t understand why you’re bothering with a fairly comprehensive interface redesign for 3.7 and then a total overhaul for 4.0. It seems like too much change for the sake of change. It would be better if the proposals for 3.7 were axed and all preparation and debate were centered on the 4.0 proposals.

    That said, I very much like what’s being proposed for 4.0. Tabs on top isn’t very widespread, but it makes the most sense from a hierarchical design perspective: browser controls, the address bar, etc are all associated with that specific tab. Unfortunately, a lot of people are going to resist it just because it’s different, and they would rather stick with something more familiar even if it makes less sense. But hey, that’s the story of GUI design.

    As far as individual aspects of the designs go:
    * I think a lot of the widgets don’t feel like Mac native widgets, but rather Mac ports of Windows widgets. The light-to-dark gradients are a little too dim, and the relative sizes of the icons are a little off. (By that I reference the size of and position in, say, the forward arrow relative to the half-rectangle it’s contained in. The arrow seems a little small and a little off-center.)
    * The Home button in 3.7 and the home tab in 4.0 are hopefully user-removable.
    * Font rendering in the bookmarks toolbar in 3.7 and the tab titles and address bar in 4.0 looks pretty rough. Maybe you’ve just disabled OS X’s font smoothing on your system, I don’t know, but I really, really hope fonts in Firefox won’t look like that in 3.7 and 4.0.
    * Color-identified tabs are a great decision and need to stay as a default feature in both 3.7 and 4.0, albeit with a preference to disable them. (Preferences -> Tabs, perhaps?)
    * The profile identity button looks very out of place in the top of the titlebar. Hopefully it’s possible to remove that UI element.
    * The off-color area for extensions also looks out of place. I can understand the thinking behind it, but it just seems like a solution in search of a problem.
    * Progress bars for non-active tabs are excellent. Please take that idea one step further and integrate the progress bar into the active tab’s URL bar, Safari-style (or Fission-style, if you prefer.) A standalone throbber widget has no place in a minimal Mac UI design.
    * Tab close buttons need to be on the left side of tabs, not the right side. If you want to keep the favicons on the tabs, then just make it so that the close tab button appears only when mousing over the favicon on the tab. If you fear that makes the close tab button undiscoverable to the average user, then reserve a space between the favicon and the tab text for a small close tab button.
    * 4.0 disabling the status bar by default is great, but since most Firefox extensions presume the existence of some sort of status bar (NoScript, for example), hopefully the extension section to the right of the address bar will automatically display those status bar icons.
    * I note in 4.0 that the search bar is gone. Has search been moved into the address bar, in accordance with an expansion of the Awesome Bar’s capability? If users have to launch searches through the address bar, then there should be some way to explain this functionality to users who are expecting a separate search bar.
    * Have you considered moving the stop/reload button, the RSS indicator, etc to the left side of the address bar? This way, users will correctly associate these functions as page controls (since the back/forward buttons are on the left hand side of the address bar) and not with the extensions, which are now to the right of the address bar.

    Overall, a solid step forward, and I wish we could just skip the 3.7 refresh and go straight to 4.0. Will you release a test suite consisting of the 4.0 theme and any extensions necessary to change the interface to line up with what’s being planned for 4.0? The mockups by themselves are much better than the default UI shipping with 3.5.

  42. [...] Horlander, graphiste designer chez Mozilla, a publié sur son blog ses moutures de concepts series mais cette fois pour la version Mac du navigateur estampillé Panda [...]

  43. marc hoffman says:

    so do i understand correctly that the search provider (“Google” in the example screenshots) will take the place that currently shows the identity of the website (icon, and for secure ones the name or domain)? surely this will cause a lot of confusion with people thinking they are on a secure connection to – say – Google, when in fact they aren’t?

  44. Andrew says:

    I really like the one where the tab looks like it’s part of the page. If you do it right it could be great. I also like the small buttons mock-up on 3.7.

  45. Augure says:

    About tabs in 3.7: One little trick to get more space in the tabs bar could be to make the background grey bar under the tabs beeing thinner that the tabs ie its lower border will not exeed the tabs but rather the tabs will exeed the grey tab background bar (sorry for my unperfect english)

    An other trick would be to reduce, if not erase the space between tabs except the opened one.

    Otherwise, what about the status bar and the scroll bar ? It’s pretty ugly and takes space, what would you change about them ?

  46. Edson says:

    Now that I’ve seen the Mac version, the Windows version has way too many favicons, that is, i think, the only remaining flaw in that mockup. The other thing, if the argument that the search bar is rounded in v.3.7 because of the guidelines, wouldn’t it be rounded in v.4 also.

  47. leroy says:

    I’d have to agree with a number of the things mentioned by other commenters;

    the inset on the buttons looks a bit weird, and the gradient color on the window and buttons don’t match the finder/safari/native apps close enough.

    I do really like the second mockup for the tabs, having the tabs connected to the page makes sense for the user; they have multiple documents/pages open in one window, each tab represents a page, so having them merged visually makes a lot of sense to me. The home icon next to the bookmarks doesn’t make a whole lot of sense though, and I would suggest making it a regular menubar button where most mac users would expect it (since it’s there in all other browsers as well).

    Finally, I’d use the tabs suggestion that I just did, and not go with the tabs on top concept for 4.0. I feel that these tabs would be a move in the proper direction. Tabs on top seems to be the latest fashion experiment in browser land, but I’m not convinced it’s the right solution, let’s not all jump on the bandwagon and think these things over functionally, and user interaction-wise.

  48. Chris says:

    1. FWIW, tabs on top really grate on me. Tabs are part of a document – in the case of a browser the document is a web page. The document lies underneath the toolbar in every other application on my computer. With tabs on bottom, if I travel from the top of the window to the bottom the interface is Toolbar-Document. With tabs on top it’s Document-Toolbar-Document. Throw in the menubar and tabs on top are even more discordant. In addition, I access tabs more often than the toolbar and tabs on top force me to mouse further than necessary when I need to change focus to a different tab.

    2. What happens to status bar functionality in 4.0? I really, really like previewing the url as I hover over a link and that it’s instantaneous, not like a hover and wait as tooltips work (assuming you replace that functionality via tooltips.) I also greatly appreciate seeing download status as well. The downloads window is unnecessary clutter on my desktop.

    3. I’ve never really needed to change profiles so the profiles button is distracting, cluttered and out of place looking, especially when considering how often it will be used. It feels like “We’ve got this new feature and we really want to highlight it but don’t know where it fits. Here’s as good as any.” The no background version is preferred all the way.

    4. I like the tabs to feel like they are an extension to the thing they are connected to, be it the page or the toolbar so I don’t care for the tabs-as-buttons concept or tabs with a separating line underneath/over them. The page unified tabs are very cool but only if they blend in seamlessly with the page they are rendering. I wonder how well this can be done universally but if it can be then cool. The color resulting from page-unified tabs could serve as a nice visual indicator of what page is what, especially considering sites you visit often (e.g. the teal tab would be my gmail page [when using the gmail ninjas theme])

    5. In the 4.0 mockups, the (what I assume is) search field in the url field is confusing because:

    a. It breaks convention with search being a text field (because you will be entering text to perform a search) and to a lesser extent, search is always right of the url text field.

    b. It is taking the place of what is now the security status indicator for ssl connections.

    Whatever interface conventions you decide upon, I do appreciate that you have allowed the community to be a part of the process. That rocks.

  49. Flavio says:

    3.7
    i don’t get why browser people is retaining the home button. is anyone using it? (how do you know that, got some kind of keystroker?)
    It has some sense if you add a quick-jump like Opera, and if you do, present it on every new tab we open.

    On the variations about page-attached-tabs, i got to say the loading bar is very disturbing and little comunicative. I’d go with a dark tab that progressively gets lighter from left to right and ends up of the color of a bkg tab.
    I tried a color-tab addon and it doesn’t upgrade the experience, btw could be a way to show loading tabs (for eg a light yellow while loading, then default color) and tabs that generate errors (google-marked as dangerous pages, 404, plugin fail… make sense if you are going to thread the tabs as i’ve just read about).

    Instead of having it darker, i’d prefear a bookmark bar more noticeable, i mean, if it’s there is because i want to use it, often i forget to use it because i don’t spot it and go type “gmail”…

    4.0
    i love the return to a small back button.

    the tabs-on-top is not bad, but i don’t like the less space for window-dragging (that on osx is far more common).
    i like the darker bkg for prominent active tabs (i don’t understand why don’t you upgrade this already, it’s just a skin color tone!)

    i don’t get what the identity is needed for. if it’s for the OS, we have it already on the menu bar; if it’s for website-based-login, it should be positioned something contextually near the page, for eg in place of the extensions.

    Don’t trade status bar for the extensions, i don’t understand why moving it on top, if you install 10 extensions you get a shorter url-bar? that’s silly, and the cut-text on the edge of the window is hate-able.
    Instead move the Find-bar (cmd+f) on top of a page, it’s not usable down there, i always hate that. It would also be more OSX-looking.

    Oh, i know this is about UX but i’d love to see no background loading of flash, is wonderful to browse YT on Safari because of that.

  50. ChristonJP says:

    Please, please, do not make Tabs on Top required, and please, if you can, don’t make them default. It’s one of the most visually annoying, disrupting things that was in the Safari 4 beta I was so glad to see go away. Aside from that, I agree with everyone else who has mentioned that the option for closing tabs needs to be on the left. It is the OS default, and Firefox is the only place where that’s different.

    Also, please DON’T make the menu limited to two items, or put the bookmarks bar in the menu, once again, it would be too confusing for regular Mac users. I understand that consistency between OSes is important for support folks – having done phone support for too long – but consistency with the OS is more important for users.

  51. Nathan says:

    I like these proposed changes, but my 2 cents is concerning the “Identity” button. I think if the design of this feature is actually a button, the interface will start to look more cluttered than necissary. Personally, I prefer the “no background” version. Nice and simple, doesn’t need to be more than that.

  52. Alain Meyer says:

    What I don’t understand is why you guys just won’t use completely native buttons… What the hell is wrong with using Safari/Finder’s back/forward buttons? Why don’t you use the same background color as every other damn application on Mac OS?

    These design decisions are incredibly poor, and the UI designers behind Firefox really need to stop churning out so much crap. Firefox has the potential to look great just by using default UI elements, why are you trying so hard?

    Thanks.

  53. Michael says:

    All I ask is one thing. Use as little vertical real estate as you possibly can. All Mac users are on widescreen displays and many are displays with poor vertical resolution. Try and make as good or better than Safari.

  54. Jonathan says:

    Thanks for another detailed writeup, and some good looking designs. In the 4.0 section, it seems like there’s a little copy-paste issue there — do I understand correctly that the search field and address field will be formally combined? And that the blue Google pulldown is how you select your search engine? And that no location is displayed when searching, just your term? It’s slick in a way, but I worry that it reinforces misconceptions that non-web-savvy people have (the kind of people who will type “facebook.com” into google and click the first link instead of typing it directly into the address bar).

    Am I right that the proposal is that the two fields be combined? Will this be optional?

  55. Bob says:

    “What I don’t understand is why you guys just won’t use completely native buttons… What the hell is wrong with using Safari/Finder’s back/forward buttons? Why don’t you use the same background color as every other damn application on Mac OS?

    These design decisions are incredibly poor, and the UI designers behind Firefox really need to stop churning out so much crap. Firefox has the potential to look great just by using default UI elements, why are you trying so hard?

    Thanks.”

    This.

    And please do NOT hide the title and do NOT extend the tabs into the title bar. Take the Finder as a benchmark, if you’d like. That’s what OS X users compare their applications to.

  56. Alex says:

    @Bob

    As a Mac OS user I ca say I do not compare my applications to the Finder, but thank you for speaking on behalf of us all. Appreciated.

    I like the mockups for 4.0, and I like tabs in the titlebar.

  57. Mr Lizard says:

    Whatever you do, whatever changes you make, please please please put this on the top of the list:

    TAB CLOSE BUTTONS ON THE LEFT

    I know the stubborn Firefox dev team have flat out refused to do this in the past, but please, you’re the ONLY app that puts a close button on the right. Having seen Windows PCs, I know that’s how they do it there, but not on a Mac.

  58. Daghead says:

    I REALLY hope the Menu Bar options end up using TWO buttons, and is placed beside the bookmarks toolbar, where it is most sensible.

    The design of ribboned apps was noted a few times; Be aware of how Microsoft came to its senses and in Office 2010 beta, changed the Office button to be labeled ‘File’ which is great, even though that leaves ‘Help’, ‘Add-ins’, ‘Options’, and ‘Exit’ out of catigorization (where the need for a general controls button comes in for Firefox’s case).

  59. Conan says:

    I must say that this is the best visual overhaul that I have seen come from Firefox–I’ve been using the GrApple themes for some time now because the default Firefox themes have been rather disappointing.

    My particular feedback is that, if you are going to put the home tab in the tab bar I want the option to get rid of it, as I don’t want it cluttering up my tabs (feels too IE for my taste). Also, the attached label for the profile gets my vote for the options displayed.

    I like the direction this is going. Keep up the good work.

|