3

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 Jan 28 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 – charlestati Jan 28 at 12:03
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. – charlestati Jan 28 at 19:52
2

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. – charlestati Jan 28 at 19:58
1

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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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