What's the best way to represent a number which is over/under a reference?

Question

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 :

^{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 ?

Answer 1

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

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.

Answer 2

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.

Answer 3

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)...

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.

Answer 4

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