UX Improvements For Checkout Process
"Checkout flow is where the money is at."
High motivation and “Easy to do” are a key component to generate more purchases through your checkout process. You’ll get frustrated if you have high motivation and it’s difficult to make a purchase on your site. And if you have low motivation, but it’s easy to do, you get annoyed.
Any lift on this page can make a noticeable difference to your bank account.
To Create An Account or Not?
By removing registration one company increased sales by $300 million dollars.
Offer a guest checkout. In case when you really want to get registrations do this on “Thank you page”, when user already ordered.
You also can offer a value if the user will create accounts on “Thank you page”. For instance, you can give them a coupon with discount or maybe order tracking and fast login next time.
Skip Unnecessary Steps In Checkout Flow
We don’t have to show a number of steps in checkout user flow. The more steps you have in this process the more exits you’ll have.
People tend to escape difficult things. It’s the most common pattern in behavioral psychology.
Our main focus here should be on removing useless steps and elements of the interface. Avoid unnecessary input fields in your checkout flow. Rearrange fields in clear groups.
We can cut this flow from 5 to 2 steps. And it’s a critical improvement that makes a lot better conversion as a result.
Avoid Generic Words Like “Continue” and “Apply”
You can confuse people if use too generic words. Especially in call to action (CTA) elements.
Do not use “Apply” button for distinct sections of a form. It’s usually confusing people if you place this button somewhere in the form. It’s better to use one action button at the end of the form or two buttons if you have several payment options as an example.
Reduce Amount Of The Fields Whenever It’s Possible
Some projects in the U.S. have a feature to identify the actual address by ZIP code. In this case, they can cut address, state and city fields. However, it takes some time to implement this kind of feature, but it’s a good improvement of user experience.
Add Descriptions Of The Fields
To make it clear for users that required information is necessary and you have a strong reason for taking it from your customers.
For instance, if you require Email you can add a description which says that this email for customer receipt and shipping updates. And phone field for shipping updates.
Also, it’s great if you use an example of a data format in each input field where it’s not obvious.
Arrangement Of The Form
It’s a common mistake to use several columns in a different group of input fields.
People should be focused in one field at a time to have a more comfortable feeling in the checkout process. I recommend using one column for forms here.
However, you can use free space in the second column to place informational blocks. Such as short information about the product that you are buying, service fees and total price.
Or maybe you have specific terms of shipping and you can mention it shortly in the second column and give a link on a page with details.
Colors and Copy
Don’t overwhelm the checkout process with design and unnecessary elements.
Use copy whenever it’s appropriate, but not too much. It shouldn’t distract users but motivate them.
Shipping To A Different Address?
You can hide the shipping address by default and let people make a choice to send goods on their billing address or click on a checkbox that says that you want to receive goods on a different address. In this case, your form can be expanded instantly with duplicated information from billing address fields.
Shipping, Returns, and Security
Is shipping free or it requires additional costs? When will they get the goods?
Let your customers know this information to make them feel confident during the checkout process.
Don’t Make Coupons Noticeable
People feel less special when they notice coupon field. And then distracted with question “How come I don’t have one?”. So, many go to Google to find a coupon and they can never return back to your website to finalize checkout process.
Instead of form try to use a text link “Got a coupon?” or something similar to this. Because the text link not so attractive. Especially, if you use subtle color for it. Just put it as the one of the last element in the queue. People will find it if they want to.
Validation Of Fields
I recommend implementing instant validation. So, people will be notified instantly that information format is correct or not.
Also, a subtle animation will be helpful, but not so important as the first recommendation. It’s just for boosting existing user experience. Please, do not overwhelm interface with this.
Credit Card Info
Ask for credit card info last. Let users fill out shipping information before credit card fields.
This is one another behavioral pattern of mankind. Once we start doing something, we feel like we should finish.
Use examples from real life. Payment form that looks like an actual credit card works better than the generic type of form.
In addition, use information about secure payments. Make it as a secondary info, but noticeable. People usually have a serious concern about security.