Alex Faaborg

Much better looking than what’s on the trunk. What do you think about my proposal in https://bugzilla.mozilla.org/show_bug.cgi?id=416652 ?

the ’stop’ and ‘refresh’ buttons on xp and vista look, well, crap

to me the stop button reminds me too much of a standard “delete” icon; and both icons appear way too thin.

it’s a shame the keyhole motif isn’t being extended to small toolbar icons.

comments:
1) the linux icons look mainly for gnome/gtk; what about kde and other window managers?
2) on the small icons for back/arrow button for windows (xp and vista), think you should get rid of the circles surrounding the arrow and just stick with the arrow, the circles take too much room up. but make sure to change the arrows from firefox 2 (maybe less gloss and make vista’s blue, keep xp’s green)
3) just from the mockup (haven’t tested it though) the stop button for windows xp looks dark.
4) everything looks great nonetheless
good job!

The small back arrow looks like a +, please just an arrow.

@Corey, 1): Some of the Linux distros offer a unified theme managers where icons and styles are shared. For others you have to choose fitting themes for different toolkits anyway. The icons provided by FF3 are Tango style icons which look good in GTK and QT environments. The way FF3 uses icons and other theme elements it’s really up to your distro to tell Firefox how to look like.

Although I haven’t got the current trunk in front of me now, I believe these (XP) back/forward icons look much better. I still think the (XP) stop and reload look too insignificant, or “thin” if you like.

I find the policeman on the “identity unknown” icon ugly-looking. It somehow doesn’t fit well with other Firefox artwork.

What’s more, for a European like me, it looks like a typical US policeman. This is a problem for an _international_ product like Firefox.

About the small back icon: I agree with corey farwell. Since there is simply not enough room for a keyhole shape with small icons (no matter how much people request it), IMO it would be best to simply use a plain arrow (like before).

Just two things with the Windows versions I thought might be useful to bring up:
1. What bugs me is the difference (consistency) in arrowhead and line styles. That is, the arrowhead and stem of the large Back and Forward buttons have rounded edges whereas the reload button has boxy points for XP and pointy tips for Vista. Or even look at the stop button with its straighter lines rather than curved edges. Similarly, “Go” and “Resume Download” arrows are rounded while the “Down”/”Up”/”Drag __” arrows are definitely pointier.

2. The Privacy Prefpane icons for Windows are little more misleading. While OSX and Linux are explicitly doorknob signs, the Windows signs are much more confusing (almost helmety).

Hope this is useful. Looking forward to Beta3!

I’m loving the newest icons! The extended left etch on the keyhole seems notably satisfying for some reason, but it works.

On the Vista set, the Object icons feel really appropriate and Vista-esque. The New System icons seem pretty good; maybe slightly too gray, since I remember these icons being a tad more colorful in apps like Windows Photo Gallery. It’s hard to tell, but it looks like they fit.

The Vista Glyph shapes themselves work great. The Stop glyph works great as a plain X. My only worry is that, since all the glyphs are the same color, usability may not be intuitive enough in terms of color? It seems flat. I like my Stop buttons red and my Go buttons green, for instance. I’d have to see it for myself, but I thought I’d say something about that.

Other than that, I love the latest work!

The GTK default theme for Firefox 3.0 will look outdated comparing it to the OSX/Windows default theme. Showing the browser in public will make the audiance feel that Firefox is an old browser if the operating system is Linux. Maybe GTK can be changed to more modern theme, but people whose don’t want to change the default native theme are stuck with that layout.

Please at least provide a way to install (from AMO) the other default themes without hacking the browser or using 3rd party addons.

I’m concerned that nearly all the Vista icons are in blue. Blue back, forward, stop, reload, home, even blue RSS glyph! Removing color as a distinguishing characteristic and making the icons less chunky and with less distinct outlines means these icons tend to be less distinguishable. (And a blue RSS glyph just looks bizarre.) Worse, the consistency of the blue here makes the few icons that DON’T use blue (like the Downloads icons) stick out. I suggest using some of the existing colors, such as greens and reds. At the very least, stop should be red (as it is on XP).

I echo others’ concerns with the weight and shape of stop/reload compared to back/forward. I don’t have a concrete proposal for improvement here.

I’m also not a fan of the design of the Privacy object — while I think I can guess what it’s supposed to be, it mostly looks like a piece of paper with some sort of bizarre gold paperweight on top. (In fairness, when we were designing the Fx2 Privacy icon we also had a hard time coming up with something reasonable, though I like the design we ended up using slightly more than the Fx3 design.)

“I echo others’ concerns with the weight and shape of stop/reload compared to back/forward.”

I agree that it’s disjoint.

One thing that makes the keyhole button look really heavy is the way that the “droparrow area” wraps around the forward button. Maybe we should lose the drop arrow. It also looks a little challenged because the forward arrow points directly into a down arrow.

Hi Alex. Thanks for the post. One thing I wanted to ask you on IRC the last days is following: Are also small icons planned? Especially on OS X there is no difference between big and small ones. On Windows the keyhole is only shown when big icons are activated. Will we also get a smaller keyhole? The difference to the normal back and forward buttons, which are shown when small icons are enabled, will irritate the user IMO. Or isn’t it possible to get the keyhole at this size?

I don’t think there is enough communicated with the various identity icons, and additional inofrmation is displayed on the Linux ‘identity unknown’ icon (the ?), which isn’t on the windows versions.

I don’t associate yellow with unknown, for instance.

Also the privacy prefpane icons on windows don’t work for me. They looked like some deformed, amputee carriage clock to me.

Other than those couple of icons, I’m very impressed with the new icon sets and look forward to using them in the wild.

I don’t like the history button, it is so static - will it animate/pop-up when the user mouses over it? When nothing happens it seems like it is not interactive. Every other button has mouse over effects - why is this one different? Does it have different rules attached to it or something?

