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.

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.”
6. 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.
7. 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.
8. 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.
9. 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.
   
10. 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?  

Technorati Tags: color, design, internet, list, user interface