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 ?

  • Colourblind people can't tell the difference between your reds, greens and possibly yellows. Jul 31, 2014 at 23:26

4 Answers 4


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.

  • Our upvote/downvote buttons use this, too, don't they? Seems intuitive to me. :P
    – Alex
    Jul 31, 2014 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, 2014 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

  • +1 for thinking outside the box, though I don't think it's really intuitive
    – stefan.s
    Apr 27, 2015 at 11:01

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.


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

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.