398480 - Preferences icons need love

Status: RESOLVED WORKSFORME

(Firefox :: Settings UI, defect)

Description

[Dão Gottwald [:dao]]

The icon for Applications introduced by bug 395141 is only temporary, but the one for Tabs (which, I think, looks remarkably poor) is actually used in Firefox 2.

I'm going to propose some new icons here.

Alex, I know this will be inconsistent with <http://people.mozilla.com/~faaborg/files/granParadisoUI/icons/iconInventory.html>. So I'd like to hear what you think.

Comment 1

[Dão Gottwald [:dao]]

Attachment: winstripe Options.png

Comment 2

[Dão Gottwald [:dao]]

Attachment: winstripe Toolbar.png

only changed the "new tab" icon here so that it's consistent with preferences.

Comment 3

[Dão Gottwald [:dao]]

Attachment: winstripe Toolbar-small.png

Comment 4

[Dão Gottwald [:dao]]

Attachment: pinstripe Options.png

Comment 5

[Dão Gottwald [:dao]]

I avoided creating a new "new tab" icon for pinstripe, as I think the authors for the new OS X theme should do that.

Comment 6

[Dão Gottwald [:dao]]

Note that when the icon for the Applications prefpane is changed, this one needs to be updated as well:

http://mxr.mozilla.org/seamonkey/source/browser/themes/winstripe/browser/preferences/application.png

Comment 7

[Dão Gottwald [:dao]]

Attachment: screenshot (winstripe)

Comment 8

[Colin Barrett [:cbarrett]]

On Mac, could we adopt a metaphor similar to the standard "General" icon? (it's a lightswitch). Adium uses something similar, but we put our application logo on it. Feel free to take a look at Adium's other prefs icons for inspiration.

I don't know if this is the right bug, but can we get rid of the rollovers, at least on Mac? That's just not the way toolbar buttons work on Mac. I know it's a huge can of worms, but I hear complaints about it from other mac users all the time.

Comment 9

[Dão Gottwald [:dao]]

Attachment: winstripe application.png

Comment 10

[Dão Gottwald [:dao]]

Attachment: pinstripe application.png

Comment 11

[Dão Gottwald [:dao]]

(In reply to comment #8)
I don't have a Mac, so I can't really take a look at Adium. But anyway, while I could imagine that the winstripe icons won't change much, I expect most if not all icons to be created from scratch for the Mac theme.

With regards to the rollovers, please file a new bug and make it block 397723.

Comment 12

[Wayne Woods]

I can post some Adium screenshots if you like. The Mac icons look nice, though the "tabs" one implies that the tabs are going to hang from the toolbar in the new theme, which is a discussion not yet over ;)

But I suspect the Mac theme enthusiasts are probably going to want to design new Mac icons, so it might not be worth your while changing them. There'll be huge differences of opinion between those who want it to look just like Safari, those who want it to look entirely different, and those that think that 3 shades of grey lighter makes it different, and you may not want to be in the middle of it ;)

Comment 13

[Dão Gottwald [:dao]]

exactly :)

Feel free to post screenshots, but I don't think I'll invest much more time on Mac icons.

Comment 14

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

I like the tabs icon, it looks a lot more like tabs than the current one.  I wouldn't fade the bottom to remain consistent with the other icons, and the blurred text might look better as a flat color.  Obviously we need to adjust the icon to match the theme.

I think the applications pref pane icon should play off of the generic icon for apps on each platform.  On Mac we are using the pencil-paintbrush-ruler A, and on Winows were are probably going to make the icon literally look like multiple application windows.  The advantage of this is matching the user's mental model of what an application is.  The gear icon is commonly used to represent tinkering with underlying preferences, and in situations where there isn't a clear metaphor (like changing the number of MB you want allocated to cache, or if you want to use TLS 1.0), so it seems much better suited for the advanced tab.  Also, we want to create cross version consistency issues.

I'm all for using a light switch for the main pref pane on mac.

Comment 15

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

