/CSS/ Perfect your progress bars
30/07/2010 | Filed under Develop > CSS
Improve your conversion rates in online stores and surveys by paying more attention to progress bars and their underlying markup, says Craig Grannell
When I started writing this tutorial, many people were finishing up their Christmas shopping, which has been made somewhat easier in recent years by the joys of the internet. We say ‘somewhat’, because although online shopping is considerably less stressful than constantly barging your way past dozens of slowly meandering, bag-carrying dodderers, virtual stores are still missing a few tricks and that extra bit of polish that could make them more usable.
One issue becomes apparent once you’ve filled your basket with lots of exciting things and decide that you should probably get around to paying for them. You visit the checkout and go through the process, aided by a progress bar that shows how far along the process you are. Except that it doesn’t always work like that, because the majority of progress bars are built with little care and no concern for fall-backs.
Generally, a progress bar is a single image, updated on each page, sometimes (but not always) with relevant ‘alt’ text. If this image, for whatever reason, doesn’t make an appearance (which happened to me several times on one visit – presumably due to heavy load on the various websites – and thereby inspired this tutorial), your position in the checkout process isn’t visible. More importantly, this shows what the progress bar for that particular store is like for anyone using assistive devices such as screen readers. In some cases, users get nothing at all to show their progress.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
What do you put on your chips? All-spice, vinegar and, if I’ve some to hand, some kokteilsosa
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
