I was recently reminded of the importance of color, contrast, and placement in a user interface from some things I have seen at work. That is the importance of of using correct color combinations. I mean really it is not that hard to figure out what colors go together. When I lived in San Diego I was involved with UI design from mostly a web perspective but was also a part of studies to figure out what worked.
Based on the stellar examples from work and elsewhere I wrote down my own personal list of do’s and don’ts regarding color and UI elements in general.
- Don’t use colors that are similar in tone or brightness.
This one seems pretty straightforward you’d think. But please. Yellow text on a white background? That’s pretty damn obvious you would think? At work in their awesome wisdom they decided to output the search results in that lovely combination. It’s the revenge of Colonel Mustard on Mrs. White. Lighthouse.org has a great article about color. - Don’t rely on color for visual cues.
This one is harder to pin down. I admit the only reason I am so sensitive to it is because I worked with someone who was color blind. I also saw a great example of this the other day when someone printed the page out in black and white and misread the intentions. Folks it is simple, color can be used to help cue but give other ways as well. Be it a symbol, a key, or say text style on top of color. - Do use zebra strips for tables of information.
Zebra striping, the use of alternating colors on a table of information is very important. The human eye uses color changes to help sort information. Taking this into account can allow for the display of lots of information in a readable format. - Do use icons that make sense.
This is one that many overlook. If you want say a print icon, use a printer not some fancy paper thing. We all love a pretty interface but make it one that can be figured out. - Do give people an alternative with icons.
This really ties into the above do. Things like a mouse over or some text with the icon help people learn the interface quickly. There is nothing more annoying than playing “guess the icon.” - Do recall Fitt’s Law
To quote the wiki entry: “Fitts’s law (often cited as Fitts’ law) is a model of human movement which predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target.”
This is often overlooked. Size does matter as does screen real estate. Make things easy to get to and easy to click on. Small can look nice but too small is just a frustration. - Do take into account navigation conventions.
This is fairly straightforward. While I like innovate use of an interface I also know that I like to know what to expect. Norms develop over time because they work. Don’t ignore these lightly. While your whizzbang new interface might be awesome to look at if I can’t figure out how to find where I should save then it has failed me. Things like top and right/left side navigation work because of how we, as humans, organize and interact with things. Don’t take the human side out of the equation when designing your interface. - Do minimize the clickyness.
We all like organization, we all like knowing where to get to a menu option. We don’t like having to click four times for a common function. Think hard about what you users will do and organize the layout according to that. i should not have to dig for something that you expect me to be doing. I should not need to backtrack either. - Don’t crowd the screen.
Pretty simple this one, but often overlooked. Too much of a good thing is worse than too little. Don’t go nuts with information.
- Do make your user feedback clear, concise, and have it make sense.
The infamous Windows “Abort, Retry, Fail” is a great example. Have your feedback use natural language and be concise. When asking someone to do something or not it’s better to say “Do this” versus “OK”.
Edit: As pointed out by Lenna the commonality of “OK” and “Cancel” on dialog boxes. People please. Not everything in this world can be answered by OK/Cancel or Yes/No. If something fails an “OK/CANCEL” dialog is nonsensical. Is it ok that it failed? Do I want to cancel the failure?
Tags: color · design · internet · list · user interface4 Comments
4 responses so far ↓
That screenshot is a great example.
You didn’t mention the unhelpfulness of every dialog box having the options “Cancel” and “OK” or “Yes” and “No.”
For example:
“Are you sure you want to cancel this action?
[Cancel] [OK]“
You’re right about dialogs. I should have been clearer there. I’ll update.
Also important to avoid using language-cues in icons. English-speaking developers don’t always realize that their traffic isn’t just going to come from English-speaking countries. Using an “i” as an “information” icon won’t be helpful to people who speak a language where the word for information doesn’t begin with an “i”. A question mark, or other non-lingual symbol should be used.
Also, its easy for designers to come up with what they *think* the user will assume and the actions they take, but really, doing some conversion tests and flow patterning (via Google Analytics or other such tools) often reveals that what the user actually does when they get to the site (what they click on first, what draws their attention, etc) is not at all what the designer assumed it would be. Creating multiple versions of an interface or page to do some conversion tests is an important part of design.
@snipe: Good point. The world does not all speak english or understand the societal norms. I didn’t know Analytics did conversion and flow patterning. That must be kind of new?