Navigation is central to the mobile user experience as visitors want to be able to find what they're looking for or browse your wares with little fuss.
If they have to struggle with confusing menu options and numerous barriers then they'll become frustrated and jump ship to one of your competitors.
A new report investigating consumer opinions of mobile commerce has found that there is still a perception that the mobile web offers a poor user experience.
More than a third (37%) of respondents in the EPiServer survey agreed that many mobile websites are difficult to navigate, an increase from 32% in 2011.
With this in mind, here are 11 tips for improving mobile web navigation...
Limit the layers of navigation
Mobile users aren't known for their patience so you need to limit the number of clicks before they get to the product options.
This problem is intensified when visitors are using 3G, as if they have a slow connection then each layer adds valuable seconds onto the navigation time and makes it hugely unlikely that they'll stick around to complete their task.
Therefore it's a good idea to limit your site to a maximum of three levels of navigation, otherwise your site is probably too complicated and you're asking too much of the user.
Use nested navigation
The three-line navigation button is practically ubiquitous on mobile sites these days. It's a great tool for hiding navigation options in a drop-down menu with the added benefit of freeing up space on the page.
In general retailers position the button at the top of the page so it's always available to visitors, which provides a comforting level of consistency in site navigation.
Best Buy and Nike both use the three-line button on their mobile sites to good effect, while Best Buy also has a well positioned search tool.
Clarity of options
Copywriting is a big part of providing a user journey as you need to make it obvious to the visitor where each click will lead them.
In general ecommerce sites are good at using simple language, however luxury and high-end retailers are often guilty of making things over complicated.
For example, two of the five options that Abercrombie gives you are quite vague and I'm not sure exactly what I'll get if I accept Louis Vuitton's offer of "Gallant Love."
Icons vs. lists
I haven't seen any evidence that either option is more effective, but personally I find icons more aesthetically pleasing and user-friendly.
They tend to be bigger so they're more forgiving on fat thumbs, plus they allow your designers to be more creative.
Simple lists of text links are quite common and get the job done, but they take away a brand's ability to stamp its own style and personality on its mobile site.
The difference can be seen here in examples from Tesco and House of Fraser...
Limit the number of menu options on each page
While researching this post I came across various different recommendations for the maximum number of menu options mobile sites should include on each page.
Some suggested that five was the optimum number while others said include no more than seven.
Another report published in The Journal of Personality and Social Psychology suggests that people tend to get confused when presented with more than six options.
So though the precise number of options is open to debate, it's still advisable to place a limit on the maximum number of options per page so that users don't get confused and drop out.
Even Amazon, with its wealth of product options, only gives six categories on its homepage. And though I'm not a fan of Sears' mobile site with its dull as dishwater design, it does at least keep things simple.
Filtered navigation
Most major ecommerce sites have a broad product range so it's important to allow users to filter out results that are irrelevant to them.
There are a number of potential criteria, including brand, size, price, colour – it's just a case of picking the ones that are most relevant for your product range.
Avoid mentioning page numbers
There's no way of getting round the fact that browsing hundreds of product options on a mobile is an arduous process, so retailers need to be clever to prevent people from losing patience and abandoning the site.
One way of doing this is by avoiding mentioning how many pages of product options their search has found.
Instead consider using endless scroll or give them the option to 'View more items.'
One-click checkout
Amazon has really nailed the checkout process with its 1-Click payment system, but many of its competitors also allow customers to store their card details so future purchases can be made with just a few clicks.
I previously investigated the mobile checkouts of several of the UK's top online retailers and found that M&S, John Lewis and ASOS also simplify the payment process for returning customers.
This is an extremely valuable tool for mobile customers as form filling and security concerns around entering card details are still seen as two of the main barriers to mobile commerce.
Obey the 44x44 rule
In order for users to be able to navigate your site comfortably all CTAs and buttons need to be big enough to easily click with a thumb.
A CTA that is 44x44 pixels should be large enough to accommodate most people's thumbprints, but you also need to make sure there is enough space around the buttons to avoid accidental clicks.
These examples from Currys and United Pixel Workers, which both use responsive design, show how to design CTAs that standout and are easy to click.
Prominent site search
According to Microsoft 70% of mobile search tasks are completed within the hour compared to a week on desktop, so users clearly know what they're looking for and have a sense of urgency.
As such it's useful to display a prominent search tool on your mobile site so visitors don't have to waste time browsing different product categories.
We've previously blogged best practice tips for ecommerce site search – the most important things to consider are:
- Make the box easy to spot, ideally at the top of the page.
- Position a search box in the same position on each page of the site.
- Use predictive search where possible.
- Link to advanced search option.
Let visitors use the back button on their phone
This is a personal bug bear and one that annoys me so much I felt compelled to include it. I commonly use the back button on my Samsung handset to navigate around my phone's various features, so I also expect to be able to use it on mobile sites.
Thankfully most retailers support this feature, however some can't seem to cope with it and go into meltdown when you try to go back using anything but the on-site tools.
A prime example is ASOS. If you try to navigate around the product categories by using the back button on your handset then it boots you off the site altogether or back to the homepage.
For example, if you're browsing shirts in the sale and choose to refine the results, then subsequently click the back button on your handset to return to the results screen, the mobile site sends you all the way back to the homepage despite the fact that you had to navigate through three separate screens to get to the 'refine results' page.
Personally I find that to be a major UX flaw as I think that to an extent sites should adapt to existing user behaviours, though I appreciate that not every user will be the same.
No hay comentarios:
Publicar un comentario