Alternative graphical representation of a goal achievement?

Question

The client has a set goal X that he wants to achieve every month and he wants this represented graphically and I agree that it would be a good way for people to easily see how far along they are.

The question I have is that I simply can't think of any ways to do this, other than either a basic bar graph or telethon style goal thermometer. Both of these I think are tacky and overused. I would like to do it in some other way, but not sure what would be best.

This will be done in Javascript or Coldfusion, either way it doesn't matter only the end result matters. I don't necessarily need code, but ideas of what would be the best way to represent this type of data in a way that isn't overused. This is not a discussion or really an opinionated based question, I'm looking for someone to give me some ideas/links in a well thought-out manner.

Answer 1

Stephen Few's bullet graphs are ideal for comparing performance to other ranges and/or targets. I've used Jquery Sparklines in javascript extensively and found it easy to use and very capable.

A potential downside of bullet's is that they might not be easy to read the first time a user sees them. However, a very brief explanation or an explanatory image with some callouts like the one I've shown below can rectify that. And once someone learns how to read it once, the value of the bullet is reused many times.

Below is an image from wikipedia that shows the basics of how to read it. If you're concerned about your users not understanding how to read it at first, I would suggest even putting a small "Help" icon beside the graph so people can click to see a quick popup similar to this image that explains how to read it:

Answer 2

It depends on the goal, and what are you using the indicator for. The two patterns that you already mentioned are very common (which is good) and you can make some adjustments in each one of those to make them fit better the purpose of your application.

The progress bar is a common design pattern, it's "overused" because it is a standard and thus the good thing is that users will certainly understand it. It is commonly associated to gamification: the way that you use to show graphically where the user is with respect to the final goal is using the progress bar and when the goal is reached you usually issue a reward, e.g. a badge.

There are a lot of apps, trying to tackle this kind of problems, with really nice UI/UX and they still use the progress bar, although they try to innovate on the UI side in the end it's still a progress bar (it can be continuous or discrete/steps, linear or circular).

You can check out some fancier variations and inspiration here and here (see the circular one).

As an alternative bar charts with a goal line are another interesting possibility. However you have to ask yourself if the user will benefit from having a bar chart for reference of past times or other categories or if it will just clutter the graphical representation.

Answer 3

It would be useful to know what the chart/graph is measuring and what the goal of the chart is.

Here are couple more ideas:

1. Seeing statistics about other people could help motivate users to reach a goal.
2. There was also an interesting study (I cannot find it unfortunately) where users where encouraged to use their computer in energy efficient way by changing an image of an animal; the less efficient the scarier the image was.

Answer 4

if the goal is broken down into a small number of discrete steps to achieve towards the goal, then percentage progress bars are not very instructive of progress because of the abstraction and disassociation with the steps. better to say how many steps left to complete...and hopefully provide a prominent way of displaying next step(s). ihpone apps such as "super better" come to mind. on the other hand if it's all a matter of (crude example) shoveling additional coal into a stove each day to reach the monthly goal...then by all means a percentage or similar progress bar works well.