Mobile devices are inherently full of friction. That being said, in 2016 mobile search surpassed desktop for the first time ever. Smartphones are in the palm of most shoppers’ hands, and they are using them at multiple points in the shopping journey. Your investment in mobile, and resulting shopper experience, needs to match this new reality. If it doesn’t, it’s not just sales and loyalty that are at stake – it’s your entire business.
To reap the opportunities of mobile, everyone working on an ecommerce project must reduce friction at all costs. From designers fretting over color contrast ratios, to developers refactoring code to be as performant as possible – all of these efforts contribute to creating the app-like experiences that your customers have come to expect on mobile.
We put this guide together to help your user experience (UX) team improve customer engagement and conversion rates. The best practices fall into 6 different categories:
- Reduce Anxiety Through Communication
- Focus The Shopper
- Provide Accessibility For All
- Minimize Typing at Every Opportunity
- Create Obvious Interactions
- Don’t Hide What’s Important
At Mobify, we have tried and tested these best practices over the past 10 years, while optimizing hundreds of mobile sites for customers that range from multinational publishers, to Internet Retailer 100 apparel companies, to global beauty brands. We have experimented with countless interaction patterns along the way, and have assembled the very best for you in this guide.
1. Reduce Anxiety Through Communication
Whether it’s indicating that an action has occurred through an animation, or using icons to demonstrate security, communication is key to a stellar mobile commerce experience that converts.
Make the Product Offering Clear on the Homepage
Research shows that shoppers who aren’t clear on a brand’s product offering will scan the homepage from top-to-bottom before proceeding. If your site is full of promotional content, for example, or doesn’t clearly inform shoppers of the product categories, they will move on to another site.
To help shoppers understand your product offering and quickly jump into categories, use an app-like pattern of large category list navigation. This type of navigation uses iconography or product imagery to reduce the cognitive load required to determine your product offering.
- Results from Baymard Institute recommend that 30-40% of the top-level categories are represented via the homepage content.
- List a selection of category links (or all top-level categories) prominently on the homepage.
- Alternatively, display a collection of thumbnails on the homepage that visually represents 30-40% of the site’s top-level categories, allowing users to visually infer the type of site they’ve landed on.
Make buttons descriptive
Time is a scarce resource on a mobile device. Any negative page loads (i.e. using the back button) increase the risk that shoppers will leave your site, or not follow through with a purchase. Therefore, communicate at all times what buttons do and where they go.
- Avoid simple buttons like Next, Continue, or Go, and instead clearly describe where shoppers are going. For example, on a cart page we would use a button that states [Proceed to Secure Checkout].
- Use iconography to support the words with visual content. For example, the addition of a lock icon beside [Proceed to Secure Checkout] would emphasize a sense of security to shoppers.
Animated Action Indicators – No More Butterfingers
How often have you gone to your cart and discovered that you added two of something by accident? This happens frequently on mobile devices because shoppers aren’t given a clear indication that their action has registered. On desktop commerce sites, the use of rollovers and click-states provides shoppers with clues as to what is happening. On mobile, touch states are a bit more ambiguous, but there are ways we can communicate reactions to shoppers. In the example below, when [Add To Shopping Bag] is tapped, it flips to reveal loading indicators.
- Implement action indicators with HTML and CSS to achieve speedy results.
- If the indicator will live inside the confines of a button, use a bouncing effect that’s more wide than it is tall.
- For a full-viewport takeover on a mobile device, it makes more sense to create something in a vertical lock-up.
- Use subtle animation effects, state-change button labels, and alert models to clearly indicate that an item has been added to the shopper’s cart.
Demonstrate the Benefits to Shoppers
You need to constantly communicate to customers why they should shop with you over another retailer. Anytime you ask them for information or to register for an account, you must provide them clear value and benefits.
- Ensure every form has copy relating to the benefit of completing the form.
- Emphasize free shipping, account benefits, or the value of web push notifications to stay informed of promotions.
Demonstrate Security to Shoppers
Many shoppers still feel like buying on their phones is less secure than on desktop, and they are more reluctant to type their credit card details into their mobile devices. As designers, we need to clearly communicate that a page is secure, by emphasizing it visually.
- Google recommends the use of lock icons and a [Learn More] option to provide assurances that shoppers are protected.
- Make lock icons big if you can – studies show that the larger the icon, the more secure shoppers feel.
- Use the word “secure” in your checkout buttons, or on a banner at the top of checkout pages.
- Cyber security providers Norton Secured and McAfee Secure provide the best sense of trust, according to Baymard Institute’s study.
Emphasize Free Shipping
61% of customers abandon checkout when they discover extra costs, and 24% abandon because they can’t see or calculate shipping costs up-front.
- If free shipping is an option, make sure it is emphasized early in the shopping flow.
- List the requirements shoppers must meet in order to get free shipping
Keeping Up With the Giants
These UX design best practices will help you provide shoppers with a mobile experience that parallels what the tech giants are offering – app-like interactions on the web with Google’s Progressive Web Apps, speedy browsing (perceived and actual) on Facebook, and an efficient checkout process on Amazon.
We hope you found part 1 useful. Download the rest of the guide for more best practices.