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 visitors as comfortable as possible.
Before we dive in, if you want to learn more about user experience (UX) and other essential SEO skills, you should check out our All-around SEO training! It doesn’t just tell you about SEO: it makes sure you know how to put these skills into actual practice!
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, We’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:
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.
One more thought about the shopping cart overview. Usually, a cart also has a coupon code option. We 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. There are many instances 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
We 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. 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, like at Newegg.com:
It’s an extra step and it’s not improving your checkout page UX as such. Instead of that, you can ask customers to fill out their shipping details first and then ask them 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 namedelivery/invoice addressemail addressIn 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 our recommendation would always be to keep the entire checkout process in the same look and feel, most people won’t be scared away by a payment pop-up or something like that. Most online shoppers are used to that. And 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:
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, you should consider sending 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 customers up-to-speed on their 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. We think the checkout page UX shouldn’t have to differ much per webshop. And the checkout page UX shouldn’t discourage potential buyers from completing a purchase.Read more: Shopping cart abandonment »
Amy is a content manager at Yoast. She enjoys writing about SEO and digital marketing, and she is particularly interested in how content can create trust.