24

I have this display:

enter image description here

This is a kind of status update. The main number is shown large and in black, and underneath is an indication of whether or not this is more or less than yesterday. So this number above is 13 less than it was yesterday, or this number is 5 more than yesterday. It's not clickable. If it's zero, then it will just be a green zero with no arrow.

Given this kind of display, is it easier for a user to understand the meaning if I remove the negative sign? Or should it stay? At the moment, positive numbers are shown in green with an up arrow and no + sign.

  • 11
    What's the context? A stock ticker? A cell in a financial spreadsheet? An upvote/downvote indicator? Is the arrow clickable? How is zero represented? – 200_success Nov 2 '18 at 16:59
  • 1
    @200_success: it's an kind of status update. The main number is shown large and in black and underneath is a indication of whether or not this is more or less than yesterday. So this number above is 13 less than it was yesterday, or this number is 5 more than yesterday. It's not clickable. If it's zero, then it will just be a green zero with no arrow. – Matt Burland Nov 2 '18 at 17:01
  • 8
    Let's downvote this question so much and see what this website has to say about that ;) – Ray Nov 2 '18 at 17:48
  • In my book, a decrease by -13 is a good thing, just like an additional -1000€ on my bank account is not a good thing. – phresnel Nov 5 '18 at 16:10
38

TL;DR; Use one, or the other, but not both.


Consider how you would read this out loud, noting OP has already indicated this is a relative measure:

In the positive case, this is "plus 13" or "an increase of 13" or "up by 13" or even, with context, "13 more than last time I was here".

In the negative, you'd have "minus 13", "a decrease of 13", "down by 13" and "13 less than last time".

Why then would this be interpreted significantly differently?

Adding color allows for quicker visual grepping, but is not essential:

Does combining both sets of symbols (which are performing the same function) add anything? Well, no. Unless you count confusion. If this is valid:

Is this valid as well?

Or should that be:

It's not immediately clear which symbol is used to set the color, or even whether they can be different.

Using multiple symbols makes little sense then. At best, you're duplicating information. At worst, you're confusing your users.

This still leaves you the choice of which symbols to use, but that decision is more context-specific.


It turns out using triangles instead of +/- is pretty popular in some cases.

Ordinals, rankings:


Wikipeda

Naturals, counts:


SocialBlade


Yes, I know my triangles are different sizes. I don't know why. It annoys me too.

  • 4
    "Yes, I know my triangles are different sizes. I don't know why." Try using "▲" and "▼" instead. – Yay295 Nov 3 '18 at 0:59
  • You should be using ▼ (U+25BC: BLACK DOWN-POINTING TRIANGLE) and ▲ (U+25B2: BLACK UP-POINTING TRIANGLE), but instead of the latter, you seem to use ▴ (U+25B4: BLACK UP-POINTING SMALL TRIANGLE). (You may use a Unicode-loving text editor to investigate Unicode characters.) – Andreas Rejbrand Nov 3 '18 at 13:06
  • 1
    I had intended to use ▲ U+25B2 and ▼ U+25BC, but they seemed too large so I instead opted for their "SMALL" alternatives ▴ U+25B4 and ▾ U+25BE. I expected them to render similarly as per the macOS Character Viewer, but even here they appear incorrectly. – MTCoster Nov 3 '18 at 13:18
27

/EDIT - This answer was posted before it was clear that the number is a status higher/lower indicator, so the answer content here is less relevant now the question has been updated.


Yes, you still need the sign. -1 is a number. Sure, you don't need the + symbol for positive numbers because 1 is a number itself, but you can't represent a negative number without the identifier of it.

