Mobile continues to rapidly gain the space in eCommerce. This year, mobile traffic volume outpaced desktop. However, the scenario is not the same for conversion rate. According to the smartinsights report, desktop wins the game and records 67% of eCommerce online sales in the year 2016 which is down compared to the sales in the year 2015.
Considering these facts, we can conclude that mobile commerce is not an unusual term. It has become the preferred choice for online users. Hence, being the UI/UX designer, you need to think like a user before start designing the mobile store. As Steve Jobs said, “Design is not just what it looks like and feels like. Design is how it works”.
You have probably got an idea what are we going to discuss in this blog. Yes, It’s about how a seamless user experience can improve eCommerce mobile store’s conversion rates.
The first section covers the best practices whilst the second section unveils a few UI illustrations
Section 1 – Best Practices
#Sign-in and Registration: It is really important for users to focus on actions. In mobile, you may have come across various scenarios where sign-in and registration are placed in separate screens. But using the UI components like segmented control and radio buttons, you can easily manage two forms in a single screen.Here is the example;
Filling the screen with unwanted UI components makes the UI dull and messy. Besides, users also eschew registering in such apps as there is no space for them to click. Hence, a form designed with less components is preferable as it consumes less time for users to store information in the app.
#Action Event:It notifies users about the action they need to act on. Action indicators are essential to help users know what they are doing. Are they submitting a form or selecting the product to buy?
The text of the events should be concise helping users know what action to perform. For instance, Add to Shopping Cart button indicates users to add the items in the shopping cart. On clicking it the button shows the loading and then changes to View Shopping Cart. This interchanging of text notifies the users about the action executed on the item.
Below example outlines the idea how to place actionable events on the screen;
#Communicate Shipping Cost:Why people prefer shopping online? eCommerce offers the convenience to shop online. 37% people leave your store because shipping and managing costs are displayed at the end of the process. Probably at the time of checkout.You charge or you don’t, it is required to communicate about the shipping information often. You can display the shipping cost on the home screen, while listing the products or in the product detail screen. Doing so, increases the trust score and user engagement both.
In this illustration, the shipping information is displayed in the product details screen. As said above, the information can also be displayed on the home screen.
#Evaluate Shipping Time:Do you like to calculate the shipment days? Of course, No. These things are to be mentioned specifically. Even if you ask to calculate the shipping cost, users will immediately desert your store and move to your competitor’s store.Most of the eCommerce mobile stores don’t display the shipping time, they only mention the estimated days. For instance, the product will get shipped in 3 to 5 working days. Though they don’t display the estimated time in the app, they notify the users via SMS about the dispatch and the shipping day.
But if you want to better the user experience of your store, you can add the approximate time along with the shipping methods.
Here is the example;
#Descriptive Buttons: One question to ask, if you use text like “Continue” or “Next”, will users be able to understand what they have to do next? A BIG NO. Descriptive buttons indicate them about the next step.
In this example, there are a few options listed with a radio button.Selecting on any of the options, the “Continue to Checkout” changes its state and takes the user to the payment screen.
#Security Messaging: Using https in the url users feel secure while storing the information in sites. Most of us know what S means. S stands for Secure Socket Layer. The same socket layer is used in mobile apps to ensure the security of user information.The text “Secure” or “Securely” on the action button develops a kind of surety for not losing any information.
For instance, While choosing the payment gateway, whatever option users choose, it assures secure checkout. 13% to 15% of users abandon checkouts due to the fear of losing the credit or master card information.
#App like Header:Headers are quick in providing the key information to users. Hence, headers should be designed in a manner that adds user value. For instance; m-commerce stores which offers sales often can shout for it designing an eye-soothing header with text in readable format.
Here is an example;
#App like Footer:It is a myth that footers don’t add value to the app. You may have noticed that in most cases, users reach the end without going through any useful information. Footers can actually be productive for your app.For instances, adding social media plugins, promoting new brands in the store, ensuring information security or answering a few FAQs.There are good number of examples you can pick to make your footer contextual. As said, treat your app footers the way you treat your foot.
Here is the perfect example that signifies the above line.
#Drawer Navigation:This type of navigation allows you to fill the slider with as many categories as you want. It supports accordion menu style that expands and collapse sub categories as per the action executed.
Accordion Menu is indeed the best option if you going deep in listing the categories. While designing the sections, you are adaptive to use “+” and “-” which is not the correct way. Instead, use “+” and “x” to help user better understand the closing of the sub-menu.
#Tabbed Navigation:This type of navigation pattern is preferable when your m-commerce store has less categories to include. Studies have reported that tabbed navigation is easy to understand and engage more users.There are a few m-commerce stores designs that comprises tabbed navigation. This pattern not only improves the app performance but also enhances the look and feel.
#Mixed Navigation:This navigation pattern includes both tabbed and drawer navigation. Gigantic m-commerce stores like Myntra, Amazon use this type of navigation as it provides the best of both the worlds.Drawer Navigation lists all the categories and sub-categories while tabbed navigation displays the selective categories.The example added below visualize the above statement.
#Placeholder Content: No wonder, with the advances in mobile technology the experience is getting faster. Still, there are hurdles that downline the user engagement graph. You can resolve those by improving your store’s perceived performance which can be enhanced using the placeholder content.
Placeholder content is one of the best approach you can use to keep users engage with the product listing as it does not show up the blank screen. Yes, there is a possibility that due to high resolution, product images takes more than 3 seconds to display but these things can be shrouded.
Placeholders are extensively used in the websites to reduce the loading time and faster the app performance. The same strategy is now used in m-commerce.
So, these were 12 best practices that aid you to design a beautiful and interactive m-commerce solution. Moving on to a few instances.
Section 2- UI examples
#Product Listing: Image Carousel is the thing of the past. It limits the search accessibility and takes time to load. Previously, eCommerce mobile stores were designed using image carousel which is now replaced with page scroll layout.
There are thousands of brands and products to list, in such cases, using image carousel narrows the beauty of the user interface. The same if displayed in a page scroll layout completely changes the look and feel of the screen.
Here is the example.
#Product Display: This screen is designed to view the 360 angel of the product along with the necessary information such as color, size, brand, price, shipping details, etc. Therefore, displaying collective information at a time may increase the loading time and result into app crash.
To break this hindrance, accordion style is the best. You can design the screen using this valuable component and hide or show the content as per the user action.
Below image will help you understand the layout in a better way.
If users are shopping online for apparels or footwear, size is the major factor that stops them. Isn’t it? This question always hits, whether this size will fit or be loose? To eradicate this shopping barrier, size chart is introduced.
You can display size chart in the product display screen using click event.
Glance over the below example.
#Home Screen: It is app’s first screen that summarizes the site content. When the user enters the home screen and scrolls from top to bottom, he should infer the entire site content from major categories to products to brands, to payment methods to offers, everything. You can also do promotional activities here and entice more users by displaying the valuable information which others don’t provide.
Here is the example that simplifies the above explanation.
Who loves shopping on mobile? Everyone. And, from past a couple of years mobile shopping is booming. Hence, it’s a golden opportunity for the designers to bridge the gap, reduce friction and make shopping pleasurable for users.
Hope you found this blog useful. Share your thoughts in the comment section below.
Concept Source: Mobify