{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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.

David Moth

Published 20 May, 2013 by David Moth @ Econsultancy

David Moth is Editor and Head of Social at Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

1674 more posts from this author

Comments (15)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Jacob Gerber

Great article, and sweet Flight of the Navigator image! I loved that movie when I was little.

almost 3 years ago

David Moth

David Moth, Editor & Head of Social at EconsultancyStaff

@Jacob, thanks. Flight of the Navigator was a huge favourite in the Moth household when I was a kid so I couldn't resist!

almost 3 years ago

Arron Zhang

Arron Zhang, Business Consultant at Advangent

Kudos to the post.

I have to agree with Jacob. I saw the movie many many years ago but still think its the best-designed UFO I've seen so far.

almost 3 years ago

Avatar-blank-50x50

Liz Fletcher

Thanks for the super insightful post!

Seeing that most consumers are on their smartphones and/or tablets it's very important to have a responsive website or a mobile theme for your website. I personally find it frustrating when neither of these are the case and find myself "jumping ship" to a competitors site due to the lack of readability.

Great tips, thank you!!

almost 3 years ago

Avatar-blank-50x50

Mike

I'm definitely a fan of the icon sets vs. lists. If someone is on your site via their mobile device they want to find what they're looking for quickly and easily. And if a site has icons/pictures for various items vs just a list (as vague as "Gallant Love" as mentioned in the post), then you're less likely to know where you're going if you click that list. Just my two cents!

almost 3 years ago

Avatar-blank-50x50

Philip Joost

Great article to read but not easy to read on an iPhone... on a site which isn't mobile friendly.

almost 3 years ago

Avatar-blank-50x50

Elle

LOVE flight of the navigator :-)

almost 3 years ago

James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

Hi David,

Thanks for sharing your thoughts and links to backup research.

I think the icons vs. text decision is an interesting one. I'm with you on the visual aesthetics of icons but the usefulness depends on how obvious the icon is in relation to what it does. As you say, we're seeing some consistency now in m-site icon design with the 3 bar hamburger denoting an expandable menu but other icons do vary.

Still the best way to optimise the experience is to put testing at the heart of site design - it's not an onerous task to AB test an icon vs. text version of the global navigation.

Another navigational element to think about is using adaptive design to manage the screen when people flip from portrait to landscape on smartphones. If you take product list pages and the sort options (list view vs. grid view), often the grid choice is a 3 column row. If you flip to landscape the width is much greater, so intelligent design is adaptive to reflow the page to either increase the size of existing content or show more content.

The House of Fraser mobile site does this - the grid view changes from 3 to 5 products.

Thanks
james

almost 3 years ago

Avatar-blank-50x50

Glenn

Like others, I feel compelled to write a comment thanking you for the Flight of the Navigator image - made me smile remembering the film... "Compliance!"

I'll actually read the article now I have calmed down...

almost 3 years ago

Robert Yardy

Robert Yardy, Marketing Manager at MMT Digital

Completely agree with what you said about ASOS. The same problem exists on their desktop site!

almost 3 years ago

Avatar-blank-50x50

Lauren Wallace

Love the image - retro SJP! It's worth mentioning mobile sites adopting high levels of layers don't just eat up your time, they eat up your 3G data!

almost 3 years ago

Avatar-blank-50x50

Depesh Mandalia, Head of Digital Marketing at Lost My Name

I have to agree with @JamesGurd - on both considering whether icons are best and on responsive layouts. Lets say if you have a sub category of a category and your list expands - trying to 'icon'ify all of the sub categories will become onerous and you'll probably run out of icons

Then for responsive in particular you need to adapt to having a certain number of elements going across based on viewport width

You also encounter usability issues with icons such as those with colour blindness or long sighted vision perhaps not being able to make out icons as quickly as text, let alone the meaning of the icons...

almost 3 years ago

Avatar-blank-50x50

Depesh Mandalia, Head of Digital Marketing at Lost My Name

almost 3 years ago

Avatar-blank-50x50

Mokel

@Mike, yes icons make it easier, though when they don't load quickly enough (leaving ugly place-holders) you can lose confidence that the site is working properly.

almost 3 years ago

David Moth

David Moth, Editor & Head of Social at EconsultancyStaff

Thanks for your comments everyone - I had no idea Flight of the Navigator was such a cult hit!

@James, when it comes to icons vs. lists I prefer icons that also have text underneath, which gets rid of any ambiguity. You can see it in the Tesco example and Schuh also adopts that approach on its mobile site. In terms of usability, I think icons are just easier to press than text links which can occasionally be too slim for my fat thumbs.

Your point about adaptive design is a good one. From memory I think most sites I've looked at do use adaptive design, though it's not something I generally check.

almost 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.