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.

These are some details that would help to provide better answers: Who did you test? What did you test for? How did you do the test? How did you interpret the results?
–
Michael LaiJun 9 '14 at 23:34

18

contrastrebellion.com ! No offense but even though (as a young individual…) I can see the difference, the variation in the colors hurt my eyes as they are rather subtile!
–
Pierre ArlaudJun 10 '14 at 8:55

21

FYI: The contrast ratio is 2.0, which completely fails WCAG 2.0. It might be better to group selected controls near others, and separate them with vertical lines too.
–
Ralph WiggumJun 10 '14 at 14:26

9

Up the contrast please (yes, I am 52, I know, but even for younger eyes your current contrast is not enough, especially if ability to use your interface starts tapering off at age 25 like you say). Did you know that MS is already coming back from a totally monochrome interface? VS2013 (came out end of last year) fortunately has a bit more color than VS2012 and is a lot better because of it.
–
Marjan VenemaJun 10 '14 at 19:01

2

To everyone commenting on how monochrome themes are unusable: I tend to agree, but as a junior software/UX designer I don't have a lot of say in the matter. I hope to reintroduce color once I have hard evidence of frustration from our beta testers, but until then I must make the best interface I can given current constraints.
–
hash_collisionJun 11 '14 at 18:33

9 Answers
9

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.

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.

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.

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.

Thanks for the in-depth answer. The icons are currently 16x16. We would like to transition to 24x24 eventually, but the change will take quite some time to implement.
–
hash_collisionJun 9 '14 at 16:25

This. Whether you do it by more contrast in backgrounds, borders or the actual colors of the images, it needs more contrast. Try this current design on a laptop, on an odd angle, with the bar at the top of your screen. Everything will be -invisible-.
–
Dirk v BJun 10 '14 at 0:03

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!

We are allowing users to revert to the old icons if they like. However, I think we can find a happy medium between the dated old theme (trust me, it's not great), and what we currently have.
–
hash_collisionJun 9 '14 at 19:53

2

That's a great idea, allowing people to go back. Why don't you set up analytics, leave it a while, and see how often people revert? I reckon you can still have nice minimal (dare I say it metro) style button with colour, but first see how many people revert back - might not be as many as you fear!
–
TJHJun 10 '14 at 8:29

1

@TJH That doesn't account for the people that drop the product and move on to another because it's too difficult to use. I would imagine, unless it's blatantly obvious how to switch back and forth, that they won't go look for it. And given the metro style they're headed towards I doubt they'll go the obvious route.
–
agweberJun 10 '14 at 17:13

1

And MS is already coming back from a totally monochrome interface. VS2013 fortunately has a bit more color than VS2012 and is a lot better because of it.
–
Marjan VenemaJun 10 '14 at 18:59

@agweber - yes, agree it's not ideal, but too few people are dogmatic about their improvements. Being more humble and allowing people to revert is better than that, IMO. You just have to see it as temporary - almost like you're in BETA mode and people are testing for you. On www.trafficengland.com there is BETA mode which you voluntarily go in to, which is possibly too far the other way
–
TJHJun 10 '14 at 20:22

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.

I agree flat is not monochrome synonymous. And I would add between extremities often you find solution. What I mean is that too much skeomorphisme doesn't help with little icon as too much flat doesn't help in form, depth and state icon. Between this two currents there is the current "almost flat" that can help you I think
–
pierre lebaillyOct 1 '14 at 4:52

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

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?

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.

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

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.

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.

Always keep in mind that color alone should never distinguish one icon from another. Many people have some degree of color vision deficiency (colorblindness), with problems with red and green being the most common. It's amazing how often UX designers forget this.
–
Phil PerryJun 10 '14 at 17:23

You are 100% right Phil, thank you for bringing it up. I was not suggesting that colour alone should make the distinction, but rather that colour vs. grey is better than black vs. grey. And always test with simulated colour-blind settings in X (or however that is done in Windows).
–
dotancohenJun 10 '14 at 17:44

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.

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.