Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have an application which needs to display the rating for a product in an easy to understand visual way. I was thinking of colour coding using the the universal red bad yellow ok and green good system with intermediate colours. Ideally I would like to do this algorithmically to convert a rating from 0-100 into am RGB colour value.

Failing that a stepped system where a 0-10 rating system with each hard step mapped to a specific colour would do. Does any one have experience on which algorithm will be suitable for this or which ten colours I should use if I go with a stepped solution.

share|improve this question

closed as off topic by DA01, Benny Skogberg, Matt Obee, kontur, dhmholley Feb 18 '13 at 14:28

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

    
The question being asked isn't really user-experience centric. Possibly graphic design, but sounds mostly programming related (asking for an algorithm) –  DA01 Feb 17 '13 at 1:31
    
That said...I don't think you'd want to use an algorithm as much as you want to 'eyeball' it. Create an R-Y-G gradient and pick 10 aesthetically pleasing steps along the way. –  DA01 Feb 17 '13 at 1:32
    
As a programmer I have little experience what looks pleasing hence the question. So what RGB values would be good tent poles to interpolate between? Also for RGB the two extremes are obvious but how to I vary blue to get the right gradient with yellow in the middle. –  Usman Ismail Feb 17 '13 at 1:38
1  
@UsmanIsmail Mapping a 10-point ordinal rating scale to a set of colors varying by hue should be possible but not necessarily easy. To be effective, the color scale should be created in a color space that makes picking equal perceptual intervals possible, e.g., Munsell, CIELab. Given your lack of experience, do not attempt to use choose your colors in RGB. Choose them in a different space and map them to RGB. Take a look at colorbrewer2.org to understand more about 'equal perceptual intervals.' –  user1757436 Feb 28 '13 at 13:28

3 Answers 3

up vote 4 down vote accepted

As long as you show the actual value, this shouldn't be a problem as far as usability goes. Just make sure to adjust the colors or the background so it's readable.

If you use the Red, Yellow, Green spectrum you may notice the relationship between the RGB values:[255,0,0], [255,255,0], and [0,255,0], respectively.

  • Red is 100% red, 0% green, and 0% blue.
  • Yellow is 100% red, 100% green, and 0% blue.
  • Green is 0% red, 100% green, and 0% blue.

If you look at your 0 to 10 rating, you will notice values less than 5 will have 100% red, with a smaller percentage being green. Conversely, the values greater than 5 will have 100% green and a smaller percentage red. The percentage of red/green value is mirrored as you move further away from 5 (the median), and is just applied to the respective color.

Here's a jsfiddle that demonstrates the algorithm you may be looking for.

share|improve this answer

I am not sure about your user base but do note that relying on the primary colors as a rating system opens up a issue if your user base is going to be predominantly male since studies have shown that about 9% of men are colorblind. I also recommend looking at this article for additional inputs about how colorblindness affects a wide range of people.

enter image description here

That said, I recommend looking at this article for inputs on what rating methods you could potentially use for your user base. Since you are looking for a graded rating system, you could also go for a multi-dimensional rating system along with a like\dislike option like how amazon does it.

enter image description here

Alternatively you could go for a color rating in combination with a like\dislike option like how youtube does it as shown below :

enter image description here

The second image is how a color blind person would see it. Youtube has ensured that with two colors,they are still communicating the rating effectively

share|improve this answer
    
I did not consider this, thanks –  Usman Ismail Feb 17 '13 at 14:35

I think you are trying to force a simple rating system to give you a detailed result. If you do so, you will have a system that is neither simple, nor detailed.

The beauty of a red, yellow, green system is that there are only three options. So if you want to use that, you simply have to choose what rating ranges will represent what colours, but you then need to keep it to 3 ranges.

If you would like more detailed ratings, then you should consider something else, such as a 5 star system; a 10 point system; or a percentage rating.

share|improve this answer
    
What would be a good graphical metaphor for a percentage rating system? –  Usman Ismail Feb 17 '13 at 1:42
    
Nothing that maintains the accuracy of a percentage rating and a decent visual clarity. You need to choose what is most important for you to communicate. –  JohnGB Feb 17 '13 at 1:58
1  
+1 the spectrum between the 3 significant colors won't have any obvious meaning. –  obelia Feb 17 '13 at 3:28

Not the answer you're looking for? Browse other questions tagged or ask your own question.