authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Stelian is a UI designer with more than seven years of experience in designing and building projects of different scales from the ground up.
The term “mobile commerce” was introduced 20 years ago by Kevin Duffey when he suggested that a mobile device could function as a retail outlet in a customer’s pocket. Considering the technological limitations of the time, who would have thought that we would one day be able to easily explore, review, and purchase goods on a small pocket-sized device?
I can’t overstate how mobile is changing how we interact with our consumers; we have to embrace these changes. – Joel Anderson, CEO of Walmart
The astounding growth of e-commerce has also fueled the growth of mobile e-commerce, now worth nearly $700 billion. Mobile e-commerce is currently the biggest slice of the giant online market. More than 80% of Americans have made a purchase in the last month online—three years ago, the number was only 11.6%.
A report from Business Insider Intelligence suggested that mobile commerce will increase up to 45% by 2020. ComScore research agreed and, in 2016, reported a 44% increase in spending via mobile devices compared to 2015.
Despite the high sales numbers, more than 60% of users still feel concerned about having their financial information hacked when using a mobile phone. Nevertheless, customer satisfaction is still fairly high, with mobile retail giants like Amazon and Apple both receiving a satisfaction rating of more than 80%.
People are familiar with gestures like double tapping and pinching in order to zoom in to images on mobile. During a mobile e-commerce usability study, the Baymard Institute found that, quite naturally, shoppers want to be able to inspect the product thoroughly and are concerned about the small details. Users who were interested in purchasing a product but couldn’t explore it by zooming in didn’t feel comfortable buying it and often didn’t commit to the sale.
It’s quite surprising that of the 50 top-grossing mobile e-commerce applications, more than 40% didn’t support zooming gestures. Even sites that offered close-up versions of images experienced similar bounce rates, which suggests that support of product image zooming gestures in a mobile e-commerce app is fundamental.
Considering the small screen size of mobile devices, this is a platform-specific issue. Supporting at least one of these features will put an app in the company of the top 50% of e-commerce applications, i.e., the top-grossing list.
A few factors to consider:
As mentioned earlier, the small screen size of mobile devices is a primary roadblock when it comes to mobile e-commerce. The Baymard Institute observed that more than 61% of mobile users will often use their desktops to complete a purchase rather than their phone.
A “save shopping cart” feature reduces the number of cart abandonments and enables shoppers to save items for a later purchase. Persistent shopping carts allow customers to continue their shopping without the need to search for the desired product on their return—a feature that 55% of shoppers would make use of.
Here’s how to retain these customers:
Applying best practices for mobile forms is another consideration. It’s important that the UX design of an e-commerce app or site, while eliminating any confusion, allow users to complete forms as quickly as possible.
Here are the best practices for mobile form usability:
The main purpose behind auto-suggestion is to make it easier and faster for users to fill out forms. Auto-suggestion predicts common search queries and helps shoppers find products more easily.
Mobile usability can be further improved by using credit card type auto-detection. Auto-detection streamlines the purchase process by providing immediate feedback for supported card types. Automation of as many data entry processes as possible—preferably with visuals—improves the user experience and will positively affect conversion rates.
Address lookup and validation accelerate the checkout process—various APIs (such as Google Places and the USPS) enable easy implementation of this feature.
Providing inline input validation for errors is also a best practice in mobile UX design. The lack of speedy performance is a major frustration for e-commerce shoppers. This can be helped by providing users live feedback on their progress (during checkout, for example), especially when they make an inadvertent mistake. This allows users to fix their mistakes immediately, which affects usability in a positive way.
Microinteractions are details in a product’s interface meant to accomplish a single task while improving the natural product flow. Liking and rating a product, picking a color and size, and swiping down to refresh data are all examples of microinteractions.
Considering how common they are, microinteractions can make or break the UX of a mobile e-commerce application.
Microinteractions can be used to:
Understanding the most common ways shoppers hold their mobile devices improves mobile e-commerce user experience and usability. In 2013, Steven Hoober asked “How Do Users Really Hold Mobile Devices?” and observed how people interact with and hold their smartphones, and noticed three main behavioral patterns that should guide mobile UX design.
Adapting interfaces to how people naturally use mobile phones will increase user comfort and reduce shopper anxiety. Mobile devices and screen sizes vary, yet the “thumb zone,” a critical aspect of the design and user experience, remains the same.
Designing around the “thumb zone”:
Security is one of the biggest concerns for users while shopping on mobile devices. Communicating that their transactions are secure adds a lot of value to the positive perception shoppers have towards a store.
Here are some UX design techniques that communicate security to users and reduce user anxiety:
Shoppers use a mobile e-commerce site or app to explore products or to purchase a particular product; consequently, a well-designed search takes on critical importance for a mobile e-commerce application. eBay believes its site search is one of the most important features for mobile shoppers and emphasizes it by placing it in the center and above the fold on the interface.
Important considerations for mobile search:
An important aspect to consider when displaying search forms is that they are only valuable at the first stages of a user’s interaction with the application. Users typically search the application at the beginning of their shopping journey, and there can be instances when displaying a search form later in the journey may harm the UX.
For example, during the checkout process, search is no longer useful and will only distract because it could make users lose focus and forego their commitment to the purchase.
Studies have shown that the checkout process is the most stressful part of completing a purchase online. The Baymard Institute reports a rate of 35% for cart abandonment because of the requirement to create an account before purchasing. In order to decrease cart abandonment rates, it’s important to design an easy, fast checkout process that doesn’t ask shoppers to register first.
Usability studies have found that more than 60% of users had difficulty in finding the guest checkout option; ergo, the guest checkout option must be clearly visible and easy to access.
Here are a few suggestions for an improved e-commerce checkout flow:
Mobile e-commerce trends show that the mobile e-commerce market is growing exponentially and the growth of the industry has created a multitude of benefits for sellers. However, with that came many best practices and standards for mobile e-commerce design that sellers must follow if they are to be successful.
Shoppers expect a mobile application that works well, looks beautiful, and is adapted to their behaviors. Although every application is different with its own limitations and goals, following the fundamental principles outlined in this article will help create successful mobile e-commerce applications.
The third quarter of 2017 had 53% of traffic that originated from mobile devices. This number increased 10% compared to last year.
eCommerce online shopping is the process of buying and selling goods online that are purchased using desktop computers or mobile devices.
Mobile design refers to the design of interfaces focused on mobile devices and wearables by employing UX and UI design principles.
A mobile-first strategy is an approach to design that aims to design for mobile devices first, then progressively add more functionality for bigger screen devices.
London, United Kingdom
February 23, 2017
Stelian is a UI designer with more than seven years of experience in designing and building projects of different scales from the ground up.
World-class articles, delivered weekly.
World-class articles, delivered weekly.
Join the Toptal® community.