Enclose the checkout

The only place you want customers to go, once in the checkout, is to order confirmation and payment, and enclosing is about removing all potential distractions. 

What to look for in your checkout:

  • Are all header, footer or navigational links removed, except those needed for checkout (e.g. product description, delivery, security, returns, etc)?
  • Do all remaining links present information in a pop-up layer?

Here, the John Lewis checkout page contains none of the navigational links from the rest of the site. 

Make checkout steps clear 

At every stage of checkout, the customer should know where they are in the process and what remains to be done before purchase is complete. 

What to look for:

  • Is there a clear and simple progress indicator, e.g. progress bar on each page of checkout or checkout sections arranged vertically in accordion design?
  • Does the progress indicator reflect the actual process being undertaken? 

Here, House of Fraser customers can easily see the steps already taken and those that remain. 

Navigation within checkout

Customers should be able to navigate back and forth within the checkout to view and edit all steps in the process, without losing the information they’ve already entered. 

What to look for:

  • Does the browser back button work without giving warning messages?
  • Does the browser back button take customers where they expect to go?
  • Do all navigation buttons/links on the page go where they are meant to? 

House of Fraser’s progress summary steps are linked, so customers can easily skip back to edit or check previous information. However, using the browser’s back button will generate a ‘confirm form resubmission’ message, which isn’t ideal. 

 

Provide a persistent summary of checkout information 

To minimise the need to navigate within the checkout, customers should be continually reminded and reassured about basket contents and the information they have entered.

What to look for:

  • Are basket contents visible throughout checkout?
  • Do product details show thumbnail, title, variants, quantities and availability?
  • Is the total price (including discounts, taxes & charges such as delivery) visible throughout checkout?
  • Does a summary of data / options entered by customers expand as checkout progresses? 

Here’s an example from MyGlassesClub

Avoid loss of information entered by customers 

There can be few more annoying things than sites deleting information you’ve already entered. 

Information entered by the customer should never be lost through navigation or page refresh.

What to look for:

  • Is all checkout information submitted to the web server and protected against loss?
  • Is checkout status recorded so that an interrupted checkout resumes where it left off?
  • Are contents of abandoned baskets saved and re-presented to returning customers?
  • Are returning customers identified and appropriate checkout fields pre-populated?

Be clear about session timings  

Customers expect items added to their basket to be available to buy, so exceptions to this should be minimised.

If they do happen, they should be communicated clearly to the customer. Customers should never discover that an item they thought they’d just purchased was, in fact, out of stock. 

Some sites, by their nature, will need to provide a time limit. Ticket sites are one such example. 

What to look for:

  • Is stock reserved for the duration of checkout?
  • Is stock availability communicated clearly to the customer prior to checkout?
  • If not, is stock checked immediately prior to order confirmation?
  • If there is a time limit on checkout (or session duration) are customers informed of the time limit? (Applies only if time limit affects customers checking out normally without interruption)?

I could write a whole post on the UX issues on Ticketmaster, but it does at least make the session timings clear here: 

Form design

Forms should be as clear and concise as possible, should us standardised web elements and should be optimised for usability. Customers should never be asked for any unnecessary information. 

Badly implemented forms can be a real barrier for potential customers, frustrating them to the point where they give up. 

What to look for:

  • Is only necessary information asked for?
  • Are single-item drop-down lists avoided?
  • Are compulsory fields identified (with a *)?
  • Are radio buttons used instead of drop-down lists where it is helpful for customers to see the available options without clicking?
  • Are checkboxes used to confirm consent?
  • Does the size of form fields indicate how much information is expected?
  • Are guidance notes and examples offered adjacent to form fields?
  • Are labels top-aligned on short forms?
  • Are labels right-aligned on longer forms?

This is a great example from Threadless. The simple text in brackets next to form fields deals elegantly with a number of potential input problems. 

Validation and error-trapping

Customers want flexibility to type in what they want. Minimise error- trapping, provide clear messaging about the nature and location of errors made and corrections needed.

What to look for:

  • Is error trapping checked for necessity?
  • Does error messaging indicate the nature of the error and how to fix it?
  • Does error messaging appear at the top of the page and next to form field containing the error?