The history/back menu is confusing.
Is see the page I am on is highlighted, so if click “back” will I go up a menu item, or down a menu item? Can’t you indicate somehow the time line?

Icons look nice though. I wish I could have vista theme on XP

monk.e.boy

Oh, yeah. What is the privacy icon? A bloke with a winged hat? Is that some sort of God of privacy? Or is it an American thing? Like UPS?

Really, I have no idea what it represents?!

monk.e.boy

(On XP)

Back/forward: The new icon looks much better than the one on trunk. Now the background is not only associated with the forward button. But I think it is too heavy. Maybe remove the background entirely. 16px icons don’t look like an arrow, but just like a dot.

Identity: I like the Linux icons better.

Privacy Prefpane: A paper with a helmet from Greek mythology? I don’t get the connection. I like the FF2 icon better (through it should be easier to wee what it is).

Vista blue: The blue seems odd. Especially the addon and feed icons. But then I don’t know Vista, so I cannot really tell.

Other than that it really looks great.

Stop fiddling with what God ordained for the colors of the main buttons!
Stop = Red because, well, Stop = Red.
Reload = Green because green suggests newness and regeneration etc.
Back = Blue because things appear more blue in the distance.
The fact that those were the Netscape colors just shows what good taste they had…

Why the variety of colors and shapes for the feed icon (white on orange, blue on white)? There’s a whole page of Feed Icon Guidelines on mozilla.org. White on orange, rounded corners, two waves.

And Larry is fine, he looks just like a border guard inspecting your passport, except when waving his rather effete red lollypop.

@Christophe Jacquet:
The “policeman” doesn’t look anything like any US policeman I’ve ever seen. To me, being an American, he looks more like what I’d expect in Europe or Japan.
He should be recognizable to anyone who does any international travel, though. It’s the symbol used in airports and border crossings almost everywhere on the planet to indicate “customs.”

I know it may be a bit late to show you this re-desing of my own. It’s a more XP-ish keyhole. The only difference is that the arrows are rounded, just as the ones in the XP File Explorer.

http://img292.imageshack.us/img292/5720/keyholefirefox3bl1.jpg

What do you think? Send me a mail and tell me.

Is there any reason the Tab Drag Marker is different from the Bookmark Toolbar Drag Indicator? Both indicate two items between which the currently dragged thing should be dropped, so I think they should look the same.

I like OS X’s Bookmark Toolbar Drag Indicator (something very similar is currently used on Linux); that could be used for both.

The other platforms’ Privacy Prefpane icons should copy the form of OS X’s: it’s much simpler and clearer.

The Content Prefpane icons seem a bit cluttered to me, but then I have no better suggestion that doesn’t resort to fetishising one particular type of content.

I think the green Larry (Identity EV) on Linux should get his tick back (there used to be a tick under his arm), to make him more distinct from the blue Larry.

I’m not convinced that a down arrow (with a progress meter) is a suitable visual metaphor for file transfers: the progress meter’s fine; I’m just concerned that the arrow plays too heavily on the common English word being “*down*loads”.

Perhaps a generic “content” icon at the end (right in LTR; left in RTL) of the meter—or perhaps just sitting above it—would be better, denoting progress towards having the content.

Does Web Feed (shape) really need to be different from Web Feed (glyph)? Will users understand the difference?

Other than that, the Linux art is looking sexcellent (both sexy and excellent)—a massive improvement over Fx 2. (And the Windows icons look like they’ll blend in very well with Windows’s own unique brand of fugly.)

For what it’s worth, I think Manuel’s Back/Forward for Windows XP (comment 21) looks much less fugly than the current design.

As someone mentioned above, the arrowhead is really out of place. Why did they go with a thick closed arrow-head instead of an open one?

Windows consistently uses open arrow-heads, like the one used in the re-load button. I think the keyhole on both Vista and XP would look 100x better if it used an open arrow-head.

Also, what about the application background on Vista? Are they implementing the black-glass background or not? If they’re not, then frankly, they’re wasting their time.

Kudos on the updated icons. In particular, the etching extended to the left makes the arrows fit together as a unit much better.

I’m looking forward to seeing the Mac OS X ones in action. I’d been wondering if the motif had been abandoned for those.

I have a gut feeling that xp back-forward icons won’t fit into “classic” theme in winxp.
I hope not.

Echoing some other concerns:

