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 work with a resource management web application. I have a grid of numbers (resources forecasts). I need to show in this grid if the numbers are over or under a reference (resources capacities).

I thought about display the numbers from YELLOW to RED when it's an "over-forecasting" (= conflict). Then I use GREEN when the forecast match the capacity (= everything is perfect).

But I don't know how to display the "under-forecasting" (below the capacity). It's a real business problem too but I need to distinct it from the "over-forecasting". I don't know if a neutral color can do the job (blue ?)

Here is an example of my grid :

mockup

download bmml source – Wireframes created with Balsamiq Mockups

If John Smith had a capacity of 5 for june the forecast 12 in the grid will be RED. If Mick Jagger had a capacity of 5 on june too, the forecast 5 will be GREEN. If the capacity is 10, the forecast 5 is BLUE (not convinced with this color...).

Do you have any suggestions in order to improve the UX in this grid and display the under- and over-forecasting ?

share|improve this question
    
Colourblind people can't tell the difference between your reds, greens and possibly yellows. –  David Richerby Jul 31 at 23:26

4 Answers 4

up vote 6 down vote accepted

The first thing that comes to mind for me is the little inline arrows you see in stock tickers.

stock ticker

The arrow indicates whether the actual value is above or below the forecast, and you can still use a gradient from yellow to red to indicate how far away the actual value is from the forecast.

share|improve this answer
    
Our upvote/downvote buttons use this, too, don't they? Seems intuitive to me. :P –  Alex Jul 31 at 19:14
1  
I thought about the little arrows first, but I think it describes more a direction (increase/decrease) than a comparison. I'm not sure about the user feelings with these arrows. –  Alex Aug 1 at 7:47

The arrow idea is quite nice, but it gives a direction, which isn't really relevant to your use case. Since you only care about where the value is, not the direction it has moved.

What about a simple icon with a midpoint and a dot? You can colour them or leave them black.

enter image description here

share|improve this answer

Like in accounting, red may more closely signify negative. Consider using shades of black for positive and shades of red for negative. This has worked well in my reporting for relaying the information to the user. See how this sheet visually communicates through these colors...

User Experience Reading List - 2013 v.3

Of course you don't want there to be any confusion, so you may consider including a "Key" that explains your color settings (I neglected to do that in my example)...

enter image description here

Remember also that when you fully depend on the visual to communicate this sort of information, you may be limiting your interface's accessibility for someone who is visually impaired. Many screen readers do not interpret colors of font.

share|improve this answer

How do users know what is the goal by looking at this grid? If a user sees red, doesn't remember their goal, they would get frustrated especially if they think they did well that week/month

In my opinion it would be better displaying a goal and number that they achieved, then there will be no need for colours. Also using colour is not going to work if any of the people are colourblind. Maybe something like:

  • 2/12
  • 3 out of 6
  • 1-3

Not sure how to display it to be honest

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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