Optimizing your ecommerce site for online mobile shopping is no longer a “nice to have” – it should be an essential part of your business strategy. Studies show that 60% of traffic on ecommerce sites is via mobile device. Google reports that more than 40% of online transactions are made on mobile devices, and other statistics show that mobile sales are projected to make up nearly 54% of total ecommerce sales in the US within the next two years.
If there is so much opportunity for brands to capture and convert customers via a great online mobile shopping experience, why are there so many bad examples? The short answer is that mobile is still a relatively new channel and not every brand or digital agency knows how to do it well. At eHouse Studio, we’re diligent about keeping up with new trends and best practices and leveraging our experience to design to support user behavior on mobile.
What’s most important to consider – and why mobile ecommerce best practices aren’t the same as desktop best practices – is user behavior on mobile devices. User behavior on mobile, particularly smartphones, is influenced by context and environment – we tend to be on the go, often in public spaces, and have time for just short bursts of activity – as well as the device itself, which has a much smaller screen than a desktop computer. Further, users who shop on a smartphone are much more likely to have a specific purpose and timeframe, versus more casual browsing on the desktop.
Following are some key mobile-first best practices you should ensure your online mobile shopping experience incorporates in order to convert more users to purchase.
1. Make the mobile experience intuitive
When in Rome… to provide a great experience on a mobile device, you have to make sure your site “speaks mobile;” that is, it allows people to find what they need using common mobile gestures, such as swiping, pinching and zooming. Also, key actions should be comfortably achievable for most thumbs. Even basic elements, like buttons and font size, can be frustrating when not large enough to accommodate our fat fingers and failing eyesight.
How do these basics fall through the cracks? Many ecommerce sites are designed to proportionally “scale down” all elements from a horizontal desktop screen to a very vertical mobile screen, rendering those important calls-to-action or wayfinding icons no longer legible. What’s required instead is a different approach to responsive design that enables much more control over how buttons, images and calls-to-action are presented to the mobile user.
2. Strategically prioritize content
It’s not easy to design a great online mobile shopping experience with the limitations presented by such a small screen. This smaller real estate means less room for content, making it necessary to prioritize and strategically choose which content will be presented and how it should be organized to facilitate a fast, frictionless experience. It’s important to understand what is the essential information that people need from your site to make a decision and convert – and how can you make it easy for them to select to dive into more detail if they want to. For example, serving up all product details on a mobile product page would result in one long, overwhelming scroll; one way to avoid this is the use of “accordions” that will expand to show more if selected.
The results of prioritizing content can be significant. For one of our clients, wellness brand Dr. Axe, we designed a more intuitive product page that engaged customers across multiple device types to help them navigate a wealth of rich content. The brand saw a double-digit increase in conversions within days.
3. Provide navigation choice
Small screens require a different approach to navigation. Many times the navigation is hidden in an off-screen menu, which users have to select to open up to see. This is not always intuitive and requires that extra step, which can cause friction when users are in a rush. Instead, or in addition to, your mobile home page content can be a faster way to help users navigate through the site, providing intuitive visual cues about what they can find in your store and a quick, easy way to get to top categories.
Also, since many mobile shoppers go online with a specific intent, search is critical. Ensuring that search is prominently visible and returns relevant results can make or break the mobile ecommerce experience. A study by the Baymard Institute reported that 70% of ecommerce search implementations required exact terms (versus synonyms) to return relevant results, and 34% missed the boat when a single character in a product name was misspelled. What’s a user to do, with those fat fingers?!
As a real-world example of the difference good navigation and search can make, we worked with luggage company Zero Halliburton to restructure its product categories and filters to align more closely with names and terms that customers were more familiar with (versus the product terms that were used in-house). This work, in addition to other redesign and enhancements, contributed to a 341% increase in mobile-specific revenue.
4. Connect the visual feedback “dots”
Because the mobile screen is so small, it’s important to take the time to consider the proximity and placement of elements to make sure the visual feedback you’re communicating when a user interacts with an element is in their view — otherwise, they might miss it altogether. For example, when a user wants to see a product in a different color, the product image should change as the user selects the color, with no scrolling required. Another typical example: an error in a form field. Instead of showing the error message at the top of the form and forcing the user to scroll down again, show the error message where the error occurred.
5. Streamline checkout
Again, beware the fat fingers. It’s important to require as few fields of information as possible to avoid checkout abandonment – keep it to the essentials and enable auto-fill whenever possible. Also, it’s critical to accommodate all of the ways people want to purchase today, including Apple Pay, Amazon Pay, Google Pay, PayPal, etc.
When it’s time to pay, users want to feel in control – they don’t want to be hit with any unexpected costs or taxes later. One way to provide this reassurance in the cart is to have the total order cost (with tax and shipping included) and checkout button both at the top of the page and at the bottom of the page. This serves users who want to review their order by scrolling down through it, as well as users who just need to pay and be done fast.
Get in a mobile state of mind
Delivering a great online mobile shopping experience is really about figuring out how to seamlessly fit into a user’s lifestyle. Will your site provide what users need in key moments, including when they’re in research mode, looking for a store, asking for how-to information, or when they’re ready to buy? And can you quickly and efficiently meet these needs when the user has five minutes to spare while waiting in line to buy lunch? If not, it’s important to identify what is causing friction and determine how you can make the experience more enjoyable and helpful.