9 Simple Ways to Improve Ecommerce Mobile Checkout Forms
Compared to desktop, does it feel like your mobile checkout is seriously lagging behind in the conversion race?
You probably already know you’ve got an issue with your mobile checkout forms. And you’re not alone. Over 80% of customers have experienced difficulty when completing a mobile transaction
Mobile shopping cart abandonment is almost universally high. And faulty, finicky, fury-inducing forms are the culprit.
But there’s good news. It’s very easy to fix this issue, boosting conversion rates and enhancing customer satisfaction in the process.
If you’re in a hurry, jump to the bottom of this post for a 9-point checklist for improving your mobile checkout forms. If not, let’s take a closer look at the reasons behind mobile cart abandonment.
Over 80% of #customers have experienced difficulty when completing a #mobile transaction. #ecommerce #optimization #checkout #forms #cr Click To TweetSound good? Check them all!
Before we dive into practical steps, let’s form a clearer picture of what exactly is going on with mobile cart abandonment.
Data is very clear about the fact that conversion rates on mobile are lower than on desktop. Historical studies show that sales conversions are two to three percentage points below the desktop, with data collected over many years.
This data is summarized in the following graph:
The graph above is fascinating from an ecommerce standpoint. Even when the majority of traffic is mobile (such as in general retail), a greater number of sales are made via desktop. In the cases where the majority of sales are made via mobile, the traffic to sales ratio is still significantly lower when compared to desktop. Source.
But why is it happening?
No serious online retailer disputes the power of mobile commerce. Experts, data-crunchers and market leaders have emphasized and re-emphasized its importance.
CEO of Walmart Joel Anderson, for example, has said,
I can’t overstate how mobile is changing how we interact with our consumers, we have to embrace these changes.
Linda Bustos (who is listed on our list of ecommerce influencers and blogs) of ecommerce Illustrated has also echoed similar thoughts;
…if you’re like most ecommerce sites today, more than half your traffic is through mobile devices, but mobile conversion still lags desktop. Optimizing the “>mobile shopping cart design and checkout experience is more important than tweaking your desktop design.
There are a number of reasons that contribute to low mobile conversion rates, from security concerns to difficulty filling out forms. That’s why mobile conversion optimization is so important.
But after working with hundreds of clients at Growcode and analyzing our own in-house data, we’ve found that cart abandonment occurs most when customers are asked for personal information and shipping details during the checkout process.
To put it plainly, most checkout forms just downright suck!
So let’s take a look at an ecommerce store that’s doing it right. We’ll use them as an example to uncover practical points that you can replicate on your own forms.
Growcode also recommends this eBook:
Ecommerce Optimization Checklist of a 7+ Figure Online Store
Simply Hike use Shopify (hats off to them) for their shopping cart. They’ve built a form that is straightforward, clean and utilizes a number of simple but powerful features to streamline the checkout process, boosting conversions in the process.
First off, before you even get to the checkout form, there are a number of semi-automated payment options like PayPal and Amazon Pay. Both make it easy to quickly complete a purchase if customers already have their details saved with these providers.
Simply Hike offer three different payment options, allowing customers to speed up checkout if they have their details registered with PayPal or Amazon. Both make it easy to quickly complete a purchase if customers already have their details saved with these providers.
Simply Hike also ensures that its form is short, simple and clean. Despite being on a restricted mobile screen, there’s still lots of white space. There are only a small handful of optional fields on top of the basic requirements, and these are clearly marked.
The form is simple, short and clean. Despite being on a restricted mobile screen, there’s still lots of white space. All for the convenience of customers.
Another notable point is that the form makes use of floating labels. If you look at the screenshot below, you’ll see how the form label (which is included in the field) minimizes to the top left corner during and after entry.
There are two key advantages to this approach. First, the form looks shorter visually, which discourages cart abandonment. Second, customers know that they are inputting the right data irrespective of what stage of completion they’re at.
Floating labels add visual appeal to a form while also enabling users to keep track of where they’re up to. Therefore the form looks shorter visually and customers know that they are inputting the right data irrespective of what stage of completion they’re at. Simple and very effective.
Floating labels are particularly useful when customers use auto-fill. They can easily double-check all of the information, making sure its correct. And that leads nicely to the next point.
SimplyHike’s forms support both autofill and the use of the tab button. It’s hard enough to use a digital keyboard, without being prevented from using data that’s already on a device or from quickly switching between fields.
Looking at all the screenshots included here, you’ll notice the fields in Simply Hike’s form is the perfect size. The fact that each field is around 40 pixels in height (we’ve found 42 pixels to be the golden number), and stretches for the width of the screen, means that it’s easy for customers to tap using either the right or left hand.
Simply Hike has also been careful to ensure that the right keyboard appears for specific fields. When you enter your phone number, for example, the numeric keypad automatically pops up.
Simply Hike also thought about the number keypad appearing on the mobile version of the checkout. The number keypad automatically appears when a customer clicks on a field requiring numbers.
Finally, the form ends with big call-to-action button in a contrasting color (dark red). There’s absolutely no doubt in the customer’s mind about what they need to do next! What is more, the CTA is screen-wide so it’s easily tappable from both sides of the screen.
If a customer has entered any of the data incorrectly, the appropriate fields appear framed in red. Simply Hike goes a step further by including specific instructions to correct mistakes.
Simply Hike highlight false entries and provide instructions to correct the mistake. If a customer has entered any of the data incorrectly, the appropriate fields appear framed in red. It goes even a step further by including specific instructions to correct mistakes.
Judging from everything that’s been said above, it’s obvious that Simply Hike has got a lot of things right. You could likely boost your conversion rates instantly by replicating the best parts of its checkout form.
But has it covered all the bases?
Well, there are a number of extra things that could be done to further boost conversions. It hasn’t for example, included any trust-building elements like security badges.
The headline at the top of the form is also easily misconstrued. Should you start with contact information or shipping details? One or the other would suffice, without creating a split in the customer’s attention.
OK, so let’s summarize all of the key points outlined above and look at how you can practically implement them on your own forms.
Woohoo! You’ve just signed up. Check your inbox to confirm the subscription.
Checkout usability testing has revealed that most sites can safely get rid of between 20% and 60% of the fields in their checkout forms.
As an ecommerce retailer, it’s likely that your forms have too many entry options, and that you can achieve near-instant results by making forms shorter. Study after study supports this point.
It’s also worth mentioning that you should include login options too. If your customers have saved their payment details, make it easy for them to check out in a few clicks. Take a look at the example from Amazon below:
Amazon customers can go from email to purchase in five steps and with a minimum of data entry. Source.
Floating labels are fantastic because they offer clear guidance while allowing customers to double-check the information they’ve entered is correct. And all this is achieved without taking up any more space!
If you’re unable to utilize floating labels for any reason, include your labels above the entry field. It’s also important to make text large and readable, particularly if your customer-base is made up of older people. It sounds like an obvious thing, but you would be amazed at the number of retailers that overlook it.
Do you forms have autofill functionality? Streamlining the checkout process is all about minimizing the amount of time and effort required to make a purchase. If customers already have information saved on their phone, let them use it!
The “tabindex” HTML attribute allows you to set the order in which a customer moves from field to field when using the tab function. It’s a simple tweak but it can be very useful for speeding up the information entry process and skipping over unnecessary fields.
As has already been mentioned, we’ve found 42 pixels to be ideal height. Fields should also be screen-wide to ensure that they can be accessed from both the left and right.
From a coding perspective, structuring your forms so they display the correct keypad is a relatively simple task that only involves a few HTML tweaks.
Your CTA is one of the most important parts of your checkout form, so make sure it’s big, visible and easy to click (with both thumbs). Use a contrasting color so it stands out from the other elements on the mobile page, ensure it fills the width of the screen, and make it as tall as possible without looking silly.
Let me say that again. Get rid of EVERY unnecessary link in your footer. Simplifying your footer will achieve two things. First, it will leave customers in absolutely no doubt about where they’re meant to click. Second, you’ll minimize the risk of accidentally clicking away from the checkout page. Both are anathema to conversions.
Simplifying your footer will achieve two things. First, it will leave customers in absolutely no doubt about where they’re meant to click. Second, you’ll minimize the risk of accidentally clicking away from the checkout page. Both are anathema to conversions. Point to remember!
It’s vital to show users where they’ve made mistakes and give them details about how to fix them, whether information is incorrect or they’ve missed a field.
Find out all of this points (and more!) in our episode of Bite-size Ecommerce Optimization about creating a great mobile checkout experience and solidify your knowledge.
Ecommerce sites are a bit like old steam trains. They’re big, complicated and involve lots of moving parts. They also require a near-constant supply of optimization tweaks, split-tests and developer attention to keep running.
While mobile checkout form optimization is just one cog in the machine, it’s a crucially important one. You can make a lot of ecommerce development mistakes – your photographs might be poorly shot or your site layout might be over-complicated – but few things are going to negatively affect conversions as much as a poorly-designed mobile checkout form.
Mobile represents the biggest source of traffic for many online retailers, so overlooking this simple area of your site can have severe consequences.
But there’s good news too! Turning your forms into conversion-creating masterpieces – OK, masterpiece might be slightly too strong a word – is easy. In fact, it shouldn’t take a developer any more than an hour or two to implement all of the changes outlined here.
Get the complete, free copy of the ebook Ecommerce Optimization Checklist of a 7+ Figure Online Store. Our secret sauce is at your fingertips. No time to lose, grab it now!
💡 At Growcode, we develop and maintain online shops and B2B ecommerce on Magento!
