The Progress Bar – A Survey Of 100+ Online Retailers
Tags: check out page, check out process, check out progess bar, check out steps, checkout page, checkout process, checkout progress bar, checkout steps
The checkout process of an ecommerce site represents the number of steps taken by visitors in order to get the products from virtual shopping carts/bags delivered to their doors. It is the path from a click on the checkout button to the “Receipt” page . Some visitors are required to go through more or less “steps”, depending on the site where they buy the products from.
Very often, website owners asks themselves (or others) what is the best number of checkout pages for their websites. To quote Dylan, “The answer, my friend, is “testing” in the wind”. There is no such thing as an universal number of steps that works for all websites. The magic number of steps depends on your audience and how you address their concerns, friction and anxiety factors. The only way to find your “perfect number” of checkout steps/pages is to A/B test different length and paths of the checkout processes.
We took screenshots of more than 100 major e-tailers and we analyzed how they display the progress bar image during the checkout process. If you want to go directly to the images, without reading the survey results, just scroll down a bit or click here.
Despite the fact that there is no universal progress bar to address all website or business, there are however, some rules you need to comply with. We’ve marked the “DO’s” in bold and green.
One of things we are surprised to discover is that several e-tailers don’t even have a progress bar. More than 10% (12 out of 111) of them are not displaying the bar, which can be confusing for their visitors.
Let’s see what we got:
1. Are e-tailers numbering the steps in their checkout progress bar?
Yes – 52
No – 47
2. Do they provide a sense of action to visitors (any arrows symbolizing the “move forward” action)? We considered numbering the steps as a strong “sense of action”
Yes – 80
No – 19
3. Highlight the current checkout page against the rest of the pages in the process?
Yes – 98
No – 1
4. Do e-tailers provide a “Review Order” or “Confirm Order” page?
Yes – 75
No – 24
5. How many steps do visitors perceive when they look at the progress bar?
2 – 3
3 – 21
4 – 30
5 – 38
6 – 6
7 – 1
6. Is it the progress bar displayed horizontally or as a vertical list?
Horizontal – 92
Vertical – 7
7. Do e-tailers address any anxiety concerns in the progress bar? For example, telling visitors that the checkout process is secure.
Yes – 6
No – 93
8. If the checkout process has more than five steps, how many e-tailers are numbering the steps?
13 out of 38
9. How many e-tailers are grouping the Billing and Shipping Page in a single one?
27 out of 99
10. How many e-tailers provide some confidence of mind to visitors by marking completed steps as “being correctly done”?
1 out 99 (1800contacts.com is the only one)
Enjoy the Progress Bar collection:
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Pitstop Media is a Vancouver based conversion rate optimization company which offers results oriented landing page testing and conversion rate optimization services. Our A/B and multivariate tests have helped of companies increase conversion rates by as much as 75%. Let us increase your conversion rates, too!
Related posts:
Websites tagged "progressbar" on Postsaver said:
Nov 07, 08 at 12:47 pm[...] – CHECKOUT – Progress Bar Survey saved by spiralgirl2008-11-06 – Silverlight 2 Release Candidate saved by galactikfan2008-11-02 – [...]
Craig Higdon said:
Apr 09, 09 at 10:35 amDefinitely going to pass this link on to our designers. It’s a great survey of progress bars.
If you’re interested, we’ve created a bunch of custom AspDotNetStorefront checkout progress bar. Take a look.
Randy said:
Jun 17, 09 at 9:02 pmMy god, I can’t believe how much work you put into this. Pretty incredible. Giant Thank you. It’s crucial stuff (your whole site really) and seeing the bits in comparison is huge. I wonder if it’s possible to start assembling the “ideal” cart/checkout system….I’ve been hunting for a best-practices model but nobody’s really approaching it as a whole package. Also, could be interesting to allow people to vote on design elements here – see what people are responding to.
TraiaN said:
Jun 17, 09 at 9:21 pmRandy, thanks for the nice words. We don’t post very often, bet when we do it, we make sure it’s solid information. Regarding your request for checkout best practices, well, it’s not an easy one. There are thousands of business models and probably hundreds of ways to approach the checkout process. The only “best practice” I have in mind is testing the process it self (split path testing, or A/B testing). I hope it helps.
Mark Kimsal said:
Oct 18, 09 at 9:32 amAlmost a year later and this post is still great. I saw this page and didn’t bookmark it, then I spent 2 days searching for it again. Just seeing all the different designs next to each other is great.
TraiaN said:
Oct 20, 09 at 1:34 pm:) I’am glad it helps you…
QUORVIA said:
Jul 21, 10 at 4:32 amThis is Still one of the best checkout resources on the web!
Many thanks for providing it!
Collection of Continue Shopping Buttons | Internet Marketing Company said:
Jul 21, 10 at 5:19 pm[...] posts I’ve tried to provide e-commerce designers with collections of checkout buttons and progress bars. This time I thought they will find it useful to look at the Continue Shopping [...]