I Am Sorry, But Your Checkout Procedure is Lame

I found out about that product after a Google search. That phrase may seem romantic, but the targeted ad chased me for a month over the Internet. 

The store’s website comforted me, said it would be a love story. It had everything to be.

I put the item in the cart and pulled out the credit card from the wallet. But the checkout, when it came, put out the flame of impending passion.

Parodies aside, the web is full of the most diverse checkout processes.

Many try to reduce the friction of online payment and approach the ease of using credit cards in the real world. 

There, you don’t have to worry about the data printed on that piece of plastic – just put it in the terminal, enter the password and confirm.

Other checkout pages don’t even seem to work. They bet on long forms, ask unnecessary questions, overload the screen of distractions, do not give security guarantees, among other factors of UX and UI that can make the consumer give up the purchase.

According to data from the Baymard Institute, the global cart abandonment rate in e-commerce is 69%. 

The checkout process is one of the factors that influence this number, although not the main one. 

But that is no reason to ignore it and fail to create a great payment experience for your customers.

Especially since it is a factor that depends on the website itself, not the customer.

Short form, vital fields

Nobody likes to fill out forms. The shorter and more accurate your checkout, the better. This is a privilege that digital products and services can – and should – enjoy. 

That website that schedules publications on your social networks does not need your physical address or phone number at the time of purchase.

Questions that help you understand your customer’s profile and do not influence the purchase should also be out of checkouts. 

Companies often include fields that only serve themselves, not customers.

It is optional information that could very well be requested at another time.

AO Checkout Form

It is natural that product e-commerce – as in the example above, from British e-commerce ao.com – needs more user data, which can lengthen your checkout process. The solution comes next.

Multiple step checkout

On the desktop, the impact of a long form is bad. On mobile, it is disastrous. Divide your checkout into more than one page. 

Remember to guarantee the user the possibility to navigate non-linearly through these stages, in case any changes are necessary. 

In addition, store the values ​​of the fields already filled in, so that he does not need to enter the same information again.

It is recommended to remedy this need for navigation by using links or editing buttons embedded in a summary of the user’s checkout information (items in the cart, amounts charged, delivery and billing addresses provided, delivery forecast).

This summary is usually placed in a block on the side of the page and accompanies the customer throughout the process, as in the Ambassador checkout, below.

Ambassador Checkout Form

Progress indicators

“The journey is what matters, not the destination.” This is not a very good maxim for a checkout.

The consumer is much more relieved when he knows what stage of the process he is in and how many steps are still needed to complete it.

A progress bar is enough, as long as it is simple, clear and precise, like the ones from Square, That Clean Life and UI8 below. 

Cleanlife Checkout

Titles for each stage and different colors for the states (“completed”, “in progress” and “rest”) are essential.

You can also use an accordion design, which expands and retracts as the client progresses.

Guest checkout

To buy on a website for the first time, it is usually necessary to create and confirm an account.

Although this is good practice, it can be a hindrance to conversion and extend your checkout even further.

You can, of course, implement a registration button via Facebook, Google or any other social site, which alleviates friction.

But have you considered removing the registration requirement for purchases, as we see in the checkout of BestBuy.

Bestbuy Checkout

Jared Spool, founder of the web usability consultancy User Interface Engineering, tells how one of his clients increased his website’s annual revenue by $300 million just by replacing the Register button at checkout with a Continue button, accompanied by the following message:

“You don’t need to create an account to buy on our website. Click the Continue button to proceed to the checkout.

To make future purchases faster, you can create an account during checkout ”.

Exude confidence

Consumers are increasingly aware of signs on the page and browser that can tell them whether a site is reliable: // in the address bar; the padlock that represents the security certificate of the page; verification service logos that lead to the respective security certificates when clicked.

Your checkout process must take place on a secure server. Score. But there are other visual and performance tips that can increase a user’s confidence in your site.

Information about your company and means of contact is one of them.

The checkout summary itself during the process, as mentioned before, gives the idea of ​​transparency – the customer knows what they are buying all the time.

Your website should also be fast, with no crashes or long loading screens, and it should work without errors.

No distractions

Isolating your checkout from your website not only helps to improve the performance of the process, but also prevents your customers from thinking about other actions besides completing the order.

Compare the Typeform checkout UI below with their website layout, for example.

Typeform Checkout

There is no reason to use the same standard layout of your website – especially the product catalog used in e-commerce – during the checkout process.

The user has already shown the intention to buy – you no longer need to act as a seller. This is something that can stay for an email from a future campaign.

But at the same time, it is important that your customer feels – and is – still within his environment.

The checkout for Typeform takes place on their website. This is very clear when we look at the browser address bar or the visual identity of the page, for example.

It is the concept of transparent checkout: the user should not be taken to any other page at the time of purchase.