Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm working on a project where we will present the user with a grid of rows, each of which has a value that's too high or too low (a value associated with the row is higher or lower than the range it's supposed to fall in, and the user will take actions from there).

I want a visual way to represent at a glance which rows are too high and which are too low, but I'm not sure how exactly.

The original requirement specifies that a green "up" arrow and a red "down" arrow be used, but green and red have a good/bad, go/stop relationship. Both states in this list (too high and too low) are bad, so I'm afraid that having one be green would be confusing.

I had the idea to go with blue and red, similar to how Outlook represents high and low importance, but again red indicates "bad", but "blue" is also bad in this context.

Last idea I had would be to come up with an icon with both up and down arrows next to each other, with one being filled-in or highlighted and the other being faint/disabled, but another requirement is that the end user can filter out all the highs or all the lows (but not both) so having nothing but enabled arrows in one direction and disabled arrows in another direction might be pointless.

How should I represent "too high" and "too low" with icons and/or colors?

share|improve this question

closed as off-topic by Izhaki, Erics, 3nafish, greenforest, Matt Obee Dec 3 '13 at 9:34

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions requesting Icon Suggestions are off topic. While the subject of icons is on topic, there's very little value in soliciting suggestions for a specific icon in a specific context. See this meta post for more information about this topic." – Izhaki, Erics, 3nafish, greenforest, Matt Obee
If this question can be reworded to fit the rules in the help center, please edit the question.

3 Answers 3

I like your icons idea. Arrows juxtaposed with an exclamation mark (or Windows warning icon) come to mind...

I would advise against using color as the lone indicator. Up to 8 percent of men have some form of color blindness (It's also the reason Facebook is primarily blue, it's the only color that Mark Z. can really see).

share|improve this answer

Actually in terms of icons it is really hard to show too high or too low since there is no standard icon available.

There is a big chance of misunderstanding any icon with a red or warning symbol in it as a bad one as you said.

Why not use information icon with Message Balloons as in windows ?. Display and highlight/glow/blink the information icon in it. When hovered over the icon you can animate a tool tip/Message Balloon and inform the user the message you want to say (some thing like the records are too high or low, etc.)

This is one way we can be sure that users gets the exact message without any misconception.

share|improve this answer

I was thinking of an icon which is coupled with indication of both i.e, value is either high/low and it's wrong too. Arrow facing upward/downward with an "!" or "x". But, these dual-purpose icons could lose the charm of a simple symbol.

some quick dabble with the idea...

Just some quick play with the idea

share|improve this answer

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