If you do not know where to start with improving the conversion rate of your website, here’s an idea: start by optimizing the checkout process. Very often, testing and improving this process is the low hanging fruit to increase conversions.
There are various elements and methods to test the checkout process, but in this article, I will focus on a single element: the progress bar.
You can, and should, improve conversion rates by A/B testing (comparing two variations of a page, or visual element) 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 one design element. However, even a small percentage increase 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 you name the goal page as.
Guidelines for designing a more persuasive progress bar
In a previous post, I analyzed how more than 100 e-tailers are guiding visitors through their checkout process. Based on the analysis, I recommend the following:
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 hurt your conversion (test this hypothesis).
2. Provide a sense of action to visitors by including an arrow icon, pointing to the right. This will help users understand that 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. Display the icon and the text of the current page differently 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 on a single page. Do path-splits tests.
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 “peace of mind” element right next to each completed step. This can be a small, green checkmark to let visitors know they have correctly completed the previous step.
Notice: below you can see a sample checkout progress bar that might address all the concerns above. Although I consider this design proposal an improvement to most of the other progress images I analyzed, you should only use it as a guideline; adapt it to your website’s needs and rules.
Keep in mind that not all businesses are alike and you may want to rename the pages in your process.