Mobile commerce (mCommerce) continues to grow across all industries. A rising tide lifts all boats, and even some markets that thought mobile adoption was years away are noticing significant upticks in smartphone traffic.
Roughly two billion smartphone users made at least one purchase from their phones in 2017, a significant increase from 1.6 billion users in 2014. By the end of 2018, mCommerce will make up 27% of all retail sales, up from 19% in 2014.
Mcommerce continues to grow by leaps and bounds. Now isn’t the time to watch the market and see if there’s demand for mobile optimization. Now is the time to ready your website for smartphone users and create a valuable experience that makes them convert.
Follow these 10 mCommerce design principles to impress your customers and get them to convert.
1. Give Users the Power to Swipe, Pinch, and Double Tap
One of the great things about optimizing your mCommerce site is that you don’t have to reinvent the wheel. Mobile internet users already have an idea for how your website should work and what they expect from pages on the internet. All you have to do is think about what your customers are used to and make sure they have it.
A few easy examples of this are the swipe, zoom, and double tap options. In the mCommerce world, customers expect these functionalities when they’re looking on product pages and reading about the items you offer. However, in a benchmark of 50 top US eCommerce sites by Baymard, only 40% actually offered that functionality to users.
Don’t try to change internet user behavior by requiring your site visitors to click on your images or load each individual photo. Think about how you browse the web and make sure your pages reflect that instinct.
2. Make Sure Each Section is Distinct
You might appreciate a minimalist design with light gray text on a white background, but your customers do not. Every design choice on your mobile device is more subtle than on desktop and is more likely to confuse your customers. It’s better to go big and bold than to try and blend everything together.
Look at the interface of White House Black Market for examples of a clear interface. A retailer that brands itself on only using two colors makes it easy to scroll through photos by adding a gray backdrop behind the models. The garments pop against the gray background and the models become the focus on the page. Without the gray, the company would wash out the models and the clothes, making the mobile site less effective.
3. Optimize Keyboard Layouts for Easier Form Functions
The Baymard Institute that we mentioned earlier also highlighted how the checkout process on mobile devices is limiting users. In fact, they reported that mobile usability only increased nine percent from their 2013 to 2015 benchmarks.
In 2013, only 40% of mCommerce brands had optimized keyboard layouts (meaning the keyboard changed to letters to enter information like names and then switched to numbers to input credit card information). This number grew to 46% in 2015 — hardly an impressive achievement.
This may seem like a small optimization step, but it can have a significant impact on your overall usability and customer experience.
4. Let Users Scan Their Credit Cards or Pay with Wallets
Along with optimizing your forms, make it easy for customers to add their credit card information during the checkout process. Use the stored data and APIs that Apple and Android devices have to autofill credit card information, or create options to scan credit cards for easy entering.
Also, consider enabling Apple Pay or PayPal to complete the transaction. This saves time and frustration over shoppers digging out their credit cards and squinting as they add each number into the tiny smartphone fields.
5. Remove Your Animated Carousel
Animated carousels might be visually appealing, and they might look great on desktop devices, but they tend to confuse mobile users. Check out Bed, Bath, and Beyond’s website for an example. They have a simple three-picture carousel, but the interface can’t tell the difference between a carousel swipe and a swipe to access the cart. Anyone casually browsing their site will have a hard time with the interface.
Instead, add different blocks with information on your mCommerce homepage. Mobile users are scrollers. They’re used to scrolling down for more information. You might find that more people see your static banners through scrolling than they previously did with a carousel.
6. Remember Information if Something Goes Wrong
Mobile users already have lower conversion rates that customers on desktop and mobile. While smartphone users convert 2% of the time on average, smartphone users only convert on 0.55% of visits. If something goes wrong, your customers are likely to bounce or head to their desktops to complete the purchase.
There are a few ways you can help customers save their information as they browse your website. These include:
- Create a “Save” button for items in the cart that they might not be ready to buy — or for items on product pages.
- Send push notifications to users bouncing from your site confirming their actions.
- Remember information when users submit a form with incorrect information.
Few things are more frustrating on the internet than submitting a form only to be presented with an error message and a completely clean page. Your customers aren’t going to add their name, address, and credit information again just because they missed their credit security code the first time around.
7. Make Your Mcommerce Guest Check Out Option Clear
There’s no doubt about it: your mCommerce website needs guest check-out options. According to Moovweb, 66% of the top 100 retail websites allow customers to check out as a guest, preventing a drop in conversions from customers who don’t want to register with the company just to buy a product. Customers were 1.2x more likely to select guest check out instead of creating an account, and guest users make up 53% of mobile website revenue on average.
Should you encourage your customers to create an account? Of course. This allows you to collect their information and send out personalized marketing messages in the future. However, enabling guest check-out can move uncertain customers across the finish line with ease.
That being said, make sure your guest check out option is easy to see. Some mCommerce developers are so focused on converting customers into registered buyers that they hide the guest check out button, frustrating users and causing them to bounce.
8. Guide Website Visitors to Your Category Bars
In the same way that customers are used to pinching and swiping, they also know to look for category pages to narrow their search results. A great example of this is Victoria’s Secret. On their mobile website, you can immediately choose between their main brand, PINK brand, or Victoria Sport athleisure brand. From there, you can filter through the categories to easily find what you need.
As an added bonus, the fonts change between the three categories, so the menu for Victoria Sport looks different from the PINK one. This clearly differentiates the sub-brands from each other, reducing confusion.
If you’re not sure whether or not your users are struggling to navigate your categories, test something new! Pit two designs against each other and run an A/B test to see which one your users prefer.
9. Improve Your On-Site Search Functions
We touched on the value of improving your on-site search performance a few weeks ago. Your customers turn to on-site search functions when they can’t find what they need and hope to easily reach the right products or information.
There’s a whole science to improving your mCommerce on-site search performance, and we encourage you to check out that article to make it easy for your mobile users to navigate your site — regardless of what they’re looking for.
10. Clearly Display Shipping and Pick-Up Options
Shipping is a contentious battleground in the B2B eCommerce world. Companies need to charge it to cover their costs, but customers increasingly don’t want to pay it (or else they’ll take their business to Amazon).
In 2016, 90% of customers agreed that free shipping was their top incentive to shop online more, compared to 69% of customers who said one-day delivery would encourage them to spend more. (Similarly, 68% said they would be motivated by free returns and exchanges.)
If you offer these features, broadcast them loud and clear on your mobile site. Even if you charge your customers for shipping, clearly labeling what the costs will be can prepare your customers for the expense and ready them to make a purchase. It’s certainly better to let customers know about their shipping options instead of increasing the price by $10 when they reach the check-out page.
Mobile optimization is just as much an art as it is a science. By following these mCommerce best practices, you can improve your website and guide customers to buy from you right from their smartphones.
If you want to take your mobile usability to the next level, contact Trinity Insight. Let us run a free user experience audit to identify the strengths and opportunities of your mobile eCommerce efforts.