It's an accessibility issue too. Colourblindness is going to make it hard for people to understand the difference between the two, screenreader users will have it read out to them too.

  • 4
    But the arrow tells you it's down (regardless of colorblindness) and the alt text for the arrow is down (or up, as appropriate), so a screen reader would read it as down 13 or down minus 13. The former seems more natural. – Matt Burland Nov 2 '18 at 13:35
  • 30
    It's not obvious that the arrow / chevron means 'this number is negative'. It could easily be inferred as 'click this arrow to open' or something like that. There's no way you can interpret -1 as anything other than 'minus 1', but there are many ways you could misinterpret ▼1 as something else. – JonW Nov 2 '18 at 13:46
  • 3
    Case in point: StackExchange votes. If you see a minus sign next to a downvoted Q or A, it will only reinforce its negativity. – Baptiste Candellier Nov 2 '18 at 15:11
  • 7
    @BaptisteCandellier - In StackExchange the arrows are buttons. They indicate anything, so you have to have the negative sign. – Matt Burland Nov 2 '18 at 16:19
  • 5
    @JonW "there are many ways you could misinterpret ▼1 as something else" Sure, and that's why context is important. There are literally hundreds of meanings of the word "set" but you never hear somebody say "Don't use the word 'set' because there are many ways you could misinterpret it as something else." Contrariwise, writing "▼-1" could very easily be interpreted as "Down by -1", i.e., up by 1, which is the exact opposite of what is intended. This is especially the case if all the examples the user happens to see are of the form "▼" followed by some negative number. – David Richerby Nov 3 '18 at 10:43
12

No you should not use the sign alongside that arrow.

"↓ -13" is potentially interpreted as a double negative.

You pick one method to indicate the sign. Either you use + or - (and omitting the + is understood), or you use some other glyph, like an up/down arrow, as you have here. (Of the two, the standard numerical spelling is far superior in general as everybody knows what it means.)

The colour cue is helpful but should not be required for context as not everybody can see the colour. Furthermore it would not be understood to be part of the "data" and thus cannot be deemed redundant alongside the glyph, in the same way that your existing approach is.

"Ah, but Stack Exchange uses both arrows and -!" you say. This is true. There was in fact some debate on this a while ago. The reason it works is that the up/down buttons are (a) clearly buttons, and (b) "around" the label rather than alongside it. With the arrow alongside the number, it looks like the arrow is part of the number. This is not the case when there are both up and down buttons permanently displayed above and below the value. Indeed, if your example were "⇅ -13" then it wouldn't be ambiguous, although still a bit weird.

  • 1
    As a minor point, I think one should generally include the plus in this kind of situation. Just writing a percentage with no sign looks like you're giving the percentage of some total, whereas using the plus sign strongly cues that it's a percentage change. – David Richerby Nov 3 '18 at 10:47
  • Up/down buttons can make sense even for values that can't go negative. If up/down buttons are used, however, they should be shown as a pair even if one is disabled. If a quantity could be adjusted 0-5, showing ▼5 to indicate that the value can be decreased but not increased would likely be confusing. – supercat Nov 3 '18 at 20:18
7

A potential problem is that people might interpret your example as "a decrease of -13" (meaning an increase of 13)

3

From your comment:

it's an kind of status update. The main number is shown large and in black and underneath is a indication of whether or not this is more or less than yesterday. So this number above is 13 less than it was yesterday, or this number is 5 more than yesterday. It's not clickable. If it's zero, then it will just be a green zero with no arrow.

I would remove the down arrow.

The closest analogy to what you want is a Stock Ticker, this can be very clearly displayed with red text along with negative numbers.

enter image description here

Keeping this analogy makes it easy for the users to understand what the numbers mean. If you want it more stylised, you can still keep the same concepts:

enter image description here

  • 3
    That interface looks like it would be very poor for colour-blind people. To a person with full colour vision, red versus green is by far the most significant thing on the page; to a person who's red-green colourblind, the tiny plus or minus signs that are supposed to convey the same information are literally the smallest things on the page. – David Richerby Nov 3 '18 at 10:49
  • @DavidRicherby The primary information is the numbers with or without the '-'. It's simply the case that almost al financial charts use red/green, I'm just picking a couple of examples – icc97 Nov 3 '18 at 14:53

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.