Down arrow and up arrow status

Question

I have to make an iOS app, where there are categories and I have to show the decrease and increase in status of particular category.

For decrease I used a red down arrow. For increase I used a green up arrow.

But in some categories, a down arrow is good for sales.

So I am stuck with what to do with the icons and colors.

My original approach was to change down arrow color from red to green. But the problem is, colorblind people will not understand.

Then I thought of placing emojis of smile and sad. For good it will smile, and for bad it will be sad. Down arrow and smile emoji together. However this would be unprofessional.

Please see this screenshot:

Answer 1

I'll make this an answer so I can expand on my comment.

Your main problem is not an arrow, icon, color or emoji thing. Your main problem is a conceptual one: you're mixing taxonomies with gradations that might be (they actually are!) absolutely opposed. Thus, you're adding a load where user has to make an interpretation of whether your taxonomy and your gradation method convey a good or bad thing. This is EXTREMELY confusing, the level of friction will go to the roof and sooner or later you'll need to redo it since it has more problems that benefits.

Instead, make 2 sublists: one where "up" is good and one where "up" is bad. You can keep your current arrow up/down method just as you have it now, including colors. And if colors bother you, choose color blind safe neutral colors.

The important thing is that up must mean up and absolutely nothing else, so your current arrows will make the trick. Then, what you need to define is whether for an specific subset up is good or bad.

As easy as that, no complicated things, straight to the point

Addendum

Just noticed one of your taxonomies includes the Goods word. Be very careful and try to find some alternatives since your gradation is between good and bad concepts, hence this wording might add an additional layer of friction. Or maybe not. Just in case, it's worth testing

---

Addendum 2

As an alternative: what about using something like in Gino van de Staaij's answer? I mean, a non-ambiguous icon stating objective information: amount is growing bigger / amount is decreasing. This way, you don't need to add any subjectivity and your app will measure real data. I don't know if this is possible, so adding this as an alternative path/suggestion

Answer 2

Perhaps you could use only black for the arrows so that the user knows of the increase or decrease, place them on the left, and then on the right use a "health-bar" style status report which would look professional and could indicate the positive/negative aspect and even severity. (Use colors other than Red/Green if you are worried about color blind issues)


(*NOTE: My colors may not correlate to arrow orientation as I just did it randomly without trying to uncover which arrows are good (green) and which are bad (red))

(Also, the arrows may not even be necessary anymore if you are adding these visual ads, sorting can be changed to performance based (i.e. 'good' v 'bad') instead of directional based (i.e. 'increment' v 'decrement')





If color is an issue perhaps you can use a non-color-dependent performance indicator like this: (*Note, you can still add color to these to make it even easier for 95% of your users to read, it's just that color-blind people will still be able to read them even without the color information)— Color indicative version on the left, color-blind simulation on the right

Answer 3

I have always liked these icons, which indicate a trend on a graph. The combined shape and direction of the arrow indicate how the trend is progressing.

I got these from Ionicons: http://ionicons.com/

Answer 4

Put the good at the top and bad at the bottom (or maybe reverse this if you want to attract more attention to the bad). This way, you will have two sections divided by a clear conceptual mapping.

I would imagine that the main question is more along the lines of "In what areas are we struggling?" rather than "Did this section increase or decrease?" This design would allow the user to clearly understand that "These are doing well, and these are doing poorly."

Still keep the arrows, but color all the arrows (up and down) in the GOOD section green. Color all the arrows (up and down) in the BAD section red.

Whether you label these sections or not is up to you. (Good/Bad, Improving/Worsening, etc.)

Example:

_{I changed the arrows to something that I felt might be more quickly processed. The thin lines don't provide as strong of a visual cue as to what direction they're pointing.}

Answer 5

Perhaps instead of unprofessional emoticons, you can use a simpler symbol to indicate a good or bad result.

In this case, I used a tick and a cross:

But since the indication is probably more important than the direction, we can place greater emphasis on the ticks and crosses:

Note how the arrows are now smaller and faded towards the background colour, so they are visually secondary to the good/bad icons, but they can still provide their information if the user wants it.

I also like Gino's suggestion to use zig-zag arrows to communicate an upward or downward trend (as if on a chart), but I didn't have time to draw those!

An alternative way to display the trend would be with numbers: +20, -5, etc. Although displaying the values might seem like too much information, it could be argued that arrows without magnitude can be misleading or even dangerous.

For example +0.1 is closer to -0.1 than it is to +100, but arrows would represent the two positive changes as equivalent. Similarly, the concerning number in this dataset would be lost with only arrows: +3, +5, +1, -839, +2, +4, -3

As a compromise between numbers and arrows, double-headed arrows could be used for swings greater than 10, and triple-headed arrows for swings greater than 100.

Answer 6

You are right to avoid the use of colour alone - especially when considering red/green states of the same shape.

The way to approach this is by changing the shape of the arrow and there are a number of ways you could do that. As a few of suggestions:

1) You could bring left and right into play, where right is progressive and left is retrograde - an arrow pointing up and right is a positive increment but an arrow pointing up and left is a negative increment. (NB: I think this is probably over complicated for general use)

2) You could try varying the line weight of the arrows - heavier lines could indicate a more desirable effect.

