These 11 tips will help you design successful checkouts
Designing a positive checkout experience that perform well above average is something you cannot learn over night. Many A/B tests in which your shopping cart is failing against competitors, may lead you to a succesfull final one. This is what I call a great story of improved progress.
The more layouts you design, the closer to producing greater ones you are.
You need to learn things like conversion rate, cart abandonment, billing information, payment methods specific to different countries and many other practicable things.
Our goal is to make the shopping experience easy and supportive for client’s customers. They’ve learned to expect the worst when shopping online and we must avoid that and show them the contrary.
Think more, design less
This isn’t a piece of work with a unique appeal, that we plan to post on dribbble, to get more likes and followers. It’s about numbers, profit, sales and the most important thing is: tocreate a perfect environment that allow income growth to occur.
Before we dive in…
Here are a few suggestions for when you’re designing checkout flows:
1. Study the Audience
Designingfor the user is a concept that seems to get lost so often, and we fail to remember that, a user is a human. Get disciplined and study your audience. Establish a meeting with your client, or send him a questionnaire.
Make sure you touch some common topics like:
What problems his customers encountered so far, within the actual checkout process?
What are their special traits and needs?
What is the cart’s abandonment rate?
In which category his products fit in: electronic delivery or physical goods?
Get aligned with the goals and voice of the company and you’ll be able to create a superb checkout design, that works most effectively for its audience.
For example, a checkout design for a company who sells software, is different than the one for a company that sells clothes. In the first example you don’t need to fill a physical address input, in order to receive your product, because an electronic key can be sent via email.
2. Provide Progress Map Indicator
A progress map indicator above the entire form, can visually inform our shopper that he is on the right track. I don’t encourage you to break a smooth and linear process, by inserting a mandatory sign up form in the middle of it, that holds nothing back but our user, from completing his purchase.
For a better understanding, I will show you a checkout design, that I did for my website. Here, the flow is structured into three simple steps and it looks like this: Shopping cart > Checkout > Finish
This image describes well at what stage of the checkout process our user is at, and how long there is left to go.
There are more alternatives of checkout purchase flows, that you can follow:
a) Shopping Cart Checkout
This is the standard flow, that almost every user is familiar with. Once you agreed with your selected products, you’re ready to proceed to the checkout page. If your payment is authorized, you can review your information on the thank you page. This is what I’ve used in my example.
b) One Page Checkout with Review
If you want to speed up the purchase experience, this is the perfect flow. A landing page with all of the three sections: shopping cart, billing & payment form. Add a different background on the payment form, to visually separate this two areas (billing from payment). Take a look at my landing page, for a better understanding.
The Continue button is the main call to action in this case, that redirects you on the review page, where you can hit the Place order button in order to finalize your payment.
c) One Page Checkout without Review
This is the shortest purchase flow with only two steps (checkout & finish). Very similar with the above one, except one thing: the place order button is on the same page. No review page required.
3. Don’t Use Any ‘Update Button’ to Modify a Value
There is an entire anatomy behind an effective shopping cart, but how can we actually build an effective one? Let’s start with the update button.
Every customer wants to simply adapt things within their cart, especially by increasing or decreasing the quantity of his desired product. Make it easy to modify and use AJAX for getting quick and real time results, without refreshing the entire page.
We all know that shoppers frequently change their mind and remove products from their shopping cart. A bad practice is to force them to enter the zero amount in the quantity input. Simplify the whole process, by adding a trash icon or a delete link next to each product.
4. Display The Gross Price from Start
How many times did you find yourself surprised, after you saw a final bigger price with all the taxes and shipping costs, included?
It can be very frustrating and I don’t know who to blame, I think it depends on how we get used to pay. We can debate here for decades, but I think the best approach is, to expose the gross price straight from the shopping cart. 8% buyers abandon their cart because they have to pay for taxes.
In my case the unit price is the same with total price, just to avoid any misunderstanding. Now, he is aware of what he’ll end up paying for.
5. Don’t Embrace The Coupon Code Redemption
Everyone is thirsty for discounts. We all love them. Who doesn’t want a discount? It feels good when you found a better deal, it makes you look smarter than other shoppers, who paid the highest price.
A coupon code input placed inside your cart, will throw people out to search for codes. If couldn’t found, they’ll most probably abandon the cart, because they know that someone, once had a better deal.
Companies offer discounts, when sales drop down. Lower prices, cheap products, great deals, more money and happy customers, except few ones: the loyal customers.
They are the ones who buy the most from you. Discounting your products after a period, will make them look foolish, because they couldn’t wait. Discounts devalue products, so brand wisely.
If you can’t have a meeting with your client, send him a questionnaire and ask him what kind of a brand is he running? A premium brand or a discount one? Does he want to have a discount coupon inside his shopping cart?
I don’t plan to use a discount strategy, if the name of my brand is premium ui kits. I don’t want to ignore the loyal buyers, so I don’t use coupon codes inside the shopping bag.
In order to achieve an effective design, you need to adopt the mobile first approach and then progressively design your way up for larger devices. Start with the essential features, cover all the hardest scenarios and you will be able to adapt your design with ease. This is the best strategy, that keeps you away from any unpleasant surprise.
The hardest thing is to create a simple thing
Imagine that you go with the opposite strategy: squeezing an entire content into a small screen. You need to do a lot of hardcodes and make unhandy edits around your content. Altough this process seems very unnatural and cause serious headaches, many designers still go this way.
Take responsibility and prioritize the mobile-first approach. Start with the smallest breakpoint (iphone 5), use its own native design elements as much as you can (see the quantity input), and then scale up.
Content is king
Turn limitations into benefits, learn to emphasize the most important features, and bring in front the reason why people visit your store: the products.
7. Save ‘Data Entry’ by Offering Compact Forms
Nobody wants to spend more than a few minutes to fill out a form, that’s why a good ideea is to create simple, compact forms that save time and reduce stress for our customers.
It’s all about the user in the end. Appreciate his efforts and humanize the entire completion process, by reducing the number of the unnecessary fields. Make it more enjoyable and you’ll end up with more sales and returning customers.
In my case I realized that I can move Phone, Fax number and VAT ID(for European countries), under the company’s details (for those who want to buy as a company). For instance,instead of having two inputsfor First and Last name, youcanmerge them into a single one named Full name or First and Last name to save more space.
Get the most out of your forms, by using contextual fields display. What exactly this mean is that some additional elements are activated by a certain action. For example if you select USas Country, fields like State, City and Zip code will appear immediately below and only below.
You can apply this procedure, on the main call to action, the Pay Now button or Place order, or whatever you want to name it. Fade out this button by decreasing its opacity and add that forbidden icon at hover, along with a tooltip, that generate an informative message, something like: complete the mandatory fields first. After that, the button will turn on.
8. Expose Descriptive Texts As Much as You Can
One of the main reasons people gave up on their purchase is because they couldn’t complete out a form. It is a designer’s role to create good and usable forms, that defeat any barrier in finishing an online purchase.
Many users have serious problems understanding, how to complete and what’s expected from them, when inserting data into an input.
Descriptive texts come in handy everytime. Wherever you want to place them, next or below to a label, it doesn’t matter as long as you provide clear instructions. If you have complex helper texts, hide them behind a tooltip that generates its content, when users hover an informative icon, but that’s not the best approach. Bring out to light these useful details, and your conversion rate might significantly increase.
Andrew Coyle has an amazing article on how to avoid some of the common mistakes, designers make, when designing web forms.
9. Include Country Specific Payment Methods
Payment details are the most important part within the checkout process. Adapt them for your audience and bring out to light all the descriptive texts, near to each label.
If you have an international business, with high orders amount, it’s always a good ideea to fidelize your customers, by offering them local payment options, relevant in their countries.
For example if your shopper is from Germany or Austria, you can bring up Sepa Direct Debit and Wire Transfer along with the regular Credit card and Paypal. Here is a list with the most popular payment methods by country.
10. Ensure User Security By Visually Inserting Trust Marks
Customers choose to shop more online, if offered with simpler and secure payment options. Even that, the credit card security and online payments fraud, remain the biggest issues nowadays.
People make business with you, only if they trust you and your company. If you don’t have a checkout page that hit that ‘safety note’ with trust marks, badges, or money back guarantee logos, good luck closing online orders.
Many of us, hesitate to introduce our credit card details on an outdated website, that doesn’t look secure enough. Here’s a short list with the most important security certificates, that ensure protective measures on your payment form.
PCI DSS— Payment Card Industry Data Security Standard
Every time you want to change something, A/B test and see if it improves the entire shopping experience. Listen to the customer’s needs and justify any change you make.
Keep in mind this collection of practices next time you design a checkout flow and tell me if it helped you.
Thanks for reading!
New awesome products, freebies and design inspiration, delivered weekly