Testing the Checkout Process – The Progress Bar Design

If you do not know where to start improving the conversion rate of your website, here’s an idea: start by improving your checkout process. Very often, testing and improving this process is the fastest and cheapest approach to optimize your website.

There are various elements and methods to test the checkout process, but in this post we will focus on a single element: the progess bar.

A sample Progress Bar during the checkout

You can improve the conversion rate by doing just a simple A/B test (compare two variations of a same element/page) and measure the results by comparing how many people are reaching the common goal page (C).

Do not expect double-digit miracle growths just because you changed this design element. However, even a small percentage increase means more revenue at almost no cost for you.

You should test

A) Your existing design againstB) A new design based on our guidelines for creating a checkout progress bar (see below) and set the goal page asC) the “Receipt”, “Thank you” or whatever your goal page is.

Guidelines for designing a more persuasive progress bar

On a previous post we’ve analyzed how more than 100 e-tailers are guiding visitors through their checkout process. Based on the analysis regarding a better design for the checkout progress bar, we recommend:
1. Display the numbers of steps (only for 1-5). Do not count and display the numbers if your process has more than 5 steps. Numbering the steps will let the customers know how long the process will be, but if you display more than 5 steps it may scare them away

2. Provide a sense of action to visitors by including an arrow, pointing to the right. This will help them to know they are going in the right direction (forward). This may seem obvious to you, but it helps to reinforce it.

3. Highlight the current step of the checkout process the visitors are on. Make the icon and the text of the current page different than the other steps in the process

4. Include a page called “Review Order”, “Order Confirmation” or something similar. Many times users will go through the checkout process just to get additional information (like shipping cost). They will not proceed further if they don’t know at which step their credit cards will be charged.

5. Keep the checkout process short, under 4 steps if possible. Try to combine the shipping and billing page in a single page. Do path-splits tests (we’ll have a special post on the subject – stay tuned)

6. Design a horizontal progress bar! Do not try to be too smart, as very often visitors seem to be confused with website navigational elements.

7. Address anxiety issues with your bar. Display words like “SECURE” on the top or the side of the progress bar

8. Provide a small “confidence of mind” element right next to each completed step. This can be a small, green “check mark” and will let visitors know they have correctly completed the previous step.

Notice: below we have a sample checkout progress bar that we think addresses all the concerns above. Although we consider our proposal to be an improvement to most of the other progress images we analyzed, you should only use it as a guideline and adapt it to your website’s needs and rules.

Two Good Progress Bar Samples

Keep in mind that not all businesses are alike and you may want to rename the pages in your process. This is why we provide a PSD version (checkout progress bar sample), where you can play with the names and other design factors.

Traian is Director of Search Marketing at Pitstop Media Inc. He has more than 11 years experience in helping small and medium businesses generate and convert organic traffic from search engines. Connect with Traian on Google+. He is also the author of the Ecommerce SEO book.