UX for eCommerce checkout
Once the customer decides to ‘Checkout’ we need to provide them with the best possible user experience. And what is that user experience? The following steps are based on research into checkout design and our collective experience.
1. Simplify the page
Remove the navigation and any detail from the footer. Once the customer has decided to make the purchase we don’t want them navigating away from the checkout process.
2. New or existing customer?
The first step in eCommerce checkout design is to identify the customer. Are they a new or existing customer? If they are an existing customer – ask them to log in so any saved details can be retrieved – increasing the speed in which they can checkout. If they are a new customer – DON’T ask them to set up an account but instead just take them straight to the next step in the checkout process.
3. Illustrate the checkout steps
Once you have identified the customer, ensure you show to them the required steps for checkout. This will normally be the provision of personal, delivery and payment details. In that order. The most effective placement of these is across the top of the page so it is always visible and is immediately apparent to the customer. A ‘Confirm’ step is unnecessary as the Payment step will have a confirmation. Allow the user to navigate back through these steps. The right hand side can be used to display the order summary through all steps in the checkout process. This order summary should also include functionality to apply a voucher code which adjust the order total as applicable.
4. Personal details
Keep this form as short as possible only requesting details that are required for the checkout. This will generally be: name, email, phone and billing address. Don’t use address lookups for the billing address as most customers find these very frustrating. If this is an existing customer, the form should be prepopulated with the ability for the customer to update details easily if needed.
5. Delivery
Again keep this form short and prepopulate for existing customers. Provide functionality for the customer to easily copy the billing address to the delivery address. Use this form to upsell any other delivery options ie, Express Delivery.
6. Payment
All options for payment should be on this page. This includes ability to apply gift vouchers, pay with paypal or credit card. If people can pay with a gift voucher ensure the effect on the Order Total is illustrated and provide an Amount Due so it is clear to the customer how much (if any) that have to pay for with credit card etc. Ensure the call to action is labelled clearly to illustrate payment is happening at this step ie, Pay now.
7. All done!
The final step is the confirmation page. This should revert to the full header, navigation and footer. It should also include what the customer can expect in terms of the processing of their order and a description of how they can track their order if this
