Checkout & Conversion Rate Optimization

The number of eCommerce offers is increasing. Users no longer have to leave their four walls to shop. An elementary component is the checkout. This contributes tremendously to the conversion rate. Where to start? In this article, I’ll introduce you to nine tips I’ve used to help customers in the past.

The checkout receives too little attention.

Landing pages and product pages get – rightly – a lot of attention. To my surprise, I keep seeing that especially in semi-sized eCommerce shops, the checkout is neglected. Especially during checkout, every UX measure has a direct influence on the conversion rate. With increasing eCommerce offer the customer is quickly frustrated, jumps off and makes his purchase with the competition.

If you don’t have an exclusive deal, you run the risk of losing the customer if you are not user friendly.

Content:

  • Do not force the visitor to register
  • Tell the user what to expect and where he is – Progress Track
  • Avoid steps that are not necessary to make a purchase
  • Create peace of mind and focus on completing the purchase when the customer is in checkout
  • Avoid frustrated visitors with Instant Form Field Validation
  • Design experiences instead of filling in forms
  • Analyze the mobile version of the checkout separately
  • Avoid unexpected (delivery) costs
  • Take the customer’s safety concerns away
The checkout contributes tremendously to the conversion rate and thus to sales. If you need professional help to tackle the topic properly write me

1. Do not force the visitor to register

Site operators know that a new registration is important. A relationship is established that can make the new customer a regular customer. Good reasons to register. Nevertheless, this is an exclusion criterion for some visitors. You cancel the purchase.

How can you strike a balance between winning a potential regular customer and minimizing the bounce rate?

Timing is everything!

The visitor has landed primarily in the checkout to complete their purchase. Not because of registration. Put their need – which is also immensely yours – before yours. After a successful purchase, the registration can be pointed out.

Zooplus puts its foot in the mouth by advertising the registration several times before the purchase is completed. Making it an “every time” possible bounce rate for the potential customer.

Keep registration as simple as possible

You already have most of the data you need to register. Please don’t ask about it again. Apart from the password, the customer should not have to fill in any other forms.

Give the customer a reason to register

With growing eCommerce offerings and new apps, we are asked to sign up somewhere more often than ever before. To be honest: If there’s no good reason for me, I’m not signing up anywhere. It’s gonna be just like you. The customer will have no other choice. Offer him added value. These could be: discounts, exclusive deals, extra products…etc.

2. Progress track – tell the user what to expect and where to be

A checkout is usually a process that is spread over several pages. A Progress Track Bar shows the user where he is and what to expect. Gamification elements such as percentage display, animated checkmarks and bars can be considered here.

3. Avoid steps that are not necessary to complete the purchase

The bounce rate increases with each field to be filled in. Leave only the most necessary fields in the checkout. I’ve seen things like “How did you hear about us”, “Would you recommend us?” at the checkout. The additional collection of information in the checkout is out of place.

Timing is everything! (again)

From a marketing point of view, it makes sense to collect data about a customer. But please do it after the customer has confirmed his purchase. As already mentioned above, you can motivate to participate in a survey with discounts and exclusive deals.

Pro Tip for Freelancer and UX Designer in Project Teams

Sometimes you meet resistance. The person who has placed unnecessary fields (in the worst case: product owner) in the checkout usually does not like to give in. On the suggestion to remove them, it can happen that you are proudly presented the data bundle that the fields have collected. Data should never be collected for data alone. How is this data used? Is it “nice to have”, or “must have” data? What ROI does this data achieve in comparison to the increased bounce rate?

Testing hypotheses

The above hypotheses should be tested. Minimal conversion rate increases can make a significant difference even for mid-sized eCommerce shops at the end of the year. The data collected from fields that are not necessary must be able to compete with this.

…hypotheses should be tested. Minimal conversion rate increases can make a significant difference even for mid-sized eCommerce shops at the end of the year.

4. Create peace of mind and focus on completing the purchase when the customer is in the checkout

Many checkouts have distractions. The linking of social media channels is a good example here. These are all distractions that increase the bounce rate.

Remove all links that do not contribute to the transaction

I even removed the logo link of the start page for customers to optimize the conversion rate. Anything that does not contribute to the sale should be removed. No related products and no reviews. Create peace and focus on sales. For social media links: If possible, point this out after purchase!

As soon as you enter the checkout at Amazon, everything unnecessary is aggressively removed to complete the purchase…

…Amazon’s homepage, on the other hand, looks like a completely different website. Brand building through corporate identity should not happen during checkout, but before. The checkout is just one thing: Sell.

If elements cannot be removed, hide them