For the identity icon on Windows, “I don’t associate yellow with unknown, for instance.” (Post #15) I agree. Although it may portray that “unknown” sites on the off-chance, such as piracy sites, may be in fact dangerous, I have my doubts on having to use yellow. IE doesn’t display anything on unknown sites, for instance. I like gray for unknown, personally.

“Also, what about the application background on Vista? Are they implementing the black-glass background or not?” (Post 24) I’m wondering this, too. I really liked how it looked in the Places mockup, and I think it’d be a big improvement over what’s there right now.

@bp
Your mockups at https://bugzilla.mozilla.org/show_bug.cgi?id=416652 reminds me of my own mockups. See www.øde.net/firefox

Alex,
I think some of the buttons for Mac OS X is a little old. I am not sure if you want to follow the latest trends but MainPrefPane button has changed in Leopard.

The “Go button” for OSX should be a bit darker. It’s not as easy to spot as it should be.

* I also have no idea what Privacy icon represents (or I may just guess). But I have suggestion: locker, key, or keyhole or closed door seems like a good thing.
* Main options seems a bit wierd. I know what is the icon, but I am not sure everybody will get it. Though it looks original
* Overall great improvement, both from last collection and Firefox 2

You really should change the little back and forward icon to something close to the keyhole the change in mockup are better then the FF2 icon’s or anything that could be inspired from those icons.

Keep the RSS icons the same as they are now instead of changing the colours etc. These icons are used widely in different programs and devices (my mobile phone uses them!) and are instantly recognizable. Also, how about having the back and forward arrows in the same style as the native Vista arrows, like this: ->?

Seems to me that the Icon Factory are taking their sweet time with these. The icons are improving but tell them to hurry up. Then you can get to work on that God-awful background colour.

It’s going in the right direction, anyway. I’m still not in love with the green keyhole, but I don’t hate it like I did the first version. I do like how the shaded area under it extends to encompass the whole control, seems to make more sense. I’m slightly happier.

Anyone know what the “Wrong way” sign means?

could anyone please explain how did it happen that mac os x buttons are rounded?

@Jesper: I believe the Privacy icon is a lever doorknob with a “Do Not Disturb” sign on it, like at a hotel. That said, it didn’t make any sense to me until I looked at the Linux version.

That said, I’m finding the Linux versions to be much more attractive and easier to understand than the rest of the lot. And the Advanced Prefpane “gear” icon is downright gorgeous.

If the goal is system integration, the stop button on Windows XP should not be a big red X.

The red X is already used for ‘delete’ in the os.

And I still believe the back button is too bright for its size on XP; it has the annoying tendency of sticking out in my peripheral vision while reading a document… With all this talk about branding and whatnot, I still think the primary goal of a UI is to remain unnoticed.

I agree with the other that a distinct color for each toolbar icon on Vista (and on Mac OS X) wouldn’t hurt but given the very iconic and distinct shape of the main toolbar items I don’t think it is necessary.

I like the idea of just left/right triangles instead of those weird arrows. Cut off those stumpy tails!

The Mac OS X buttons look so drab with no color. Please add some color back to them. I really think it is better for Firefox to have some identity on the Mac and NOT try to look so much like Safari. The current button set would be pretty nice with color.

In particular, the etching extended to the left makes the arrows fit together as a unit much better.

It also makes the whole thing look a little less phallic…

After all the bad comments about the last version of the stop button, they actually made it worse? The stop sign icon in the XP version was fine, and everyone recognizes it immediately as STOP. Plus, the Vista icon still needs to be red, red means STOP. As long as we’re on that, green means GO. The Vista go button is hideous. As for the small back and forward buttons, I agree that they should probably be just the arrows. They’re just too small for that shape and amount of detail.

I almost have to squint to tell that the small back buttons on Windows are arrows, especially the Vista one where the arrow blends with the lighter part of the gradient. An open arrowhead would probably help, but I think just the arrow by itself would be a better solution.

Why on earth are the Windows Larry icons drawn in negative? I especially don’t like the XP ones, they look like buttons but AFAIK they’re not meant to be clickable. This also hurts ‘wront way’ icons - it needs to be a white bar on a red circle, not not the other way around.

Also, the small ‘wrong way’ on Vista is pretty hard to see. The added border scrunches things together too much. The XP one isn’t much better, but the Linux one is fine. At the very least I would remove the handle part on all 3, so that there’s room to make the actual sign larger.

On the ‘popup blocked’ icons, why is the ‘no’ symbol rotated on the large vs. small versions? And why is the small Vista icon ghosted out like that? I think that’s taking the transparent windows (which not all Vista users have) a bit too far. Why is the Mac icon an almost meaningless exclamation mark?

I’ll throw in a ditto with those who have been saying that the Windows stop & refresh icons are too insubstantial and disconnected from the back & forward, and that the Vista icons as a whole are too homogeneous in color.

Is it just me or does it almost look like the go arrows on XP & Vista were switched in style? The XP version looks more glassy than the Vista ver.

I’d like to see the Window bookmark icons be brought into perspective like the Linux icon. It makes it a lot easier to tell that it’s a book. Having the different-color spine isn’t a bad idea, though, you might consider adding it to the Linux ver. The Mac version may be the hardest to figure out, though. It looks more like one of those wooden alphabet blocks you give to little kids than a book.

The Windows pref pane icons are still as indecipherable as ever. The Linux one looks the best, although I’d make the do not enter symbol red like on the Mac version.

Having a scissors on the Linux applications pref pane icon is a bad idea. A scissors is universally used to mean ‘cut’ (as in cut copy & paste). Let’s not mess with a well-established symbol, ok?

The XP downloads icon is a little too grungy. “Put this in my dirty old shoebox?” The cleaner Vista icon looks much better.

Then Greg K Nicholson, thank you!
for the people who doesn’t read previous messages, here you can see an example of a “rounded arrows” heyhole.
http://img292.imageshack.us/img292/5720/keyholefirefox3bl1.jpg

Please use this ones

I agree with the comments about the Vista glyph icon colour scheme but I think the correctness of the weight of the stop / reload icons is particularly hard to tell when placed on a pure white background. Personally, I think the back / forward Vista icons are too blue, I think they might fit better if they were a more subdued shade of blue and perhaps even *very* slightly leaning towards a turquoise colour.

As for the cryptic privacy icon, what about perhaps using a dressing screen (http://www.westyellowknife.com/images/may2001/room-divider.jpg) design or changing the general shape of the icon to something more like the Mac version?

The icons are an improvement but they are still very old looking, for example the downloads icon, the home icon, the refresh, and the icon where the search bar holds the Yahoo and Google icon are very ugly. FF version 2 has a much better theme than beta 3’s on Windows XP… Even the Vista icons are a bit old fashioned.

I just don’t think this is going to impress people nowadays as everyone wants a nice looking theme, not something that came from 1998.

I agree that the open arrows look better and more native on Windows, but I can understand if you want to make it more distinct from IE. I had a friend over yesterday and when I was using Firefox 3 with the Vista icons he asked me why I switched to IE7.

I agree completely with Byron, the stop and reload buttons look too skinny. Stop especially just looks like delete. I thought the Vista icons were supposed to be more detailed to fit in with the overall Vista theme. Also, Adrian is right about how they don’t match the roundedness of everything else. Also everything blue is not a good idea for Vista, even IE7 doesn’t do that.

Most of the icons look great but I have some issues in the Vista theme which I’m going to list in order of importance:

1. Why can’t you have any vista icon which isn’t blue? I believe that the stop icon should be red, the web feed (glyph) orange and the addon green.

2. The star is ugly, Vista’s is much better, so if you want platform integration, why not use the native one?

3. Larry should get back its tick and question mark.

4. The privacy prefpane icon looks weird.

I know there is a lot of discussion about the keyhole design. I really like the idea. Please just fix the shape of the back and forward arrows. I completely agree with the comment #21 by Manuel. The arrow heads do not look native to the platform. I mean OS X gets the keyhole shape and native back and forward arrow, why can’t Windows XP and Vista too?

(Another nitpick I have with the keyhole design on Vista is that the etch is too much. The etch on XP is excellent!)

Also, people keep complaining about how most of the icons in Vista are blue, but I really like that idea. It just means that Firefox will fade away and not be the focus. That way I can concentrate on browsing the intertubes. (OS X’s toolbar has absolutely not colour at all.)

The privacy prefpane on XP and Vista is really quite confusing and needs to be changed.

The Bookmarks icon on XP looks really really ugly. (Vista is just okay.) The purple seems to not fit into the system. Where else is there purple icons on WinXP? Also, I think I’d like a bit of perspective like the Linux Bookmark icon.

Lastly, whatever happened to the black-glass styling of the Vista toolbar? (like in the Places Mockup). Please, please make the toolbar have this black-glass background. (And if the black doesn’t work, you could use light blue like in IE or dark blue like in Windows Mail or even green like in Windows Explorer.) Having a glass-themed toolbar background will go a long way to making Firefox feel native on Vista. The gray chrome is way too bland. Example: http://chrisjf.googlepages.com/vista_toolbars.jpg

Everything else is great! Keep up the great work!

Alex, thanks for replying to my previous post.
I find these new icons much more promising than the previous mockup; however, they’re still far from being perfect. I’ll try to be as specific as possible.
- The keyhole object on XP looks better now. The shape is far more accurate, although not pixel-perfect; with advanced graphic editors available today, they certainly could do a bit better.
- The back button on XP lost some of its “volume” and became more 2D-like, which looks strange compared to super-3D Vista button, which, in turn, looks over-saturated (the back arrow isn’t clearly visible on top of its blue gradient).
- Maybe a white arrow on the Back btn for XP should have a thin outline, because the background is 3D but the arrow isn’t following; it is neither a cut-off shape (no outline), nor an overprinted object (doesn’t follow the background’s gradient).
- The white arrow on the Back button for Vista still has very poor anti-aliasing. One can easily spot inaccurate anti-aliasing on the top-left part. Under 45 deg angle, this should (and can) be much more smooth.
- On the Back icon for Mac, all black arrows look a bit misplaced; although they might be placed exactly in the middle, the human’s eye still expects them to reside a pixel (or half-a-pixel) lower. The same applies to a small drop-down arrow that brings up the menu. I’ve prepared a mockup where all three of them are moved 1 pixel lower, see it here: http://shirshin.com/img/ff-mac-keyhole.png
Doesn’t this one look more natural to your eye?
- The Refresh button on xp ISN’T FRESH. It’s color looks dirty, especially surrounded by gray tones of the panel. It is well known that if we take the light-blue color and remove some saturation, we get on of the most depressing colors available.
See my green mockup here:
http://shirshin.com/img/ff-xp-refresh.png
This may not be the best idea, too, but at least it is fresh (refreshing?!)
- The Stop buttons on all platforms are INACCEPTABLE (sorry for caps). These are not Stop buttons, they’re Close buttons instead! What are they supposed to close?! The current page? When seen near “real” close buttons on nearby FF tabs, they could confuse even me, not to talk about the first-time user. Alex, please, consider this seriously, you cannot ship a browser to millions of people with an alien CLOSE button in the middle of their toolbar. Icons from the preview you posted previously are far better.

Other icons (not mentioned here) are relatively good and don’t need much work; it is strange that the main toolbar icons are so far the most incomplete part of the whole package.

I hope my comment isn’t too offending and/or boring. Thank you for your attention, keep up your excellent work!

Also: Manuel’s icon (comment #21) is FAR MORE appealing than the current version of XP keyhole. I agree with the other people who like this icon.

How about this for the small icons? I made three variations that I think will work very well.

http://i103.photobucket.com/albums/m124/mattcoz/firefox-small.png

I just copied the large forward icon because it is already the same height as the url bar and will match the identity box perfectly.

@51:
No way!
http://img292.imageshack.us/img292/5720/keyholefirefox3bl1.jpg
is too similar to http://admins.fi/~eagleeye/wlmail1.jpg

The windows back button really bugs me, it looks like it’s a perfect 45 degree angle/slope, and I can see the “steps” in the slope. It does not look very smooth.

Also I have trouble seeing the bottom of the back arrow in the Vista theme because it doesn’t contrast with the background there. Perhaps it need a black outline?

The Tango icons are beautiful. I have one question: what are the chances of the keyhole shape making its way to GNOME? It seems pretty inconsistent (and unfair) if the three other themes get it but GNOME users do not. Have the Tango people create a separate keyhole shape; morph the system’s back/forward icons into that shape, somehow; whatever… Personally, I don’t care how it’s done, as long as the option will exist. The keyhole is too beautiful to miss out on!

As for the stop glyph:
http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Stop.svg/500px-Stop.svg.png
And yeah, it should be read. Go should be green, too.

Thanks to the people who gave me feedback for my keyhole version

Let’s see if Faaborg read this…

It looks ok Manuel, but it’s way too similar to the IE6 back button. Actually, it’s almost exactly the same, just larger.

http://upload.wikimedia.org/wikipedia/en/e/e8/Internet_Explorer_6.png

Why is the slash the Popup blocked signs in the reverse side at 64 and 16px?

Also, the stop sign should be a stop sign (red octagon), not a delete or forbidden sign.

Why is Linux second class ‘citizen’? A few weeks ago you posted an article about the importance of recognizable graphic elements in some products (like the Coca Cola branding graphics, etc). It doesn’t make sense that Linux Firefox versions do not use the keyhole concept which i think is very cool. Do I want Firefox to look like Epiphany/Galeon/Konqueror? No. It really doesn’t make sense in terms of branding image.

Overall it’s very nice.
Manuel’s arrows for the XP back/forward buttons look much nicer than the current proposal.
If you must keep the current look, please consider thickening the arrow tails, like so: http://piurl.com/1Q-xp_back_fwd.

One last note, the Linux privacy prefpane icon is much easier to identify than the XP and Vista versions. The latter two are confusing.

I’m not a big fan of the Keyhole at all and will probably be using small icons as a result, however, the refresh and home buttons on XP look absolutely horrible. The whole theme just looks very… unprofessional. and doesn’t seem to really blend into much of anything. Maybe I’m missing something, but my few coworkers also running minefield all had the same “WTF moment” when first opening the application.

To all those people who said that the new “X” stop button would be confusing:

I originally thought that the stop should be a red octogon too, until I looked at how the other major browsers did it. Surprisingly, none of them use a red octogon.

http://img218.imageshack.us/img218/3010/stopiconva2.png

IE6, IE7 and Opera all use red X’s, with Safari using a black X. This means that a red X wouldn’t be confusing at all, since most of the other major browsers use it.

A blue X would be kind of awkward though, so I think the stop icon in vista should be red. I also agree with #43 about making the windows bookmark icons look more like books. IMO, they’re good at the moment, but I think adding a perspective view could make their function more recognizable. And like others have said, the privacy icon should look more like a door handle with a piece of paper hung on it.

The keyhole seems to be coming along nicely. Can’t wait for the rest of the icons to land!

Cato,
My arrow looks more native, just as the Windows Explorer one. That was the idea, wasn’t it? This little difference won’t change the uniqueness of Firefox, but it’ll make the browser look more native.

Now I like the green in THE XP forward and forward icons.

But give the Stop button a more serious look.

@#62:
That is one good looking arrow. The normal tail is a little bit too thin.

@#65:
You are saying that mimicking IE6 icons will not make the Fx3 UI less unique?
I don’t get it.

Firefox IS unique for it’s features, not for its theme. That’s why people uses custom themes in firefox, rather than other browser that have “better themes”.
Also, my version of the keyhole only copies the arrow. Neither the circle, nor the colour.
Let’s stop arguing and leave Faaborg look at our comments…

For those debating whether Stop should be octagonal, this is how Tango does it. It both looks like a stop sign and has the ‘X’ in the middle. Wouldn’t something like that be much less confusing?

Alex, the icons become better and better! I see you guys really listen to us “whiners” here - thanks for that! Still, there are several comments to your earlier posts that I think are justified and I would really like to hear your reply to those.

Anyhow, my top 3 list of things that are small but significant alterations are:

1. “The Arrowhead Inconsistency.” In all themes the arrowheads differ between back/fwd, go, refresh, retry download, etc.

2. “The Download Manager Button Confusion.” They all have the same color and the same silhouette and are actually quite indistinct.

3. “The Skinny Stop and Reload Buttons.” Of all the icons for XP/Vista in this icon set, there are only two that are skinny. In the latest icon set, they look great together. But in relation to the other buttons they look out of place!

Further, I still 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! Don’t you agree?

Keep up the good work!

@David: That’s pretty much exactly how the XP stop button looked in the previous version, and I really think it’s the best way. Just because other browsers use a red X doesn’t mean that Firefox should. If all the other browsers jumped off a bridge…

@Matt: You’re right. I had completely forgotten about Firefox’s current default Stop button. It seems it had been using a good clear visual metaphor since 0.9. I hope 3.0 won’t ruin that record.

Wow, these are a huge improvement over FF2. I’ll be so stoked once Firefox 3 is released and people see the new look for the browser.

I recently installed Minefield and uninstalled it because I didnt like the icons set.

Well Beta 3 just rolled up automatically and I see it the same icon set. However I’m running Vista and keyhole back/forward Icon is green and looks pixelated. Why isn’t mine blue?

From

@Adi: Did you even read Alex’s post? He explained how the Vista icons aren’t enabled yet.

I agree with previous comments that color could be used more effectively to help distinguish different functions, but I’d also like to mention that for accessibility reasons color also shouldn’t be the *only* distinction, as it is with the passport icons.

The actual arrows from the new mac icons should be put on the vista/glass buttons, that would be a winning combination. The current arrows on there are ugly and nonstandard. Same goes for the XP ones.

A few things:
1. Too much vertical space on the back button. Not cool.
2. The refresh looks anorexic next to the rather detailed keyhole still. It should be made thicker, or the keywhole slimmed down.
3. Are we *really* sure about the keyhole concept?

I really don’t like how lifeless the XP buttons are. The Vista combined back/forward button looks stunning, but the XP variant looks much flatter.

Matts’s suggestion in comment 53 is awesome. Please take it. A total disparity between the look of large and small icons surely can’t be as desirable as such an elegant-looking solution.

The “Go” glyphs look kinda lifeless and rounded. Gtk “Go” glyph is better in my opinion. Same for the “star” glyph.

Privacy prefpane icon still looks like it’s wearing a helmet. Please abort that design and use something better.

Other than that, it’s looking good. I’ve heard very, very positive feedback from some of my Linux-using friends about switching to GTK icons.

One key nit that’s existed for me ever since 2.0: The tabs on Windows look horrible. Please restore the use of native tabs!

I like bp’s proposal for Vista back/forward buttons much better, your version is too sharp-looking. Stop button should be red, refresh should be green. Personally, I would prefer the stop button to have a rectangular shape found on consumer electronics devices, I would reserve the cross to mark deletion or serious warnings. The difference between the new window and new tab buttons is hard to see behind that great green plus.

Overall, I would focus on making the look more consistent. I would pick a simple basic color scheme - blue for neutral buttons, greens for “everything’s OK” and “go”, yellows for alerts and reds to mark stop and security or other serious warnings.

I have always thought that the Reload / Stop buttons should be integrated into only one. If the page is loading, ofer the Stop button. If its loaded, just show reload.

This could be integrated also in the middle of the “keyhole back/forward form” desing:

( )

Also with current desing I don’t find easy to know how to open the back menu to choose goin back to three pages back. I see the “v” arrow at the right, but seems associated only with the forward button!!!

I think that for the refresh and stop buttons, vista should use the XP versions, as they look glossier, and also include the red, which I think that everyone agrees on, we need. I think the current vista glyphs look to flat, and that, strangely, the xp ones are glossier. Just seemed odd to me, as I thought it was supposed to fit in with the typical vista theme, which they don’t really.

I didn’t see anything for microformats there. I thought FF3 was going to support them - Am I wrong or are you going to use the standard icon?

I’m sorry. I’ve downloaded the new beta, and I think it looks *terrible*… The Keyhole back and forward don’t even look like the ones on IE7, so what’s the point of platform integration? The reload button looks too thin…

*Please*, keep the navigation bar on the XP version like the Firefox 2.0 one. The other new icons for XP look nice, though.

I agree with Byron’s post re: the stop icons. Can we PLEASE go (back?) to a red octagon for stop? All cultures with cars use that as a Stop sign. The Red X is used as a delete button in some common applications and I still hesitate to push it as a stop button.

I like the new stop icon, it matches the refresh icon and together gives the browser a “light” and “simple” feel. I
guess that is why they also moved the home button - simplicity, that is. I’m starting to like this a bit more now.

Personally, I hate them. I really don’t like the “keyhole” design of the back and forward buttons at all. All the identity icons all look pretty much the same, except for different colors, but I guess there isn’t a lot you could put in there. Although the identity thing is pretty much useless to the general public anyway, unless they’re visiting a particular site where it’s important, and even so, no one would know what any of that means.

The refresh icon is too skinny, a thicker line like before was much better. I liked having the octagon behind the stop button too, makes it less flimsy looking, and associates it with a stop sign, which was good.

The star icon is fine…same as google’s. I never really liked the jigsaw piece to represent addons… but maybe it’s a bit late too change now anyway.

I love bp’s proposal (comment #1), much better, the arrows are ugly.

This is the most UGLY HORRIFIC theme I have ever seen..
PLEASE NO!!!! NO!!!!
take this back to the people that designed it.. Its horrific terrible!
This looks somewhat like a steal from the old longhorn designs (the forward and back) that was ditched because it was stupid.. no please
We want something that looks clean simple and elegant NOT THIS!

Just downloaded FFb3 on vista and the stop and refresh buttons need to be changed! I Really, really don’t like them. Overall, though everything looks great! Especially dig the linux icons

@Cato:
That looks great. I wish they would consider something like that for Vista.

Anyway the new icons are better than those in FF3b2 but they are still not very good. A lot of people in the community obviously has more talent than the guys at iconfactory.

The Blue RSS Glyph for Vista has to go, RSS Icon is ‘Orange’ everywhere else when you open Livemarks in the sidebar, or in the Library. Orange has been the status-quo across all browsers and making it blue for Vista is just wrong. Its certainly not blue in IE7.

Fix the arrowheads. Manuel has a point. Look at Windows Explorer in both XP and Vista, then FIX THE ICONS!

Definitely an improvement. My only complaint is that the Vista stop button should really be red instead of blue.

Ugh. Don’t even bother trying to use the throbber to establish a brand identity. It’s a graphical control, and should fit in with the platform. Mac OS X in particular has a very strong visual identity.

Hey, why don’t you use Kempelton* back/forward arrow?

*This is the Thunderbird 2 theme

I’m sorry - I think they keyhole is just a bad idea to begin with. It looks all right by itself, but alongside everything else it’s out of place. Too big; too different in style (nothing else has a 90’s-style bezel, for instance, and I’m glad of that); won’t translate into small icon mode; too hard, apparently, to balance and integrate well. If the size were reduced a little - say, 24px instead of 32px high - it might be salvageable, but even then, I’d probably say scrap it. I’m sure Iconfactory could come up with something much more eye-pleasing without that design constraint. (The current pill shape on OS X is one example that looks far better; I’ll be sorry to see it go.) Making Firefox distinctive is one thing. Making it distinctively ugly is quite another. Please reconsider that particular design choice while there’s still time to come up with a better alternative.

Almost everything else looks good to me so far! Only, it’d be nice to have a plain ‘X’ on OS X’s Stop button again. Also, I’ll echo the calls for more varied color on Vista.

You guys are doing a great job. Thanks for sorting through and giving serious consideration to all the conflicting feedback we’ve been giving. ^_^

Just to offer an observation: Glyph icons are blue on the Aero glass surface, while icons are often colored on non-glass surfaces. I’m looking at Windows Photo Gallery. I wouldn’t mind more of the Fx3 glyph icons being colored. Since the Go button is on the address bar and not on the navigation bar (or “glass”), I really wouldn’t mind the Go button being green. It’s not a button you’d see on glass, anyhow.

I don’t know about the blue RSS glyph. I know the RSS icon is being promoted in all different colors other than orange, and maybe it’d work if it were a button on the navigation bar (for the reasons above); but on the address bar, I hope you’re keeping the orange RSS icon for feeds, much like Fx2. Again, the address bar isn’t really a “glass” surface, so I see no desirable reason for it to be blue.

I’m using a custom userstyle to see the Vista icons in Beta 3, and I can honestly say the theme looks good. It really takes some getting used to at first, and at first I thought it was ugly, but I admittedly grew into it. I could certainly get used to this. It’s looking cooler to me, now. (Though using the blue RSS glyph on the address bar is really, really ugly.)

Hope this helps.

I hate these new back, forward, and reload icons makes me want to uninstall firefox and install opera. Why is the firefox GUI regressing? The firefox GUI is looking more like IE7 (i.e. the worst GUI I have ever seen) than the firefox I know and love. The new GUI looks worse not better. Please give us an option to make firefox look like 2.0, it’s GUI is 10x better.

My comments for the Download Manager icons:
a) They are too small. Maybe a few more pixels would not take too much of the window but would allow for more distinguishable icons
b) As already said, they are all blue. How about red for stop, green for go, etc?
c) The Retry button is practically a mess: the arrow inside is too thin! The lines on the Stop button are thin as well.

The back arrow in the vista back button seems jagged along the edges.

Why not just use gtk-find for the search icon? It would look better and more integrated with gnome apps.

As a graphic designer, I am disappointed with the Windows icons; specifically the Vista integration. I would like to see a transparent toolbar similar to IE with an icon set more “Vista like”. I could provide a mockup if you are interested. I was really looking for something exciting on Firefox 3, and as it stands now, I think Firefox 2 looks nicer, even on Vista. Just my 2 cents…

I love the new coded features Firefox 3.

I really think the teletubbies XP integration is just an insult to Firefox users! They don’t use XP because it has such a “superb” interface style and are just happy with what is shipped along with the OS, or they would never have switched to FF in the first place.

This just means that a Firefox-install under XP is getting worse by the minute. With the routine being: main install, extensions and their settings, plugins, search engines, dictionaries, bookmarks. Having to also change the theme is just what users were waiting for.

Very impressed with this write up, the work being done, and the beta 3 theme overall. A couple of improvements:

1. The back/forwards drop-down - Placed right of forwards suggests its only for forwards, and is less recognizable as an arrow. The history icon between the two is far more intuitive and I hope this ends as the final design in Fx3. I also hope the area of no click to the left of the back button is removed.

2. New tab button - not overly recognizable, looks too much like a window. Also, with tabs being default, isn’t it about time this simplest function for this default behavior, gets a button in the default interface?

3. Search drop-down - I’d like to see Fx follow native visual design and icons for search. Currently the tiny drop-down icon on the engine itself is not overly native, recognizable or intuitive.

A proper drop-down icon to the right of the search bar (where per location bar users expect drop-down buttons) would be far more native and intuitive. Not only would this be more consistent with Os’s, and other browsers such as Opera and IE7, it opens up other development area’s. These include find in page more easily accessible via the drop-down as an all round search drop-down, per other browsers and programs. Not to mention find more engines as an more accessible option in the drop-down.

@Matt

Your “jumping off a bridge” analogy in #72 doesn’t apply unless the action results in a negative outcome. It would only work if IE, Opera, and Safari confused users and became less successful once they started using an X stop button, which wasn’t the case.

Don’t get me wrong. I think that the red octagon is a clearer symbol for stop than the X and I would be perfectly fine if the stop button was kept as an octagon. However, the X has been around for years in other browsers. The vast majority of people have already gotten used to the idea of the stop button as an X next to or combined with the refresh button; from my experience, it seems like most users automatically think of the X as “stop” and not “close” or “delete” when it is near the refresh icon. This means that the difference in productivity between an X stop and an octagonal stop is negligible because users now associate both symbols with stop. An argument about the X being confusing would essentially be saying that every major browser outside of firefox has had a confusing stop button for years.

One good thing about the X is that its simple look fits better with the refresh icon. Refresh is basically 1 or 2 arrows in a circular motion and it is odd for the stop button to look “filled in” when its function is related to the refresh button.

I just think people will eventually get used to the X if it ends up in the final ff3 theme.

What’s everyone’s problem with version numbers? Why can’t we increment normally? Yes, changing the whole number is for major revisions, but most of these authors aren’t numbering anything properly. Where are versions 2.1, 2.2, and so on??? Why have all these other trailing numbers that they never plan to use? 2.1 should be the next release. Save 3.0 for the greatly sought after 64-bit version.

I believe the numbering scheme is going to be changed to 3.0.X.

http://developer.mozilla.org/devnews/index.php/2007/12/11/ensuring-compatibility-of-add-ons-and-themes-for-firefox-3/

One thing is certain: there are far too many changes in the next iteration of firefox to call it 2.1.

Hi Alex,

Great work on the firefox 3.0 gui. Is it possible to make it more intuitive so that when the back or forward button is pressed for more than 3 sec, that it would show the history list?

To be honest I don’t like the firefox 3 beta 3 design. I use XP, and the icons for it don’t seem up to scratch, to be honest. I understand that the back/forward buttons have to be different colours to keep with the design of the OS’s, but the other icons for XP all seem very IE6/5.5 and dont seem as detailed as the other sets.. at the moment my favourite icons are the Linux set.

I was skeptical of the new “X” stop button, but then I downloaded the latest nightly. It actually looks they nice on the XP theme and goes very well with the reload button.
I would have to disagree with the people saying that the reload button and stop button should have more “substance”. These two buttons are not as important as the back and forward button and thus should blend in a little more with the background instead of having more visual weight.
I would, however, concur with others saying that the vista stop button should be red.
Also, is the vista theme’s background going to be Aero glass, Black glass (like Windows Media Player), or will it keep that ugly blue-purple background?

I agree with 112. The refinements to the toolbar buttons in the latest nightly are a big improvement. I would also note that the slight tilt to the Bookmarks button is a welcome update.

Now I’m just looking forward to seeing the extended etching on the keyhole.

The home button seems to sit about 4 pixels too low on the toolbar due to the icon having a low “center of visual mass” it might help it blend into the other items of the toolbar better if it was raised a little bit.

Typo: finial should be final

I would like to speak on the Mac OS X icons. I while I applaud the way that you are attempting to make FF3 have a more native look and feel, I’m disturbed by the fact that you’re disregarding Apples Human Interface guidelines.

Please read http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIcons/chapter_15_section_9.html# before FF3 is released, and change FF so that it follows those guidelines. The icons you had for beta 2 complied with them, they used the rectangular style controls. However, now you’re making up your own rounded controls that clearly do not exist elsewhere in Mac OS X. If you would like to use rounded controls then use the capsule-style buttons like Mail has.

One of the great advantages of Mac OS X is that all of the applications across the OS look similar. Please don’t violate this consistency with icons that do not stay within the bounds of Apple’s guidelines!

I don’t use Mac OS X and I don’t know much about Apple’s Human Interface Guidelines, but I would like to point out that the circular back button on the keyhole (I’m assuming you’re talking about the keyhole) is similar to the play button on iTunes.

I, too, think that the refresh glyph (and, to a lesser extent, the stop glyph) is too thin. To me it is so thin that it’s difficult to see any of the shading and so it looks completely monochromatic and flat (like it was drawn with the brush on mspaint). I really hope that the icon folks take another pass at it before we ship because it’s almost always visible and I think it makes the entire app look less sophisticated.

Excellent work on the rest!

#106: Thank you! I’m not the only one who thinks the ‘new tab’ button should be shown by default on the default toolbar. Seriously, this is a must! And as I ranted before (in a previous post) the Windows XP/Vista, and OS X tab buttons are not easily recognizable. The Linux ‘new tab’ button is excellent. The other OS’s should be similar to the shape of the Linux ‘new tab’ button.

#116: I agree with you. Firefox should not violate Apple’s Human Interface Guidelines. That said, I think Firefox’s buttons should be like the capsule-style buttons in Mail. To me, that would look much better and differentiate Firefox from Safari!
I’m actually quite surprised that nobody has mentioned this until now. Thanks Stephen for this great idea!

I think that using *only* GTK/Tango icons on the Linux version is a bit of a mistake. The “keyhole” motif you’ve introduced is, as you’ve said, an element meant to differentiate Firefox from other browsers, and I don’t see why this wouldn’t be extended to Linux as well. Using Tango style icons for everything else is great, but just sticking with a standard GTK button for the back and forward buttons doesn’t seem right. It seems like it would be better to create a Tango-styled keyhole icon to be used on Linux builds as well.

I vote for icons by yellowicon.com.

Or, just revert to the FF 2 icons (and tabs).

for gtk:
document-open-recent instead of the non-native history icon?
gtk-find for search
some native icon for bookmarks, maybe the same as epiphany uses, or the places icon (this is just a folder though)

PLEASE: any icon that you are not going to use a native icon, then just put your own icon into /usr/share/icons with you own naming convention (if you must), but then it would still be able to be themeable by global themes, meaning people can easily change it, and theme designers can easily make globally consistent themes for gnome.

default should clearly be native, if someone wants cool and wacky interface elements for the desktop, they are free to theme, but by default it should just be normal (thats the meaining of default), it should be what you expect, which is for it to just fit in.

Hey, I just downloaded the latest nightly build. I like the new arrows, but I have a few qualms:

1.) i think back arrow needs to be thicker and more centered, to match with the forward arrow.

