3

I am using a half-donut chart to show a user's progress over time. I want to show their current score and their previous score. Green means they are improving. Blue and red means they are doing worse. I also want to show how they stack against the average (that's the grey).

enter image description here

I can't figure out what the tooltips should read. For card B, I would like the tooltip to tell you the current score. This suggests that the entire green ring (both light and dark green parts) is what adds up to 55%, as displayed by the tooltip.

However, when you compare this to how card C works, it is inconsistent. The tooltip on card C only tells you what the blue part is worth.

Overall, I feel as though I am making this too complicated. I have half a mind to revert to a previous design, in which the previous score gets its own ring(please forgive the quick job). Here, the green is current score, the blue is previous score, and the grey is average score. enter image description here

Any suggestions would be much appreciated.

Cheers, Nico

3
  • Do users care about the previous score, or their top score?
    – user31143
    Jun 10, 2016 at 6:53
  • They care about two things equally: their current score, and whether they are doing better or worse than their previous score. Jun 10, 2016 at 20:31
  • Whatever you do, please do make sure that the solution is accessible. E.g. make sure that tooltips also appear on keyboard focus, not just hover. Also make sure that screen reader users have a way of accessing the tooltip content (by means of links, aria-describedby, ...).
    – Tsundoku
    Dec 7, 2016 at 11:08

4 Answers 4

1

This seems pretty clear, with colours defining values and keeping the graphical display you seems to be aiming for.

Example with Pie Percentage and Labels

1

The circles you are using to compare the 3 values

  • Radius: Doesn't represent anything as you have it right now
  • Arc: Value between 0% and 100%
  • Color: Differentiate elements

Your bottom approach is more clear because each arc can be compared with the others. However, as the radius are different each arc has a different length (perimeter) added to the thickness of the line, which can make it a bit confusing (outer ones look bigger than inside ones). Reducing the thickness of the line might help:

Your top approach doesn't have the length difference problem I commented above (ignoring the grey arc). But as the arcs have the same radius they overlap and it is difficult to read and even more to interact with.

Also in both representations the 50% seems a bit confusing as it is the 50% of the 50% of the circle.

Using line could is more true to the values represented. Anyway, here are some ideas in case they might point you to some other direction.


Interacting with the graph might be complex with the curved figures. A possibility is that all interactions are done with the legend. For example: hovering the Actual score 55% in the legend would display some tooltips in the graph comparing this value with the other scores.

0

Use a line across the image to indicate the previous score. That way you can use the same look whether the previous score was higher or lower.

0

If you are just focusing on visualisation without considering learn-ability and user goals, so you might run into problems, e.g. three differently sized coloured curved bars with no legend will be tricky to comprehend.

Your designer goal is to create a visualisation which communicates its meaning effectively.

You first mention mention you want to show users progress over time (a trend) and then you say you want to show the current score and the previous score (a comparison). Do you realise these are two very different things, which might need two different visualisations?

If you are talking about a number that change over time, i.e. the Score, then this is a trend, and Spark lines are a very good visual metaphor for showing a number trend.

The important data is always going to be the Current Score, so everything else is just history and/or comparison.

2
  • Thanks for the advice. The intent is to show a comparison. The tooltips are to act as the legend, explaining what each series does. Jun 14, 2016 at 4:48
  • I recommend Stephen Few's book Information Dashboard Design if you wanted to learn a little more.
    – SteveD
    Jun 14, 2016 at 9:04

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.