I'm designing a website which elements that have a "progress" property, a bit like change.org or KickStarter.
Both of these websites use the classic progress bar. We would like to innovate. What are good alternatives to the progress bar to indicate progress on websites?
I think you should consider whether or not you gain anything from deviating away from a progress bar. The previous answer (describing the Bullet Graph) might be good for displaying more complex values than just a percentage of completion, but it's not super understandable; whereas the progress bar is instantly understandable.
I would think that you should only try to improve what works if what works doesn't solve all of your needs. Being different just to be different can have serious drawbacks as far as users are concerned.
Of course, there's nothing wrong with coming up with a unique visual style for a progress bar while maintaining traditional functionality.
Northland International University has (a picture of) a progress bar that nicely indicates the guidance percentage and the exact amount.
However, whatever you do in order to innovate, don't fall into the trap of producing a large area that conveys very little information. Pie charts in particular, due to their round shape take up a lot of space but can sometimes represent just a single number.
Stephen Few covers this topic in his book Information Dashboard Design: The Effective Visual Communication of Data where he discourages wasted space using such mechanisms. He rates (his own!) Bullet Graph as a good mechanism to replace thermometer and progress style displays in dashboards.
Perhaps that is something you can utilize if you have some element of target and competitive nature to your progress.
For other innovative ideas - it's worth searching for progress bar or progress on dribbble.
The progress bar is the best solution for kickstarter for the following reasons:
So there are a couple of ways to find a well reasoned alternative.
Where do the mechanics of your site differ from kickstarter's? Is the deadline less important? is there less of a fixed goal? Is there maybe something like competition with other projects that's important? Say that you have projects competing for resources, then you might want to show how much of the total the current project has, and how much the others have, for instance with a stacked graph. If there is no significant difference to kickstarter, then you have bigger problems than the infographics.
Think of the information needs that the progress bar doesn't show. It tell you how far you have left to go, but it doesn't show you whether you'll get there in time at the current rate. it doesn't let you match significant events like fundraisers to jumps in donations. For these a graph like the YouTube page views or Google finances might be helpful.
YouTube:
Google Finances:
You can simplify them to the level of the progress bar. They put more emphasis on project monitoring than project description, but maybe that's a good thing for your site.
I had a quick look through dribble using the progress and progress bar search terms, and most people stick to the linear or circle (which is just a closed linear representation) paradigm. I thought one example is worth mentioning because it is a really good example of converting something logical to something that is visual in the context of the subject. Here is another example that illustrates creative use of the progress bar. I am hoping someone will update this discussion with something new that will drive some creativity in this area.