2.) Why is there still no red stop button. Everything just looks too blue, and pretty much everyone agrees the stop arrow should be red.

3.) I prefer the old RSS symbol.

4.) The go button looks a bit wonky, if you know what I mean.

5.) I don’t think this is anything to do with you, but just in case; when are we going to get an update on personas? I really like it, but i hate how it makes the buttons revert to classic look.

Other than that, I love it so far! Keep up the good work.

What on earth are you doing with Firefox 3!?

I dare _anyone_ to go to http://iconfactory.com and tell me the FF3 icons are made by the same company. Maybe all the staff got the boot and someone told the work-experience lad the sole design app would be Microsoft Paint.

The XP/Vista themes are pale, oversimplified and pretty much mediocre across the board.

We need vibrant photo-realistic icons that are a product of both elegance and 21st century usability.

If Mozilla wishes to continue being a flagship Open Source company, maybe they should listen to user feedback instead of blindly diving into the FF3 RC.

I wish people would stop bashing Icon Factory over draft icons. There will probably be a couple more revisions at least. Also, use constructive criticism instead of just saying that it sucks. By the way, for anyone who doesn’t know, the icons in the latest nightlies have been updated so they’re a little different from the mockup that Alex put up.

I would definitely redo the back and forward icons (and don’t make them look like , those are, no offense, awful), add color to the Vista icons (blue is overused), and make the xp star icon same as Vista’s. I like the Linux and Mac icons (although I prefer Camino’s icons on Mac), but the Windows icons, at least the navigation and star icons, are less than satisfactory…

The new XP/Vista Windows icons look really nice.

I think that the new ‘keyhole’ identity concept should also be, somehow, maintained on the ’small’ icons.

Great work!

These new icons look quite nice in regular size but in “Use Small Icon” size they look much worse than what we had before. I’m observing this using:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b5pre) Gecko/2008030506 Minefield/3.0b5pre

I hope some more work will go into the small icons as I like the size but the refresh, forward, and backward buttons are very odd.

I’d like to say, I’d also love it if the GNOME version got the keyhole. From the viewpoint of a user who knows nothing about what makes good design, the keyhole is pretty. I’m all for consistency across applications, but I think something like the keyhole is an exception.