Internet Marketing Company

If you do not know where to start improving the conversion rate of your website, here a catch: 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 in the checkout process, but on this post we will focus on a single element: the progess bar.

This is what we mean by the checkout progress bar:

checkout progress bar sample

You can improve the conversion rate just 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 a common goal page (C).

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

You should test:
A) Your existing design
against
B) A new design based on our guidelines for creating a checkout progress bar (see below)
and set the goal page as
C) 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 the checkout process. Based on the analysis regarding a better design for the checkout progress bar, we recommend:
1. Display numbers for steps (only for 1-5). Do not count and display numbers if your process has more than 5 steps. Numbering steps will let 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 right. This will help them 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 page step name, visitors are on at any step in the checkout process. Make the icon and the text of the current page different than 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 (think of a horizontal version), as very often they 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 bar

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

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

Two Samples of Recommended Progress Bar

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

Pitstop Media is a top company providing internet marketing services. We offer web design services to companies of all sizes, from startups to corporations. Please contact us if you need assistance with any of the online marketing services we provide.