How can I make monochrome icons work?

Question

My company has just implemented a monochrome icon theme in an attempt to transition to a more "modern" interface.

Feedback from the first round of user testing has been mixed:

• Almost everybody agrees that the theme looks great
• Individuals under 25 have little trouble manipulating the interface
• Older individuals have trouble telling whether icons are enabled, disabled, or selected
• Users report trouble locating items in the nav tree, since they can no longer use color to distinguish the icons

Most of our users are older individuals, and have been using the software for years. How can we maintain the striking visual effect of a monochrome theme, while making the interface easier to use? I am willing to reintroduce a limited amount of color.

Answer 1

1. Selected – Create an inverted selection state which would make this feature more prominent. Many ways to accomplish but as an example; Make the button background black with a white or light grey pencil icon.
2. Enabled – Increasing the contrast. Our eyes become less sensitive to light and see a narrower section of the colour spectrum as we age. Increasing the difference between the enabled and disabled greys will aid in differentiation.
3. Distinguish – You could also use many other mechanisms to differentiate these two states. For example; a subtle shadow below active states will help distinguish them from their disabled counterparts.
4. Size – The visual you attached may be downscaled, but either way, if a large portion of your demographic are older, you should consider creating icons that are larger. This will help older eyes to see the differences between the icons and ultimately aid in comprehension.

The answer is not a single change. I suspect a combination of adjustments will be needed to achieve your goal of improved comprehension.

Answer 2

contrast

Your icons are lacking discernible contrast--both between the icon and the background, as well as between the active icons and inactive icons.

Increase the contrast.

Answer 3

I hate to be a stickler for tradition but I think, in this case, it sounds like management's taste in UI has over-taken the user experience.

In UX terms there is nothing wrong with what you had, in fact it sounds lie it may have been better - given that everybody understood it. Colours also might help with your contrast ratios.

It might be worth re-approaching the design and rather than setting the spec as being to remove colours consider how the colours are used and see if there is a way to "modernise" without losing it. As for how you do that is up to you as a UI designer as well as a UX designer.

Familiarity plays a big part in UX, even if you don't like the way it forces your hand!

Hope it all works out! :)

Answer 4

Something to understand in regards to human eyesight and age - it tends to get worse with age because the lenses of the eyes get more rigid and less flexible with age.

Because of this, eye conditions like astigmatism (double vision, issues with focusing) are more common as people get older.

What this means for the user experience is that while younger people may enjoy nice small icons that are subtle, older people may be making themselves squint to try and force their not-so-flexible lenses to see the user interface in the same way as the young people do.

That said, here are some potential problem areas:

SIZE - icon sizes need to be increased

If your audience is an older crowd, please take size into greater consideration. This has to do with the whole squinting business I mentioned. You want your interface to be easy on the eyes, not something that's making people lean forward and go, "Wait, what's what?"

A larger interface with bigger icons will also help address the whole, "I can't find anything on the navigation tree!" problem as well.

COLOR CONTRAST AND PATTERNS - contrast needs to be increased and patterning also needs to be consistent

Compare your selected pencil tool icon to the folder icon and the house icon or any other icon that has a darker fill color.

Notice how they are very similar in terms of color? Also, notice the subtlety of the color difference between enabled and disabled (I assume the clipboard is disabled)/very lightly colored icons (the ones towards the right half).

This is confusing because even though the pencil tool is selected with a darker square color-filled box, it is still sharing a very similar color to other non-selected icons like the house icon and folder icon. Similarly, the subtlety of the color difference between enabled and disabled is too subtle.

Additionally, you have a collection of icons whose coloring patterning/schemes/styles aren't all uniform (which isn't necessarily a bad thing or something you can address, but I am just saying this factually) as some are outline-only... like the i-icon and some are filled in with the darker color like the folder and house and camera icons.

Because of the lack of uniformity in coloring -scheme/style- (some filled in some outlined), it adds a sense of natural variation to the user interface which potentially introduces a place for confusion to find root. Because if someone is looking for a selected icon and they are looking for a filled icon... they could - at first glance - see something like the folder icon and think it's the one selected when it isn't because visually, there ARE already 'filled' icons.

For these reasons, I feel that increasing the color contrast and - if possible - improving on keeping the same pattern/scheme/style in coloring the icons (all outline-only or all fill-only or a combination of both, or, if you want to keep the variation, make sure there is enough variation between the non-selected icons and selected icons) would be helpful.

A specific way to perhaps highlight the fact that the selected icon is selected is to make its background fill color for the square be a unique color to the interface. Additionally, add a 1px border using a slightly darker (and again unique) version of the fill color. Something like this would make the selected icon specifically stick out more but not like a sore thumb.

To sum this section up, better contrast in colors (in terms of individual icons and in terms of interface-wide icons) and better uniformity across icons of similar states (interface-wide icons, icons re: selected, disabled, etc) will help to make the visual experience easier on the eyes. This in turn will also help improve the ease of which people can find the icons they need.

Answer 5

The current trend is not monochrome, but flat design. You can still use colors, taking the most prominent color it had previously for each icon should help the users accustomed to the old design.

Answer 6

I think there are some design questions/considerations that still need to be decided before you can make the decision, namely:

1. Are you trying to cater for older or younger users? What is the current distribution of user age and what is the trend? Does it make sense to design for them exclusively, or allow some degree of customization in the software?
2. Is the grey background designed as a neutral colour or to avoid certain colour clashes with the rest of the user interface? Grey is usually used for disabled states, so you probably shouldn't make the enabled state too similar otherwise there won't be enough contrast.
3. Is it not possible to introduce other visual elements that will help divide the navigation up into logical sections (e.g. vertical strips like MS Office ribbon bars).
4. Rather than relying on icons alone, are there tooltips or labels that allow people to verify what icon they are pressing before they do so, especially if it is an important function that changes the state of the data?

I think if you can answer these questions and look at how the user testing is conducted, you should find the answer to the question.

Answer 7

I think that a bichrome colour scheme might work better than monochrome in this case.

All selected icons could be a single color, i.e. green, and all unselected icons could be grey. Just be careful to use a colour which is not easily confused with grey in low-contrast situations such as suboptimal LCD viewing angle. Blue would be an example of a colour with such a problem.

Answer 8

When icons are monochrome, the outline is the most improtant thing for a user to distinguish between them. You need to improve the contrast. I would suggest 2 things to do this while still keeping management happy:

• Remove the grey background on the toolbar. Grey on grey is never a good combination. You can make the background white without violating your instruction to keep the UI monochrome, and give it a grey border to ensure that it still stands out as a toolbar box.

• With a white background, you can then use the paler shade of grey (previously used for the background) for the disabled icons.

Answer 9

Whilst there are some good theoretical answers already, I think there is a practical solution to your problem.

The biggest problem you've cited is contrast. Your older users can't distinguish between selected and disabled icons. Rather than trying to make your disabled icons look less prominent than they already do as grey on grey. You need to make your enabled icons stand out more clearly on top of them.

You can do this without compromising your colour-scheme with a hard-edged black outline.

The example above is a bit crap, since all I have access to is mspaint at the moment, but you can see how adding an outline makes it clear that this icon is in a different state to the others.