Percentages and the ways they can be displayed in web pages are not exactly the hottest trend of the mill, but it’s something that bothers me for quite some time now.

When do we need progress bars in web design? Mainly when we undertake a multi-step task, like a survey or a shopping form. They can be replaced with step breadcrumbs (like in Amazon.com checkout procedure) but when the number of steps goes over the top, progress bars are really the only (visual) way to go.

In the desktop apps field, progress bars are used the whole time for portraying installation times, required time for completion of a copy-paste procedure and so on.

But in web design, their role is quite diminished. However, they cannot be taken lightly – they’re a strong visual cue of what is to be expected and help users with their notorious impatience.

I have just recently taken part in an IA survey, held by mr. Patrick Kennedy, and I noticed something strange – the progress bar used on the top right did not comfort me at all. On the contrary. Check it out:

So what’s my progress? I know the progress bar itself moves a little by each page I move on to, but exactly how much? Are there many more pages? Are there just a few? You can only theorize here, based on observations on how much the bar moves after each page. It’s all pretty vague.

How could this become more usable?

First of all, ditch the numbers. I already know that a progress bar has to start at 0% and end in 100%. Gimme the current percentage, that’s what I’d like. Don’t bother with showing the remainder as a percentage – that doesn’t really add to the information showed, but adds very much to clutter and confusion. Oh, and maybe add a page countdown to have me completely covered.

There you are. I’m happy now. May not be much, but at least there’s some actual info shown.