I have a reviewing system that I've designed which uses three possibilities to review (using emotional icons)


Works really nice, but I have also to publish the average of the reviews.

I was thinking to emphasize the highest percentage of a mood and also to put the remaining two moods and their percentage.


But as you can see, there could be some issues, 1st and 3rd column that may not be relevant to the users.

1st, what happens when I have equal percentages (50/50 or 33.3/33.3/33.3)? a solution could be "promoting" the happiest mood

3rd, what happens when there are really close percentages but the saddest face has the higher percentage, it could affect the user's decisions by showing the sad face, even if a happier face is really close?

Are there other solutions that I can use?

  • 2
    Chris, welcome to UX.SE. In the future, please don't accept answers so quickly. This site has contributors from around the world so some may not be available at the time of your posting and will be discouraged to submit better answers.
    – dnbrv
    Jun 25, 2012 at 12:25
  • @dnbrv The answer provided a clear and simple solution (in a short amount of time). But yes, you're right and I'll take your suggestion into account for the next time. Thank you!
    – Chris X
    Jun 25, 2012 at 13:06
  • @Chris didn't you say that you didn't want to use a bar chart? Jun 29, 2012 at 22:08
  • @DannyVarod Yes, but you said a bar char with each percentage, so... 3 moods (bars) * 5 items = 15 bars. The solution that Luke provided uses a bar for each item with all 3 moods on a single bar. (Well at least that what I understood from your example)
    – Chris X
    Jun 30, 2012 at 10:58

3 Answers 3


Technically, the mode would be the central tendency that you would be highlighting with ordinal data, rather than the mean/average.

Bill Albert has a nice explanation in his book Measuring the User Experience

... the most common occurrence of ordinal data comes from self-reported data on questionnaires. For example, a participant might rate a website as excellent, good, fair, or poor. These are relative rankings: The distance between excellent and good is not necessarily the same distance between good and fair...

The most common way to analyze ordinal data is by looking at frequencies. For example, you might report that 40 percent of the participants rated the site as excellent, 30 percent as good, 20 percent as fair, and 10 percent as poor. Calculating an average ranking may be tempting, but it's statistically meaningless.

Though the smiley icons take prominence for the data input, using a stacked distribution bar chart may be better for summary as it offloads percentages to a visualization which does not require mental computation to process. Changing the ordering based on the mode is not recommended as it would compromise the ordinality and make patterns across the entire data set harder to identify.

Here's how I would approach the summary:

enter image description here

  • Numeric details and even the legend could be concealed/revealed on click/hover on a bar much like Github does it

enter image description here

  • Thank you very much, looks really nice, simple and clear.
    – Chris X
    Jun 29, 2012 at 22:01

I would consider taking a look at the way 37Signals does there customer service report. Not sure if this was something you looked into before designing your own system or not. With the 37signals report the total number of participants is always displayed as well as the winning percentage based on the mood selected. As for the remaining two moods, the raw data is shown.

I believe this is a lot more understandable than pure percentages result set when it comes to end users. Percentages can be extreamly miss leading to users if they are unsure of a sample size. Much like in all statistics, smaller sample sizes can easily yield results toward one end of the spectrum or the others. By at least telling you users how many samples were taken to create a specific percentage they can make the decisions to trust the results or not.

As for your what you should display when percentages match that is purely yours to make. When numbers between to different emotions/moods become extreamly close, it still comes down to which one is bigger than another. To try and mask a sad score that is higher with another score is not really transparent. This action might cause some of your users to become bias toward your system if they think your are tweaking with the actual results. So I would say display it as how it is.

  • Yes, I agree with the counter, it's has a more realistic meanining than mapping real data by a percentage. The problem is that your example uses just one reviewable item, the overall satisfaction, but I want 5 things which is a bit different, don't you think?
    – Chris X
    Jun 25, 2012 at 11:35
  • For the small differences, yes... I totally agree with you and I don't try to mask a sad score at all, but the score is way to close to a happier mood and showing a sad instead, could affect user's choices.
    – Chris X
    Jun 25, 2012 at 11:37
  • +1 for the link to 37signals and comment about percentages. Take a look at the bottom part of the page, they have mapped out all the 100 faces and it gives a good impression on the "mood" because you can see each individual mood input. This is similar to the answer by Luke since that shows a good overview of the impression. Jun 25, 2012 at 22:31

How about not displaying the results in a column or even sorted.

Instead display them in a row with using same order as in the voting options.

Do change the size according to the percentage or put a bar underneath them instead (bar chart).

E.g. Instead of...

Column with bigger first option


Row with size according to percentage

If you don't want to end up with 3 faces per measure, then use one face per measure with an expression (and color) that changes according to average mood...

5 mood levels
The differences between the states should be bigger than in this image.

Use an weighed average e.g.

sad = -1, neutral = 0, happy = 1

For a result of: 50% happy + 40% neutral + 10% sad:

0.5*1 + 0.4*0 + 0.1*(-1) + 0.4*1 = 0.4

Which is closest to the 50% happy face (if you are using 5 options).

The best result would be if you could programmatically move the smile and shift the color's phase according to the result of the calculation (without averaging to a nearest state).

This is also the closed to the average stars method which is commonly used.

  • The bar chart could be an option, but as you see, there are 5 reviewable items (4 skills and an overall satisfaction), for each one, a bar chart will be a bit overwhealming, don't you think? (Also the faces + percentages looks overwhealming, that's why I'm trying to find a simple solution).
    – Chris X
    Jun 25, 2012 at 11:21
  • Another point is that I have a limited space and i think that the best representation will be horizontal, but again, something simple.
    – Chris X
    Jun 25, 2012 at 11:22
  • @Chris See edit. Jun 25, 2012 at 11:33
  • Your solution sounds very nice, by using an average mood, calculated by each score (as a pondered average). It also solves the problem with the space.
    – Chris X
    Jun 25, 2012 at 11:49
  • What do you think using 1 - sad, 2 - neutral, 3 - happy and calculate, let's say 1+2+3=6/3=2 - neutral (this is the simple average, now)
    – Chris X
    Jun 25, 2012 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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