Breadcrumbs to indicate the Checkout Progress
Thursday, June 18th, 2009
According to webdesignpractices, about 45% all all major websites use Breadcrumbs in some way. Either to help navigation or to indicate some type of progress.
At Supertext we didn’t do anything like this so far. During the ordering process, we just had a title to tell the user at which step he was and some info about the order on the right column.
So we tried a simple approach by just adding some text breadcrumbs into the title bar this like this:
But this example is bad for multiple reasons:
- No indication where the user is at the moment. Address should be highlighted or in a different color.
- No information about the following steps
- Look and feel is poor
We’ve now decided on something like this:
Just look at the new part below the title. There some other changes on this mockup too. Just ignore them. They will go online later this year. What do you think? It covers pretty much all issues that I mentioned above. No?
We modeled it after the example from swiss airlines:
Here are some other examples we looked at:
Doodle with their KISS approach. Not really breadcrumbs, but gives a progress indication too. Just not much more.
Did you find them? On the upper right corner. Yeah, I had to search for them too. But it’s all there. Where I am, next step, last step. But it does have some potential for improvments 
Another nice example is Amazon with the cart indicating where I am. Maybe we could use a pencil for Supertext?
Not very surprising, Apple also delivers with a simple yet elegant solution.
Another article that covers some of these topics is 12 Tips For Designing an Excellent Checkout Process on Smashing Magazin.