9 Ways You Can Create A Hassle Free Mobile Checkout Process

1. Speedy page loading times

Having a super-fast website is hugely important to making sure visitors stick around once they click onto your site. High speed helps enable a smoother purchasing journey as users navigate your site with ease and little to no delays. In fact, Kissmetrics found that a 1-second delay in page response can result in a 7% reduction in conversions.

Test your site on mobile and investigate what could be slowing it down; consider image sizes, third party scripts like social media, and plugins. It’s also worth stress testing your website (across all devices) to see how it handles traffic at peak times.

2. Use progress bars

Allowing users to see where they are in the mobile checkout process is a great way to manage expectations by tracking how much of their time it’s going to take up. This is especially important to consider for mobile users; the likelihood is they’ll be using mobile to purchase as it’s an easy and accessible means to do so. Consider using a highlight to indicate where they are in the process.

Baymard’s eye-tracking eCommerce website design research reveals that some users look to the content body instead of a progress bar in the header to determine which step in the checkout they’re on. Use an accordion design to collapse the steps that are positioned in the central part of the screen. Accordion layouts are easy to navigate and still allow users to see where they’re up to in the checkout process.

3. Consider people using multiple devices

Keep in mind that people access websites in different ways, at different times, on different devices. Align your channels for a more consistent experience. Users should be able to add items to their basket on mobile and pick them up later on a desktop. Logging on to a different device to find items are no longer there creates a fragmented mobile checkout experience. Shoppers want convenient and quick experiences and will begrudge going through the shopping process again, leading to a lower chance of a conversion.

Make cross-device transition as easy and seamless as possible for your customers; it’ll be extremely beneficial to your conversions.

4. Viewing product details in the cart

Shopping carts should be clearly displayed and accessible from any page while the customer is shopping. Displaying it at the top of the screen is a popular option with an indication of how many items are in it using a badge notification.

In the cart, core product specifications should be visible and easy to edit in terms of colour, size, model or quantity. Any changes should be auto-updated in real-time, to save users having to click ‘update’ basket which can lead to increased mobile checkout errors. Can items be deleted easily? Make sure you have the option to remove/delete rather than just changing the quantity to 0.

Include information like shipping costs here too so there are no surprises at the end of the process which can, and often does, leads to dropouts.

5. Cart as a comparison tool

Baymard research tells us that many shoppers will use their cart as a comparison tool to compare items before deciding what they actually want to buy.

Browsing through a website, especially on a mobile device, often doesn’t support this (unless there is a dedicated function) so flicking between items and colours, sizes or bundles etc pages can become quite a jarring experience.

Carts provide a place where users can store up items they’re considering purchasing. Being able to do this will increase the opportunity for conversion.

There are a few ways you can support this functionality:

• Large thumbnails for easier visual comparison
• Display the main product details (size, colour, model, quantities)
• Easy removal of items
• Easy to edit product details

6. Allow guest checkout

Guest checkouts are a great addition for all eCommerce sites and are especially useful on mobile. It caters for the time-strapped, those who want a quick purchase (without having to sign up or sign in), and also those who may have forgotten their passwords. I think like most people, the majority of my passwords are kept on my desktop browser, so when shopping on mobile, I often can’t remember them. Being able to checkout as a guest is far easier than going through fiddly resetting processes!

Make sure the ‘Guest Checkout’ option stands out on the checkout page, using a bold colour and prominent position.

7. User-friendly forms

Poorly designed forms are extremely disruptive to the overall flow of the mobile checkout process and can stop users from completing their orders. Ideally, forms and form fields need to be kept as simple and efficient as possible to guarantee conversions and seamless experience.

Align text boxes vertically with the label displayed clearly, avoiding a horizontal layout to cause less confusion and go with the natural flow of scrolling that people are used to when using a mobile device. Due to the nature of a small mobile screen, users shouldn’t be able to see other things on the page that would be a distraction or lead to confusion during the checkout process.

It’s a good idea to treat each field as an individual task automatically moving on to the next once completed.

Some things to keep in mind when thinking about the form fields in your mobile checkout process:

• Keep the look and feel of the form in line with your brand, and branding, of the site. Forms that deviate from this will appear out of place, creating a sense of distrust, inevitably leading to drop-offs.
• When it comes to inputting data, make sure that the right keyboard pops up, ie. text for names and cities, numerical for phone numbers and building numbers.
• For registered users, this information should auto-populate; save their favourite or regular addresses including default shipping and billing address options.
• If you require information that may seem unnecessary to some people, like a phone number, for example, make sure you let them know why you’re asking for it.“Enter your phone number to receive delivery updates.” ‍
• Postcode lookup is a convenient way to save time for your users and minimise errors from clumsy thumbs. There’s naturally poorer navigation on mobile, thumbs are bigger and less precise than a cursor. Make sure Call To Actions are large enough for users to action simply, reducing errors and frustrations of clicking on the wrong thing.
• Display actual day names on dates. Someone may only be at home on Wednesdays in the week and need to know quickly which date that falls on, rather than slowing down the process while they sit and work this out.
• Mark optional and required fields correctly and clearly. If a user does make an error here, display a relevant error message; what is the error, and what is needed to correct it?
• When an error does occur, the process to rectify it needs to be easy. If a user enters incorrect information, make sure that the form fields remain populated with their previous data input so they don’t have to fill out everything all over again.
• Does the location determine delivery options? You can use these to reflect delivery timescales and also local click and collect or instore collection availability.

8. Don’t forget about security on mobile

People are naturally more conscious of security issues and what personal data they’re sharing when using a mobile device. Use security and verified badges to promote a sense of trust. The more recognisable the logo, the more a customer will be comfortable with the purchase. But remember, not all security badges are equal – using less recognisable badges actually goes the other way and can cause checkout abandonment if verified by an unrecognisable logo.

9. Payments on mobile checkouts

The number of payment options is growing and it’s something retailers need to consider carefully. When considering mobile checkouts, there are mobile specific payment options you will want to consider like mobile wallets and fingerprint confirmation for things like Apple Pay which speeds up the process for the shoppers. Amazon’s 1-click checkout is a great addition for registered users who are prone to making repeat purchases.

Consider the following points for your mobile checkout:

• Auto apply discount codes to encourage conversion and save customers the time on copy and pasting or inputting more data into yet another text box.
• Display the most popular payment methods as the first options with the others to be selected from a dropdown.
• Display all costs including delivery charges so there are no surprises when it comes to paying. Be sure to provide a breakdown of costs, not just one lump sum!
• Mirror the formatting of the expiry date fields on a credit or debit card, using 2 digit formatting and avoid using lettered months.
• Provide clear payment and order confirmation once they’ve completed the checkout. Include all details on the page and in a confirmation email.
• Reduce the anxiety of what the next steps are for your customers after placing an order by including links to customer service, how to track their delivery or where you can be found on social media. This gives a sense of trust and digital presence they can turn to if anything was to go awry.