According to Google, 67% of users say that when they visit a mobile-friendly site, they’re more likely to buy a product or service. This same study also found that 61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move onto another provider.

Results like this demonstrate the need to give the same attention to your website’s mobile experience that you give every other touch-point your customer has with your business.

This will create an omni-channel experience, so that every interaction a customer has with your brand – online, on mobile or instore – demonstrates an easy path to purchase.

Building a business case for mobile

eCommerce merchants who analyse conversion rates often see a lower percentage of converted orders coming from mobile devices – and this can skew the creation of a business case for higher spend towards the mobile channel. Lower conversion rates on mobile should increase the significance of mobile, not the other way around.

I would build a business case that applies the average desktop conversion rate to your mobile traffic. Now you can calculate the amount of revenue potential from the mobile sales channel, if it performs as well as desktop.

Consumers are browsing and buying on their mobile devices more than ever before, and they now expect a type of functionality and design that caters specifically to mobile.

How do you create an equal experience for mobile and desktop?

Well, you design the experience especially for mobile! You want to apply the User Centered Design (UCD) approach tailored to mobile. Your storyboard of use cases should differ, as should your user goals and expectations; you need to run some user tests to achieve this.

Creating a persona sounds like hard work, but it is essentially looking at your mobile audience and asking, who are they, how are they different from the desktop audience, what do they expect from your website, what is their goal, and how do they expect to use your website on mobile to reach that goal?

User journeys are very different for mobile and desktop users. Providing them with the same flow/user journey often causes frustration for mobile users.

Once you have enough insights, you can begin to design an adaptive website that will match your customer expectations and goals.

What are the best practices of mobile UX design for eCommerce?

1. Mobile separate, not first

It isn’t mobile first or even desktop first. The design should be completely separate – mobile separate, not first, not last but equal.

2. Speed

Slow speeds will lose a user way faster on mobile. Mobile users just won’t wait around for mobile pages to load; they’re far more impatient.

3. Begin with a persona

All design should begin by building a persona, deciding on the goal of that persona, setting what the expectations of that persona should be and then matching the flow of your site to these expectations.

4. Remove the clutter

There’s always the temptation to add in as much information as you possibly can about your product, but this should be avoided on mobile devices. Instead, opt for short descriptions, large images, bullet points, an easy payment experience and design with touch in mind.

5. The power of prediction

Give people the ability to predict the result of their actions. Humans instinctively predict the outcome of every action we take, so when we tap or swipe, and it delivers the outcome that matches our prediction; we feel in control. It reinforces the idea that we like this service.

6. Answer questions before they’re asked

Anticipate your user’s questions and answer them in real-time. For instance, if you’re using 3D Secure on your site tell the user that they are going to be redirected before it happens.

7. Single trial learning

Once your user taps a few things on the screen of your mobile website or app, they will be able to do it again. What you don’t want is for your users to struggle to remember or infer what’s needed of them to complete an action.

8. Be obvious

Make opportunities to interact obvious and visible – a user won’t be able to interact with your site if they can’t tell that it’s interactive.

What about the checkout process?

Historically, making payments through a mobile device has been notoriously difficult, but it doesn’t have to be that way. Design with simplicity and clarity in mind and your users will stay until the very end.

  1. Open the keypad on numbers, not letters when asking for card details, expiry date, and security code
  2. Ask for the expiry date in the format it most commonly appears on cards (MM/YY) in one single input and allow the user to type the /
  3. Don’t ask for information you don’t need – if you don’t need a postal code, why ask for it?

One other consideration for your mobile site is a promising change to mobile design that is on the horizon. Progressive Web Apps are becoming more popular for mobile websites. These essentially use modern web capabilities to deliver an app-like user experience. Simply put, the functionality and speed of an app opened in a mobile browser. Watch this space.

How does Realex Payments design with mobile in mind?

We know that a user’s payments experience can make or break a sale, especially on mobile. That’s why we have developed our product to create an experience that’s designed to work seamlessly across any device, so you can expect:

  • A payment page that is fully customisable to your brand and instantly adapts to the screen size;
  • Intuitive keypads that adapt to numerical or alphabetical immediately;
  • A ‘pay now’ button above the fold of the mobile screen;
  • A visibly secure payment page to instil trust in the user;
  • Ability to pay by tapping or taking a picture of your card (Safari only).

You can find out more about how to optimise your customer’s payment experience with Realex Payments here.