# How to represent a score that can be positive or negative?

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

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? 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. 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. 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:

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:

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. 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. May 11 '18 at 15:24

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! May 11 '18 at 15:34