Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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...

Chrome full color 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:

Chrome greyed-out toolbar

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

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?

share|improve this question
1  
It looks like all non-selected items are disabled. –  rightfold Jul 10 '11 at 15:12
    
I've noticed Express Blend seems to use color as a way of showing the selected tool in the tool bar. I thought it was a pretty slick way of emphasizing the selected tool and did not bring to mind whether it was enabled or not, perhaps because of the metro style icons that normally lack multiple colors, shades, or gradients. –  jpierson Dec 27 '12 at 18:49
add comment

6 Answers

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.

share|improve this answer
4  
This is my same thoughts. I view grayed out icons as disabled –  jonshariat May 21 '11 at 17:40
    
@jonshariat - did you view the icons in the sidebar menu of the Wordpress example as being disabled? codex.wordpress.org/images/3/30/dashboard.png –  mg1075 May 21 '11 at 23:41
1  
@mg1075 Yes, and I made 2 observations. 1. They are accompanied by text and 2. They are very small. If an icon is alone and grey than it is interpreted as disabled but if its part of a monocromatic UI like wordpress (everything is grey) than it works. –  jonshariat May 22 '11 at 4:33
1  
@mg1075 The Wordpress menu items are a bit more obviously clickable because they are accompanied by blue links, whereas in your example everything is grayed out. –  Ben Durnell May 23 '11 at 2:36
    
I like the idea of using relative size to indicate selection. For those still insisting on using raster images for icons though it can be a pain to implement though. –  jpierson Dec 27 '12 at 18:47
add comment

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.)

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
Glad to hear people actually do some research before making decisions! Any chance you published these findings anywhere that you can link to (blog etc?) –  JonW May 24 '13 at 9:56
1  
Not yet, but now that you mentioned it, I might do just that! Will come back later this weekend to edit/update with link. :) –  ekapros May 24 '13 at 10:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.