At the end of the day, my users get a score ranging from 0 to 100 depending on how healthy their meals were. 100 being the perfect score, most users following a healthy diet get more than 80 every day.

To fix this, in the week’s review I am currently zooming on the relevant values:

Curve of the user’s score

Are there better ways to do this ? Should I use a scoring system with less range?

  • what is the larger context where this lives in the UI? Can you show more of the mocks? what is the x axis represent, and why do you have even spacing when you go from 0 to 86? If you can provide more details and surrounding UI, there might be some other options to visualize this...
    – Mike M
    Commented Jan 28, 2019 at 3:15
  • This is a quick mock I made to illustrate the question and I didn't think about the legend: the x axis represents the 7 days of last week and ideally, I would make it clear that there are values before 86 by showing an ellipsis for example Commented Jan 28, 2019 at 12:03

3 Answers 3


You need to choose a scale that is meaningful for your users. You say that a person who has a healthy diet will always have above 80.

Does it make a significant difference to have 82 or 95? Significant means that the user will need to take different actions. If not, then your scale is far too precise for user's needs. By focusing the chart on the top of the scale, you reinforce the idea that minor changes (between 86 and 94) are meaningful, when they might not be.

Worse, your users might get some motivation to see their scores always at the top of the chart. By zooming in on the top of the scale, they lose the perspective of their overall healthy eating habits, to focus on day-to-day variations.

In the end, it depends on what you want your users to focus on.

  • That's a very good point, thank you! I could reduce the displayed range to something out of 5 or even 3 and use 100 for the internal calculation only. Commented Jan 28, 2019 at 19:52

There is a whole research area about topics like this, Information Visualization.

What you did is a very common thought and is used often, sometimes even in research papers. But it is also criticized very often for being manipulative if used like you did.

What you can do to make it valid is simply make the break in the y-axis very clear:

enter image description here enter image description here

I'd simply start from 0 and then add the break relatively soon.

That is, if you want to keep it simple and stay with the current system. I wouldn't say this is the cleanest way, but it's a valid one.

  • Thanks! I hadn't thought of that. I'd probably have to tweak the charting library I am using though as not many libraries support a break in the axis. Commented Jan 28, 2019 at 19:58

You could use a bar charts to increase the contrast between valies. You‘d have a hard cut between them as opposed to a linear transition.

I‘m also thinking if it is a problem that the difference isnt very clear if there is not much difference. It shows to the users that they‘re holding their level.

You could also write out the change (+3,-4,...) compared to the previous day or previous week, month, year.

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.