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 offers ROI based internet marketing services such as landing page testing services and conversion rate optimization services. Our A/B and multivariate tests have helped companies increase conversion rates by as much as 75%. Let us increase your conversion rates, too!
About Traian Neacsu
Traian is the founder and Director of Search Marketing at Pitstop Media Inc. He has more than 10 years experience in helping small and medium businesses generate and convert organic traffic from search engines. Most of his time is dedicated to growing the company and spending time with the family. Connect with Traian on Google+
Previous & Next Posts
You can follow any responses to this entry through the RSS 2.0 feed, Both comments and pings are currently closed.
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!
Sapna said:
Apr 11, 11 at 5:17 amThanks for this survey, as with so may best practices floating around its difficult to pin point, the best is to test and check with real users and this survey gives an idea on what can work.
Wholesale said:
Apr 29, 11 at 9:36 amNice post! Some stores neglect details like these that could make or break their sales. They have to make sure the consumers feel secure and sure about the purchasing system of an online store. Sadly some stored don’t even have progress bars and this leads to double-clicking complications.
Marc said:
May 05, 11 at 6:27 amThis came in handy when choosing a style for our skate shop website and its checkout process. Thanks for your effort!
55 Cool New Ways to Use Landing Pages said:
Jan 26, 12 at 2:29 pm[...] Multi-step lead forms + progress bar. According to a survey from Pit Stop Media 52% of online retails use some sort of progress bar during their checkout [...]
Shemsedin said:
Jun 11, 12 at 3:55 amhi,
that’s a nice collection. I need to implement this in one on my site http://www.oxwebs.com as they are really helpful to show the users where on the process they are.
johnsmith said:
Oct 09, 12 at 10:47 pmNice info about online retailer. I think about that and will try to implement in my own business.
Best Practices And Examples: Designing A Better Mobile Checkout Process | Photography in Australia said:
Mar 14, 13 at 6:11 am[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Best Practices And Examples: Designing A Better Mobile Checkout Process | Society of Global Technocrats said:
Mar 14, 13 at 6:24 am[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Mymarketing » Best Practices And Examples: Designing A Better Mobile Checkout Process said:
Mar 14, 13 at 8:00 am[...] studies ѕhοw thаt thе majority οf major e-tailers ѕhοw a progress bar, although many implementations leave much [...]
Best Practices And Examples: Designing A Better Mobile Checkout Process | DigitalMofo said:
Mar 14, 13 at 9:01 am[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Today’s Links | JohnAspinall.co.uk said:
Mar 14, 13 at 9:17 am[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Best Practices And Examples: Designing A Better Mobile Checkout Process said:
Mar 14, 13 at 5:01 pm[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Designing A Better Mobile Checkout Process - rehavaPress said:
Mar 14, 13 at 8:16 pm[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Designing A Better Mobile Checkout Process | Photography in Australia said:
Mar 14, 13 at 9:28 pm[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Designing A Better Mobile Checkout Process | Feeds said:
Mar 14, 13 at 10:35 pm[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Designing A Better Mobile Checkout Process | Diancin Designs said:
Mar 15, 13 at 12:35 am[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Designing A Better Mobile Checkout Process said:
Mar 15, 13 at 3:50 am[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Designing A Better Mobile Checkout Process | Concept Web Studio said:
Mar 16, 13 at 5:15 am[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Jonathan Lampe said:
Mar 18, 13 at 2:19 pmAwesome side-by-side comparison of a critical usability component. I may just do something like this for my little niche!
Designing A Better Mobile Checkout Process | eSolution Inc said:
Mar 19, 13 at 1:08 pm[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Designing A Better Mobile Checkout Process | Creative Online Journal by Emrah Akman said:
Mar 29, 13 at 3:15 pm[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]
Design A better Mobile Checkout - Turn2Mobile said:
Apr 16, 13 at 11:52 pm[...] studies show that the majority of major e-tailers show a progress bar, although many implementations leave much to be [...]