Colors in User Interface
Article Metadata
Contents |
Introduction
The use of right color for the right context goes a long way in ensuring a good user experience. While designing the layout of the application it is very important to ensure that careful consideration is given while choosing the colors, their shades and other details.
Considerations while using colors
Limit the number of colors
The amount of colors used in a user interface should be kept within reasonable limits. With colors generally less is more, as lesser color gives the UI a neat uncluttered look.
|
Example of wrong color usage |
Example of right color usage |
Single color backgrounds look nicer
When designing colors for user interface you should also think of other aspects of colors. Almost 10% of males have some kind of color vision deficiency. So coding only with colors might not be a good idea. Maybe it would be a good idea to design the UI in black and white or at least try that it works without colors!
|
Example of white colored background |
Different cultures have different meanings for colors. For example, green is associated with heaven (Muslims) and luck (U.S. and Ireland) [www.colormatters.com Details from colormatters.com].
Importance of colors
Colors can be used to get viewers attention
You should be careful with the usage of colors to attract the user’s attention. If there is too much color to be noticed it won’t do what it’s supposed to do anymore. The information that needs attention gets quite easily if too many colors are used or if the wrong color combinations are used.
|
Example of text getting lost |
Example of text clearly visible |
Use distinct shapes to get attention
You can catch the viewer’s attention with shapes, too, for example. A round shape among rectangles will be noticed. You shouldn’t rely on color coding only, because not everybody can distinguish all colors. Using shape coding might be a nice addition.
|
Circle gets noticed amongst the rectangles |
Highlight & underline important things
Things/features/information that is more important should be highlighted, or written with different colors/fonts so that the user can notice it immediately. Also catchy colors like red, yellow can be used for this purpose.
|
Underlining the text makes it more noticeable |
Enable skin
Enable the skin to take make use of the background wallpaper image of the selected theme. This makes the UI look much more elegant as compared to a white patch of colored rectangle.
|
Example of a skin enabled container |
Perception of colors
Different colors are perceived differently and are often associated with specific ideas, so it is very important to ensure that the right color is used, otherwise you might end up offending the sensitiveness’ of the user if wrong colors have been used.
Human mind has a way of connecting things that are alike. Things that are colored with the same color or that are the same shape are easily associated. That’s why you should be consistent with the coloring and using different shapes. Use blue for links, black for other parts of text and red for important information and add shapes, underlining etc. to inform that there is something special there.
Cold colors (blue, green and purple) seem to be further away from the viewer than warm colors (red, yellow and orange). That’s why they should be used as background colors. Colors like red for instance are often perceived as signs of danger, and should be used when denoting an error case or a fault condition etc. In case of games they can be used to depict action, violent scenes etc.
Text should be written with a color that distinguishes from the background. So, yellow text on white background can be stated a bad idea. You might see the text but reading it is very energy consuming. The best combination for readability is black text on a white background.
|
Yellow colored text is visible but straining |
Example of text clearly visible and not straining either |
Colors have many roles in a user interface, for example to get attention and to make the UI more vivid. The most important role is making the UI into a harmonic whole. That can be achieved by careful design.
Proper contrast
Make sure the color combinations for foreground and background provide sufficient contrast. E.g. use a black text on a white background.
Additional Resources
More information about colors can be found from www.colormatters.com.
--- Edited by Mayank on 22/06/2009 ---
02 Sep
2009
Articles explains some of the aspects of color's influence on user interface design.
Using the simplest and clear examples it provides to the reader essential rules of using colors in ui. It proves that showing less colors is usually good for design. Article shows that colors are important factor in displaying content to the user.
I'd like to know if some colors are more energy consuming for current device's screen then others. I've heard that when CRT monitors were in use white was the most power hungry color, but with LCD it changed - darker colors are said to be more expensive, because of crystals needed to be polarized all the time when displaying them.
I also feel that section "Use distinct shapes to get attention" doesn't quite fit for the subject of the article. Maybe it should be moved to new page?
It would be nice to see an example of effects of color disability on the colorful ui design. And how to work around it (with tonality I guess).
Nice to see a reference to page to get more info on colors.
All in all I think that article is very useful and explains well the aspects mentioned, but I'm surely hungry for more. And it is also thanks to the author's work.