Back

Mobile Ecommerce Design Best Practices

11.10.2021

The mobile phone is universal, omnipresent, everywhere. It’s become such an essential part of human life that today more people have access to a mobile than basic amenities like clean toilets and running water. That’s why in e-commerce, a mobile-first approach has long been a necessity, not an added extra. 

The term itself was coined in 2011 when Luke Wroblewski published a book about it

The whole philosophy can be summed in one sentence: The growth of mobile is a huge opportunity to reach more people than ever, make it a priority, not an after-thought.

This was a decade ago. Wrobleski was right. 

In a recent Google survey, 59% of people said they find shopping on mobile essential when selecting a retailer. So it’s understandable the search engine has made mobile-friendly design a core part of its algorithm. A solid mobile platform will allow you to reach far more people, while a poor experience can lose you customers even amongst those with no interest in shopping on mobile devices!

Mobile matters, and we’ll explain what to focus on. 

10 things to focus on during mobile ecommerce design

The best mobile designer thinks about the customer and how they interact with the device, as they connect with the content through a touch screen. 

1. The rule of thumb

When designing for mobile, remember that users will be navigating your site through their thumbs – or thumb, to be more exact. It turns out that while the majority of us use both hands to cradle our precious phones, 75% of people make contact with the touchscreen through a single digit.

This introduces a high degree of inaccuracy to all mobile interactions. Mobile users are far less precise and work with a far smaller screen, so keep all the critical function icons as large as possible. If your site is covered in tiny “click here” buttons, you have a recipe for frustration. 

Because of the way we hold our phones, we’re less accurate at the edges of the screen and prefer to touch the centre. This translates to how we engage with mobile content as well. Instead of scanning top left to bottom right, a mobile user initially focuses on the centre of the screen. Don’t be shy about putting the most important content on each page centre stage and don’t put the main clickable icons at the edges

2. Mobile speed

To put it simply, time is of the essence, and customers will swipe away if they feel you’re wasting theirs. Bounce rate rises sharply as load times increase, and there’s a clear correlation. 

You want your loading speeds to be as fast as you can get them. Three seconds is your absolute limit, and one should be your target. Please don’t underestimate the importance of page speed: 70% of consumers say it affects their willingness to make a purchase. It can be a good idea to embrace minimalism and strip out excess features if it helps cut down your loading times

3. Pop-up windows

Recently, we talked through the pros and cons of pop-up windows on e-commerce websites and concluded that while they can be a nuisance, they can also be successful if used in the right circumstances. 

When creating mobile e-commerce design , you have to be extra careful with pop-ups, as they have the most impact on load times and are harder to close. Consider how you can make your pop-ups as unobtrusive as possible, not covering the whole page, for instance, or only appearing once a visitor has been to multiple pages and already engaged with your brand.

On mobile, you want to ensure your pop-ups are natural and used in a way that will benefit the customer and not just your bottom line. Information on a newsletter, discount code or reward scheme are good to use cases; pushy upselling is not.

4. Mobile forms

No one likes filling out forms on their mobile device, so if your e-commerce site has a form, you’ve got your work cut out to make completing it as painless as possible. Reduce the complexity as much as you can, removing all but the most necessary fields, and consider where multiple-choice answers can be incorporated rather than typed responses. 

Perception is important. A user will decide whether or not to skip your form by scanning it and assessing how much time it will take, so try to demonstrate that you’ve made the process quick and straightforward. 

5. Images and video

Images and video are the most important part of any eCommerce store. They’re how you demonstrate your product and where your customers will look first. On mobile, these features can be tricky to get right. Naturally, they will have to be compressed, but you still want them to be as high quality as possible.

A small image of a detailed product can make your site visually confusing. For example, packaging that’s dense with information can be inscrutable on small screens, so you might want to make a simplified render that’s specially designed for mobile. 

Where detailed information is vital, such as a complex design on an item of clothing, be sure to support image zooming via pinching or double-tapping on your images, so customers can get a closer look.

6. Navigation

You want your mobile platform to be easily navigable, so don’t innovate for innovation’s sake and stick to easily recognisable and universal navigation patterns (like the ‘hamburger menu’) where appropriate. When creating a mobile ecommerce design think about how most users would expect to move through your site and try to align yourself with those expectations.

Your site’s navigation should be clear, so avoid hiding side menus behind additional layers of interactivity and use colour to highlight key navigation buttons. Above all else, consistency is critical. Pick a method and stick to it.

7. Prioritise search

The search bar is an important part of any mobile site’s UX, as it provides a shortcut for visitors to reach the products they are looking for – particularly useful on a complicated site. Place the search bar centrally, and make sure it’s immediately visible, not hidden behind a menu or search icon. Again, no need to reinvent the wheel with the search icon – the universal magnifying glass symbol is instantly recognisable, so use it!

8. Auto-suggestions

Speaking of search, auto-suggestions or “Smart Search” are a great way to upgrade the search functionality on your mobile site. For starters, they speed up the process for your customers, who will thank you for sparing their thumbs. You can also use this feature as a subtle way to direct users to your best products or, based on their previous interactions, those most suitable for them.

9. Wishlists

It’s easy to window-shop on mobile. In fact, many users prefer to browse on mobile but are hesitant to complete a purchase on their phones, either due to the inherent inconvenience or to perceived security risks. Being able to transfer shopping details from mobile to desktop via a user profile is highly valuable. You should incorporate either a wishlist, so users can bookmark items of interest or a “save” feature so they can preserve their shopping cart. Or why not both? 

10. Easy checkout

Mobile conversion rates are much lower than desktop, so getting the checkout experience just right is vital. Speed and security should be your watchwords. No one likes to spend ages on payment. At the same time, customers want to feel safe. Try to simplify the process but simultaneously find ways to reassure users by including trust badges.

Instant payment options such as Google Pay, Apple Pay or Paypal are essential. They’re not only secure, but they also allow a purchase to be completed with the press of a button – none of that painstakingly typing out payment details.

By the end of the year, over 50% of eCommerce will take place on mobile. That means businesses without well-optimised mobile platforms are running out of time to make much-needed changes. There’s a lot to consider when designing for mobile, but you can go far by simply putting the customer’s needs at the centre of your strategy. A smooth mobile experience is one that’s fast, simple and easy to use. 

Share It! Tweet it! Publish It!