Mobile Ecommerce best practices

You can’t talk about e-commerce trends without covering mobile.

Just look at the stats:

A whopping 62% of e-commerce website traffic comes from mobile devices. And that’s not all…

Of the $78.6 billion spent on online retail in 2017, $18 billion of it was purchases made on mobile. That’s huge!

mobile stat

Not to mention that 57% of users have said they don’t bother recommending a business with a poorly designed mobile site.

So how do you capitalize on this trend and make sure your online store is mobile-friendly?

Keep reading to find out.

1. Allow Image Zoom (You Know – That Pinch Open Thing).

Not being able to zoom in on a product photo while shopping online is one of the most annoying things I’ve ever experienced.

Here’s what I mean:

Basically, the easier you make it for your customers to image owning your product, the higher the chance you’ll close the sale. When people zoom in, they’re virtually interacting with you product to help them make a buying decision.

2. Use Touch-Optimized Keyboards for Each Form Field.

Have you ever seen the keyboard on your phone change when you clicked on a different form field? Like this:

touch optimized keyboardtouch optimized keyboard 2

During usability testing, typos were much more common on sites that relied on the standard keyboard for numeric inputs, as seen on Grainger (left). Compare this to the 521% large keys when using an optimized keyboard (right).

For a number-only form, you show numbers. For a text form, you show text.

Simple, right?

And yet, Baymard’s benchmarking of mobile sites found that 54% fail to invoke optimized touch keyboards for either phone, ZIP code, or credit card form fields.

Be part of the 46% of smart mobile sites. Trim down the number of typos (and lost packages) with this simple change.

3. Don’t Use Auto-Rotating Image Carousels (They May Look Cool, But People Hate Them. And They Suck).

Some e-commerce trends popped up and took the world by storm. And they need to die.

Carousels are fine, but auto-rotating carousels cause major issues on mobile. (And, honestly, on desktop too.)

Sephora Rotating Carosuel

People report clicking on the wrong slide or being disrupted while trying to read one slide and then it shifted, causing them to have to wait for it to come back or to try and click back to it manually. Not a fun time.

ConversionXL even ran multiple tests, and found that image carousels get less than 1% of clicks, despite taking up more than half the home page. So just skip this trend.

What can you do instead?

Use static image content on the home page.

The Smoothe Store

4. Make Guest Checkout Obvious (Frictionless Checkout Should Be Your #1 Priority!).

Making it stupidly easy to checkout should be your #1 priority. The more steps your visitors have to go through, the fewer will end up converting.

Just look at Amazon – they have you click one button to buy almost anything. It’s too easy to buy from them. (I couldn’t tell you how much I’ve spent on Amazon…)

But it’s not enough to just offer guest checkout. You also need to make it an obvious option, so people can actually utilize it. Like this:

mobile checkout

See how BestBuy lets you click a simple drop down? It doesn’t get much easier than that.

Pro Tip: Just because a user checks out as a guest, doesn’t mean you can’t get them to sign up for an account after they buy. In the post-purchase email, let them know that creating an account will make checkout easier next time. Better yet, offer an incentive like 10% off their next order or free shipping (if you’re not utilizing tip #1).

5. Disable Auto-Correct at Checkout (No, I Don’t Live On “Milligram Drive”).

Remember how we talked about typos leading to lost packages in point #7?

Well, auto-correct is the source of more lost packages than human error and accidents combined. (OK I made that up, but it still causes lost packages. You don’t want that, do you?)

Just take a look:

poor mobile website design

If I didn’t catch that auto-correct, my package would be going to “2110 Milligrams Drive”. Whomp-whomp.

It’s a simple fix. To disable auto-correct for a form-field just set: autocorrect=”off”.