Enclosing or isolating the checkout process is one proven method of reducing abandonment, as it focuses the customer's mind on the steps they need to take to complete a purchase.
I've been looking at the advice on this from Econsultancy's Checkout Optimization guide, as well as some best practice examples from retailers...
What is an enclosed checkout process?
An enclosed checkout is one which is stripped down compared to the rest of the site, by removing the header and footer content, and any left hand navigation menus.
According to Dr Mike Baxter in the Checkout Optimization guide:
In place of the header should be a company logo in the top left of the page – this can be linked to the home page as the only 'escape route' remaining out of checkout, or simply left as an image.
In addition, Dr Baxter advises that the footer during checkout should provide links to information about delivery, returns policies, contact options, and privacy and security.
Crucially, these links should be displayed in a pop up layer or lightbox over the checkout page so that customers can view the information without being taken out of the process.
Reasons for enclosing the checkout
When reviewing e-commerce websites, one of the areas I always look at in whether retailers have isolated the checkout. This is the rationale behind it:
- By leaving out navigational elements, all unnecessary distractions are removed and this allows the shopper to focus purely on completing their purchase.
- Thanks to the removal of these distractions, information which gives the visitor confidence in their purchase is made more prominent, such as delivery details and customer service contact details.
- Security logos and messages are more visible, providing reassurances for the security-conscious shopper.
- It is made absolutely clear to visitors where they are within the checkout process and how many steps they have left to complete their purchase.
- Apart from the homepage link, customers can only head in one direction, towards the payment and order confirmation page.
Examples from retailers
This example from the new Paperchase website shows a process which has not been enclosed. The navigation menu and search box are still in place at the top of the page, providing plenty of potential distractions for shoppers:
The foot of the page also retains the links from the footer, all of which could take customers away from the checkout:
Tesco has removed the main navigation and site search options, but there are still 15 links on the page which will take customers away from the process.
River Island has successfully removed most distractions from the checkout, with the only links on the page showing delivery details, contact options, T&Cs and security info.
However, all of these links open up without warning in a new window, taking customers way from the checkout page. Showing these in a lightbox over the page would have been a better option.
The ASOS checkout is about as enclosed as you can get. Apart from the logo which links back to the homepage, there are no links at all on the page:
This is certainly free of distractions for shoppers, but perhaps some information on delivery and returns, as well as contact details, should be provided for customers that need this.
Finally, John Lewis provides an excellent all-round example:
The process is enclosed, and the links for key information open up in a pop-up window which is easy to close and keeps the customer on the page.
For retailers yet to introduce an enclosed checkout process, I would recommend testing to see if this works for them in terms of reducing abandonment.
Full enclosure, as in the ASOS example, may not be suitable for every retailer, as they may find that customers need more hand-holding during the checkout. By testing some of the variations used in this post, the results will tell you which version will deliver a better conversion rate.