Try to make the elements accessible via the UI interface with two clicks. This can sometimes be a good compromise when you meet resistance.

5. Avoid frustrated visitors with Instant Form Field Validation

The visitor fills in all fields to complete the purchase as soon as possible. To then see sobering after pressing the Send button that half of the entries were invalid. How can frustration be avoided?

Instant Form Fields

Let the user know directly if the entry is valid or invalid. An invalid entry can thus be corrected directly. This costs less effort than having to make a handful of corrections at once.

Eventim helps the visitor fill in the forms with direct feedback

Help with filling in the form

Support the user in filling in the fields. In some cases it may be appropriate to explain what this information is needed for.

6. Design experiences instead of filling out forms

Make the input of the data as comfortable as possible for the user, especially in mobile.  It is exhausting to enter information via the mobile keyboard. Controls, buttons, click areas and calendars contribute to a good user experience. This type of data entry can even be fun, for example, apps about interactions motion design.

The Asos app offers to recognize my credit card number via the camera. This enriches the user experience and is almost fun.

7. Analyze the mobile version of the checkout separately

Depending on the target group, the mobile version of the checkout is more important than the desktop version. Sometimes it is just the result of the Responsive Desktop variant. Our mobile attention span is lower, so we run the risk of risking higher bounce rates. From this, one can deduce that the mobile checkout needs special optimization.

Click areas and input fields should be large and visible

Make sure that all click areas and input fields are easily accessible. The Google Guidelines for optimal click areas and link sizes on mobile devices are a good starting point here

Make sure that the most important typing destinations on your site – the ones your users use most – are large enough for easy operation. If your display area is configured correctly, they should be at least 48 CSS pixels high or wide.

– Google guidelines

Separate analysis of mobile checkout

The Mobile Checkout topic can fill your own mail. This will follow in the future *cough*Newsletter!*cough*. Long Message Short: Looks at and tests the mobile checkout separately.

8. Avoid unexpected (delivery) costs

Unexpected costs that are only displayed to the customer in the last step of the checkout can be true show stoppers. First and foremost, one thinks this is related to the additional costs. Maybe.

Ever thought about free shipping?

An easy way here would be to beat the shipping costs on the price to be able to advertise with free shipping. Many eCommerce sites cannot afford this, because competitiveness suffers.

So what to do? Not all visitors are afraid of delivery costs. But all visitors want open communication.

Avoid breach of trust through surprising additional costs

A product was offered to the visitor for a fixed price for the entire duration of the visit. In the last step, the additional costs are added at once. The jump here is a defiant reaction. The customer feels deceived. With certain delivery models it is not logistically easy to clarify the delivery costs in advance. A realistic price range over any additional costs works wonders here. The visitor is informed from the outset whether and which additional costs await him.

Often the fresh view of the checkout is a miracle to track down potential conversion killers. Need help with checkout?
Write me

9. Take the customer’s safety concerns away

Sensitive data is not gladly entered into websites. Understandable. How can the user’s concerns be minimized?

Encrypt website and actively communicate the encryption

Must-Have for eCommerce sites is an SSH encryption. The lock is displayed in the browser bar. By additional communication of this encryption you relieve the user of the concerns of security. This can take place via a castle with a short explanation. The element should be visible throughout the checkout, at best near the respective Call to Action buttons. Optionally, this can also be included near the means of payment (or those of the input fields).

Creates trust with well-known brands

If well-known brands have written about you before, or are directly connected to you, you can trust them. Displays the marks (do not link! see point 4) discreetly in the checkout. These give you a feeling of awareness and therefore trust in the customer.

Conclusion: Testing, Testing, Testing

Each year, Google holds a conference on sales conversions at its headquarters in Dublin. The topic for 2017 was “Converting Mobile Consumers”. Booking.com’s Director of Design Staurt Frisby said the following:

“If it can be a test, test it. If we can’t test it, we probably don’t do it.”

– Stuart Frisby

The checkouts of the big ones are permanently tested. Adjustments are made daily. Hypotheses are confirmed or rejected by real users. Good checkouts don’t happen overnight.

In short: There is no one-size-fits-all solution, only principles and guidelines to guide you. Optimization and adaptation are a continuous process. Many small optimizations result in a user-friendly checkout. This increases the conversion rate substantially.

Do you have feedback, questions or input about the topic?
Write me on Twitter or comment the article.
Maruan

Maruan

Maruan has founded marumedia, a small digital product design agency based in Hamburg, Germany. Furthermore, he does consult in UX/UI design and development. He created marumedia.net to share his journey, learnings, pains, and lessons he encountered while doing so.

Leave a Comment