At EmSense, one of our advisors, and a great mentor, has been Bud Tribble from Apple. The coffee sessions we have had with Bud in the Apple cafeteria have taught me some of the most important design principles. As we rolled out the EmSense in-home panel, our discussions focused on how to create the simplest and most intuitive interfaces for new users.
The first user experience design lesson he focused on was, specifically in this order:
- Location
- Shape
- Color ("And try not to use it at all.")
AND: Once a location, shape or color has been attached to a specific definition, it should never be used to mean anything else.
Think about how hard it was to memorize "I before E, except after C" in school. The design of software creates a language the users memorize. Every exception to what people know is a new rule they have to remember.
To create clean, simple and easy to use software, we have to have trust from the user. Making sure not to create exceptions in their language goes a long way.
1) Location first.
For a human searching for something, location is the fastest search method. If users always know an object is in a specific location, they can hit the key or move the mouse there quickly and complete a task, without searching. Hunting for shape and color across the screen or a product takes much longer.
 |
| In each operating system, the close/minimize buttons are in a standard location, allowing people to quickly move their cursor to adjust the window. This rule should never be broken. Ok, Cancel and Accept buttons are the same. |
 |
| Even if they have a good reasons, when designers change the location of, or remove, key UI elements such as the close button on the dialog, they can confuse users and slow them down. In this case, the upper right window control buttons have been completely removed and replaced with one in the bottom right corner. The control is ambiguous as it is unclear if "Close Application" means "Save and Close", "Undo actions and Close" or just "Hide Dialog". |
 |
| In this design, the upper right close buttons have been completely replaced by "Step 1, Step 2, ...", making it not only confusing, but prone to errors if the user tries to quickly close the dialog. Even though this is a form that is part of a larger application, reusing the location for a different task creates an exception every user will have to memorize, probably through trial and error. |
2) Reuse shapes and icons.
Everyone who uses computers knows that the "X" on a button means Close, no matter the font, location, or color. If a box is around a set of components, it is a border holding them together.
Once a shape is used, it should always keep the same meaning. The converse is that there should never be two shapes which denote the same thing. If a border has square edges and is 2 pixels wide, buttons must have a clearly different look.
TAKEAWAY: When laying out an application, every shape in it should default to matching the operating system or corporate norms and, for custom elements, should match the definition the designer gives it across every instance. Once it has been used once, it is set in stone.
3) Color is only a hint.
There is no guarantee that your user will ever see the colors in an application in the way you mean them to.
- 10% of people are at least partially color blind.
- Colors mean different things in each country. In China, Red is good luck. In the US, it means stop. Here is an overview of the meaning of colors in different cultures.
- Colors will show up differently on monitors, paper, phones, etc. Orange may look red by accident.
- Some interfaces are black and white.
- Corporate branding may inhibit specific important colors. Coke can not use blue because Pepsi owns blue.
- Operating systems or CSS may change your colors anyways.
- Colors just aren't needed to get across your message.
If you feel it is helpful as a hint, it is acceptable to use color, if you use the standard interpretations of it and subtly add them to help speed up a user's interaction.
TAKEAWAY: Colors should only be used to speed up an action that is defined by a location or shape.
Bud gave us a tour of the apple operating system to give examples of each principle he was discussing. I wish I could repeat it. The best thing I can say is look at the OSX interface and think through each element. Why is it there? Is it always in the same place and with the same icon? How many use color as a necessary element vs a hint?
