I have a rough design for a progress report, primarily to be shown on the iPad.

This is supposed to show what the kid is good at, and what the kid is not good at.

Feedback I've received:

  • It's not easy to make out that the number in the circles is Accuracy

Can someone suggest how to improve this and communicate what the values in the circle actually mean (or show it in an alternative way)?

enter image description here

  • 1
    two suggestions: turn your circles into rounded rectangles and increase the contrast. maybe for the green ones black text will work better. bold text might also help legibility there. secondly, at the bottom use the space you have better. the text is tiny and lost in lots of space. Maybe some colours in the margins and headers would help as well. not sure if this question is more suitable for graphicdesign.stackexchange.com Mar 28, 2014 at 17:24
  • Welcome to UX.SE! I wanted to share some feedback on your question: site reviews are off topic as the scope of answers will not be generally relevant to anyone other than the original poster. I would recommend rephrasing the question to focus on the primary usability question I see, which is how to communicate the values in the circles. The second portion of the question--the UI being too "old school"--is very broad and subjective, so it would not fit within the mission of this SE without being improved. Mar 28, 2014 at 17:29
  • @TheUser1024 thanks for the feedback - I'll try it out. Mar 28, 2014 at 17:46
  • 2
    Instead of showing percentage, have you considered showing letter grades. 90% or above A, 80% - 89% B, etc. I think everyone would understand letter grades. Mar 28, 2014 at 17:53
  • 3
    It seems the number is more important than the circle. Will everything in the left always be green and everything on the right always red? If so, then the dots are somewhat redundant and are probably getting in the way rather than helping.
    – DA01
    Mar 28, 2014 at 20:49

4 Answers 4


Why not try visually showing their progress?

Also, the color of the bars can change as the progress changes, RED= 10-35% Orange=36-70% Green=70%-100%.
enter image description here

  • because it is not progress - it is accuracy. I had tried to mix the progress and accuracy thing in a previous iteration (length of the bar shows progress, color shows accuracy) but people just got confused with that. Mar 28, 2014 at 17:44

You're focusing heavily on the word "accuracy", but you're discussing the topic of skills. In an educational setting, the word "proficiency" better represents the goals of teaching, and teachers often measure proficiency by reporting the students' accuracy on tests. I would try to use the more appropriate word, as it will help reduce confusion.

Also, progress is an appropriate metaphor when teaching. An accuracy test is a single-point-in-time measurement, but progress is measurements over time. Even when you're reporting on the scores for a single test, it's part of the overall journey towards mastery.

As far as a confusing display, I agree. The colored circles are static and do not indicate anything. Your groupings aren't really ordered or complete.

Consider a display like this:

           Skills                     Proficiency

        1 digit              Needs improvement | Mastered
    multiplication          0%    25%    50%   |75%      100%
        Tables of 1   90%  [                   |       X   ]
        Tables of 2   80%  [                   |   X       ]
        Tables of 3   85%  [                   |     X     ]
        Tables of 4   92%  [                   |        X  ]
        Tables of 5    0%  [X                  |           ]
        Tables of 6   30%  [         X         |           ]
        Tables of 7   50%  [              X    |           ]
        Tables of 8    0%  [X                  |           ]
        Tables of 9    0%  [X                  |           ]

You could still use colors to highlight the skills that need improvement. But this solves some of your problems of ordering, grouping, while still indicating whether or not the students have achieved mastery.

  • my worry with "proficiency" is that it will be confusing - "Accuracy" is a lot more clearer as it has more consistent meaning (x correct out of total y in percentage). But I get your point; need to think about how to represent this data better. Mar 31, 2014 at 14:14

Why not order skills by accuracy? Order shows the pattern.


  • I don't think you've really understood the question here. Or if you have you've not really explained yourself very well. the issue OP has is that users don't understand that this is Accuracy that is being reflected. How does your example manage those expectations?
    – JonW
    Mar 28, 2014 at 22:05
  • Actually, at first look I thought the same (that this doesn't solve my problem) but I think the heading added above might just help clarify it a bit - so in that way, it is something I could try out. Thanks! Mar 29, 2014 at 8:52
  • Just clarifying - the order makes it look difficult to understand the skills, but I like the simple idea of showing accuracy above in the column name. Mar 29, 2014 at 9:05

From what I can tell, there isn't much context to the percentages that are presented. What are they percentages of?

For example: "Skills to be improved - Subtract within 20: 30%". 30% what? If it's supposed to be Accuracy, it's not called out or made apparent anywhere. You could call it out or simplify the concept a bit.

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.