On our intranet we display some numbers for our employees so they can keep track of their performance goals. Currently it's just a table.

enter image description here

We'd like something more visual, and this was the first thought I had:

enter image description here

Along with this variation for when you are behind your YTD goal:

enter image description here

But this looks too cluttered. I feel like this type of visualization should already be a solved problem but I'm having trouble coming up with the proper search terms to find better examples I can emulate.

Does anyone have a better idea for a visualization? Or maybe an example somewhere they could link to?

  • I'd take your first image, and remove the top arrow and the bottom line. The location of the "actual" is represented by the bar (green in your example - could be changed as per others' feedback), so the arrow is redundant. And the line ("goal YTD") is just not needed - the arrow conveys that. (I'd put the "Goal YTD" text below the arrow, not next to it.) May 1, 2013 at 3:38
  • Have you looked at the bullet graph type of visualization by Stephen Few (en.wikipedia.org/wiki/Bullet_graph). I think you could easily adapt this to your requirements and avoid the use of excessive colour in your proposal.
    – Michael Lai
    Sep 5, 2013 at 23:52

3 Answers 3


I find just using the colors as the demarkation a bit harder to understand. You can use a vertical rule to act as a placeholder for the goal, YTD or annual, depending on the day.

Your focus should be the goal and how much over or under you are. What I mean is there is not enough value of showing the actual numbers when you are just bother to about the differences in values. Highlight the difference and keep the progress and the goal in the background. Since John already tested the colors I am trusting him ;) and using the colors. Blue is the employee's actual value, red is amount less than goal and green is amount over goal.

The idea being, the person should be able to see how much over or under the goal they are:

  • Fig 1: More than goal, green
  • Fig 2: Less than goal, red
  • Fig 3: More than annual, green again

Also, making them interactive will be beneficial. You don't need anything fancy necessarily, just some mouse over labels showing the actual values or something which adds more information in context.


download bmml source – Wireframes created with Balsamiq Mockups

If you want to go extreme, you can grey out the blue progress and just show the vertical rule and the red or green box. Just show differences no need for progress.

  • I really like this. Do you have a suggestion on how to display the actual numbers? That is important for these users.
    – longneck
    Apr 24, 2013 at 20:54
  • Edited the answer. I assumed that more hours are good, but you can just reverse the colors if that is not the case.
    – rk.
    Apr 24, 2013 at 21:10

I had a very similar problem recently, and did some user testing on it. The main thing that came out of it was that we should avoid colours that have a common meaning. So yellow was a bad option, and green represented 'good', not 'acceptable'.

In the end we used grey as the neutral background colour, blue as the progress for 'expectation'; green as 'exceeded expectations'; and red as 'below expectations'. This tested well with users. Something like this:

enter image description here

Please note that the colours here are for demonstration. You should use better hues that are less 'in your face'.

  • Good advice on the colors.
    – longneck
    Apr 23, 2013 at 20:09

The main issue is not with colors, although JohnGB has some valid points on this.

i would go with something like this in order to avoid the confusion with colors.

enter image description here

  • I like the stacked appearance. I don't think I would use it for my intended audience, but I do see an application for a more technical (IT, etc.) audience on another project I'm working on. Thanks!
    – longneck
    Apr 24, 2013 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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