full-color icons vs. greyed-out icons in menus

Question

Icons in menus are often full-color. Even though the page an icon/menu item controls is not active, the icon still appears in its normal hues. To distinguish the icon which is active, a designer will often change he background-color surrounding the icon. As examples, consider the Google Chrome developer toolbar...

But another set of techniques can be employed. One option is to have a washed out version of the icons which are not active, so the Chrome Developer toolbar would become:

Or consider the WordPress Admin dashboard screen, where only the active icon has color.

My question(s):

• what option do you find preferable?
• Is it too distracting to have all your menu icons be full-color, even when they're not active?
• Should this (possible) level of distraction be something you have to weigh when considering the other elements of the page that are more important?
• Have there been usability studies in this area?

If your reaction is that greyed out-icons indicate "disabled", then a follow-up question would be: if all icons are in a greyed-out version (ala Google Analytics), do you find that preferable to full color icons?

Answer 1

Interesting question and a couple points:

1. sometimes greyed out is used from a security/permissions point-of-view to mean - "can't touch this"
2. in your primary example there is still a "depression" and demarcation of active

I personally do not have a strong preference, but my inclination is to show a different size/marking to show active rather than graying out non-active.

Answer 2

I did a really small study on this last year, nothing too solid. I gave two versions of the same screenshots to users, one with coloured icons and one with greyed-out ones (a database management app it was). I asked 200 of them which one they preferred and why.

• 80% of the users preferred the coloured version, the general feeling being that they provide a visual cue which helps find actions.
• 20% preferred greyed out, and they said the interface was more readable this way (icon labels etc).

So I came up with a personal rule that system menus should have greyed-out icons and everything else coloured ones, but that's my rule of thumb. I guess it depends on the application.

Answer 3

Greywashed icons can be clearly distinct from disabled icons (for example: in available contrast, with full contrast meaning enabled, or disabled icons adopting a raised/embedded look like the font does.)

There are a few things that are to be considered. For one thing: the items displayed in both the wordpress interface and the google one, are not buttons to represent actions. They more represent views / screens. That's what makes it necessary to distinguish between active and non-active in the first place (buttons representing actions only have to respond to clicking, but after the click is registered the button 'bounces back' to its original depressed state.)

Also, there usually are more views than actions, which means that colour may get crowding more easily. While I don't have studies to back up my claim, I feel more colour is needed when the icons are smaller (to compensate for less distinction in shape), and low frequency users benefit more from bright distinct colours spotted in a glance, while advanced users are more used to the position of buttons (and text) as a way of deciphering the interface. Those more advanced users benefit from less colour, because it makes the interface calmer, and also allows colour to help indicate other things on the page (like the color coding of source code, or colorifying the network-icon when an error occurs.)

I think using greyscale icons can be used fine without loss of meaning if you do not actually grey them out, but leave contrast reasonably high. (Actually, in our application small brightly coloured icons are used as quick buttons to a few fast and frequently used tools, and the details page uses a tabbed interface with greyscale icons + text for all non-active pages.)

Answer 4

Comparing your two screenshots, it is much, much easier to recognise what menu item is currently being viewed when it's the only one in full colour. Additionally, the other non-active menu items don't appear washed out enough for me to form the conclusion that they are actually disabled. What I mean to say is that this effect can be further emphasised beyond any reasonable doubt.

One other thing to consider is that even if it an menu item appears to be disabled due to their visual appearance, it is not uncommon for the user to verify this by interacting with the items when they're in the process of exploring the interface. That is, they will learn that the items are actually enabled. So, the short term immediate gain in explicitly informing the user that each item is enabled by using colour for all is not worth the long term gain from it being easier to always identify where you currently are.

Answer 5

When using colour icons, gray scale icons, however washed out, have usually indicated disabled icons. I personally would have assumed they were disabled before trying to click them. It's a common element in UIs in both Windows and Mac OS X (and probably Linux too).

The depressed button background in the top screenshot is more than enough to indicate the current active screen.

Answer 6

I have to agree with the consensus that greyed out icons indicate locked or unreachable functions. @Ben Durnell makes a good point that it works on Wordpress because of the blue text that indicates a hyperlink.

However, I definitely find full colour icons distracting and believe that colour is one of the strongest ways to focus attention on something. As it's used in the Google example, the colours seem overwhelming. I think that the colour choices of the icons should definitely be considered and weighed against elements on the page.

Personally, I would experiment with something in the middle. Use colour on all icons but restrict the colour palette and try "washing out" the colours of inactive icons by decreasing their opacity.