It is widely accepted that visits to the ecommerce website from mobile devices have been steadily increasing, and have surpassed the desktop traffic volumes.
Despite this growth in mobile traffic to ecommerce websites, the conversion rate on mobile phones significantly trails desktop conversion. For many leading retail websites, cart abandonment and bounce rates on mobile devices, are significantly higher compared to their desktop versions.
If shoppers are spending more time on their phones browsing the ecommerce websites, why do they hesitate or fail to make a purchase on their phone?
It has been more than a decade since the first iPhone was launched and every day since that moment, shoppers have become more and more aware, experienced and adept at using their smart phones to find and shop for products and services online. Apps like Uber have raised the bar for customer experience and expectations when it comes to frictionless transactions, speed, and ease of use. Shoppers expect the same experience from all businesses, irrespective of the services or products that they offer. Surprisingly, even today, many ecommerce websites are not optimised to deliver a frictionless ecommerce experience on mobile phones and shoppers struggle to interact with these sites.
Let’s explore some concepts and practical techniques that can help you improve the mobile experience of your ecommerce website:
Responsive Web design (RWD) enables developers to build websites that can adapt their format and content to cater to different screen sizes, thereby providing retailers the ability to create and manage one website that looks equally good on all form factors (desktop, mobile, tablets, kiosks). RWD has numerous additional benefits such as lower TCO for running, managing and updating a single application across channels, and better SEO with a single URL for both desktop and mobile sites.
Responsive Web design can be a great option for a retailer to provide a consistent user experience to their customers on mobile; however, there are some trade-offs that RWD approach introduces and at times things that work on the desktop may not necessarily work well on the mobile. Therefore, retailers should consider building a mobile-optimized template as part of their responsive web design strategy.
Retailers should make finding the right products intuitive, and the checkout process should be frictionless, with as few screen-taps as possible. Typing and filling in forms on mobile devices can be tedious and error prone. Touch screens also require the on-screen keyboards to be presented for capturing user input thereby further restricting the website view. Therefore, where possible, retailers should present their shoppers with pre-populated options to tap instead of lengthy forms.
The ability to quickly and easily find a desired product is critical to improved conversion rates. Optimise your website’s search to ensure that users can find the right products without clutter and in a few taps.
Well designed, type-ahead search functionality for mobile devices can make it really easy for shoppers to quickly find what they want, instead of sifting through numerous irrelevant pages and products. Enable spell-check and auto-correct features as spelling mistakes and typos are common on mobile devices. Below are some examples of sites that have invested in a mobile specific search experience. Amazon auto-corrects the spellings and provides suggestions across multiple categories of product, ASOS displays the number of search results found within each of the categories.
Gratis has taken their type-ahead search and navigation to another level where they pre-populate popular search terms and categories in the type-ahead search bar, so that the shoppers can easily select those instead of typing. The menu offers all the available options in a neat/responsive way to allow easy scrolling and selection.
Another opportunity for simplifying design on the search results page is to organise your search filters intelligently, instead of overwhelming shoppers with too many options. In the example below, Gratis displays the option to refine the search results using filters and sort options at the top of the search results page.
Keep your Call-to-Action always visible, both at the top and bottom of the screen. In the example below you see that despite scrolling through Moleskine's product details page, the header (navigation, search and mini cart) along with the add to cart button are always visible, making it easier and obvious for the shoppers to add items to cart or to checkout.
I really like the concept that GoPro uses. They place their call to actions on the home page banners, to allow users to instantly funnel into the checkout flow from the homepage.
Ecommerce checkout processes typically involve filling in a lot of information (billing details, shipping details, payment details, agreeing to terms and conditions in some cases etc.) Entering all this information can frustrate shoppers and deter conversion on websites that are not optimised for mobile. Simplifying the navigation and providing intuitive options such as postcode look-ups, allowing auto-filling of address, email addresses and payment details from the phone’s browser reduces effort for your shoppers, and makes your website easier to buy from.
A mandatory user registration process is perceived as a hindrance to checkout, and therefore retailers should always allow guest checkout with an option to register at the end of the checkout process. Allowing social login further simplifies the registration process for shoppers. In the below examples, ASOS.com and GoPro present social sign-in options, and clever messaging to make it easier for their users to register/login.
Shoppers do not like entering payment card information on mobile devices, as it is an inconvenience and entering payment card details feels less secure especially in public settings. Offering PayPal, Google Pay or Apple Pay as payment options enables retailers to provide a secure and simple checkout process. Shoppers can sign into their PayPal, Google or Apple account for payment, and once authenticated, these payment providers can pass back the necessary customer details including shipping, billing addresses, thereby eliminating the need for customers to fill out those details on your website. These payment options also allow users the flexibility to use multiple payment cards and PayPal’s buyer protection is an additional layer of security that helps to build trust and confidence.
Site speed still remains one of the most important aspects for outranking your competition in search results. Despite more customers using their mobile devices to surf and shop on the internet, many retailers are still struggling to provide a fast and intuitive mobile user experience.
If users have a negative experience on mobile they are less likely to shop with you in the future. Google suggests aiming for a sub 5 second page load for mobile websites even on a 3G connection. There are a number of strategies that you can deploy to optimise mobile web performance and many free tools are available online (PageSpeed Insights, GTMatrix etc.) to analyse and optimise your mobile website performance.
In my past, as a technical architect, I was involved in helping dozens of customers to optimise the performance of their ecommerce websites, but I have to admit that my assumption at the time was that if it performs well on the desktop, then it will perform well on the mobile too. It is a common pitfall to think that techniques that make the desktop perform faster will do the same for the mobile.
For mobile devices, there are a few “anti-patterns” that can adversely impact performance and should be avoided. Here are some key issues and optimisation techniques:
Bloated Page Size
Bandwidth on mobile devices is precious, and the less data that a device has to download on a 3G/4G connection, the faster the pages will load. Page size has been consistently increasing over the last few years, and averages around 1.68 MB for mobile pages. Larger page sizes consume more bandwidth and result in slower performance, which adversely impacts conversion.
One of the biggest contributors to bloated pages is media assets on the page such as images. There are many free and commercial image optimisation, hosting and auto-scaling solutions available that can be leveraged to optimise the image size for mobile devices.
Redundant code in the application (HTML, JS, CSS) can also contribute to unnecessarily increasing the page size. There are numerous open source tools available in the market that can be used to analyse, and clean up redundant code.
Progressive rendering ("above the fold" rendering)
This issue of improving the “above the fold” experience can be addressed by using a progressive rendering approach for the web pages. HTML is parsed incrementally thereby providing the ability to partially feed the content to the browser as soon as it is ready, thus making the application interactive as soon as possible.
A good technique could be to split your CSS files into three categories/sets:
• critical.css – inline CSS that would go in the <head> section of your page
• essential.css – styles required once your page is interactive
• feature.css – styles required for advanced interactive features e.g. date-selectors
Responsive web design is a great option for retailers to provide a consistent user experience to their shoppers on different devices with added benefits of lower TCO, faster time to market and easier SEO management. However, optimising your website for mobile goes further than resizing the website to adapt to the screen size. Shoppers browsing your website on mobile phones have less patience and more distraction, so the entire mobile shopping user journey should be designed with these constraints in mind.
Website performance on mobile devices is another inhibiting factor. Given each character in your code increases the size of your webpage, being frugal with your CSS and JS code while keeping it readable/maintainable is not easy but, if done right, can pay huge dividends when it comes to improving performance of your site on mobile devices.
Prioritise above the fold experience over trying to jam everything into the first request, and investigate options to progressively or lazy load assets required for non-critical rendering.
At this point, a key limiting factor for a website’s performance on mobile devices is the network latency and bandwidth. Very soon, once the 5G network goes mainstream, many of these network related limitations will fade away, and will allow retailers to offer a more performant, immersive experience to their shoppers on mobile phones. However, good site design and information discovery practices will still be required to enable retailers to stand out amongst the ever-growing competition for their shopper’s custom.
By using some/all of the techniques discussed in this article, retailers can improve the usability and performance of the mobile experience for their shoppers thereby increasing their conversion rates.