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
Getting to grips with mobile cart abandonment
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:
But why is it happening?
No serious online retailer disputes the power of mobile. 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 Illustratedhas 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.
Simply Hike: How they’ve mastered the mobile form game
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 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.
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 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.
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 CTAis 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.
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.
Mobile Form Optimization: 9-Point Checklist
1. Make your forms as short as possible
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:
Checkout #usability testing has revealed that most sites can safely get rid of between 20% and 60% of the fields in their #checkout forms. #ecommerce #forms #optimization #mobile #mcommerce
2. Use floating labels and make text big enough to read
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.
3. Include support for autofill to streamline entry
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!
4. Use tab index to allow users to easily skip from one field to another
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.
5. Format your fields to the right height and width
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.
6. Format fields so the correct keyboard is shown
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.
7. Use a screen-wide CTA in a contrasting color
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.
8. Simplify the footer and get rid of every unnecessary link
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.
Get rid of EVERY unnecessary link in your footer. #mobile #ecommerce #optimization #footer #checkout
9. Show mistakes clearly and with instructions
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.
Conclusion: Simple tweaks can lead to big conversion results with mobile checkout improvement
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
Also read: 5 Hacks To Increase Your Ecommerce Success