The last step in an online buying process is always the checkout page; your website’s cash register. It consists of a number of steps that lead to a completion of a purchase. In this post, we’ll discuss the things you can improve, from the UX of your shopping cart to a thank you page. We’ll tell you how to make your visitor as comfortable as possible.

Please realize that conversion and checkout page UX go hand in hand. Improving the UX of your checkout process will influence conversion as well.

Progress bar

One of the most important things to realize is that checkout page UX is actually about optimizing every single step (page) in the checkout process. Before going into detail, I’d like to mention your visitors’ best friend in the checkout process: the progress bar. It makes it visible for visitors how far along they are in the process. This actually results in gamification, which makes it even more likely they’ll finish the entire process.

At Yoast, we added a little motivational twist to improve the UX of our checkout page: a potential buyer starts in step 2 of the process. Step one is clicking the buy button and he has already done that, right? That deserves validation as well ;) Starting in step 2 is like giving them a head start and will motivate them to complete the purchase.

Shopping cart overview

A very important aspect of your checkout page UX is the shopping cart overview. Regardless of what product you’re selling, we think every shopping cart overview should at least have these elements:

• Product images. These help a visitor remember what products they have added to the cart. Shopping takes time and this is just a friendly reminder.
• Prices. Clearly state the price of an individual article, the amount per article and the total price.
• Shipping (and other additional) costs. Prevent surprises. No additional costs after this point in the checkout process, as it will ruin any checkout page UX!
• List of payment options. I actually think that payment options should be clear from the start, so from your product pages onwards. This will prevent disappointments like the need to use an authentication device when there is no around.
• Security signs. Clearly state that all is done in a safe, secure environment, for instance by a clear SSL certificate and things like Symantec seals. Testimonials also help for social security.

All these things combined create an optimal checkout page UX: a feeling of trust and convenience that will invite the visitor to complete the purchase.

Coupon codes

One more thought about the shopping cart overview. Usually, a cart also has a coupon code option. I totally understand that this is a very nice opportunity, but please realize the sale is almost done. No need to emphasize the coupon code option too much. I have seen carts where the coupon code button drew more attention than the actual checkout button, for instance due to size, position or color, like at Barnes & Noble:

My suggestion would be to replace that coupon button with a text link and make the “Continue” button blue instead.

Guest purchase

I understand that a user account is more convenient for the customer and will make return visits and future purchases easier. It’ll allow for wish lists, invoice history and save a lot of support questions about that. I understand it’s easier. However, creating that account is a barrier for a lot of potential customers and could lead to shopping cart abandonment.

Still, some of the largest online shops really force you to create an account for some reason, like at Newegg.com:

It’s an extra step and it’s not improving your checkout page UX as such. I like the approach where you fill out your shipping details first and are asked to create an optional account after that. A second option would be to ask the customer to create an account for future purchases after the actual sale.

Shipping and invoice address

The need to create an account

You know that once the customer trusts you with his personal details, it’s very likely they will buy at your store. If you ask them to create an account at this point, most customers won’t mind the question. Preferably, that question should be in the form of a checkbox: Do you want to create an account? Please list some of the benefits of that account. After clicking the checkbox, you could fold out some extra fields for a password and a “repeat password” field, just to be sure. Again, keep it as simple as possible.

One of the most important things any UX or conversion expert will tell you: don’t ask too many details in an online form. You don’t need to know their pet’s name, unless you sell dog food and want to send the dog a present on his birthday, of course. No, not even then! There could be a nice gadget in your sidebar for that, but during the checkout process, only ask what’s necessary. Usually, that means you only need to ask for a:

• company name (in case you’re selling to companies)
• buyer’s name
• delivery/invoice address
• email address

In a lot of cases, you don’t even need to ask for a phone number. And a simple checkbox will prevent them from filling in the same details twice: “Shipping and invoice address are the same”. Check. Of course, all these details are entered in a secure, safe environment and you’re using inline validation to guide the visitor through the form.

Payment

At this point, the visitor will most likely finish the purchase. In this step of the checkout process, the visitor will pick the payment method of his choosing and actually pay for the product(s). Although my recommendation would always be to keep the entire checkout process in the same look and feel, I think most of your visitors won’t be scared away by a payment pop-up or something like that. Most online shoppers are used to that.
As mentioned earlier: prevent surprise costs like additional shipping or other fees (or tax for that matter).

After sales

Now that the deal is closed, you need to guide the visitor to the door of your shop, thank him for his purchase and tell him to come back anytime. Nothing new here, as this is exactly what we do offline.

Thank him for the trust in your company. Tell him that you’ll do anything to make sure he’ll get the products asap and that you’ll handle the shipment with care. That’s just the general text on that thank-you page. There are more things you can do here:

• Create account. If your website has that account option like we mentioned before, you could offer the customer the option to create an account for future visits (again). Explain why this is beneficial.
• Subscribe to a newsletter. Ask the customer to subscribe to your newsletter, so he can stay up-to-date on promotions to come and new products you might have for him. If the buyer is enthusiastic about your website and/or products, he’ll subscribe.
• Discount for the next purchase. Oh yeah, we like our discounts. There are multiple ways to approach this. Offer it every time (“5% on your next purchase”), or combine it with the newsletter option (“subscribe and get a $10 discount code”). Send an email a few days before the coupon expires to remind people about the discount. Chances are they will buy, just because they don’t want to waste that discount.
• Share on social networks. Your (happy) customers are your marketeers. Ask them to share their purchase or a general promotion for your online shop. They made the purchase, probably like your website and chances are they will be willing to promote your site/products.
• Track & trace. Perhaps this should be on top of this list. If the purchase was for a reasonable amount of money, or the product is something the customer wants asap, track and trace allows them to see where the product is at any time (for instance ‘in production’, in the warehouse’, ‘delivery on its way to your house’).

That track & trace can usually be done by an app or online. Next to that, I find it comforting to receive updates per email as well about delivery dates, delays and things like that. Domino’s Pizza even tells you via push notifications that your pizza is in the oven. Apple sends an email a week before the delivery of your new iPhone. That’s not an email you’ll consider spam, right? Feel free to keep your customer up-to-speed on his purchase/delivery.

As mentioned at the top of this article, this isn’t a conversion guide for your checkout process. It deals with your checkout page UX. I wanted to write this article due to a number of personal shopping experiences. I think the checkout page UX shouldn’t have to differ much per webshop, to be honest. And I think most of my experiences are not just my own.

Read more: ‘Shopping cart abandonment’ »

Please feel free to drop your pet peeves and ultimate annoyances in the comments. I would very much like to hear your grief.