How User-Friendly Is Your Mobile Storefront?

Smartphones are embedded into all aspects of our daily lives — including the way we shop. In fact, the Pew Research Center found that 76% of smartphone users make purchases directly on their mobile devices. This is especially true for younger consumers, with 91% of Americans aged 18 to 49 saying they buy things online using a smartphone.

If your mobile storefront isn’t intuitive and user-friendly, you’re missing out on a huge opportunity for your business.

A recent study by the Baymard Institute across 138 leading ecommerce sites identified the site design elements that make an online store user-friendly and provided tips on improving usability to increase your sales and profitability. Below, we use their findings and mobile site designer’s best practices to outline four categories of updates to create a better user experience for your mobile storefront.                                 

1. Customer Experience First

Keep design simple

A cluttered or complicated website design rarely looks good on a large computer monitor, let alone on a four to five-inch phone screen. When designing your mobile storefront, it’s critical that the design is simple and to the point with large, clear images of your products.

Minimalist design is the best practice for mobile sites. Web development company Intelivita defines that as “an uncluttered layout with ample white space to allow content to breathe;” elements that are “strategically placed to enhance visual hierarchy and readability,” and the use of “a limited color palette, often consisting of neutral tones and a few accent colors.”

Baymard also recommends paying attention to the size of and space between tappable elements. We’re all familiar with the “fat finger” issue on mobile. Make sure buttons and links are large enough and well-spaced for easy selection on small screens. 

Speak the customer’s language

On the text side, keep it brief, and include only the most important information. Intelivita’s best practices for better copy include:

• Understand your audience. Tailor your copy to address their specific needs, preferences, and pain points.
• Use clear and concise language. Avoid using jargon and technical terms that may confuse users.
• Focus on benefits. Highlight your products’ or services’ benefits instead of just listing features. Explain how your offerings can solve problems or improve your customers’ lives.
• Optimize for mobile. Note that mobile users have limited screen space. Use short paragraphs, bullet points and subheadings to break up the text and make it easier to read on smaller screens.

First-hand design

Advice from ecommerce development company, Onilab, focuses on the mechanics of navigating a mobile site with your hands:

• One-handed. People often handle phones in one hand using a thumb and make purchases on the go. A bottom nav bar (also called a tab bar or a bottom menu) keeps these elements within reach.
• Sticky bars. Sticky bars keep important elements — such as calls to action, a price or filtering/sorting — visible everywhere on the page without having to scroll back and forth. 
• Pop-ups. Rather than send the user to another screen, use pop-ups to show filters, product details, success messages, a cart and forms at checkout.

Navigation is key

Making it easy for users to navigate around your site will have a direct impact on your conversion rates. Baymard recommends:

• Ensure main navigation is permanently visible. Visitors need a sense of where they are within your site and where they can go. 
• Allow “View all” for product catalogs. Users can become stuck in too narrow or deeply nested subcategories.

Search is critical

Did you know that customers who use search to make a purchase will account for 30%-60% of your revenue? While site browsers are customers exploring what is available to buy, searchers are customers typically trying to find something in particular to buy. You want to empower those users with an effective search experience: 

• Search functionality such as filters and sorting preferences optimize quick access to desired products.

• Autocomplete helps bridge the gap between the product the user is thinking of and search terms that can produce the right results, according to Baymard.
• Alternate queries point the user toward another (related) set of products, recommend removing a model name or brand from an overly specific query, or suggest searches for associated and compatible products.

2. Make Sure Your Site Loads Quickly

It’s easy to get caught up when you’re adding visual content to your website pages. While images and videos are great additions to mobile storefronts, it’s important that you’re mindful of how much bandwidth your visuals are using.

The key to succeeding with a mobile website is satisfying users that expect fast loading times. According to Unbounce.com, 45.4% of users are less likely to make a purchase from a site with slow loading time. Also, search engines prioritize mobile-friendly websites in their rankings. 

Ensure your pages load quickly by using right-sized images while minimizing animation and video whenever possible. 

Baymard recommends you provide high-contrast, noticeable load indicators and display the load indicator (like a spinner or Loading text) immediately after a user’s action to keep the user from bouncing away.

3. Let Customers Choose Their Own Adventure

We’re in the age of personalization, and millennials and Gen Z users have rarely experienced anything different. While some Gen X and Baby Boomer users are perfectly content with a one-size-fits-all mobile experience, younger users will expect more features that give them control over how they use your site.  

Offer search and filter functions

Savvy (and time-crunched) mobile site users are less likely to work their way down a hierarchical product category structure to find what they are looking for. They expect to have advanced search features like sorting, filtering and comparing to narrow the list of relevant products.   

Allow pinch and zoom gestures

The now-familiar pinch and zoom gestures give users a close-up look at product details like fabrics, patterns and functions, especially on smaller screens. When users can fully examine products, it leads to higher engagement and potentially increased sales.

Allow customers to create wish lists

In an ideal world, every customer who comes to your website would be there to make a purchase, but this isn’t always the case. Sometimes, customers are still in the process of shopping around — or they may find other products they love but aren’t ready to purchase. 

Allowing customers to create wish lists creates a positive user experience and is a simple way to ensure they come back to your mobile storefront in the future. 

4. Create an Easy Checkout Process

Another key area of the mobile user experience is checkout. The average cart abandonment rate is 69.99%, according to Baymard, with mobile cart abandonment rate the highest of all devices, at 85.65%.

Preventing cart abandonment starts as soon as the user enters the site and well before they reach the checkout stage, for example:

• Make it easy to add products to their cart. "Add to Cart" buttons and the cart itself should be easy to find. 
• Highlight sales and price reductions. Online consumers should feel like the value they can get is time-sensitive.
• Make choices obvious. Product options, such as colors, sizes and other variations should be easy to see and select.

Once users get to checkout, remove any barriers that could prevent someone from completing their purchase, such as charging surprise fees at checkout. Here are design tips from Baymard’s research to reduce cart abandonment:

• Time-saving features. Offering ZIP code autodetection and address lookups or validators prevent hiccups in checkout and delivery.
• Good error recovery. Errors in checkout are common, so giving users recovery support is necessary. 
  • Take users to the top of the page and inject an error statement outlining the multiple errors that have been detected, in addition to highlighting each of the fields throughout the page, each with its own unique error message.
  • Indicate both required and optional fields, provide explanatory text, and show input masks

• Direct Links to “Return Policy” and “Shipping Info.” Not understanding these policies is a common reason users abandon carts. Make policies easy to find in the site footer or on product pages before they get to the cart.

The Future of Shopping

Our recent Consumer Attitudes study found that across generations, mobile has now passed laptop/PC as the top channel for online shopping (57% to 53%). One reason we expect that gap to widen is Millennials and Gen Z are heavy mobile shoppers and big contributors to that shift. Bottom line: mobile commerce is the future of shopping. 

There are many ways you can create a user-friendly mobile storefront for your business, but the four categories of tips above are a solid path to get started.

As you continue to make your mobile storefront more user-friendly, don’t forget to test on real devices, such as a mobile phone or tablet. Take a step back and view your website from a customer’s perspective and look for even more ways that you can improve it.

To learn more about consumer behavior and making your mobile storefront more user-friendly, the team at ClearSale can help. Contact us today to get started!