M-commerce (or mobile commerce, to give it its full name) is quickly becoming big business. With some predicting that mobile sales will reach $31 billion by 2018, others estimating $86 billion by 2016, and some going as far as $108 billion by 2017 just in US sales alone, no one seems to really know how quickly this market will develop. But regardless of the statistics, what is clear is that mobile commerce is growing, and growing fast.
So what factors do you need to consider when building a successful M-commerce site? We’ve rounded up a few ideas and some usability pitfalls to avoid.
Clutter and confusion
How users interact with a website is never more important than in M-commerce. If your website is difficult to see, visually cluttered or downright confusing, users simply won’t buy. Your site needs to be simple and to-the-point.
Before deciding whether to shop, users like to be able to quickly scan the homepage and get an overview. They also like to browse through different options before making a final purchase selection. First impressions are important, and less is usually more.
The necessity of easy navigation
Poor navigation is more off-putting on a mobile device than on a desktop screen, and it’s much more difficult to do well, design-wise, due to small screen real estate. But trying to increase screen areas by hiding your category navigation isn’t the way to go.
Show top-level navigation clearly and concisely on your homepage, and avoid using drop-down menus (using your fingers to select items makes drop-downs a no-no for mobile). Try not to have white space exactly at the fold, but design the site so that part of an image is showing. This way, your users will know to scroll down. Ease of usability is absolutely critical if you want your customers to buy from your site.
Keep that data!
Tests have shown that M-commerce users are particularly concerned about losing data they have already inputted, for example, when going back to shop for more items post-checkout or when navigating to new pages within the site. A combination of persistent data and a message to let the user know that their data will be kept (or lost, for that matter, if they click a particular button) will help to reassure your audience.
Don’t jump on the carousel
Animated carousels have been shown in studies to be less effective than might be imagined, for several reasons. Firstly, they can look like advertising, and users sometimes just choose to ignore them. Secondly, on a mobile screen, they take up too much space and make things visually confusing. There are issues when people click on slides at the very second they change to the next slide, and also people can become impatient about waiting to see what else is on the carousel, choosing to move elsewhere within the site instead.
{module_contentholder,name=”Blog ad”}
Product sub-pages
Showing larger images or extra information on a separate subpage can be problematic too, since it’s difficult for mobile users to gain a true sense of the navigation and page/subpage scope of the website. Using progressive disclosure, where information is set within collapsible sections on the main product page, or using an overlay where the user can see a larger image but still see the main product page beneath it, can help to iron out some of these issues.
Simple user-friendly fixes
Other simple fixes such as making sure that guest login options appear at the top of the screen (before your users start needlessly filling in forms) and disabling auto-correction if the dictionary is weak will also help to minimize any customer irritation and make your M-commerce website much more user-friendly.
Make it obvious
Making the hit areas obvious is also helpful to your users. They need to know which items are ‘clickable’ links and which aren’t. So keep things simple and consistent. Making the entire element area lead to the appropriate page means that there will be less confusion, as will avoiding multiple hit areas within one visual element.
Of course, many factors that you need to consider on an M-commerce site are the same as those for creating any kind of mobile interface. Making sure that fields are long enough to display common data is one such common issue. If users can’t see what they’ve just typed in, they won’t know whether they’ve made a mistake or not, and some may feel they need to delete everything and type it again.
Similarly, using a date-picker is much easier for fingers on a small screen and is far more user-friendly than either a text box or a drop-down menu.
Keeping things simple is the key to creating an M-commerce site on which your users feel comfortable and confident to browse and buy.
For other tips on mobile web design, see our previous blog posts about Mobile assumptions and Multi-level navigations.