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.
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.
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:
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.
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.
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.
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:
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.
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).
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:
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.
Please feel free to drop your pet peeves and ultimate annoyances in the comments. I would very much like to hear your grief.