Don't worry about creating rough icons to try out ideas, even wireframes is fine.

Comment 16

[Dão Gottwald [:dao]]

(In reply to comment #14)
> I like the tabs icon, it looks a lot more like tabs than the current one.  I
> wouldn't fade the bottom to remain consistent with the other icons, and the
> blurred text might look better as a flat color.

I shared your concern about fading, but eventually I don't find it inconsistent or unpleasant. All the icons have different shapes after all. The reload icon fades out, too.
The reason why I did the fading respectively the problem with not fading the bottom is that it would be a full window then, which would weaken the symbolic effect. Currently there's pretty much no clear object in that icon, except the two tabs.

> I think the applications pref pane icon should play off of the generic icon for
> apps on each platform.  On Mac we are using the pencil-paintbrush-ruler A, and
> on Winows were are probably going to make the icon literally look like multiple
> application windows.  The advantage of this is matching the user's mental model
> of what an application is.  The gear icon is commonly used to represent
> tinkering with underlying preferences, and in situations where there isn't a
> clear metaphor (like changing the number of MB you want allocated to cache, or
> if you want to use TLS 1.0), so it seems much better suited for the advanced
> tab.  Also, we want to create cross version consistency issues.

One reason why I don't like "multiple windows" idea is that it could look _too much_ like applications (and "Applications" might not be an ideal label after all; I guess we just don't have a better one). As in, full-blown stand-alone applications. I rather think the point of that prefpane is to make Firefox work together (external app) or integrate (plugin) with different applications, which is why I chose multiple gears (a subtle difference from one gear). Interestingly, and only as a side note: After I had created that icon, I realized that the GNOME icon for executables consists of two gears.

I've never really grasped the gear for the advanced tab. It's an unclear metaphor, as you say. I thought this could be the opportunity to change that.

(The metaphor of the proposed Mac icon is opaque to me, but I've never been a mac user.)

Comment 17

[Dão Gottwald [:dao]]

Attachment: winstripe Options.png ("Tabs" unfaded and without blurred window content)

Comment 18

[Dão Gottwald [:dao]]

Comment on attachment 283475 [details]
screenshot (winstripe)

So, looking at the New Tab button and the prefpane icons, I like this more than the Win XP icons at <http://people.mozilla.com/~faaborg/files/20071207-iconsM2/iconsM2i2.png_large.png>. But then I created this.

Comment 19

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

We are going to have the Iconfactory redesign all of the prefpane icons to match the objects used in the other two platforms.  There shouldn't be any window shapes in the objects icon category.

Comment 20

[Dão Gottwald [:dao]]

The next point is that I don't find the XP and Vista objects particularly good looking, which unfortunately isn't specific to the prefpane icons.

Comment 21

[Dão Gottwald [:dao]]

Comment on attachment 283464 [details]
winstripe Options.png

over to Alex, who's responsible for this stuff

Comment 22

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

To maintain a consistent look, the Iconfactory will be producing all icons for winstripe.  We are going to instruct them to match a lot of metaphors being used here, and the content icon will actually look like content (as opposed to a globe) which the Linux designers pointed out.

Comment 23

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

Comment on attachment 283464 [details]
winstripe Options.png

see comment #22

Comment 24

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

Comment on attachment 283466 [details]
winstripe Toolbar.png

see comment #22

Comment 25

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

Comment on attachment 283467 [details]
winstripe Toolbar-small.png

see comment #22

Comment 26

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

Comment on attachment 283476 [details]
winstripe application.png

see comment #22

Comment 27

[Michael Newton]

This is the only bug I could find for prefs icons, let me know if there's something else more appropriate.

The tops of the icons need a little more space to fade out, maybe like another 5px. The top edge of the icon is visible (or my mind imagines it to be so.) Looking at the prefs window in Safari, the icons seem to blend in a lot more.

Comment 28

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

This bug was filed prior to a visual refresh on all platforms, do people think it is still valid?

Comment 29

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

Resolved since we updated all of the icons in the last visual refresh, and will update all of them again at some point.