Here, Autoglass either approves or corrects as I complete the form with clear messages, saving me from wasting time submitting incorrect details.  

Calls to action

The design, labelling and positioning of submit buttons should provide clear calls-to-action that drive the customer towards checkout completion.

What to look for:

  • Are submit buttons noticeable, visually isolated and visually consistent across checkout in terms of both design and positioning?
  • Is labelling of submit buttons clear and unambiguous, providing effective calls-to- action?

Trust

Trust is engendered by a range of factors: reliable site performance with clear navigation and messaging, inclusion of company contact details and assurances of privacy and security of personal information.

What to look for:

  • Is secure server used throughout checkout?
  • Are logos of 3rd party verification shown, and linked to valid certification?
  • Are company contact details given (including full postal address and phone number)?
  • Is sales support featured prominently?
  • Are links to terms and conditions given throughout checkout?
  • Is total price given on entry to checkout, with no hidden charges?
  • Is the site compliant with legal standards for information security management?
  • Is the site checked for errors in copy, broken links etc.

Offer guest checkout

Many customers do not want to register before purchase, so give them the option to create a password at the end of the checkout process, and highlight the benefits of doing so, such as safe storage of personal information and order tracking.

Making customers register before checkout is a barrier, and sites that have removed this have reaped the benefits. 

What to look for:

  • Is guest checkout offered?
  • Is email captured at start of checkout? 
  • Is the reason for email capture stated?
  • Is email address validated?
  • Are the benefits of registration highlighted?
  • Is the facility to retrieve forgotten passwords offered whenever password is asked for?

Keep address capture nice and simple

For both name and address capture, keep it simple unless you have a compelling reason to make it more complicated. Don’t ask for too much and deter customers. 

What to look for:

  • Is simple, standardised name and address capture employed?
  • Are superfluous fields avoided?
  • Are address fields auto-populated where possible?
  • Is a checkbox provided to indicate that billing address is the same as delivery address?
  • Is delivery and returns information provided alongside address capture?

Here, Net A Porter provides links to delivery and returns information alongside the address form: 

Delivery and gift options

Offering delivery and gift options in the basket allows customers to proceed to purchase with the total price already confirmed.

By repeating these options in the checkout, customers can update their choices if required.

What to look for:

  • Are delivery and gift options presented prior to checkout?
  • Are delivery and gift options also presented at some point during checkout?
  • Are gift options offered, including:
    • Gift wrap?
    • Gift message?
    • Removal of price from delivery note?

Payment capture

Standardise forms to simply and clearly inform the customer what information is needed and any discounts that apply. Also provide reassurance on the privacy and security of details entered.

What to look for:

  • Are methods of payment indicated prior to, and throughout, checkout?
  • Is 3D Secure Authentication best practice followed (if used)?
  • Is customer informed at start of checkout that payment authentication will be required? Is the logo shown prior to authentication page?
  • Is guidance offered to customers on need for, and completion of, authentication?
  • Are discounts/vouchers applied prior to checkout?
  • Are details of discounts/vouchers repeated in checkout summary and/or at the point of payment with opportunity for the customer to apply, check or edit them?

Order summary 

A clear order summary at the point of submitting payment leaves the customer in no doubt as to what they are just about to purchase, what form of payment they are about to use and how & when it will be delivered.

What to look for:

  • Is a persistent order summary/order summary page presented containing all transaction details?
  • Is editing of all these details possible?
  • Is the customer encouraged to complete purchase with a clear call-to-action?
  • Are there links to information on privacy, returns, terms and conditions?
  • Does the checkout progress indicator show clearly that this is the final stage of checkout? 

Order confirmation

Clear messaging on screen should provide customers with the reassurance that their purchase has been successful.

Targeted promotions on the order confirmation page and in order confirmation emails can be used to encourage repeat purchase.

What to look for:

  • Do order confirmation emails conform with distance selling regulations and contain all details pertaining to the transaction?
  • Do order confirmation page thank and reassure the customer without necessarily repeating all the details in order confirmation email?
  • Do promotions only appear either before the checkout has commenced or at order confirmation?
  • Are promotions on order confirmation page and in emails targeted?

For more, see our comprehensive Checkout Optimization Best Practice Guide