Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Colors in User Interface

From Wiki
Jump to: navigation, search
mayankkedia (Talk | contribs)
(Added More images and content, some minor spelling mistakes removed)
hamishwillee (Talk | contribs)
m (Hamishwillee - Subedit for wiki style)
 
(7 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
[[Category:Usability]][[Category:UI]]
 
[[Category:Usability]][[Category:UI]]
 +
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20071119
 +
|author= [[User:SannaH]]
 +
}}
  
 
==Introduction==
 
==Introduction==
Line 5: Line 28:
 
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.
 
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==
+
==Considerations while using colours==
  
=== Limit the number of colors ===
+
=== Limit the number of colours ===
  
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.  
+
The amount of colors used in a user interface should be kept within reasonable limits. With colours generally less is more, as lesser colour gives the UI a neat uncluttered look.  
  
<table>
+
<gallery widths="400px" heights="300px">
<tr>
+
File:Screenshot0115.jpg|Example of wrong colour usage  
    <td align="left">
+
File:Screenshot0116.jpg|Example of right colour usage
'''Example of wrong color usage'''<br>                   
+
</gallery>
[[Image:Screenshot0115.jpg]]
+
  </td>
+
    <td align="left">
+
'''Example of right color usage'''<br>                   
+
[[Image:Screenshot0116.jpg]]
+
  </td>
+
  </tr>
+
</table>
+
  
=== Single color backgrounds look nicer ===
+
=== Single colour 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!  
+
When designing colours for user interface you should also think of other aspects of colors. Almost 10% of males have some kind of colour vision deficiency. So coding only with colours 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 colours!  
  
<table>
+
[[File:Screenshot0117.jpg|frame|none|Example of white coloured background]]
<tr>
+
    <td align="left">
+
'''Example of white colored background'''<br>                   
+
[[Image:Screenshot0117.jpg]]
+
  </td>
+
  </tr>
+
</table>
+
  
 
===Colors are also culture related===
 
===Colors are also culture related===
  
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].
+
Different cultures have different meanings for colours. For example, green is associated with heaven (Muslims) and luck (U.S. and Ireland) [www.colormatters.com Details from colormatters.com].
  
==Importance of colors==
+
==Importance of colours==
  
===Colors can be used to get viewers attention===
+
===Colours 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.
+
You should be careful with the usage of colors to attract the user’s attention. If there is too much colour to be noticed it won’t do what it’s supposed to do any more. The information that needs attention gets quite easily if too many colors are used or if the wrong color combinations are used.
  
<table>
+
<gallery widths="400px" heights="300px">              
<tr>
+
File:Screenshot0118.jpg|Example of text getting lost      
    <td align="left">
+
File:Screenshot0119.jpg|Example of text clearly visible
'''Example of text getting lost'''<br>                   
+
</gallery>
[[Image:Screenshot0118.jpg]]
+
  </td>
+
    <td align="left">
+
'''Example of text clearly visible'''<br>                   
+
[[Image:Screenshot0119.jpg]]
+
  </td>
+
  </tr>
+
</table>
+
  
 
=== Use distinct shapes to get attention===
 
=== 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.
+
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 colour coding only, because not everybody can distinguish all colours. Using shape coding might be a nice addition.
 
+
       
<table>
+
[[File:Screenshot0120.jpg|frame|none|Circle gets noticed amongst the rectangles]]
<tr>
+
    <td align="left">
+
'''Circle gets noticed amongst the rectangles'''<br>                   
+
[[Image:Screenshot0120.jpg]]
+
  </td>
+
  </tr>
+
</table>
+
  
 
===Highlight & underline important things===
 
===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.  
+
Things/features/information that is more important should be highlighted, or written with different colours/fonts so that the user can notice it immediately. Also catchy colors like red, yellow can be used for this purpose.  
 
+
           
<table>
+
[[File:Screenshot0121.jpg|frame|none|Underlining the text makes it more noticeable]]
<tr>
+
    <td align="left">
+
'''Underlining the text makes it more noticeable'''<br>                   
+
[[Image:Screenshot0121.jpg]]
+
  </td>
+
  </tr>
+
</table>
+
  
 
=== Enable skin===
 
