# Visualize a percentile rank by filling a shape

I am making a visual to show a user what percentile ranking they are at. I want to use some fill concept to encourage the user to want to fill the object, and thus increase their ranking.

Currently, this is what I have.

Using a pyramid, but filling the area linearly makes it look like someone has a much higher rank than they've actually achieved. For example, in this diagram...

...you can see that 64% of the height has been filled in, but a much larger portion of the area has been filled. This layout might make people feel that increasing their rank further will be only a little bit of work because the remaining part of the pyramid looks so small.

That's the theory anyway. I haven't found any research about whether progress indicators represented in shapes impact motivation or about what shape people will find most motivational. Do people find some shapes to be more motivational than others? If so, what shape will appear most motivational?

• Why is the top of the pyramid faded? Why is the pyramid green? What is the lowest point in the pyramid? Jun 14, 2016 at 5:59
• Why even a pyramid? In your pictures it looks like a trapezoid, which is a very complicated form to convey something. If you want an object that says "percentage complete", just fill a bar, a circle or some other simple shape. Jun 14, 2016 at 6:48
• The pyramid implies that the bottom 1% is somehow much larger than the top 1%. As in many cases, simple is better. (I'd vote for a simple bar.) Also, the horizontal line labeled 64% is confusing. It looks like another measure on the triangle, in addition to the green fill line. Jun 14, 2016 at 12:50
• Welcome to the site, @Nico. A couple of people voted to close your question (marking it as unclear what you were asking). I've edited it to try to make it clearer. If you feel I've changed the meaning, you're welcome to edit it back. Jun 14, 2016 at 20:25
• Hi @GrahamHerrli, thank you for the edits. That is very kind and helpful. I will strive to write better questions. Jun 14, 2016 at 20:30

1) Maybe use normal distribution as a graphic:

However, I'm not sure how the average users will be able to comprehend the graphic. I've never seen someone using normal distribution for rankings.

2) The other alternative is the progress bar slider:

In my opinion, the progress bar slider will be more intuitive and easier to comprehend by the users, but its worth experimenting with the normal distribution too. Will be happy to receive input on this.

• #2, definitely. The bell curve has advantages, but it implies a certain distribution of scores that might not be accurate. Perhaps generate an actual curve from actual data? Jun 14, 2016 at 12:52

This is all great feedback. I am actually planning to include a distribution curve separately. It seems to me that the best and simplest solution is to have a clean number. Here is a summary of my thinking, with some of your feedback incorporated.

• I have been through the same thought process and agree that a clean number is best. For normal people, perhaps converting these into `poor`, `below average`, `average`, `good`, `excellent`, `outstanding` Oct 3, 2017 at 11:39
• Or in the UK we have GCSE exams for 15-year-olds, so people understand A*, A, .. F grades Oct 3, 2017 at 11:40