What is an enclosed checkout process?
An enclosed checkout is one which is stripped down compared to the rest of the site, which is usually achieved by removing the main navigation menus.
According to Dr Mike Baxter in our 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.
Here’s the basket page from John Lewis, with all of the navigation options on view:
As we continue into the checkout proper, these options are removed, and the page is stripped down with few distractions.
People may still need information. so sites should provide links to information about delivery, returns policies, contact options, and privacy and security.
Ideally, 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.
I should add that it’s important to provide a route out of the checkout for those customers that need it, otherwise they’ll resort to the back button.
Some may want to check their basket contents, or may have decided to buy something else at the same time (which makes the John Lewis ‘continue shopping’ link a good idea.
Reasons for enclosing the checkout
This is the thinking behind enclosing checkouts…
- By removing navigational elements, unnecessary distractions are no longer visible. This allows the shopper to focus purely on entering the details necessary to complete their purchase.
- Thanks to the removal of these distractions, information which gives the visitor confidence in their purchase is more prominent.
- With the main navigation removed, it is clearer to visitors where they are within the checkout process and how many steps they have left to complete their purchase.
- Apart from the homepage or continue shopping links, customers can only head in one direction, towards the payment and order confirmation page.
Examples, good and bad
Let’s start with a checkout that hasn’t been enclosed, from Boots:
While some elements of checkout best practice are on show, such as displaying checkout steps and security logos, the overall look is poor.
By retaining the top navigation and footer links, Boots is taking the customer’s attention away from what should be the main focus – completing their details for the purchase. Indeed the address form fields and calls to action are less visible than many other elements on the page.
Now a better example, from Fallen Hero. This is enclosed to the max:
You could even argue it’s too sparse since, aside from the logo link to the homepage, there are no links, meaning no info on security or delivery for one.
This example from House of Fraser gets it about right. Distractions are removed, and adding the live chat option is a great move, allowing customers to have any last minute questions answered.
However, the ‘help’ link takes you away from the checkout, and pressing the back button to return to the payment page produces an error page in Chrome.
Mulberry has a well enclosed checkout, with a useful link to customer services and a prominent contact number.
It also opens links in a lightbox so that customers can view information without leaving the process, while retaining a link back to the basket page for those that need it.
There are a number of different approaches, but the general idea of removing distractions is sound and has been proven to increase conversion rates.
Of course, the best implementation is something to be arrived at through testing different versions until you find the most effective one.
What do you think? Have you implemented this on your site? Which is the most effective version for you? Let me know below…