Mobile Checkout: Do Your Mobile Payment Forms Actually Work?

Mobile ecommerce revenues are big business with UK consumers predicted to spend over £20 billion on mobile devices in 2016; accounting for 36% of online sales, according to research conducted by the Centre for Retail Research for RetailMeNot.

Customers want to browse and shop on smartphones and tablets, and with Google practically forcing retailers to invest in mobile-responsive websites; this trend shows no signs of abating. However, according to the latest research from The Baymard Institute: “the average checkout process and data input (i.e. form fields) experience was seriously flawed.

Customers are clearly spending money on mobiles; but they could be spending so much more, without all the frustration checkout forms cause.

The research, based on 50 major mcommerce sites, found that “many usability issues are so severe that they will prevent users from completing their orders.” Given that these benchmark studies have been done over the past four years, the report states that “it comes as little surprise that mobile checkouts are generally really poor.”

Mobile Checkouts: 6 Factors For Successful MCommerce

When it comes to designing a checkout that will work, here are a few key areas that you need to look at more closely.

#1: Total order cost

Customers generally know that the product cost is never the full order value. At the very least, shipping costs usually have to be included. And yet, some retailers force customers to enter address and card details before showing the total.

There is a direct correlation between the number of entry fields and the percentage of people who abandon the process. Failing to disclose the total until the end merely increases frustration and uncertainty, as any additional costs will influence whether a customer goes through with a sale.

#2: Sort out your shipping

Most retailers now offer a range of shipping options. Except, it seems, on mobiles. Data shows that “24% of mobile sites don’t show cost and/or speed for all of their shipping options” and 47% don’t offer store pickup / local collection on mobile devices.

When a mobile basket doesn’t show the same range of options as a browser, customers are left in the dark. This uncertainty encourages many to abandon the process.

#3: Make guest options more prominent 

Checkouts need guest options to ensure one-stop shoppers complete a sale. Most mobile website owners understand and offer this, which is a big leap forward for mcommerce. Except for the fact that, right now, 88% of page layouts are so poor that most users didn’t see the guest option.

Remember, smaller screens reduce the amount of time a customer is going to spend looking for things, so if they can’t see something quickly it will be overlooked.

#4: Simplify mobile payment forms

Here’s what you want to avoid; a customer looking at your payment forms and saying “Argh do I have to type all this once again!”

In this case, the customer has already given the correct information and clicked the right option, to show that the shipping and billing address are the same. The form doesn’t hide the extra input fields, leading most customers to assume they need to fill in the same details twice.

Asking for the same information twice is a common cause of cart abandonment. Ensure input complexity is kept to an absolute minimum.

When it comes to address fields, 80% of sites still offer endlessly long drop-downs for country selection, instead of automatically populating that data. Currency options should be set accordingly; further reducing the time it takes to go through a checkout.

mobile payment forms

#5: Fix field descriptions

According to Baymard Institute data, “the average site performs poorly,” when it comes to descriptions, “with several sites having directly harmful implementations.” Missing or confusing descriptions result in abandoned carts.

Take a look at this cart in landscape mode (iPhone 5S, iOS 9.1). With the keyboard taking up 70% of the screen, a customer can only see 1 or 2 entry fields at a time, making the process seem longer and more difficult.

mobile payment forms

Some of the most common problems include:

  • 94% fail to clearly indicate required and optional fields, leading to confusing error messages or customers guessing what information they need to provide.
  • 65% cause privacy concerns, by asking for seemingly unnecessary information. A brief explanation is better than an abandoned cart.
  • 38% of mobile fields place the descriptions in the wrong place, causing multiple interaction issues. Placing these above the field is more effective.

#6: Error messages are still broken

According to the latest data, “The average site has a downright poor Error Message experience.” Generic messages (“invalid [phone/email/security code/..]”) are common across 92% of mobile websites, further slowing down the checkout process since an order cannot be complete until the field is fixed.

Whereas, adaptive error messages, that show a customer exactly what needs correcting would reduce this frustration at a key point in the checkout process.

None of these challenges will be fixed overnight. Mobile design is still constrained by the platform; but customer demand for smartphone shopping is only going to increase. Ensure your customers have a mobile experience that keeps them coming back.

If you are a web developer and need to advise your customers on secure, reliable payment processing, contact us here to for information about joining our partnership programme