Want to improve shopping cart abandonment rates in your online store? Not sure why your customers leave the site before the last step? A question we often hear: what are some web checkout page best practices? Are there some rules to follow? So many articles cover the rules. For us, Rule Number One is: Don’t just blindly follow these. Always study the audience and design your web checkout process specifically to their needs. Here’s our detailed UX guide.
Maybe the future of e-commerce lies with no checkout at all. Uber replaced the painful web checkout process by automatically charging the credit card when the customer receives the service or product. Not every product has got there yet. We still fear the “shopping cart abandonment rate”, an acute problem in e-commerce.
Don’t fret a high abandonment rate — a large portion of this simply follows naturally from user behavior while shopping and browsing e-commerce sites.
Many users just go window shopping, comparing prices, saving items for later, exploring gift options, or just playing around while they check the latest fashion or gadget trends. We can’t avoid it. But you can do something to improve it.
These UX research methods can help you with this, and these tips can help you better react to user frustration during the whole process.
Here at our UX company, we hold sessions with our clients about metrics. We decide which data to gather to determine the direction and assess the value of what we create. Informed in part by metrics, we make critical decisions around content, design and product development.
But what do metrics tell us about the success or failure of checkout, the user experience, or design? Which metrics should we rely on?
Croll and Yoskovitz, the authors of Lean Analyics, tell us to definitely avoid vanity metrics. These numbers make you feel good but can also seriously mislead. Some examples:
Actionable metrics, on the other hand, help you react and take action. Check these out, although more come up in the book:
If you don’t have data yet because you have just started to design your website, then do benchmarking. Baymayrd’s site, for example, gathers cart abandonment rate statistics of 40 different online retailers. This can make for a good start, but cultural differences in user behavior in different markets can also occur.
Metrics paint only part of the picture: What type of problem might occur, what quantity does it reach, where does it occur, and how does it change with time.
For the “why” to happen, we need qualitative measures. Google Analytics does not tell you that.
We usually invite different types of users for discussions, new ones unfamiliar with the site and those who purchase regularly. We ask them about the context of their last shopping experience and the process of making decisions during each phase of shopping.
This can reveal surprises about what people think and the psycho-emotional triggers of buying your product. The “Jobs to be done” method provides a good approach to building your interview script.
We ask questions like:
Usability testing
If you have ever heard the story of the 300-million-dollar button, you no doubt did so in the ROI of usability testing. They changed the “Registration” button to “Continue” with a simple message: “You do not need to create an account to make purchases on our site. Simply click ‘Continue’ to proceed to checkout.
To make your future purchases even faster, you can create an account during web checkout.” And the result? The number of customers purchasing went up by 45%.
During the usability test, we ask users to show us how they used the site previously, or we give them a test account and ask them to buy something.
Delivery options – An example
Talking to customers of an online bookstore, we learned for example that people get scared when we show them a long list of pick-up and delivery possibilities.
They actually consider three things when deciding about delivery:
They make a priority order. If they need the book the next day as a present for a friend, they’ll agree to pay more for quick home delivery, otherwise, they are willing to walk to the shop and pick it up for free. So we added a filter by distance and time and a sort by price. In the end, they could choose from a shorter but more relevant list.
We also test competitors’ sites with users. It provides a great way to learn from others’ mistakes ;).
Not a scientific research method, but one can simply gather, group, and measure the typical cases when people contact support. This can help in understanding problems and reveal what to change.
You can also ask your customer service employees to throw in a UX question while solving various customer service tickets. Ask about anything from the website or application ease-of-use, the product browsing process, or the usefulness of product descriptions in making a purchase.
Also, the very questions your customers ask should pin your attention to specific problems. Do they frequently ask about obscured layout preventing customers from making a purchase or script errors blocking certain features during cross-platform or cross-browser usage?
A journey map can get to the heart of the user experience. Drawing data from analytics, interviews, tests and customer support together into a journey map can illustrate why an experience frustrates or delights people, and where opportunities to improve the product may lie.
You can analyze the different touch-points where people can get in contact during the phase of shopping and the alignment between user needs and the service you provide.
Once you have a possible new solution for the defined problem, make an A/B or multivariate test, and compare the results. You can also combine it with previous methods, like usability testing both variations, and clean up the design and copy before publishing for the A/B test.
….as we said, don’t just follow them blindly. Carry out your research and apply only the possibly relevant ones.
Let’s say the customer journey consists of three main steps:
An effective e-commerce web checkout experience starts with a well-designed cart.
So, what function or purpose does the cart serve? We can easily assume that by the time a customer is viewing their shopping cart, they’ll check out next.
In reality, when buying a number of items, customers (including me) often use the cart as a “holding area” from which they make a final decision about what to ultimately keep or discard. Here, they only pick from the selected items right before payment (or even after, when they receive the product and decide not to send it back).
At this phase, they might feel indecisive or unsure. They might discuss the situation with others to eliminate any doubts. They might want to put off the decision, expecting to get more information for the decision later on.
Unfortunately, many stores have still not adopted this feature. Imagine throwing products into a bottomless pit as you shop in a real store, trying to find the physical checkout without any signs, and then having to throw all the stuff (most of which you had already forgotten about) onto the counter only after you get there.
It can cause even more confusion when customers decide to enter the checkout funnel and all the fun suddenly disappears. No pictures, just boring lists and forms. Keep showing images of the product(s) they are buying throughout the entire web checkout process – it motivates them best to keep going through the boring stuff.
Some users feel distressed by the idea of soon having to pay for the products they like. Maybe they have not mentally reached the stage of paying yet, or they aren’t even paying for it themselves. Some best practices to resolve this type of problem:
Many users have a spending limit in mind. If they pick an item just within that line, and must later add shipping or VAT, they overstep their budget and abandon the process. What would resolve this?
At this phase, keep people focused while they deal with data and money.
To do that, keep everything short and quick while sounding supportive and trustworthy. Andrew Coyle wrote an amazing article on how to avoid some of the common mistakes designers make when designing web forms.
Payment pages come in many types and forms. The most typical are the accordion, the one-page, and the multiple-page formats. Each has its pros and cons, but whichever you pick for your site, give the user an overview option and different payment options like credit card or cash on delivery.
They should be able to flick through it quickly looking at a summary of their input data and going back repeatedly to edit data without the fear of missing anything or putting the data in the wrong hands.
Your customers don’t want to buy items — they want to own them. So, keep up their enthusiasm even after payment with a thank you page and an introduction to the next steps. Some best practices:
Context holds the key, so gather all the information and do your research. This clearly shows the influences on your users’ behavior and decision-making process, as well as the triggers and fears they face. Conclude everything in a journey and humanize the design with specialized supportive solutions that make them feel good.
Planning a design or a research project soon? Get in touch with UX studio and find out how we can help you conduct usability research and create a powerful UI that will appeal to your target audience.
Users drop from your website and the conversion rate is low? UX audit might help pinpoint usability flows in your product and define key steps to improve its performance. Learn more about UX audit and how it can help you improve your product’s usability.
Imagine a future where lesson planning takes minutes, not hours—this is the promise of AI-driven…
In UX, most of the attention is on the surface: people are interested in wireframes,…
Slowly but surely, 2024 comes to an end, but the significance of investing in user…
Don’t judge a book by its cover. In the case of e-commerce websites from the…
You are standing in front of the participants, wondering where it went wrong. Why aren't…
The FinTech industry is rapidly growing and it can’t be stopped. As everything becomes more…