Navigation Toolbar on Windows

Yesterday we received a lot of the new Windows icons for Firefox 3 from the Iconfactory. These will start showing up in the nightly builds shortly, but I wanted to take a quick break from getting them landed to post an update. I know a lot of people are curious about the keyhole shape.

Here is the navigation toolbar we will be using in the Windows XP and Vista themes for Firefox 3 Beta 3. Please note that these icons are not yet final, and the image below is currently just a mockup created with the source artwork.

Keyholewindows
OS X will be using a similar shape for the navigational controls in Beta 3 as well, while Linux will be using native GTK icons from the OS theme. For more information about the design, see my previous post The Shape of Things to Come?.

90 comments

  1. I prefer to break my forward and back buttons up, is this still possible?

  2. Oh. I was hoping that the big back button would overflow into the other toolbars a little.

    Won’t making the stop and reload buttons smaller piss people off? It’ll also add a lot of wasted pixels along the top and bottom of the navigation toolbar. I’d rather the navigation toolbar was filled (as it is now) and the big back button overflowed it a little.

    The graphics are a little more fussy than I imagined. I really liked those clean outlines you posted before :-)

    But I am 99% happy with the proposal :-) really like it :-)

    When are these graphics going to hit digg?

    monk.e.boy

  3. I’m really, really glad that those icons are not final. Next time, please be careful when you guys post the images. :D

  4. I like the idea behind the changes being made. The current implementation… not so much. The push-down border around the Forward button seems confusing to me. Is the button already clicked? Is this appearance consistent with the “flatness-3D-on-hover” of the other buttons? Where should I click to bring the back-forward menu?
    I say, bring the forward button 1 or 2 pixels closer to the back button, fix the menu (something similar to what Fx2 has is ok) and make the styles of Back/Frwd and Stop/Reload more matching.

  5. Wow! Good stuff!

    However, I agree with monk.e.boy on the stop/reload sizes.
    I think they should be as big as the back button.

  6. One thing I do not get … Gnome native icons are not native icons to a KDE user. They are only native to a Gnome users. Have you give that any though at all?

  7. I hope these are not the icons from Iconfactory. the forward button is kinda ugly, and that weird thing around it looks confusing. Back button looks good though.

  8. Prey tell, what is so wrong with the Mac Proto back & forward? It’s the Apple recgnised standard for navigation and appears in finder, safari, and in the new Leopard HIG. Leave the Mac back / forward buttons alone please.

  9. Why is the back button bigger than the rest of the buttons?

  10. Nice. As for the other two visible buttons though, the refresh arrow looks kinda anorexic (too narrow for my taste) and Vista’s stop button somehow isn’t easily recognized as such, being non-red and all…

    @pd: That’s still possible – either by switching to small-icons mode or by moving a different toolbar element in between (another button, a separator, etc.).

  11. Hmm. The Vista icons don’t look too bad, but the XP ones kinda rub me the wrong way. I think it’s because it’s a really big blob of a color that doesn’t occur anywhere else in the theme, unlike the Vista ones which just blend with the other shades of blue. I think a more Qute-like green arrow on a white background would probably work better.

  12. It looks good to me, as far as rough mock-ups go. I can’t wait to see these show up in the nightly builds.

  13. I think they’re ugly. Come on, at least give some border lines to the back/forward buttons.

    Stop/reload are undersized.

    iTunes on Windows is different looking but no one gives a damn. Why focus on conforming to the increasingly irrelevant operating system when we could put focus more efforts on Gecko?

  14. Goodness those are ugly. The sunken tray around the forward button, the shoddy gradient around the XP-style ones, and the incongruity of Stop and Reload compared to Back/Forward… thank goodness for themes!

  15. What about the Tabbar in the Vista-Theme? It’s the XP Design, it should look like the native Vista Design…

  16. I take solice in that the standard icons are used in gnome.

  17. I think on Windows Vista, it would be better if the toolbar with the back and refresh etc buttons to be above the one with the file and edit menues (but you can optionally switch it back via the options).

  18. These are the BIG icons, right?
    What about the SMALL icons?

  19. In Vista the menubar shouldn’t be shown by default.

  20. Does it have to be that flat plastic green? I love the iconic shape, but that XP plastic green makes me sick. Why green?

    Can use the Vista theme on XP? It looks better, and I don’t want to have to upgrade to Vista.

  21. Will Icon Factory be doing final versions of these navigational controls like they are with the other icons?

  22. Ehh.. Rather than trying to fake what you think my buttons look like, I’d really rather you just wrapped the entire back/forward block in a native button. Not all of us are using the default XP theme — and I think this number is increasing, given how godawful gaudy XP is out of the box — and I tend to resent apps that do a shoddy job of skinning themselves after a theme I don’t use.

    I’m also a bit underwhelmed by those arrows. Not only do they seem awkward with the small tail, but they look like they were anti-aliased very very badly.

  23. Aaron Strontsman

    It’s ok, though Forward / Back buttons still look a little too, um… green. So, again: Please don’t use that colour! And please cut that stump of a line off the Back arrow.
    Some usability issue I see is that the grey space behind the Forward button makes the button itself look as though it were already pressed. Maybe you could leave away the background gradient and simply draw a white line around the button(s).

    I agree with Simon that Reload button is too thin.

    On the whole, it’s not that bad, although I’d still prefer Tango for Windows (and not just because it’d match with my other tangofied applications).

    PS: Simon said, it will be possible to move a button in between back and forward, without giving the toolbar a broken look, so are there “normal” icons for back / forward still in the theme?

  24. I really like what’s coming out here. It’s looking as good as I imagined (hoped) it.

    I agree with Simon on the stop button: apparently IE7 has no problem with its stop button being red, while the other buttons on that toolbar are blue. The stop button on Firefox’s Vista theme oughta’ be red. It’s just iconic.

  25. The arrow in the back and forward button in the vista firefox mockup don’t look correct. See here: http://i29.tinypic.com/ekfbme.png

  26. “while Linux will be using native GTK icons from the OS theme.”

    What about KDE (QT)? Will it use icons from the KDE theme?

  27. Manuel -Argentina-

    Do you call that a native windows toolbar?
    I love firefox, but that doesn’t look neither firefox-ish nor window-ish.

    :S

  28. Buttugly.

  29. Oh shit that awful.

    I hope the OS X version doesn’t look as bad as this. I liked the idea when I saw the wireframes, but if this looks anything like what the final version will, I feel sorry for any Firefox user on XP/Vista.

  30. The Vista ones are good.
    But the XP ones are too shiny.

  31. One more time: XP is 100% not fine (maybe I could live with the reload button, but the rest…). I guess I’ll finally have to use a custom theme on Fx.

    Vista is fine, except for that stop button – I don’t get it, at all – and the weirdly shaped back arrow.

  32. Wow, the bottom screenshot looks fantastic…I’d love to have that nice F/B buttons on Linux. Will that be possible?

  33. I not want Internet Firexplorer :)

  34. To the KDE fans out there: Gnome and KDE icon themes all respect the Freedesktop specification. So you can configure GTK to use your preferred KDE icon theme, and that’s what Firefox will follow.

  35. Kusodesune.Shine

  36. I can’t get over the larger back button and how it seems to be wasting verticle pixel space. I love how in the existing firefox default theme, I can set the icons to ‘small’ for a more compact look. Will this still be possible in the new Fx 3 theme?

  37. I can set the icons to ’small’ for a more compact look. Will this still be possible in the new Fx 3 theme?

    Yes, small icons will still be an option in the new theme.

  38. I actually don’t mind either theme. You guys did a good job. For you people complaining it could be way worse *cough* IE *cough*. (And yes that is a compliment.)

    The only suggestion I have is to reshape the arrows of the back/forward buttons. The small tail looks a little awkward.

    Besides that, keep up the good work!

  39. I really and sincerely appreciate all of the hard work going into FF3 but IMHO the refresh and stop icons look very awkward next to the new back and forward “keyhole” icons. Actually looks like the development stopped there. I hope there are new refresh and stop icons coming that will fit in better with the keyhole design and it all looks tightly integrated in the end.

    ~B

  40. How will you judge these designs with end customers? Icons design is very subjective some people will love them some will hate them. How will you know if you have a ‘hit’. I personally think these still need some work but it’s not a bad round one.

  41. How will you judge these designs with end customers? Icons design is very subjective some people will love them some will hate them.

    Blog posts like this are one way (obviously a self selecting set of people). Putting these in Beta 3 will also generate a lot of feedback, since we expect it to have about a million users. Again this is a self selecting group, but if a design reaches general acceptance amongst a group of people that large, we are considerably more confident deploying it in the final release (even though we only tested with .6% of the population).

    The only way to get statistically significant feedback from a group that is not self selecting would be to run a formal evaluation of the design. Of course given that we ship in 40 languages, we would want to make sure we conducting the evaluation on an international scale. There are some market research firms that can do that, but they are of course really expensive and putting together the study quickly becomes nearly as much work as generating the theme. That’s not to say we shouldn’t have people thinking about this, but with only three people on the UX team at Mozilla, we can’t do the same type of extensive vetting process that goes into redesigning most mainstream products.

  42. is it possible that the button be Green ??
    Back button looks good though.
    Stop / Reload ( Refresh ) should be a little more graphical ! cause those buttons are so simple !

  43. A giant leap forward I must say! Though, I think the “arc” (circle height to square height ratio) on the XP forward button looks a bit weird compared to the back button. I know you guys have used the XP Start menu button arc, but the Vista forward button harmonizes better with the back button!

    Further, I think the arrowhead on the reload button should be the same as the arrowhead on back/forward. And as said above, the reload button is a bit skinny.

    In any case, I think this is going in the right direction based on your initial idea. (Though personally, I think the native theme should have been something Firefoxy cross platform instead of native themes in plural).

  44. I really hope it’s not just an icon refresh, but that it also includes the black glass finish in the main window, akin to the mock-ups we’ve seen of Places. Those were pretty cool. Will this be happening or has this been abandoned?

  45. The Back arrow is still b0rken!!!!111
    I like the keyhole shape. The stop button should be red unless you plan to put it in a rectangle. The XP mockup is great except for the back arrow. The menu bar should be below the nav-bar and the bookmarks toolbar should be styled as a separate toolbox on Vista (like Windows Explorer and IE)

  46. Iconfactory is usually much better than this. This looks like what happens when a designer tries too hard.

    They need to just relax and make 4 separate icons. No need to make them “new”.. Just make them fit.

  47. As others have said, the reload and stop buttons look really anorexic. The Stop button should stay red on Vista, it doesn’t make as much sense in blue. Even a red outline would be nice, or perhaps a red shadow. Also, the history in the middle as in earlier mockups makes more sense imo. Otherwise, looks pretty good although I actually miss the signature green back/forward buttons.

  48. the circle-to-square ratio is really doing the XP mockup a disservice here. It looks like the forward button only follows it on the right edge, giving it a bizarre shape.
    Also, the “sunken” area around back/forward is a bit too in-your-face. Possibly make it softer.

    That said, I would love to see something on like the Vista mockup on the Linux version.

    @Daniel Aleksandersen, @Xanthus: remember that the current plan is to use the currently selected XDG icon theme on linux – so you’ll probably see nice Oxygen icons.

  49. Oh, this theme is awful! I like much better icons in Firefox 2.0… I think, that this icons need absolutely new design. On Vista they look okay, but on XP… i have no words, to say that. Green colour? I want to see white colour with, for example, green arrow. Iconfactory do bad work; their other stuff on website look nicer than this (i must say that) shit. But red stop button is ok, and refresh is acceptable. And hopefully that icons might be bigger than this.
    Greet for all Firefox fans!

  50. As a huge fan of Firefox, I’ve been keeping up with each new feature of 3. So far I’ve been at least moderately pleased with everything, but I really do think that these buttons are awful. The Vista ones look decent enough I guess, but it looks really IE 7 to me with the randomly sunken forward button and the tiny refresh and stop. The back button is obscenely huge – I really don’t understand why forward and back aren’t the same size. The XP ones have all the same shortcomings, but manage to look really hideous. I admit I was excited at first to hear the buttons would be re-vamped, but now I feel quite satisfied with the Firefox 2 ones. Here’s to hoping these don’t make the final cut.

  51. This is so ugly.
    Kill it

  52. When will this appear in the nightlies?

  53. Mmmm. I like both themes so far, but I do agree with the people saying that the stop icon in Vista should be red. Additionally, the arrows on the back/forward buttons are a regression (IMHO) from the last icon preview; instead of making the arrows on the Vista theme more like the native arrows (or as another person suggested, like Qute’s arrows) instead the Vista arrows have made their way to the XP theme, which already had arrows that fit in to the icon style there. The fact that I’m not a big fan of these arrows to begin with (big tip and small tail looks ugly to me) doesn’t help either.

  54. It’s been a week and I still don’t see these in the nightly builds.

  55. I must say, I’d much rather see a red stop icon than a blue one – otherwise, you’re getting overloaded with blue and it just looks depressing.

    The strange “pressed-in” thing behind the forward button needs to go, and the forward button should be closer to the back button.

    The tab bar should also blend in with the rest of the Vista theme… that’s why Firefox 2 looks so ugly on Vista – the tab bar doesn’t match.

    But regardless, it’s exciting to see what’s on the way… I can’t wait to see it all in action ;)

  56. >It’s been a week and I still don’t see these in the nightly builds.

    The change was momentarily backed out due to a 9ms performance regression with displaying the window (9 milliseconds might seem like a humorously short amount of time to worry about, but our engineers take performance rather seriously). It will be back in shortly once the performance regression is fixed, and included in Beta 3, which has a code freeze on Tuesday.

  57. FWIW, they are in the latest nightly (1/28/2008). I’m unsure what to think about them at the moment, but I’m sure they’ll grow on me.

  58. Gah, the icons are in (currently XP only though if I understand correctly) and they are pretty bad, most of them look like they literally took 30 seconds to make (well, the 4 new ones that I can see right now). Really, can anyone explain the logic behind the reload button getting so thin? They probably will grow on us, but it’s rather annoying to see how every Firefox release seems to go backwards in terms of looks.

  59. I took the initiative to design an improved IMO Unified Back/Forward Button.
    Please have a look at here
    http://fugifox.blogspot.com/2008/01/suggesting-improved-unified-backforward.html
    and feel free to make any comments.

  60. I can understand wanting something to feel more cartoony and less realistic on XP then Vista, but why green plastic? It’s just ugly.

    Why not a flat, two tone blue circle. Cut halfway, with darker blue on the bottom and a white arrow in it?

  61. Okay, so i’m on the latest nightly build right now.

    However, i’m not overly impressed with the whole theme.

    1. Icons aren’t aligned properly, and do not fill the toolbar.
    Also, top of the back button should touch the top as the bottom does.
    2. Unappealing colours. And too… well, matte. Needs gloss like FF2.0.
    3. Refresh and stop buttons are too small and thin. They should be like FF2.0
    4. Square outlines appear when the mouse is over the back/forward buttons

    What’s happening at IconFactory? They usually do stuff better than this.

  62. Sorry, but the XP icons look nothing like their os counterparts. The mockups looked much better. I wouldn’t use them.

    Did Mozilla pay them for this ugly result?

  63. Nice to see things taking shape.

    The fact that the back button is so big and so bright makes it a little distracting though… when reading a document in the top left corner of the browser window it grabs my peripheral view quite a lot.

    The idea of making buttons black and white in IE5 and below may have been a little extreme but I’m sure there’s a nice spot in the middle where the back button can sit without being so flashy by default :)

  64. Now that I see this toolbar mockup, the curvature of the Vista forward button does actually look better than the XP version. I would recommend simplifying things–just use the same shape for the XP forward button.
    Also, I think arrows without tails would be the best way to go.
    Excellent job, overall.

  65. How about another blog entry where you talk about the significace of the elements of the back/forward button.

    Why is XP green and Vista blue?

    How about a few variations we could riff off and give more feedback on?

  66. The vista stop button REALLY bugs me. I liked the one from the the December 13th update more.

  67. I much prefer the windows vista theme. I find the color theme they used for windows xp is really awful and though i know firefox would like to create a theme that intgrates nicely with the os i would really like it if they managed to do that without using that green for the back and forward buttons. also ui just noticed there a drop down menu next to the forward button, but is there still one for the back button? it doesn’t look like there’s room.

    basically love the vista theme but prefer my firefox 2.0 to the xp theme.

  68. Wow it looks better than i expected!

    Good job Mozilla!

  69. it’s UGLY, stop it now !

    it’s a mix of windows media player and old linux icons

    why can’t you get a nice design, like in apple apps.

    hopefully you can change the skin, if it’s was not possible i would take opera or flock or … no

  70. the back and forward intricate not a good idea

    flashy colors a hugly, just use smooth colors, light shaddows

    reload : nicer with 2 arrows
    stop : nicer with round shape

    icons size should be the same

  71. I do not like navigation buttons on windows XP. On vista it looks quite good. Wondering how it look like in real. Home button should stay in navigation bar. Don’t move it to bookmarks place.

  72. I like the icons and i do support the idea of having a larger “back” button. How many times i use the back button when navigating the web versus the forward/reload/stop buttons. I would say I use the back button many orders of magnitude above the others.I do agree the reload button looks way too thin on both platforms and the stop button on Vista looks out of sync. Eliminating that depressed are would be another option, I don’t think is necessary.

    if the area that looks depressed where the forward button would be expanded to include fully the back button, the appearance will improve since it will wrap buth buttons on a particular “space”

  73. Damn. I’m glad those icons are not final. They are really ugly.

  74. These icons looks like they’ve been drawn by poorly skilled Russians under gun threat.

  75. My comments:

    1. The forward/back buttons look terrible in my opinion. The combined design looks horrible.

    2. The stop button is confusing. People are used to the familar red button for the stop button.

    3. Where is the home button?

    Well, either way, Firefox 3 is definitely going to need a better user-created theme.

  76. Alex, do you understand that the existing artwork for the “keyhole” buttons cannot remain there for a release version? I am a professional designer with 5+ years of experience, and I was shocked to see these poorly designed images. The idea itself is perfect, it is the icons that sux.

    Problems with the current icons are:
    - they do not blend with the background, some white pixels hang here and there
    - the color change onmousedown is inconsistent with other buttons
    - the color looks somewhat dirty on XP
    - outline of the inner big white arrow is not smooth, looks more like an autoscaled version
    - the selection box onmouseover is absent (compare w/other buttons)

    They at iconfactory simply spoiled your excellent idea. This looks like all these icons were made by a freelance student, all for $50, in one day.

    Either make Iconfactory produce better work for their money, or find somebody else who will design this.

  77. It’s really strange that the history button looks pressed all the time.
    It should behave like this:
    http://tests.themasta.com/historybutton/ (clickable mockup)

  78. That Vista mockup, and the betas, the color is some ugly purple blue… Please…Please make it look a little better. I’m not too fond of this new theme.

    Btw, other people don’t seem to like that color…

    https://addons.mozilla.org/en-US/firefox/addon/4484

  79. Oh, God, the XP theme is fugly. Also, why aren’t the toolbar buttons equal in size, like in FF2? Is Mozilla trying to copy IE7?

    Please, please allow users to keep the icon sizes and layout of FF2.

  80. Another vote for “Home button should stay in navigation bar. Don’t move it to bookmarks place.”

    The home button is what people click on to get back to to their starting point or safe haven. It is also use for company homepage in corporate environment.

    Firefox interface should be design based on users behavior. Please don’t make users change their natural behavior just to accommodate Firefox. Not only that, it is confusing and difficult for average users to customize Firefox to work the way they want.

    For the sake of Firefox and its users, please reconsider the comment that you made in Firefox Bug 417152 “I agree that not
    all users are going to quickly adapt to this relocation, but if it really
    bothers them they do have access to a customization palette.”

  81. The themes look very nice, but I think the stop button in vista should be red. Just because most things related to stop are red, such as a stop sign, streetlights, and the taillights of a car. Also some people have mentioned this already and I agree that the menu bar should be hidden by default under vista and if the navigation toolbar could be on a translucent background it would fit so much better into the Vista Aero theme.

  82. I’m not entirely sure you’re putting enough thought into usability. The buttons are potentially pretty enough, but are they useful? Is the Back button so much more important than the Forward button that it needs to be twice the size? And just by looking at those buttons, I wouldn’t know how to show my history menu? Are the Back and Forward history menus combined, or is the small menu arrow beside the Forward button only for the Forward history menu?

    I also strongly agree with those who say that the Home button should stay on the navigation bar. Users think of their Home page as more of a baseline or starting point for browsing rather than a bookmark, which puts it conceptually on the Navigation bar. Don’t make users change their paradigm just because you think it would be more aesthetic!

    Finally, if you’re concerned about conservation of space, why not combine the Stop and Reload buttons, depending on the current state? You can’t Stop a page that has already stopped loading, and there’s little sense in Reloading a page that is in the process of loading without Stopping it first. This would actually improve usability by providing extra feedback about the status of the page — in usability tests, I’ve seen users compulsively click the Reload button in a futile attempt to make a page load faster.

  83. I hate to have to say it, but these icons are … fugly. I far prefer the icons from FF 2, and the tabs as well.

    I’m sure the IconFactory can do much better than this.

  84. I agree with 83 (Matt). Combine the Stop/Reload buttons into one. I use and extension to get the feature but to should be standard.

    https://addons.mozilla.org/en-US/firefox/addon/313

  85. Where is the back arrow? Huh? What
    did you do with it? Please restore
    the back arrow. Okay.

  86. Type your comment here. Sir or Madam I cannot locate the navagation arrows no longer on top of tool bar. I must have done something. I checked favorites and tools but I cannot locate them. They were there. I cannot go forward and backwards without them so any help you can give is appreciated

  87. The only suggestion I have is to reshape the arrows of the back/forward buttons. The small tail looks a little awkward.

    Besides that, keep up the good work!

  88. Buildings are not very cheap and not every person is able to buy it. However, home loans was invented to aid different people in such cases.

  89. I’m old and want my tabs that have home, forward or back, history etc. back on my Navigation Tool bar on Windows. I would appreciate me control since I pay for the privilege.