Color and Usability

 

From small electronic objects to large airports, color plays a powerful role in helping you use the device or navigate the space. Unfortunately, color is only beginning to gain recognition as a critical component in "usability." The following information presents a few of the many ways color can succeed or fail.


Think about the last time you were in a train station or airport. How easy was it to use it? How easy was it to find your way? If you didn't speak English (or the native language), were there recognizable symbols to guide you? Travelers need to get to some place -- to a gate, to a baggage claim area, to a taxi, to food and other necessities. The directional signs in most airport fail miserably, especially those in the USA. By contrast, Shiphol Airport in Amsterdam is extremely successful. Bright yellow signs capture the attention of even the most weary traveler. Icons communicate where languages fail. The image below demonstrates how highly visible the yellow sign is. Notice that it has to compete with wide expanses of window and the strong natural light surrounding it.

Shiphol Airport signs-Amsterdam

Detail below

Shiphol Airport signs detail

Color is the critical factor in the success of the visibility and readability of these signs.


 

The smaller the object, the more difficult it is to find the right way to use the device. Buttons, buttons everywhere. Which one for what?

 

electronic devices with buttons everywhere

A TV remote control, a radio, a car alarm and a food blender (minus the top). Each of these objects relies on a wide variety of button controls. Each device has a control panel. The issue is human interface design.

Let's take a closer look at the object at the far right. It's a food blender.

blender

( If you're not familiar with it, a blender is a machine which can chop onions, whip cream, grind bread into bread crumbs, make milkshakes and margaritas, and crush ice. At the base of the container are sharp blades which rotate at extremely fast speeds. Controlling the speed controls the consistency of the finished product.)

 

Let's take a closer look at the food blender "control panel" as seen in the photograph.

blender buttons

There are three red buttons and seven white buttons. Why are there three red buttons? Are there three critical functions? The three red buttons definitely stand out from the rest. This certainly indicates that there's something more important for these three buttons than the other buttons.

 

Before we take a n even closer look, pause for a moment and ask what's the most important thing that you need to control in this appliance. Imagine that you've filled the blender with peanuts. You want to chop them into small pieces for cookies. You don't want them to turn to powder and you don't want peanut butter. Also, consider the fact that a hand can fit inside the container. Frequently you remove the lid and add things to the mixture as the blades are rotating. Think about it.

OFF

You have to be able to turn the machine off for safety first of all and secondly for the function. You need to stop the machine when the appropriate amount of chopping,whipping or mixing has been achieved. Does this mean that this blender has three off buttons?

 

Let's zoom in and see what these red buttons are for.

zoom in on blender buttons

Apparently the red is used for three of the slower speeds and the off button. Confusing? How would you redesign this?

 


 

Bad money machines

Another "usability" example is the automatic credit card device used in many stores in the USA. If you're not familiar with it, here's some background. When you're at a cash register, typically you give your cash or credit card to the clerk for processing. Nowadays, if you want to pay by credit card, YOU have to enter it in a small machine at the cash register area. Unfortunately, there are many different machines in use and each one has different buttons and colors. Since there is no "standard" the customer has to adapt to different machines in different stores.

In the example below, first you must slide your car through the narrow opening at the far right, making sure the magnetic stripe is facing the right side. If you succeeded in sliding it the right way, the screen indicates the amount of purchase. If it's the correct amount, you must press the "YES" button. If there's an error (which doesn't happen very often) you press the "NO" button.

In the illustration below, the "NO" button is the red button on the far right. The "YES" button is the very dark blue button directly underneath it.

credit card machine

Time and time again, customers fail to find the "YES" button. All too often, the red button catches the eye and on reflex, they press "NO." Let's take a closer look at these colors. First of all, you can argue a case for using red for NO. Red is an excellent color for emergencies and it definitely symbolizes "stop." But in 99% of all transactions, a customer will want to indicate "YES." Dark muted colors don't grab your attention. There is usually quite a delay before this button is found and pressed. The entire "interface" of this machine needs improved color communication. Aside from that , varying the size and placement of the most important buttons would help a person use any version of these machines successfully.

 


What about a medium size ordinary object with no buttons to press?

 

Consider for a moment the importance of a trash receptacle. In some situations it should be highly visible to prevent littering. In other situations, such as a garden park, it shouldn't interfere with the natural landscape. The same considerations for usability apply. The examples below are from Amsterdam, The Netherlands.

 

trash cantrash can

Notice the well designed symbols which successfully communicate the intended usage. Not all trash cans are this sensitive to international communication. A case in point is the icon used for a trash can on computers. Metal trash cans with a lid are not used in every country in the world.

 

computer trash can

 

This points to another usability issue. In the world of computers, it's known as user-interface design. From the visual interface of the operating system to the software components and peripherals, colors and symbols help you find your way and get the job done. In the same way that color works in an international airport, color combined with shapes and symbols will mean the difference between successful computer-human interaction or confusion.

 



Jill Morton is the author of this "Color and Usability" article. For more information email
jmorton@colorcom.com

Color Consultation & Research | User Interface Design | Web Site Design |
Color Communication | Architectural Design | Color Voodoo Publications | Home

 Colorcom is registered trademark of J.L. Morton