10 Decisive Mobile eCommerce Best Practices for UX
There’s a difference between new and well-established mobile eCommerce sites. While our intuitions about conversion rates were strong, we wanted to delve deeper into details. A few months ago, we hired a couple of research interns from Ivy League colleges to benchmark 200 mobile eCommerce sites. We were able to compile all the research findings. We articulated 150 mobile eCommerce best practices and guidelines. While it’s not possible to share all the 150 best practices, we would like to share the decisive ones. Without any further ado, let’s get started.
Best Practice #1: Too many colors spoil the look
Colors are known to interfere with branding. Colors are capable of communicating brand essence. Too many colors create confusion and audiences may not be receptive to discordant color compositions. Wait a minute! What about Google and eBay? These reputed companies have succeeded in using multicolor palettes.
Of course, but the logos and designs are a delight to our eyes. You can break the convention and be a trailblazer. But then, you are required to understand the nuances associated with primary, secondary and tertiary color combinations. You need to arrive at addictive warm colors and subtractive cold colors. Designers and architects at Google have tried their hand at analogous, complementary, split-complementary and double-complementary color variations.
Do you want to complicate things? It’s good to keep things simple, neat, clean and effective.
Pro Tip #1: Use no more than 3 colors on web pages to build and maintain consistency.
Best Practice #2: Honor zoom and swipe gestures
When we tested and benchmarked 200 mobile eCommerce sites, 50% of the sites didn’t allow product page images to be zoomed. 35% of the sites didn’t allow product page images to be swiped.
Users were desperately trying to double tap to zoom and swipe product images. Why should you honor zoom and swipe gestures? Well, it gives users an opportunity to inspect the texture and build of the product. Users can assess the quality and learn more about the material.
Pro Tip #2: Enable double tap and honor zoom and swipe gestures
Best Practice #3: Communicate the benefits to buyers
We observed that many mobile eCommerce sites fail to communicate the benefits to buyers.
Why should a buyer prefer you over other retailers? Buyers are interested in benefits. They do a quick Costs vs Benefits analysis. So how do you entice them? State the benefits clearly – For instance, free shipping and lifetime support should be in BOLD. Sign-up forms should have a small header with benefits clearly stated:
Here is an example:
Sign-Up with us to get a free drop-shipping checklist and one-year access to our Geo-location Tracker module
Another benefit which is often ignored by mobile eCommerce sites is security. We had the opportunity of interviewing 100 respondents and 90% of them said they were reluctant to share their credit card data. It is therefore important to use words such as “secure” during the checkout process. Use lock icons and extended security validations to provide assurance to buyers.
Pro Tip #3: Do not hesitate to communicate the benefits of your products and mobile eCommerce site to potential buyers
Best Practice #4: Streamline the search interface
A drop down is what many mobile eCommerce sites offer. But shouldn’t we all remember that mobile screens are small and a drop down will actually clutter the small page? The key is to provide a focused search interface which is equipped with intelligent auto-suggest. This can be achieved by categorizing and sub-categorizing products. A logical hierarchy is required.
Compliment the focused search interface with large visuals. We did A/B testing on 150 mobile eCommerce sites. Focused search interface improved the conversion rate by 50%.
Pro Tip #4: Do away with the classic search interface. Espouse the new-gen focused search interface.
Best Practice #5: Product page layout should be straightforward
This is no science and yet, people make horrendous mistakes. For all intents and purposes, a product page should contain product code and description. It should also contain all the available color and size options. Make sure to include reviews and recommendations. Shipping options should also be provided.
And yes, the text should be clear, readable and perfectly legible. Line spacing should be at least 1.2.
Pro Tip#5: Prepare a checklist of all the product page layout essentials and play by the rules
Best Practice #6: Deploy the right keyboard type
We noticed that quite a few buyers were experiencing discomfort during typing and searching. You wouldn’t believe what dawned upon our findings- There are 11 different types of keyboards.
Well, many are oblivious to this fact. Don’t you think it’s wise to spend a couple of hours on deploying the right keyboard type? Read Baymard Institute’s guide. Autocorrect and autocomplete work well with only a few types of keyboards. Mobile shopping cart abandonment can be minimized to a significant extent.
Pro Tip #6: Use the right keyboard and optimize auto-suggest. Use your discretion while enabling and disabling auto-correct
Best Practice #7: Use quality images
Large and pixel perfect images should be used. Why?
The attention span of visitors is limited and only images are capable of grabbing their attention. When testing the mobile eCommerce sites, we observed that many visitors relied heavily on the home page content. Landing pages should provide an overview of product offerings and categories.
Pro Tip #7: The perfect landing page is imperfect without quality images
Best Practice #8: Create a mini-cart
A mini-cart is bound to have a significant impact on the overall conversion rate. Non-serious and casual shoppers are forced to take a decision.
Mini-carts facilitate the smooth transition from indefinite browsing to conscious purchasing.
Pro Tip #8: A mini-cart can maximize your conversions
Best Practice #9: Assist your shoppers
How do you assist your shoppers? Mobile chatbots provide great virtual assistance. Chatbots can answer queries and address the concerns of the buyers. Chatbots can be integrated with messenger apps.
Chatbots can initiate conversations, observe the predictive buying patterns and remove the so-called “indecisiveness” among the buyers
Pro Tip #9: Chatbots guide and aid buyers.
Best Practice #10: Use progress bars
More often than not, visitors scan the web pages in an “F” pattern. So apart from using appealing headers, you should use progress bars. For instance, a purchase transaction entails 5 steps:
- Billing and Shipping Information
- Review (Mini-Cart)
If the first four steps are completed, the progress bar should display “80% complete” message. By the way, this technique is used extensively in gamification.
Pro Tip #10: Progress bar helps customers identify their progress.
Non-compliance with the aforesaid best practices will worsen your conversion rate. If you have any doubts or concerns, feel free to drop a line or two in the comments section. We shall reply in a day or two. Our best wishes are with you and your mobile eCommerce site. Subscribe to our newsletter to get updates on eCommerce and mobile commerce.