E-commerce has been on the rise in recent years and it starts to become a big portion of total retail sales. In the US alone, according to ComScore’s report “State of the U.S. Online Retail Economy”, by Q1 2017, Total Digital Commerce grew to account for nearly 1 in every 5 dollars spent by consumers. Proportionally to that, m-commerce also becomes pretty significant, reaching now 22% of total e-commerce. More and more consumers not only search for products using their mobile devices, but also finish the checkout process with payment and delivery settings.
Therefore, we need to start designing shopping experience for small screens the same way we do it for desktops. Clients need to have the same functions and possibilities regardless the device they are using. This is a challenge especially in the context of the checkout process, when the client has already decided about the purchase and is heading to the checkout. Badly executed user experience at this moment can cost you not only this particular transaction but also the client who won’t return to the store.
Check our mobile app development services
This article collects a dozen of good practices to keep in mind when designing the checkout process. So let’s get started!
According to the Baymard Institute Research this is the second biggest reason people abandon their purchase (the first one is extra costs too high, like shopping prices for example), mainly because people don’t remember their logins and passwords. And if they are not signed up, there is this thing called register forms. Filling any form on a mobile device is a pain in the neck and the “sign up” ones are among the longest to fill out. On mobile, it’s slower than on a computer and gives the customer a lot of time to rethink their purchase decisions. Nobody wants that. Allow the purchase without signing in, or without registration. Provide the option for “guest shopping” and make it visible! Baymard Institute also found that 88% of mobile checkouts fail to make the option clear enough and users overlook it. If it’s not there at a glance, it’s like it doesn’t exist at all.
You need to think about the forms as an obstacle between the customer and the purchase of the product. Of course they are necessary but you can do a lot to make filling them a lot easier. This is a huge subject and it deserves its own article or two. So for now let’s focus on the bare minimum.
Too small clickable areas are especially noticeable in the poorly executed responsive design websites. After scaling down from desktop to mobile they are still optimized for the user with the mouse instead of the user with the touch screen. According to the MIT Touch Lab, the average width of an adult thumb is 2,5 cm and the index finger is between 1.6 to 2 cm. It converts respectively to 72px and 45 to 57 pixels. The simplest answer to that is to use patterns from Material Design system by Google for icons and typography. And add some padding to your text links.
The purchase must take as little time as possible, regardless of whether the customer is using a desktop computer or a smartphone. Nevertheless, in the mobile experience all the process simplifications are literally worth every penny. So for the returning customers, an excellent option would be the so-called “Quick Buy” button, which adds a product to the cart and automatically redirects the customer to the purchase summary right for the confirmation. All the delivery and payment settings are either taken from the account preferences or from previous purchase settings. Just like that. Give that to the clients and you have just provided the store with a ton of impulsive shopping… I mean, happy customers! Obviously.
Consider using the payment providers that are trustworthy and recognizable within your target group. And give as many options as you possible can so that users can choose their favorite methods. And if you want to handle credit cards directly in the store, make your system safe and forms are easy to fill.
Always inform about acceptable card types.
This is probably the most common anti-pattern in the history of e-commerce. Typical users who come across this input usually undermine their purchasing decisions. They start to wonder if they can buy the product cheaper. They are abandoning the checkout process and go looking for codes scattered on the Internet. Of course, the codes themselves are not bad, they serve to build customer loyalty, they attract new ones. Just make sure that they do not distract the users at the stage when they have already made a purchase decision. Consider other possibilities of giving discounts: dedicated pages, URLs that activate a product discount in the shopping cart. There are many options.
Seems obvious, but it’s not always executed well. Users always need to know where they are, at which stage and what is ahead of them. They need the information about the number of steps to complete the task. And the less of these, the better the chance of getting the transaction complete.
The Holy Grail of every shopping process is the simplicity and the speed. In earlier points, I wrote about a few ideas on how to make things simpler and more user friendly. But it’s worth adding some other tips. Avoid any distractions, they include not only discount codes, but also unnecessary pop-up windows, navigation bars with store categories or advertising. A complicated purchase process with redundant forms, unnecessary registration or forced sales techniques are among the main reasons why consumers abandon the cart. It is worth remembering that. Try to work on the maximum simplification of the process.
At the beginning, I wrote about the growing number of consumers ending shopping on mobile devices. These numbers are going to grow, but still there is quite a lot of customers for whom the smartphone is not the default device which they make their shopping on. In addition, many people are still starting to shop on a tablet or a phone, check out prices outside home or look for products in a context but far from their computer. Once they find what they are interested in, they tend to finish their purchase at home in the comfort of their computer. You really want to address that. Give them an option to save the cart or send it to their e-mail address, remember if a customer is logged in, create a “save for later” option for postponed purchases.
All of the good practices above are general guidelines and there are certain situations in which individual points will not apply. Because of the specific target audience, there will be a conflict with some solution or simply it will not affect the conversion. The role of designers and UX specialists is to adapt the design to the needs of the user, and sometimes to the technical, budget and time limitations. Fortunately, the improvement of the shopping experience is possible even with the smallest tweaks.
The most important thing you need to take from this article is to always remember to think about the user. Create a shopping cart and checkout steps as simple, easy, transparent and engaging as you can. The easier it is to buy stuff, the better chance there is people will do just that. And this is your goal.