Mobile ecommerce is globally growing day by day. Here are the tips on how to make your mobile ecommerce user-friendly and this way increase profits.
Everyone has a phone. Well, maybe apart from Galaxy 7 note buyers. But it’s been a while, so… They probably do too.
Anyway, at least half of people make purchases via mobile.
This means that you may lose up to half of your revenue if your website is not optimized for mobile.
But it gets worse. Even if your project is mobile-friendly, there are still hundreds of things that can go wrong. Missed buttons, unreadable labels, flawed navigation… The average abandonment rate on mobile devices is around 85%, which is even higher than on desktops.
There are tons of articles online that suggest ways to improve the mobile experience for your customers, but how exactly are you going to do that?
Let’s find out.
It shouldn’t surprise you that using gestures on mobile is a completely different experience for customers, than, say, using a laptop or desktop with a mouse and keyboard.
Mobile experience comes with its own set of limitations and benefits. The benefits that you should utilize in order to improve your customer experience, and, ultimately, sales.
The pillar of the mobile experience is gestures.
On mobile, people mostly rely on three main gestures:
Notice what’s not on the list: pinch, twirl, hold, fling, etc.
People shy away from using complex gestures, which means that if your app functionality heavily relies on them, people won’t find it intuitive.
They also may not use some functionality you intended them to. If it’s tied to “unpopular” gestures.
Take pinch. It’s common to use is to zoom in, and you might try to add more elements to your interface, expecting people to zoom in in case they don’t see something. Don’t. Rely on bigger elements, not pinch gestures, to attract more customers.
Focusing on gestures allows you to avoid many UI mistakes, such as small buttons, unusable scrolling, and unreadable text.
It’s not just about fingers, it’s also about what fingers people use to navigate your mobile app.
And people mostly use… Thumbs. That has some consequences for how customers will use your app.
Make sure that the most frequently used buttons that are critical to your customer journey are positioned within the average thumb’s reach.
When working on a mobile version of your website, many companies tend to do the same thing over and over: change nothing.
Ok, a simple responsive “make it look good” approach works for most companies, especially those not selling anything via mobile.
However, that’s a different story for e-commerce websites. If you want to increase your mobile sales, responsive design is not enough.
There are many reasons for it: different demography (“Generation Mobile”), different context (people may use your mobile website while driving or drinking coffee, or both, and I hope they’re reading this and feel guilt), and so on.
You’ll have to think about your navigation from scratch.
For example, here’s a common mobile navigation fallacy:
“The screen is small, so I’ll sweep everything under the hamburger menu.”
Wrong.
There have been countless debates over the usability, faulty, and necessity of the given icon, but this article is not about that.
Just don’t treat the hamburger as a closet where you put things that you may need one day, but never do.
Hamburgers are a tool, not the ultimate remedy for poorly thought out navigation.
Also, keep in mind that hamburger menus on the desktop version of your website can have a completely different purpose.
Think Amazon.
Desktop:
Mobile:
A useful way to think about your mobile navigation is in terms of information architecture, or the purpose of navigation in a specific context.
As already mentioned, people might be using your desktop website and mobile website differently, and you can use that to your benefit.
In order to create sales-oriented mobile navigation, test your website with users, but treat mobile and desktop websites as two different projects.
Nothing undermines the credibility of your website as much as using generic images.
At least turn on the screen. Oh, sunlight, you say? Why the lamp… Ugh, anyway. Here’s photo credit.
Whether in product descriptions, or landing pages, generic images literally project “I don’t care”. It’s a turn-off for credibility.
And credibility is an important component of a buyer’s decision.
Although we’re constantly bombarded with articles proving that images boost conversion rates, it’s not that simple.
Generic stock imagery can hurt your brand and drive people away.
On another note, if you have found great pictures of your products on someone else’s website, it’s better not to use them either. Although it’s not completely clear, your Google rankings may be affected if you’re using duplicate images.
Instead, resort to custom-made images. Hire a professional photographer, ideally, or use the services that allow you to create unique photo compositions, such as Photo Creator.
If your app were a big medieval city where people from all over the world come to buy everything from livestock to a pair of new dirt-decorated trousers, then your search panel would be its main gates.
Now imagine if people were unable to find it. Or open it. Or if your gates were closed all the time. Honestly, if anything is wrong with the main gates, you’ve got problems.
It’s the same with search.
Your search panel is not something you want to hide in order to save precious space on a mobile screen. It’s the reverse: you save space on mobile to let your search panel occupy as much of it as needed.
So no hiding mechanisms, no weird and small typing fields. Just a good old field.
The majority of people who use your app will start their journey with your search panel. Even more so on mobile than desktop. If anything, the search panel is the cornerstone of customer navigation on mobile.
Imagine you want to buy, say, a swimming suit. You type in “swimmin suits” and get no results in return. You leave. There’s no product of this kind on this website.
First of all, make sure your search is smart and processes typos and multiples correctly. In the previous example, there was a typo in the user’s request, but the customer would never know. They’ll just leave, and that’s on you.
Second, make sure it’s even smarter and shows relevant products if there’s no direct match with the customer’s query.
Relevancy and autocompleting are two crucial search features that can greatly up your mobile game.
For relevancy, rich autocomplete is crucial.
So-called search scopes can narrow the attention of a customer and let them browse specific categories where there’s a bigger chance they’ll find what they need and more. This mobile testing revealed that search scopes led to higher discoverability rates – yet 72% of mobile sites don’t have scope suggestions in their autocomplete functionality, and that’s sad.
Test everything. Use embedding testing for hardware and software. Test how well your application performs on different phones and platforms.
Is your app glitchy? That’s a missed customer. Is it stuttering? Same story. But the reasons can be different, from faulty Android-support to an absolute disaster of a database.
Whatever it is, your goal is to carefully study app reviews and thoroughly test your apps to find what’s happening there.
Illustration Source: Icons8 Ouch! Library
Also, perform crash scenarios testing and usability testing.
What will happen if thousands of customers start using your app at the same time? IF your app crashes on Black Friday, you might lose thousands of dollars by the minute because you never were prepared for such traffic.
As for the usability testing, this is practically the only way to get insights into how people actually use your apps, and what you can do to improve conversion rates.
Perform both moderated usability tests with your target users to get deep insights and unmoderated A/B testing to get a bigger picture of how people use your service and track critical metrics.
There’s speculation going around that Google may impose search traffic penalties if your mobile site uses too many pop-ups and ads. Would you be willing to test it?
There may be reasons for this. First, it irritates people and makes them leave. Second, people don’t know how to turn these off and leave because they can’t use your mobile website properly.
Illustration Source: Icons8 Ouch! Library
Keep your ads in check: a forever lost client usually costs more than the one who pressed your ad only to leave a couple of minutes later.
If the search panel is the main gate of your mobile city, then the shopping cart is the cart people take with them to put their products in. Unexpected, right?
Image Source
Now imagine you’ve lost your cart. You lost all the things you put there, you can’t put new things in, and your mind is not in the right place to buy more products.
The same thing happens when people can’t see the status of their cart: how many products did they put in there, are there any products inside, is it even working?
The shopping cart is as crucial as a properly working search, so make sure it’s:
If your website or app is clumsy or slow, 29% of smartphone users will immediately switch to another site or app if it doesn’t satisfy their needs (that is, if they can’t find information or it’s too slow). The truth is, of those users who make the switch, 70% do so because of lagging load times.
Worse yet, 67% of users will switch if it takes too many steps to purchase or get the desired information.
Speed is a complex term. For example, the speed of your website loading is as important as the speed of your customers.
A person comes to your website. It takes them approximately 4 minutes to find the item they need, put it into their cart, and then process their payment.
Statistics tell us that if you were to reduce the buying time from 4 minutes to 3 minutes, there would be more sales and lower cart abandonment rates.
How can you increase the speed of your app or mobile website? Below is some advice from Google.
Eliminate Unnecessary Steps. Your goal is to reduce buying friction as much as possible. Think of it as if you’re building a fast-track and your goal is for people to run as fast as possible
The more steps you have in your mobile experience, the more likely a user is to make an error, to get distracted from their payment, to lose motivation, and so on.
Anticipate Customer Needs. We’ve already talked about how relevant search terms increase the likelihood of a purchase.
Now work one level deeper. Work on your recommendations system, work on your CTA’s and conversion rates.
Customize the buying experience whenever it’s possible, and extensively use analytics to improve your mobile metrics.
Loading Time Matters. Even the most elaborate and optimized mobile UI in the world will still fall short if your mobile site takes too long to load.
40% of shoppers will wait no more than three seconds before abandoning a retail or travel site.
Three seconds. Print this number and put it on the wall of your back-end department. IF you’re working remotely, make them use it as a desktop wallpaper.
And that’s it. Hope you’re applying at least half of these tips already, and your mobile website is performing great. But then you probably know this: there is always something that can be improved.
Good luck!
About the author: Andrew is a usability specialist and content creator at Icons8
Check more UX design practices for ecommerce product pages, billing forms, and CRO tactics for SaaS company websites.
Discover top Figma plugins to streamline your workflow, enhance visuals, and add creative flair to…
Learn how to manage visuals in blog posts to optimize them for SEO in this…
Unraveling Figma’s pricing structure: tips to avoid hefty bills and save money. (more…)
Don't switch tabs to browse icons, illustrations, and photos for your websites. Get them inside…
Transform your Notion space with custom covers! Dive in for easy steps, pro tips, and…
Each design has its own scale. It applies to elements size and like thickness. Now,…
This website uses cookies.