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.

Improve this question
4
  • 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
    Commented Nov 2, 2018 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
    Commented Nov 2, 2018 at 17:01
  • 8
    Let's downvote this question so much and see what this website has to say about that ;)
    – Ray
    Commented Nov 2, 2018 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
    Commented Nov 5, 2018 at 16:10

5 Answers 5

Reset to default
39

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.

Improve this answer
3
  • 4
    "Yes, I know my triangles are different sizes. I don't know why." Try using "▲" and "▼" instead.
    – Yay295
    Commented Nov 3, 2018 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
    Commented Nov 3, 2018 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
    Commented Nov 3, 2018 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.

Improve this answer
12
  • 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
    Commented Nov 2, 2018 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 ♦
    Commented Nov 2, 2018 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
    Commented Nov 2, 2018 at 15:11
  • 7
    @BaptisteCandellier - In StackExchange the arrows are buttons. They indicate anything, so you have to have the negative sign.
    – Matt Burland
    Commented Nov 2, 2018 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
    Commented Nov 3, 2018 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.

Improve this answer
2
  • 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
    Commented Nov 3, 2018 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
    Commented Nov 3, 2018 at 20:18
7

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

Improve this answer
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

Improve this answer
2
  • 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
    Commented Nov 3, 2018 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
    Commented Nov 3, 2018 at 14:53

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.