How to Optimize Your Checkout for Mobile Devices

Form Optimisation

Custora, a predictive analytics platform, published the Custora E-Commerce Pulse Mobile Report in July. The report predicts one-third of traffic to e-commerce sites is now from mobile devices. This year in the US alone mobile e-commerce with reach $50 billion in sales. That’s an increase of 1875% since 2010:

Mobile Revenue Between 2010 and 2014

 However this is actually only a fraction of what’s possible. Conversion rates on mobile continue to be lower than on desktop. Data from the Formisimo tool shows us how mobile and desktop shoppers cope with forms:

Mobile vs Desktop ECommerce Conversions

This shows us how much harder mobile users find it to complete checkout forms on their phones. It also highlights how many shoppers overall are put off by checkout forms regardless of the device they’re using.

Christmas Window Shoppers

Custora’s post Christmas report this year showed several interesting trends in online shopping in the run up to the holiday season. While the conversion rate on mobile continued to be lower than on desktop, the average order value was higher during the Christmas period. (Figures from Custora reflect conversions based on total number of visitors to site).

Holiday EComm Conversions and AOV 2013

The report also revealed that “mobile site visits jumped over 40% from holiday 2012 and represented nearly a third of all traffic during the 2013 holiday season.” This tells us that Christmas shoppers could prove to be more lucrative for mobile.

So mobile users are happy to browse e-commerce sites but when it comes to making a purchase they fall away. To understand why, we’ve tried to pinpoint the differences for shoppers on mobile vs desktop.

What Differences Do Shoppers Have on Mobile vs Desktop?

  • Users navigates and types with their fingers.

  • There’s no full keyboard. Keyboard needs switching to input numbers and symbols (such as are required for providing contact details/verification details and passwords).

  • The screen is smaller. This might sound duh duh but of course it’s rather an importance difference between mobile and desktop browsing.

  • Users have less time. A study conducted by WebCredible found that users “don’t like performing lengthy processes on their mobiles”. When on the move users are less likely to have the time or suitable environment for filling out a lengthy form. This also means they’re less likely to spend time bargain hunting on mobile (seen in the higher average order value of mobile sales).

  • Users feel less secure. Internet connections are less reliable on mobile causing users to again shy away from lengthy processes. Using the device in a public place and over connecting to sites over their mobile phone network also makes them less likely to want to enter sensitive details such as payment information.

Many of the problems experienced by these differences can be addressed by optimizing forms on e-commerce sites for mobile use.

5 Tips for Mobile-friendly Forms

Improvements that you make for mobile also improve your forms for other devices, making them more user friendly overall. You don’t necessarily need a separate mobile version of your website if you think about mobile throughout the design process.

Many of the recommendations we make below are ones that we think you should try regardless of whether or not you have an ecommerce site or a strong mobile focus.

Play.com gives us an example of unhappy shopping experience. A mobile version of the site exists but when you’re ready to go to the checkout you’re redirected to the desktop aka ‘full’ version of the site. This would be fine except that the full site isn’t responsive. As you can see in the image below, some text is cut off and the Continue button is out of view. This is going to be hard. I also can’t continue without creating an account but more on that later.

Play.com registration form

So whether you build a mobile version of your site or not, we urge you to think of mobile first.

1. Increase Button Size and Clickable Areas

Bigger buttons are easier to see as well as easier to touch. Using our fingers to make selections on a screen is far from precise. As well as making buttons and links big enough to press easily you should give each enough space from each other that users don’t accidently hit the wrong one e.g. between Back and Continue buttons.

Amazon don’t have a separate mobile version of their website but the design of the checkout and basket areas make it easy to navigate around:

Amazon checkout basket

2. Tell the Device What Keyboard is Required

Using HTML5, you can tell some mobile browsers what the field type is e.g. URL, email or numerical. The browser can then adjust the keyboard to supply the user with shortcuts such as .com and symbols such as @.

In this Urban Outfittters signup form the Mobile Number field tells my phone to bring up a numerical keyboard:

Signup form with numerical keyboard

3. Reduce the Number of Form Fields

Reducing the number of form fields and selections that the users has to make will speed up the checkout process. Users concerned with time or the stability of their internet connection will be encouraged to continue if the form is quick to fill out.

It’s much harder to move between form fields on a mobile device. Start by amalgamating fields where possible e.g. for first and second names. In a study by The Baymard Institute tests showed that users struggled to enter their phone number when it was split into different fields.

Next consider which fields you can cut altogether e.g. do you need two phone numbers along with delivery information? Probably not.

This eBay registration form could be shorter by using a single Name field and by only asking for the Password once:

eBay registration form

In addition you can reduce the amount of work for the user by setting some selections as default and by making the form adapt as it is filled out.

Sadly the same Urban Outfitters form shown above missed several opportunities to make it even easier to use. Firstly, although I was accessing the .co.uk site the ‘Country’ field had no default selection. The second missed opportunity came and went when, after selecting United Kingdom, I still had to scroll through a list of stores from all over the world in order to find my nearest store:

List of countries and cities

The caveat of this tip is that reducing the size of the form should not come at the expense of any features. Don’t assume that mobile users can do with fewer features. If they can’t complete the action they want on mobile this will be frustrating e.g. resetting their password.

4. Keep Labels and Error Messages in View

Error messages are even more frustrating on mobile devices because of the added effort of filling in the form in the first place. Smaller screen sizes make it even more likely that an error message at the top or bottom of the page will be missed off. Even worse if the message isn’t triggered until after the form is submitted then the user may not realise what their mistake was.

Tesco’s F&F clothing site utilises inline validation to avoid user confusion:

Tesco delivery address form

Some errors can be avoided by making the purpose of each field very clear. In the example above Tesco have top aligned the form labels so that each field’s label is in the best place to be seen by the user.

5. Allow Users to Shop Without an Account

Signing up for a new account on a website is a lengthy process that also often requires entering sensitive information- two things that we know mobile users don’t like.

However, many sites force users to have an account in order to shop or even browse on the site. This is sometimes referred to as a login wall.

BrandAlley signup and signin forms

By allowing users to continue without an account or to login with a social account such as Google+ or Facebook you’ll stop blocking potential buyers who are put off by the login wall.

Want more?

Luke Wroblewski is a Product Director at Google and all round digital design expert. He’s written several books on web design including Mobile First and Web Form Design.

In the video below he shows a number of examples of forms on desktop computers and then their mobile versions. He highlights several ways that the mobile versions were made less usable than their desktop alter egos.

image representing average form conversion rate uplift from using Formisimo From 0% to 24% Form Conversion Uplift Get the insight that increased form conversions by 24% (and rising)
Latest Insight
Improving Insurance Forms Reviewing the top 31 insurance forms

Get Started

Request a Demo

Get a personalised demo of Formisimo at a time that suits you and your team. Gain a deep understanding of our platform, and focus the demonstration on the areas that are important to you. Arrange a Demo

Start a Free Trial

Get seven days of behavioural data for free, start using our platform today. Install Formisimo and start measuring how users behave in your forms. Get seven days of powerful behavioural data without any commitment. Start a 7 day trial