How to design interfaces for m-commerce?
Analyzing data from the e-commerce market and traffic in our clients' stores, we observe a significantly higher number of users accessing our clients' stores using smartphones than through computers or tablets, particularly in some industries (e.g. Fashion/FMCG).
This is a well-known fact, leading to concepts such as 'mobile first' design, where UX specialists should focus on creating the perfect user path for mobile devices first. However, is this the case? Is the market really full of perfectly polished mobile sites?
What actions and design trends increase conversions in m-commerce? I will answer these questions in the following article.
The Statistics About Mobile Commerce
In 2021, 54% of all transactions during 'Cyber Monday' were made via a mobile device. In 2022, mobile users accounted for an average of 59.02% of all website traffic, while desktop users accounted for 38.65% of the traffic. There is a noticeable upward trend when it comes to the number of users using mobile devices. In the fashion or FMCG industries, the proportion of users shopping online via smartphones can be as high as 75% of total traffic. Additionally, the share of the m-commerce market as a percentage of all sales channels has increased. In 2018, it accounted for 3.5% of all transactions, while in 2022, it is expected to reach close to 7%.
The data clearly shows the emerging growth trend and the prevalence of users expecting excellent experiences in the mobile channel. However, despite these expectations, mobile conversions are not meeting their full potential. As part of our analysis for clients, we found that the average conversion rate for mobile users is only half that of desktop users. This thesis is also supported by a 2017 Nielsen Group study, which found that the number of finalized transactions on desktop in 2014 was 288% higher than on mobile, and in 2017, it was only 111% more. Six years later, the state of affairs has not improved significantly.
It is undeniable that mobile conversion rates are still lower than those achieved by desktop users. While it is improving, the 'mobile first' philosophy mentioned in the article's introduction is often an empty slogan. However, this presents an opportunity for your store to stand out from the competition. What should you pay attention to first?
All the options within thumb's reach
The most important aspect of designing mobile apps or online stores is comfort. To ensure that users can use our platform with ease, it is essential to consider the context in which they will access it. The image below provides a clear representation of the screen elements that are easy and difficult to access with a thumb. Well-designed stores make sure that essential features such as product categories, search engine, and shopping cart are located in the lower sectors of the screen, making them easily accessible with one hand. This approach enables users to navigate the platform with ease and convenience, thereby enhancing the overall user experience.
Thumb reach on the screen while holding the phone.
There is a tendency to place navigation elements in mobile apps or responsive web design (RWD) stores in the same way as on desktops. However, this often leads to a situation where the user has to rearrange their phone in their hands to navigate the site, causing discomfort.
The most common mistake is placing the main menu with categories, also known as the "hamburger" menu, in the upper left or right corner. This section is inaccessible to users using both left and right-handed devices, leading to an uncomfortable browsing experience and potentially increasing the bounce rate within the first few seconds after the page loads.
Consistent buying processes for desktop and mobile
A frequently observed problem is the modification of the shopping process for mobile users. While modifying the process for mobile users can lead to better conversion rates, statistics show that the process for computer users is often simpler and shorter. This is because certain practices are widely used in the e-commerce industry.
For example, adding products directly from the product category listing is normal for desktop users but not common on mobile devices. The vast majority of stores we analyzed separate the two processes, requiring a smartphone user to visit the product card to add an item to the cart.
The additional step on mobile often leads to a full shopping cart. In contrast, desktop versions often provide a path to go immediately to checkout from the mini-cart or directly after adding the product. On mobile devices, however, users may have to scroll through all the added products to see the "go to payment" button at the end, leading to lower conversion rates.
Creating an identical process on mobile is not impossible; we have implemented such projects. However, it requires getting out of the comfort zone and abandoning the practice of copying competitors' processes. Only having a consistent process between channels allows for meaningful comparisons of conversions. Comparing different numbers depicting different processes does not make sense from a logical or data perspective.
An example of selecting a size and adding a product to the cart directly from the product listing.
Less is more in m-commerce
Mobile devices provide an excellent platform to instantly verify the quality of designs. As I have emphasized in my previous articles, a task-oriented approach is crucial for building successful applications. I firmly believe that success is achieved by applications that accomplish one specific goal. This is especially true for mobile apps, where we are working with a much smaller screen size. When designing mobile commerce (m-commerce) apps, it is important to focus on one specific task at a time and one particular action that the customer is performing in each step of the process.
Thus, by removing any unnecessary functionality and prioritizing UX, you can create an app that is both easy to use and effective in achieving its goals.
The example of maximum simplification of registration.
The image demonstrates a clear difference in the design of filters between two stores in their mobile versions. On the right, the filters are well-designed and streamlined, allowing users to focus solely on their preferences. There are only two buttons - 'clear' and 'save' - located at the bottom of the screen, making it easy to access the results immediately. In contrast, the filters on the left require users to scroll through all the options before they can save their preferences. Moreover, the top menu is displayed, which is unnecessary when restricting the results in the product list of a category.
One of our clients has successfully implemented a minimalistic design and simplified checkout process. The design features a 'status bar' that shows users the progression through the form in a single bar, rather than listing all the steps. The form is divided into several steps, and when a user clicks on an input, the keyboard pops up in the free space, and the 'continue' button is visible at any point in the process. It's also essential to remove any functions that are not relevant to the user at the moment, providing a more streamlined and efficient checkout process.
The "floating buttons" in forms and on product cards
A key element of good m commerce design is leaning into forms and action buttons, as they guide the user through the purchasing process.One effective technique is to utilize "floating buttons" that remain visible at the bottom of the screen, ensuring quick and easy access to key actions such as "add to cart" or "move on". This approach adheres to the accessibility rule of thumb, enabling users to quickly locate and perform desired actions. In a previous article, I discussed how a failure to locate an action within 2.6 seconds can significantly increase bounce rates, emphasizing the importance of efficient design. When implementing "floating buttons", it is crucial to ensure they are unobtrusive and do not detract from the overall design. They should blend seamlessly with the rest of the layout, while still standing out enough to be noticeable. By following these guidelines, we can enhance the user experience and increase the likelihood of a successful purchase. The image below illustrates the recommended solution:
Fast payments - one-click shopping
Uber Eats and Pyszne.co.uk are two brands that experienced disproportionate growth after implementing maximum simplification of payments. M-commerce platforms have the advantage of integrating with numerous payment methods, such as Apple Pay, Google Pay, or direct card integration. Users can also store their card details and authorize payments using Face ID, fingerprint, or password, making checkout significantly faster than on desktop.
By allowing users to complete transactions in one click (provided they don't need to change the delivery address), m-commerce stores have a significant advantage. If your online store requires users to enter their card details each time they want to make a purchase or redirects them to a bank website or payment app, you risk losing a lot of customers. To increase mobile conversions, we recommend focusing on integrating with popular payment methods, such as Blik, Google Pay or Apple Pay, or enabling users to save their credit card information.
Above we discussed the most common issues that occur in mobile versions of online stores. If you're interested in a dedicated analysis of your online store with a focus on increasing mobile conversions, please don't hesitate to contact me for a free, no-obligation conversation.n.