3) You could use solid shapes and switch between filled and outline.

These are just a few suggestions to help you think past your current block - You may find something else entirely!

Answer 7

To build on @Adriano Repetti's answer, and again borrowing from Information Dashboard Design by Stephen Few, I would like to highlight some assumptions about your view and make a suggestion.

As someone who is not colour blind, it still took me a while to figure out what all the arrows mean! Your interface confused me, so I tried to think about what you are intending me to do.

So I thought that it's pretty clear that you want me to input into this app whether these categories have incremented or decremented, since I last updated it. It is also clear that there is a judgement going on about whether increment/decrement has a positive or negative impact on each item - possibly indicating a desired or target value.

It follows form this that the 'All' button seems a bit redundant, as I am unlikely to want to increment everything at the same time (I assume this is what this does), given that some things will want incrementing and some decrementing.

Having the symbols on the other two buttons at the top to be the same as the icons in the list confused me for the longest time. Given that the 'All' button could go, maybe taking up a lot of room at the top of the screen is a good way to go.

As others have pointed out, trend over time is not well represented by a single icon, so perhaps a trend graph of some sort would help comprehension. As there is a target or mean to go by, perhaps a bullet graph would work.

I have done a mock-up. I removed the 'right' arrow, which I assumed means 'show me more details about this category', and left it for users to just tap on the category title to see more details.

You can also vary the saturation of the bar to show importance - I am with everyone else in avoiding use of colour to give meaning. High saturation shows a warning, in terms of 'this is bad, pay attention to it!'

You could also swap the bullet graph for a spark line to show how it has changed over time.

Answer 8

I'd avoid to convey information only with colors. Green for "up" and red for "down" is not an universally worldwide accepted pattern (and color blind people may not see them). Given the fact that you don not need color then I'd simply drop it. Use a gray symbol, color is not needed.

To better give sense of trend (and to clarify symbol meaning to don't confuse it with move actions) you may use a slashed arrow ↗. Any other option? Pick the most universally understood symbols: + and -.

Now the second point is how to highlight if positive trend is a good thing or not. You do not need to charge your UI with symbols and colors, what you probably need is to highlight only when a trend is bad. This solution has three pretty good outcomes:

• You keep your interface simple, no unneeded symbols are visible. You do not overload users brain with unessential information. This is especially true in your case because you said it's a dashboard.
• Users have not to learn any convention (thick down arrow is bad, thin down arrow is good and so on...)
• You immediately highlight what should be noted (a bad trend). If nothing is shown then current trend is a good thing.

To put everything together in a mock:

^{download bmml source – Wireframes created with Balsamiq Mockups}

In this example I prepended the upward/downward trend symbol but it may be moved to another position according to your overall app style (and it probably need to be smaller, BTW). Note that it may be omitted when view is filtered because it's redundant.

Which symbol (! in my example) is best one depends on many other factors: is it an alert or you just want to highlight it? Should an immediate action be taken? Is it something dangerous? Note that you may even drop this extra symbol and replace + and - (for example inverted colors or circled/boxed icon) but it may be much less clear if alert is not limited to few items (because you can't immediately understand which one is highlighted and which one is not). You may also use other techniques to highlight an item, hundreds posts about this are available.

Addendum: you may want to read Effective Dashboard Design by Stephen Few.

Answer 9

Consider separating the list into two sublists, one of "things which are good when they increase" and one of "things which are bad when they increase".

I'm not sure what your exact business domain is here, but it sounds like you have income generating items and liability generating items, so why not just make two lists? This could be done "in-line", i.e. in the same vertical list, but with a divider, or on separate pages. In either case, segregating the two types of item would make it much clearer.

Answer 10

One thing to note in general, without considering implications of arrow cardinality or color: arrows that point straight up or down are confusing in general, since they can have multiple meanings:

• This row can be collapsed or expanded by clicking the arrow;
• This row can be moved up or down by clicking the arrow;
• This row has changed in value compared to last time;
• This row value can be changed by clicking the arrow.

The problem is that an arrow that just points in a cardinal direction has been used for different meanings historically. However, if your arrow points in an eastern intercardinal direction, so up-right or down-right, the arrow is no longer implying one dimension, but two dimensions instead, where one dimension is heavily implied to be time.

While this does not solve your problem directly, I do think it's something worth keeping in mind that can help resolve ambiguity in other aspects.

Answer 11

Why not show a numeric % change?

You can color the text green/red to help non-color blind people know if the number is good or bad (in the case of a negative percentage for one category being a good thing); color blind people would still have access to the same information at a glance without the courtesy of a text color hint.

Answer 12

How about simply a green circle for good, and a red circle for bad? I don't see how this portrays less information than your arrows - assuming that they universally agree with your assessment's that down in one category is bad, and up in another category is bad.

Answer 13

It's cool to care about colorblind people. I suggest to think a bit outside the box and to put a colorblind option in the app settings. This way you can switch to more adapted colors