Five mobile commerce UX problems and how to fix them
Advice from observing real users dealing with real m-commerce issues.
You’ve read all the best practice guides and articles. You’ve set up your ecommerce store. You’ve checked into analytics 100 times a day… and sales are still disappointing.
I’ve seen countless businesses in your situation. Hell, I’ve been in your situation. Thankfully, I’ve also seen these businesses turn things around spectacularly (sometimes doubling sales in a matter of weeks).
It always comes down to one thing (whether or not they’re conscious of it) – user experience.
User experience (UX) is everything that happens to people when they interact with your online store. It includes everything they see, hear and do, as well as their emotional reactions.
As of 2016, around 56% of all online traffic comes from mobile devices – meaning many selling opportunities and user experiences will happen on a mobile device.
How well does your website work on a mobile device? Does it offer a pleasant UX? Have you even checked?
The key thing to remember with a good ecommerce UX is this – you don’t get to decide for potential customers what is or isn’t a good UX. Customers decide and you obey. It doesn’t matter how “clean” you think your layout is if prospects don’t agree.
For example, a real-life business was able to recoup $300 million in lost sales (yes, really), simply by running UX tests and realising that assumptions it had made about what was or wasn’t “good design” were actually incorrect.
WhatUsersDo and Practicology ran a mobile usability study, based on large-scale UX tests on the mobile sites of 15 online stores. We used our software to record how consumers use these mobile sites and their spoken thoughts as they tried (successfully or unsuccessfully) to buy items.
But that report isn’t freely available, so I’m summarising for you the most impactful insights across 5 areas of ecommerce mobile site design:
1. Mobile site homepage issues
Your homepage is the compass for your site. Not only is it an entry point – it’s the point to which users return when they’d like to find their bearings.
If your site’s compass is broken, your sales will suffer. No two ways about it.
For example, ao.com failed to communicate a major value proposition on its mobile site, as effectively as it had done on desktop.
A huge, red banner promoting a sale greeted users when they landed on the ao.com desktop site:
However, users who landed on the mobile site weren’t greeted with the same attractive proposition:
Instead, the mobile homepage had a carousel that hid the sale proposition – unless users waited for all the banners to scroll past (which rarely happens), they missed the offer.
One reason why responsive design is so tricky is the issue of space – there’s less of it on mobile devices (duh). So, we’re tempted to “fit more into less”. But remember that while you have a smaller surface area to work with, there’s also an endless amount of vertical space.
According to the mobile usability study, users are now more comfortable than ever with scrolling – the traditional idea of things being “above the fold” is outdated. Users will usually scroll – although, it’s advisable to make sure what they see at the top of the page is attractive.
So, instead of hiding critical information behind carousels and other such gimmicks, you can just stack banners on top of one another.
The ASOS mobile homepage stacks commercial propositions above banners for its category pages, in excellent fashion. There’s not a carousel in sight.
2. Mobile site image issues
Simply having high-quality images isn’t enough – you have to optimise how they’re displayed.
For example, Paperchase had a highly stylised, beautiful picture on its homepage… but when users went to the mobile site, the same picture was poorly displayed:
Most of the picture bled off the edge of the screen because it wasn’t properly resized – users completely missed the message in that part of the image.
The Pets At Home mobile site revealed a lethal problem on the opposite end of the scale – images that are simply squashed into a mobile display.
I don’t think even the Eye of Sauron could read that text. This is why responsive design does not equal mobile-optimised design.
The fact that your site fits on a smaller screen doesn’t mean it works well on one.
On an ecommerce site, with tens (sometimes, hundreds) of product and category pages, there are countless opportunities for image screw-ups.
- Can users zoom in to see the product in more detail? Is it obvious to users how they can zoom in?
- Do your images show the product being used in context, or do you rely on stock/manufacturer images?
- Are there bugs preventing images from being displayed on certain devices, operating systems or browsers?
If I don’t restrain myself, this list could get much (much) longer.
3. Mobile site navigation issues
If your homepage is the compass, the navigation bar of your mobile site is the needle.
It points people in the right direction and tells them what is where. At this point (pun very much intended), space becomes an issue all over again.
There are a thousand pieces of advice I could give you about navigation but here’s the main one – avoid hamburger menus if you can.
In a recent study done by WhatUsersDo and the Nielsen Norman Group, it was shown that hamburger icons make it twice as hard for people to find what they’re looking for.
The problem is, most people won’t put in double the effort… it’s much easier to head to your competitor. I know what you’re thinking – “But everyone uses hamburger menus!”
Many sites do so because they just follow trends without checking how these affect user experience or sales. But, again, there are a few who have gotten wiser and are using alternatives to the hamburger menu on their mobile sites.
The River Island example (displayed above) left users confused even after they tapped on the hamburger menu. This is likely because the menu items we’re simply squashed into a list, rather than reorganised in way that makes sense on a mobile device.
If you can’t avoid hamburger menus, at least make sure you apply design guidelines which mitigate their limitations, then run UX tests to see if there’s a positive effect on users.
4. Mobile site form completion issues
Forms are necessary for completing virtually all online purchases. On mobile sites, they’re even more critical because users don’t have access to a physical keyboard.
Typing is twice as hard. Fat fingers are twice as error-prone. Autocorrect is ten times as annoying.
For example, if your ecommerce checkout requires users to pick the country they’re in, don’t display a super-long list of all the countries in the world and ask users to scroll ad infinitum.
Instead, you can allow users to start typing the name of their country and provide suggestions based on the characters they’ve already entered. Or you can use geolocation services (with permission, of course) to offer a suggestion of where you think they are.
Validation of the information being entered into forms can also be a sore area. Sometimes, form fields automatically turn on caps for the first letter entered by a user. If the user’s email address starts with a lowercase letter, for example, they’ll probably forget to turn off auto caps when they need to enter their email address again (for validation) – leading to an error.
Avoid making formatting-related decisions for users. And if you can’t, make it clear with an info bubble that caps is on.
Also, if a user does make an error, don’t just tell them something’s gone wrong – let them know (in exact terms) what the problem is and how they can fix it.
5. Mobile site button issues
There’s a simple, double-sided rule you can follow regarding the buttons on your mobile site:
- Make sure buttons look like real-life, clickable buttons – and if something (that isn’t a button) looks clickable, make sure it can actually be clicked
For example, Paperchase used + signs instead of buttons, then made things worse by not allowing users to click the text next to each + sign.
This meant most users struggled to click on the selection they wanted – the target (+) was too small and didn’t look like a target at all.
Even worse, the rules were completely different for the clickable areas higher up on the screen (e.g. “Gifts & Home”). For those options, the entire area (text and arrows) was clickable.
So… Paperchase switched from → signs to + signs, and allowed text clicking in one area but not the other. Users were utterly frustrated.
In a similar vein, the Sports Direct mobile site failed to account for fat fingers and placed its search icon next to the menu icon. When users tried to perform a search, they accidentally closed the entire menu.
People who were trying to buy winter socks for their cold feet, soon had cold feet about buying at all from Sports Direct.
If you do nothing else, please remember this…
All the UX insights in this article are based on first-hand observation of how real people use these websites – not expert opinions, best practice guides or the CEO’s personal taste.
If you really want to step up your online sales performance, you should adopt the same approach.
I mean, does it make sense to turn a blind eye to the signals your users are sending about what persuades them to buy… or sends them running into your competitors’ arms?
Timi is a passionate creative and meticulous business strategist. He currently designs and executes the content strategy for PatSnap’s marketing programme. Timi is the former senior writer and content strategist at WhatUsersDo.