=== 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.
+
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 coloured rectangle.
<table>
+
      
<tr>
+
[[File:Screenshot0122.jpg|frame|none|Example of a skin enabled container]]
     <td align="left">
+
'''Example of a skin enabled container'''<br>                   
+
[[Image:Screenshot0122.jpg]]
+
  </td>
+
  </tr>
+
</table>
+
  
  
==Perception of colors==
+
==Perception of colours==
  
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.
+
Different colours are perceived differently and are often associated with specific ideas, so it is very important to ensure that the right colour is used, otherwise you might end up offending the sensitiveness’ of the user if wrong colours 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.  
+
Human mind has a way of connecting things that are alike. Things that are coloured with the same colour or that are the same shape are easily associated. That’s why you should be consistent with the colouring 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.
+
Cold colors (blue, green and purple) seem to be further away from the viewer than warm colours (red, yellow and orange). That’s why they should be used as background colours. Colours 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.
+
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.
  
<table>
+
<gallery widths="400px" heights="300px">            
<tr>
+
File:Screenshot0123.jpg|Yellow colored text is visible but straining  
    <td align="left">
+
File:Screenshot0124.jpg|Example of text clearly visible and not straining either
'''Yellow colored text is visible but straining'''<br>                   
+
</gallery>
[[Image:Screenshot0123.jpg]]
+
  </td>
+
    <td align="left">
+
'''Example of text clearly visible and not straining either'''<br>                   
+
[[Image:Screenshot0124.jpg]]
+
  </td>
+
  </tr>
+
</table>
+
  
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.
+
Colours 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.
  
== Additional Resources ==
+
==Proper contrast==
 +
Make sure the colour combinations for foreground and background provide sufficient contrast. E.g. use a black text on a white background.
  
More information about colors can be found from [http://www.colormatters.com www.colormatters.com].
+
== Additional Resources ==
  
[[General usability issues]]
+
More information about colours can be found from [http://www.colormatters.com www.colormatters.com].
  
<b>--- Edited by Mayank on 22/06/2009 ---</b>
+
* [[General usability issues]]
 +
* [[Web Safe Colors]]

Latest revision as of 05:25, 18 June 2013

Article Metadata
Article
Created: SannaH (19 Nov 2007)
Last edited: hamishwillee (18 Jun 2013)

Contents

[edit] 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.

[edit] Considerations while using colours

[edit] Limit the number of colours

The amount of colors used in a user interface should be kept within reasonable limits. With colours generally less is more, as lesser colour gives the UI a neat uncluttered look.

[edit] Single colour backgrounds look nicer

When designing colours for user interface you should also think of other aspects of colors. Almost 10% of males have some kind of colour vision deficiency. So coding only with colours 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 colours!

Example of white coloured background

[edit] Colors are also culture related

Different cultures have different meanings for colours. For example, green is associated with heaven (Muslims) and luck (U.S. and Ireland) [www.colormatters.com Details from colormatters.com].

[edit] Importance of colours

[edit] Colours 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 colour to be noticed it won’t do what it’s supposed to do any more. The information that needs attention gets quite easily if too many colors are used or if the wrong color combinations are used.

[edit] 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 colour coding only, because not everybody can distinguish all colours. Using shape coding might be a nice addition.

Circle gets noticed amongst the rectangles

[edit] Highlight & underline important things

Things/features/information that is more important should be highlighted, or written with different colours/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

[edit] 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 coloured rectangle.

Example of a skin enabled container


[edit] Perception of colours

Different colours are perceived differently and are often associated with specific ideas, so it is very important to ensure that the right colour is used, otherwise you might end up offending the sensitiveness’ of the user if wrong colours have been used.

Human mind has a way of connecting things that are alike. Things that are coloured with the same colour or that are the same shape are easily associated. That’s why you should be consistent with the colouring 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 colours (red, yellow and orange). That’s why they should be used as background colours. Colours 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.

Colours 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.

[edit] Proper contrast

Make sure the colour combinations for foreground and background provide sufficient contrast. E.g. use a black text on a white background.

[edit] Additional Resources

More information about colours can be found from www.colormatters.com.

This page was last modified on 18 June 2013, at 05:25.
239 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×