Brands should be thinking mobile-first to boost conversion – think fast load times, smart search and navigation, mobile-friendly UX, speedy checkout, and more.
Mobile is overtaking desktop as the go-to device for ecommerce, with mobile expected to account for 54% of total ecommerce sales by 2021. However, just 12% of customers find shopping on mobile sites convenient, which leaves plenty of room for improvement.
Whilst dedicated apps and social commerce have made shopping more convenient on-the-go, tailor-made mobile commerce experiences such as these can be costly and lengthy to build.
But designing an ecommerce website to be mobile-first can push brands ahead of competitors. Many brands have been slow to fully embrace this approach, meaning their mobile conversion can suffer. Many still think back-to-front – often building for desktop, then squeezing into mobile versions using responsive design. Responsive is not mobile-first, and is not going to win today’s mobile-savvy shopper.
As well as speed considerations, the user experience (UX) is a huge consideration for mobile-first design. Essentially, the way users interact with sites on mobile is very different to desktop.
Brands should be thinking about developing mobile versions first, in order to boost conversion. And there are plenty of mobile-first ecommerce platforms available to get brands up and running quickly. Designs and layouts are focused on delivering optimal mobile UX; fast load times, rich media and content, easy touchscreen navigation, and one-tap buy buttons. Sure, this can be adapted to tablet and desktop. But it is fundamentally mobile-first.
Here are a few things to consider for mobile ecommerce conversion rate optimisation (CRO):
Speed
Smartphones are not as powerful as computers, and many users research or shop on-the-go, often with poor connectivity. Users will jump off if things are too slow: 40% of people abandon sites that take more than 3 seconds to load – which is a disaster for mobile.
Render start time (RST) is a key part of page speed. This is the time taken for the first content to appear. Sites with the best mobile RST get 50% more engagement. So, how do you speed things up?
Essentially, everything on a site slows it down to some extent: HTML files, CSS style sheets, JavaScript, fonts, images, videos, and other multimedia or third party content.
Google’s PageSpeed Insights tool can identify elements that take a while to load. Then the question is if these elements are fundamental to the functionality of the page on mobile, and if they can be removed or minimised.
Easy wins often include enabling browser caching, optimising and compressing images, and minimising HTML, CSS and JavaScript. PWA and AMP pages can be good options to speed-up load times in some instances.
Navigation
Navigation and search are fundamental to conversion. If users find what they want fast, then they’re more likely to convert.
The nature of smartphone screens – being significantly smaller than desktop and portrait orientation – doesn’t allow for the large dropdowns or header menus commonly used on desktop. Mobile navigation options should be minimised, and most sites used the tried and tested ‘hamburger’ menu for navigation.
It’s good practice to limit mobile menus to four to eight items on the top level, and shorten category titles where possible. List items in order of importance – popular product categories, new products, promotions or sales – and try to limit multi-level navigation (two levels maximum, see Champion example above), as this can clutter the screen and become fiddly.
Search
Because navigation can be multi-level, particularly if there are many product categories – the search function on mobile is highly important. It should be clearly located near the navigation icon on top of every page; a magnifying glass with search bar is a safe bet.
Using autocomplete and suggested products as part of onsite search is a smart way of boosting the search functionality and getting visitors to the desired product quicker.
A surefire way to kill your conversion rate is a blank results page – users will go elsewhere. Provide related products by setting up synonyms and hypernyms (similar to synonyms, defining a category – for example ‘colour’ is a hypernym of ‘red’) to auto-generate related products.
Touchscreen
Think like a finger, not a mouse.
Fingers cannot hover or right click. They are larger and clumsier than mice. Give enough space for the finger to confidently tap a button, link, or other CTA. Large, clear buttons (like The Entertainer uses, see below) are great for mobile UX.
Buttons are a safe bet on mobile. As you don’t know when a user is hovering over the right area (like you can with a mouse on desktop), it’s important to define the clickable area.
Users expect visual feedback when the screen is touched. With poor connectivity on mobile devices, visitors must often wait for a page to load once they’ve tapped a button. Highlight, change colour, or indent buttons when tapped, otherwise visitors can keep tapping, and may load a different page or cause confusion. This is infuriating during checkout.
Mobile-specific features
The very fact a shopper is using a mobile device adds functionality opportunities. Make phone numbers click-to-call, addresses open in a maps app, and social media links open their respective apps, too. Digital wallet services – Apple Pay, for instance – are quick means of payment on mobile, so highlighting this as a payment option could boost conversion. Make product pages discoverable via QR codes. And it’s only a matter of time before visual search functionality (using your phone camera or photos instead of typing actual words) to search for items becomes more accurate and accessible.
Text
Due to a lack of space, text should be kept to a minimum, and should be a large, legible font. A large wall of text can scare off customers. Short bullet points are a concise way of portraying features and benefits. Include any major standout information on the product image. Use ‘read more/read less’ CSS buttons to shrink the text, if there is a large paragraph that exceeds the viewable area.
Images & videos
Whilst images can impact site speed, grabbing attention with a powerful image is an excellent way to increase conversion. Likewise, an unclear or low-res image can scare users away.
So an optimised image or selection of images can elicit purchasing power. If the product is available in different options (such as colours, see Mizuno shoes below), showing these can boost conversion, too. It’s a balance here – remember, the more images, the slower the page load.
Video is another powerful tool. Again, think page speed on a poor connection, but integrating video can showcase a product in a different way to images. It extends time spent on site or app, meaning greater opportunity to convert browsers to buyers. Gore (see below right) use videos to show off their high-quality sportswear in action, to prove performance.
And, with new technologies now readily available, 360-degree views of products, interactive animations, and AR/VR applications can provide mobile shoppers with a realistic product experience. This is the ultimate in terms of mobile UX.
CTAs
There is an element of on-the-go urgency to mobile shopping, and the use of a smart call-to-action (CTA) can boost conversion. Creating an offer, such as an additional discount for mobile users is one way to create urgency, or similarly using limited-time offers or email coupons.
But a simple, well-positioned ‘Buy Now’, ‘Book Now’ or ‘Quick Checkout’ button can be enough to move a customer on to a convenient purchase. Using ‘One-Day Delivery’, ‘Free Shipping’ or ‘Click and Collect’ as CTAs can also boost conversion.
Make sure ‘buy’ or ‘add-to-cart’ buttons are visible without having to scroll. Using sticky buttons in CSS for buy buttons (see Mizuno example below) can convert browsers to buyers faster.
Easy checkout
Mobile shopping carts are the most likely to be abandoned, with an 86% ditch rate, compared to tablet at 81% and desktop at 73%. There are various reasons why online shoppers may abandon their carts; hidden costs and shipping fees; complicated checkout processes, site speed, returns policies, and lack of payment options. The first two can apply to mobile in particular, where screen size and connectivity issues cause confusion and drop-off at this critical final hurdle.
Minimising text input should be a priority at checkout. If you’ve ever tried to enter your credit card details online, only for something to go wrong, you’ll know how annoying this can be and how it can affect conversion. Typing is slower on a mobile than desktop, and requires an on-screen keyboard, which makes the viewable screen half as big. Cut out input that isn’t absolutely essential. Break up digital forms into short pages, with clear ‘next’ buttons, so that visitors don’t have to scroll.
Reduce the number of pages or checkout steps – make it a single step if possible. Display progress through the checkout, with a progress bar or step numbers. Offer a ‘guest checkout’, so users don’t have to sign up.
Allow shoppers to used saved payment options and digital wallets. In one study from Big Commerce, conversions tripled when digital wallet payment was available.
