How to Ace Usability in M-Commerce Design

Your ecommerce site needs to be fully optimised for mobile. There’s no way around it. More than half of all website traffic worldwide is now coming from mobile devices, and even in their own homes people are more likely to reach for their mobile than their laptop to look up that product they’ve had stuck in their heads or even just to idly browse.

We’re nearing 2021 and your site now needs to be more than just ‘mobile friendly’. It has been a while since we have seen a site that isn’t ‘mobile friendly’, and if a web company is selling this as some kind of extra, or bonus item on your quote, you should seriously think again. 

rIt is pretty much criminal to have an un-responsive or mobile unfriendly site these days – Google will hate it (so you won’t rank for shit) and your customers will hate you. Mobiles should frickin love your site, so here’s a few basics for acing usability in mobile commerce design.

 

Use stunning, engaging, mobile-first design

Our first tip for improving the mobile commerce experience is … to use mobile-first design (yeah, we know). You’ll have heard this plenty of times, but it bears repeating. It’s not enough to convert your current site into something that just works for mobile devices – you need to design with the mobile layout in mind from the start to make something eye-catching, engaging, and something that makes proper use of the screen space.

 

Keep pages short

Death to endlessly scrolling pages! One of the tenets of good mobile commerce design is to keep your pages short. People reach for their mobile rather than their laptop for purchases because it’s quicker – or at least it should be. The whole process should be streamlined as much as possible, and your pages shouldn’t be stuffed with so much information that your customers have to scroll endlessly to find what they’re looking for.

 

Make it touch-friendly

Every modern mobile device has a touch screen, so your site needs to work with that technology. Sites with poor mobile commerce design are a nightmare to even navigate, let alone buy anything on them. Any links, drop-down menus and ‘next page’ or ‘continue’ buttons need to be big enough so that they can be seen easily and in the most logical place on the page.

The size of these links and buttons is also important because you need to consider the size of people’s fingers using the screen – they shouldn’t have to click with the end of their fingernails to press the link, and the links shouldn’t be so close together that others could easily be mis-clicked.

 

Use micro-interactions to guide the user in an intuitive way

We use micro-interactions online every day, even in small, subtle ways. The animated emojis that appear when you click the ‘like’ button on Facebook, swiping to delete emails, and pulling down to refresh the screen or news feed are all micro-interactions that let us see the effects of our touches and clicks.

When it comes to mobile commerce design, these are especially important in guiding the user through your online store. When items are added to the basket, you can have the total price of the basket and a checkout button appear at the top of the screen, you can have headers or menus that are always visible but expand when clicked, or drop-down lists for selecting product options rather than having entirely separate pages for those variations.

 

Make security a priority

People need to feel safe using their money online, and anxieties about the security of a particular site will turn a lot of people away to alternatives they believe to be more reputable and secure. So, once you’ve put all of the necessary security features in place on your mobile commerce site, make sure that those features are visible, and even include a rundown of the security measures you have in place, especially on any checkout pages. 

For many users, the appearance of security is as important as actual security in making them feel comfortable. That’s why a mobile commerce site needs to look slick and professional, rather than cheap, dodgy and tacky.

Return to Blog