Color. Most humans can distinguish over 10 million different colors. And in the design of software and physical devices, the question of how to best use color comes up again and again.

For example, in the two example screenshots from a web application, can you tell which of the two options is selected?

position2

position1

This is an example of using only color as an indicator. And its a UX design anti-pattern.

When I encounter a situation like this, where color is the only indicator of meaning, I find this guideline useful to determine which option is selected:

  • Is one of the options more emphasized (e.g., saturated color, higher contrast, etc.) than the other? That option is probably selected.

For example, in the following screen shot from a music playing web site:

differentiating-with-color

The two buttons on the left indicate a like or dislike for the selected song. Using the guideline above, we can infer that the saturated “thumbs up” button is selected. In most cases this guideline works.

Here’s an interesting use of color in a GPS application for a smart phone from a major software vendor you may recognize:

muteblack3      allblue2

Each time I click any of these three buttons (labeled “MUTE”, “TRAFFIC”, and “SATELLITE”), they change color.

Assuming you’re not driving while you read this, now would be a good time to pull out your smart phone and start the stopwatch timer app. Once the seconds are counting up, I want you to return your focus to the two screenshots above and see how long it takes to figure out which of the two is actually muted.

Did you figure out which screenshot indicates a muted mapping app?

If you did, how long did it take you to reach that conclusion? And how certain are you that your conclusion is correct?

For me it took a few seconds to decipher the graphic language of this interface.

And the guideline above (highest emphasis usually indicates a selected control) is difficult to apply to this interface because there are two different emphasis techniques used. Saturation and contrast.

The blue icons are indeed saturated, but their overall perceived brightness is equivalent to a light gray:

perceived-brightness-of-google-blue

The contrast ratio of the blue icons to the white background (about 3:1) is significantly less than that of the black icons (21:1). The blue icons are more saturated, but the black icons offer more contrast. So it’s not immediately clear which graphic convention (black or light blue) indicates the corresponding control is selected.

After a few seconds of looking at this interface, my confidence in the correctness of my answer is based on the assumption that the SATELLITE button has been engaged long enough to have impacted the display (and the internet connection is actually able to deliver data). If either of those assumptions are incorrect, then my conclusions about this interface may also be incorrect. But based on what I see on my smart phone, since there isn’t any satellite data on the map, the satellite option must be off. The satellite button is black, so black must be off and blue must be on. That means the app state on the left (where the MUTE indicator is off) delivers sound, while the app state represented by the image on the right is quiet.

If it takes a user longer than 150 ms to figure out if an option is on or off, then there’s a problem with the interface. That’s way too long, especially in mission-critical applications such as driving, flying aircraft, or operating life sustaining equipment. In these scenarios we need instant (<40 ms) access to important information.

Here’s another highly visible set of controls from a major software & hardware vendor:

ios7

In the screenshot above, a subset of the buttons are engaged (ON), while another subset is off. Can you figure out which color indicates on or off?

It’s harder to tell in this example. The background color is light gray, and the contrast ratio between the whitish color & the gray background (1.73:1) is less than half of the contrast between the dark gray & the background (4.03:1). In other words, the dark gray color offers greater contrast than the white, so using the guideline presented at the start we must assume that two outside controls are engaged (on), while the three inside controls in white are off. Unfortunately this is not the case, and as a result, you can effectively argue that this interface is provably wrong.

The next major release of its smart phone OS changed this user interface to the following:

ios8

This is a huge improvement. Now the three selected controls in the middle are rendered with the highest emphasis, and the two disengaged controls at the ends are rendered with a lower emphasis. And even though the designers are still only using color as an indicator, within those constraints you could argue this updated interface is provably correct.

The next major release of the smart phone OS changed the user interface yet again:

ios10

The interface is getting better. Now we’re still using only color as an indicator, but now we’re communicating on two channels – contrast & saturation. You’ll learn all about channels & highlighting in the Science of Great UI.

Regardless, I still maintain that using only color as an indicator, will never be as good as using color + another emphasis technique (such as size, underline, border, etc.). For example, in a later revision to the mapping/GPS application shown above, clarifying text was added to the icons:

addedtextforclarity

Also notice the high-contrast of the black was modified for a lower contrast dark gray. This is an improvement, but it still has some problems.

sgui-case-studies-thumbnail-ws

 

By the way, if you purchase the Science of Great UI design course you’ll learn all about channels and using color to effectively highlight. You’ll also get access to my Science of Great UI Case Studies mini e-book, which contains my redesign to the smart phone Control Center shown above (so we are no longer using only color as an indicator), and you’ll also get to see my thoughts on the use of color in this user interface below:

win8startscreen