M-Commerce Tips For Designing A Better Shopping Experience

By Nagaraj Nagabhushanam. in UI/UX. Updated on July 15, 2022.

With annual retail sales via mobiles and tablets expected to hit $707 billion by 2018, more and more consumers are now looking for a visually engaging online shopping experience.

Going mobile, however, has its own set of challenges. Whether it’s designing for varying screen sizes or offering a touch-friendly interface to consumers, mobile poses too many challenges to retailers. Designing and developing a flawless m-commerce experience requires you to think in terms of turning these limitations into opportunities.

Are you creating a mobile shopping site or app? Here’s a set of best practices that you should adopt when creating an m-commerce website or app that enhances the end customer’s mobile shopping experience:

1. Think Mobile-First

Most consumers merely scan through the design and visual elements on the homepage to get an idea of what the site offers. It is important to keep the mobile user in mind, when designing, instead of trying to fit all the information on your desktop site into your mobile site.

Jimmy Choo, a luxury shoes and bags brand, makes it easy for their consumers to scan through the homepage by employing a simple layout that displays one central image followed by a list of categories below it.

Although they have included a slider for the images, this layout helps the consumer to gauge the kind of products that they can expect to find on the website.

Automatic carousels are outdated

A crowded mobile homepage with too many visual elements, such as automatic carousels, will only confuse your consumers further. One of the key rules of interface design is that the consumer needs to be in control. Carousels go against this rule by moving too quickly with small navigation icons, if any.

A study by Notre Dame University found that when it comes to carousels, the first slide bags 84% of all clicks.

This is the case with GAP mobile website, where more than half of the first visible part of the homepage displays a slider that rotates between five different offers. Most consumers find this very frustrating as there are high chances that they might click on a promotional image only to be taken to a different one.

Therefore, it is always advisable to use one static image. This helps the consumer to stay focused on the action plan. If you must opt for an image slider, go for one that does not move automatically.

Anthropologie, a multi-channel lifestyle brand, for example, employs a simple layout with one prominent image at the centre. They have taken special care to note that the image included ideally lets consumers know what to expect on the website. In this case, it revolves around luxury clothing, shoes and accessories.

Free jQuery Image Galleries & Sliders – Best Of

Image galleries and sliders are among the most popular use cases of jQuery. They allow you to present... Read more

Custom UI Drop-Down Menus For Navigation

Most consumers prefer to scroll up and down the category list to get a good idea of what their options are, even if they found what they were looking for right away. And it is due to this strong tendency that native pull-down menus are a poor choice for navigation.

Best Buy, for instance earlier employed a similar native UI drop-down menu. With only half of the screen used to display the available options, most consumers found it difficult to scroll through, scan and compare the available options.

A custom UI drop-down on the other hand, gives the consumer a better overview of their options. The current Best Buy mobile website employs a similar custom UI drop-down to provide their consumers with a better overview of their options. For example, when a consumer clicks on a particular category say ‘Weekly Deals’, it loads a new page, instead of displaying it in a small dialog box.

Then again, if yours is an e-Commerce site with fewer parent and sibling categories like Dune London, then you could opt for progressive disclosure (right) to show the sibling categories directly on the homepage, as and when the user requests it.

.no-js #ref-block-post-5422 .ref-block__thumbnail { background-image: url("https://assets.hongkiat.com/uploads/thumbs/250x160/breadcrumb-navigation-examined-best-practices-examples.jpg"); }

Breadcrumb Navigation: Best Practices and Examples

Breadcrumb navigation is often overlooked in the design and development process. Some people may see it as unnecessary, while... Read more

2. Use Intuitive mobile UI to enhance Purchases

Consumers often want to view a previously visited product. The reasons could vary from wanting to compare two products, to checking whether certain features of a previously viewed product are compatible with the new one. Many a time consumers end up having to search for it by going through the categories all over again.

ASOS, a U.K based fashion and beauty online store, makes it easy for consumers to return to a previously visited item (without repeatedly clicking on the ‘Back’ button) by displaying a list of ‘Recently Viewed’ products on their product page. It also encourages consumers to explore other items by assuring them that finding products again won’t be a hassle.

How to Create a Responsive Navigation For Your Site

One of the trickiest parts to be responsified on a website is "the Navigation", this part is really... Read more

Be Touch friendly

With the small screen areas on most mobile devices, clicking on an exact element on the screen can often be difficult. To make it easier for consumers to tap, there should be sufficient space between the different touch elements within your content. It is advisable to keep touch elements at 7×7 mm size visually, while maintaining the separators between touch elements at 2×2 mm size.

You could also refer to the guidelines provided by different mobile platforms to decide on the size of the touch targets to be used. It is equally important to keep complete units clickable, while ensuring that they do not span the entire viewport.

Designing for Mobile Devices

The first iPhone revolutionized the tech world when it was released. Now, almost five years later, the smartphone... Read more

3. Choose Information Architecture wisely

When consumers are unable to find a sibling-category where they expect, they often conclude that the website doesn’t sell that particular product. To avoid this you should add the subcategory under multiple parent categories. Here’s an example.

Amazon’s mobile website for instance, lists headphones as a sibling-category under both ‘Mobiles & Tablets’ and ‘Audio & Video’. This further increases the chances of consumers discovering the product they were in search of.

Designing a Winning Navigation Menu (Ideas and Inspirations)

Note: This post was first published on the 20th December, 2012. The navigation menu on a website is... Read more

Including ‘New’ as a separate parent category is particularly useful in industries where the recentness of a product could have a major impact on the consumers’ purchase decision. For example, the Dune London mobile website helps frequent visitors by including parent categories such as NEW IN to let them quickly scan through the new products that have arrived since their last visit.

Then again, as seen on the mobile website of Fallen Hero, a British based online fashion store, it is always best to employ ‘New’ as a filter, rather than a separate category as it helps consumers to view new items within a particular category.

Other categorization techniques that work well are ‘Customer Favourites’, ‘Best Sellers’, ‘Sale’ and so on. These customer recommendations will not only make shoppers more confident about their purchase decisions but also define your brand in their minds.

It goes without saying that m-commerce brings along numerous opportunities. Not only does it enable online stores to distinguish themselves from competitors but also helps them position themselves well enough to grab a share of this billion-dollar market.