The Ecommerce Guide To Checkout Optimization - Chapter3
The Ecommerce Guide to
Checkout Optimization
3Checkout Process
The multi-step process that ends with the customer placing their order is called the checkout process or checkout. Its primary goal is to capture the necessary information from the customer to finalize the order and complete the shopping experience.
Checkout is a linear process. Here, you do not want the customer to decide which way to go. Instead, you want to “push” them through the process, and get them to the final goal, the “thank you” page, which is displayed after the order is confirmed.
3.1. Checkout page layout
Since the goal of the checkout page is to push the visitor through the process, it’s necessary to eliminate all possible elements that may interfere with that goal. By having fewer clickable options or other distracting elements on the checkout page, there is less chance that the visitor will deviate from the intended path.
For this reason, the layout of pages in the checkout process is different from other parts of the online store, and we advise removing everything not directly related to order placement. If your store structure has two or three columns, we recommend switching to a one-column layout and removing the side columns. This will remove menus, offers, and so on, and leave only the elements important for order completion.
Macys.com is the perfect example of an effective layout for a checkout page. All navigation elements, search fields, offers, and menus disappear, and are replaced by trust-building elements. The page displays only the necessary information. Unfortunately, all of the checkout steps are displayed on a single page, making it a little time-consuming and difficult to view.
The Best Buy checkout page is quite traditional. It features a multi-step process with minimum-content side elements that feature trust-building information. Increasing the position indicator and text size at the top would make them more readable. Generally, this is the direction to follow.
Keeping a simple and clear layout to your checkout pages is vital to ensuring customers continue to move forward through the checkout process.
3.2. Position indicator
As they move forward, a customer should always know where they are in the process, what the next step is, and how far they have to go. The most basic tool for this is the position indicator, the importance of which increases with each step. If the customer inputs information and then clicks the “continue” button only to land on an additional data entry, they must feel like they are getting closer to the end, they must feel a logical progression. Otherwise, they will quickly lose their patience.
The best position indicators use text, numbers, and even graphics to show progress, making it clear to the customer where they are and preparing them for the remaining steps.
A very simple, but clear solution by Omaha Steaks
Position indicators are often graphics, but if they cannot be clicked, they should be created to “blend in” with the site design and to emphasize the graphical elements that play a role in moving the customer along through the remaining steps, such as the “Continue” button.
An increasingly common solution is to place the entire checkout process on a single page, and guide the visitor through the process from top to bottom. It’s important to make every step of the process clear and easy to follow. A good example is the American Eagle Outfitters online store. The process is easy to follow and predictable, the transfer between steps is nicely animated, and the visitor can see a continuous summary of the order status at the side.
When creating your checkout page, it is important to consider the length of the checkout process and how many steps your visitors must go through. Every step requires additional actions from the visitor and they can lose their patience at any point. Keeping this in mind, the checkout process should be as short as possible while still collecting all the necessary information.
Another important aspect during the design of the checkout is the amount of information on a single page. Here you must consider two aspects:
- Include only as much information in a single step that fits in a single screen without making a visitor scroll. This is not always an option, especially at different browser and screen resolutions, but, according to statistics, “shorter” pages are more effective and have a greater chance of completion.
- The contents of a page should not be overcrowded and “threatening”, but descriptive enough that at first glance, the visitor should know what to do and what data to enter, etc.
As these two requirements contradict each other, a compromise is necessary. The majority of large online stores usually create a multi-step checkout processes, but if the selection options are fairly evident and you do not ask for a lot of data, you can use a checkout process with fewer steps.
Target has their data entry and shipping method selection step on a single page, and they constantly inform their customers about the current state of the order in the side column. The position indicator shows that the process has moved shipping — the more important step for the customer — to the front, increasing the motivation to proceed.
3.3. Data entry
Data entry is the most important aspect of the checkout process. It lets the customer know where and when to ship their item and it ensures payment. This is done using a form, which can sometimes be cumbersome to complete. Because of this, we recommend this part of the checkout process is done as late as possible.
One method of facilitating the data entry step as much as possible is by making sure to only request information absolutely necessary for the purchase. From a marketing point of view, this may seem strange as this is an excellent opportunity to collect demographic information, but this can be a mistake. You might gain insights about how to target your marketing, but you’re likely to lose the sale.
Every addition to the data entry form complicates the customer experience, putting obstacles in the path of the visitor and increasing the chance of cart abandonment. Only request additional demographic information when the customer has tangible benefits to gain, you’ve communicated the benefits to them, and the entry of additional data is not mandatory. You can try to get more demographic information at another time after shopping or through a follow-up email.
Another method of facilitating data acquisition is to offer the visitor the opportunity to register and create a user account. This allows returning customers to skip data entry with a username and password combination. In this case, the first step of checkout may not be a data entry form, but a page where returning visitors can log in or new users can register an account.
The first step on Target’s site is for returning visitors, with the most prominent page element being the sign in form.
You can facilitate registration using different tools, such as social logins using Facebook or Google accounts, an email address and username, or by asking for the username and password in the last step and not during data entry.
However, registration cannot be mandatory; you must provide your customer with freedom of choice, typically known as “guest checkout” for sites that offer registration. When you do use registration, provide a short but detailed explanation of the advantages it will provide, for example, subsequent order overview, wish lists, extra discounts, or loyalty point systems.
American Eagle Outifitters offers the creation of a user account in the second step, and provides a short explanation of its usefulness.
Zappos offers the option of logging in with an Amazon account. However, at the same time they offer the option to register an account with them and show the advantages of doing so.
Whatever tool you use, you must make sure that visitors can easily modify any data they have entered, should they find a mistake. Omitting this will almost surely cause cart abandonment.
Upon logging into Amazon, shipping addresses can be added, selected, deleted, or edited with just a click.
Making it easy for your customers to enter only the information needed for checkout will reduce cart abandonment. Making it easy to login on sites that require registration, and always allowing guest checkout will give you the best chance to please returning customers and new visitors.
3.4. Shipping methods
The next step in the checkout process after data entry is generally the shipping method selection. If only one shipping method is offered you can leave this step out, but you must communicate this single method everywhere as clearly as possible.
It’s important to clarify the advantages of each shipping method. If you just list two or three carriers but do not tell the customer anything about them, they will pick the cheapest one. It helps to highlight the lowest cost shipping option and the fastest shipping option as these are the main concerns for buyers.
Looking at the American Eagle Outfitters site again, we see they offer the shipping method details in the first step, and in their case, there is only one shipping method, but there is no question as to what will happen next. The shipping identifier, time, and cost are displayed as the most important information, and often nothing else is required. If anything else is required, clicking the “details” button at the top displays more detailed information in a popup window.
3.5. Payment information and methods
Entering payment information and choosing the payment method is typically last. Depending on the site, payment may be processed directly on the site, or the next step may be a third-party processor such as PayPal. After completing payment there, typically the customer is automatically returned to the site where they are displayed a receipt or summary of their purchase.
When the next step will take a customer to a third-party site, it’s important to indicate this. You can do this with a “Pay with PayPal” button separate from the standard “Confirm Order” button, or a note that says “You will be securely directed to PayPal for payment after clicking above”. Whenever possible it helps to tell your customers what will happen next.
Some ecommerce sites use offline payment methods: cash-on-delivery, bank transfers, cash-in-advance, checks, or cash payments in store. After the order is complete, the payment itself takes place later. When using both offline and online payments, be sure to make a clear distinction between them.
3.6. Order confirmation page
The order confirmation is the last step in the checkout process where a customer reviews the details of their order one last time. You may wonder why this step is needed, considering the cart page listed all the items. However, using a confirmation page is vital to ensure that there are fewer incomplete orders and customers are aware of what they’re purchasing so there’s no confusion later.
True, visitors can still change their minds at this point, but according to statistics, it’s not typical for them to back out here. Having spent time and energy entering data, they very rarely abandon the purchase at the order confirmation page.
This page should have all the information the customer has entered, the summary of the ordered items, and a “Place your order”, “Complete your order”, or “Confirm your order” button.
Amazon's purchase process is worth examining. It’s extremely clear and rather special due to their 1-Click-shopping process. They have several steps of the purchase process on their summary page. Additionally, they’ve realized that the customer is not interested in the carrier, only the speed at which they deliver, so they offer the option of choosing the shipping speed when selecting the shipping method.
The order confirmation page is the last step in the checkout process, and all the same rules apply here. Keep it simple and clear and make the next step obvious by having a well-contrasted “Place your order” or “Confirm your order” button.
