I need a simple (aka not ugly) visual element to represent a score that can be positive or negative.

My score matrix will probably be similar to this page: http://snapsort.com/cameras/Canon-PowerShot-G9-X-Mark-II-score

But I need to allow for negative scores.

The red to green bar graph (red = 0, green = 100) in the example above does not work when there is also a possible -100 value.

  • So are we talking about a scale with no maximum or minimum values? – sclarke May 11 '18 at 9:45
  • Are you wanting to actually hide the fact they can be positive or negative despite there being maximum and minimum scores? – UIO May 11 '18 at 9:53
  • @sclarke min is -100 and max is 100. – TinyTiger May 14 '18 at 5:37
  • @OwenHughes not sure what you are asking exactly. Users should be able to tell when something is positive and something is negative. – TinyTiger May 14 '18 at 5:38

Two simple solutions come to my mind. Excuse the lack of rounded corners, shadows and gradients (the eye-candy tricks that make the graphs "not ugly").

The first one shows the score on a scale where the neutral position (zero) is in the middle. When you stack your scores you can easily see which is positive and which is negative. Also, as with negative numbers, the higher the absolute value, the worse score:
enter image description here

The other idea is similar to the above, however it takes into consideration that a score can be either positive or negative and never both. Still, for the negative values the bar "increases" from the right to the left:
enter image description here

EDIT: I've reworked the colour choice to reflect SteveD's comment on colourblindness.

  • Try to avoid red/green - this is the most common colour blindness in men, so will cause difficulties to some people. Either replace red with orange or replace green with blue as these would be much better colour combinations. – SteveD May 11 '18 at 10:26
  • Good suggestion, thank you. Also for this reason I've proposed the "reverse" scale for the negative score. – Mike May 11 '18 at 10:50
  • For colorblind issue: Mix some blue into the green; that is what many traffic lights do. – Mark Stewart May 11 '18 at 15:24

enter image description here

I was going to suggest a colourised version of the the above slider which would default at zero but could shift to either polarity.

It is quite similar in terms of representation to Mike's previous comment which i would say is the solution to your quandary.

  • This is similar to how YouTube shows ratings, as a ratio of bad to good ratings: the left end is 100% bad, right is 100% good. This may or may not be appropriate, depending on OP's specific use case, what the values represent, or what OP is trying to communicate. Oh, and welcome to UX.SE! – maxathousand May 11 '18 at 15:34

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

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