While I’d like to assume that all ecommerce sites are thinking about their mobile shopping experience, my shopping proves otherwise. As a consumer, I’m regularly greeted with poor mobile purchasing experiences that leave me frustrated. From sites that take forever to load, to sites where it feels like I can’t find the products I’m looking for. Mobile ecommerce (also called mCommerce or M-Commerce) ranges from excellent to so frustrating throwing your device seems like the best option to end your shopping experience.
Today we’re going to look at why you need to take your eCommerce mobile process seriously. Then we’ll take a look at best practices for building a good mobile experience.
Why Does Mobile Ecommerce Matter?
It wasn’t that long ago that mobile sites were nice to have, but not required part of a web presence. Today, mobile use eclipses desktop usage of the web.
Add to that the huge rise in mCommerce by users. In 2018 around 40% of shopping was done via mobile devices[^1]. Cyber Monday saw that number rise to 54% of traffic. Despite this rise, conversions for mobile devices often lag behind desktop purchasing conversions by a significant amount. This is often because site owners don’t take the needs of mobile users into account.
When it comes to browsing your site, a mobile user may spend 4 minutes browsing, while a desktop user is willing to put 5 minutes into the effort[^2]. 40% of mobile users say they’ll leave a site if it isn’t mobile friendly[^3] and this trumps loyalty to your store. 14% of shoppers say they don’t care if they favor your brand, a bad mobile experience will have them looking at your competitors[^4].
It continues to baffle me why store owners put so little effort into providing a good shopping experience for 40% of their users. They would never dream of making 40% of the people that walk into their store wear some blindfold that made everything harder to find, yet it’s too much expense for them to spend money on optimizing for their mobile shoppers.
When you’re not willing to spend time optimizing your mobile shopping experience, you’re telling 40% of your online customers that they’re not worth your effort. In return, they’re going to shop with your competitors.
mCommerce Best Practices
Now that we should all agree that serving mobile customers is a key to having a great eCommerce experience, let’s look at some of the best practices you need to look at when you’re building that ideal experience.
If you have an existing site, one of the best ways to find low hanging fruit is to use online testing tools like Google’s Mobile-Friendly test suite. Run those tests on your site and then use the results to identify the biggest issues. Budget regularly to fix these issues so that you can provide a better experience to your users.
Mobile First Design
One of the biggest trends to emerge over the last number of years in web development is mobile-first design. This is where you start with the stripped-down mobile version of your site and then add on tablet and desktop versions. While you’re doing this it’s worth questioning if your mobile site didn’t need a big popup for your email list, why does your desktop site. We know from Google’s documentation that they feel adding a popup covering mobile content is a sign they should not rank your site as high. By not including it on your mobile site you said that it wasn’t as important as other actions users could take. Why did it gain importance for desktop or tablet users? It’s likely that this content is just as in the way on desktop and should stay cut from those experiences as well.
You can see a well-executed example of an email list request below at the Twin Six site. Note the small green bar at the bottom, which doesn’t get in your way as you shop but is obviously pushing their email list.
Another key to mCommerce design is to make your pathways to purchase clear. That means aiming to get a user to the product they’re looking for in 3 actions. Then from finding their product, make it a clear pathway to purchase a product without needing to navigate upsell items or other things that put barriers in the way of purchasing.
For each call to action on your site, you need to take into account your market and which devices they use and where they can reach on your site. If you know that the mobile devices are big on your site and that you sell primarily to women, who often have smaller hands, then making sure that any buttons are in their range is crucial to making your site easy to use.
Which way is easiest for users to swipe to interact with your product images? How much content shows on the screen of your top few mobile devices? All of these things should be taken into account when you build out your mCommerce site.
Product Pages
When it comes to product pages, you need to think about what type of information users will be looking for. One-third of purchasing decisions include information from many sites that has already been gathered via a mobile device[^5]. Does your product page highlight the same information that users have gathered?
With a small screen, it can be hard for a user to see exactly what they’re looking at. High-quality images from all angles can help users look at each aspect of the product they’re interested in. High-quality images are easy to get today. With a bit of thought about lighting the phone, you have in your pocket easily produces excellent images. If that’s out of reach, hire a local photographer or work out a trade with them. My friend takes the menu pictures for a few local restaurants and gets free food for her and her party when she’s there. I’ve enjoyed a few wonderful meals due to her photography trade.
While some sites may produce decent images of their products, they then fall down on the mobile navigation of those images. Make sure that users can pinch or double-tap to zoom images. Make sure that swipe gestures work as expected. Frustrated users will head off to your competitor.
It’s also worth looking at video demonstrations of the product. Can a user see the size of the product in the hands of someone? Can they see how many ports are on that computer they want to purchase, or how much room is inside the case? You can use this type of content to make your site more attractive to users, and it can even be placed on YouTube to bring in more sales.
Finally, when it comes to the purchase button, make it obvious. It should be easy to find and have a color that makes it stand out from the rest of your site design. It should be within the reach of your users on their devices without needing to adjust the grip they have on their mobile phones.
Cart
Once you have a user with products in your cart, you’re closer to purchase but that doesn’t mean a sale is guaranteed. One thing that many sites do poorly is to make their cart hard to edit. Many users will add a bunch of products to their cart and then decide which ones they’re going to purchase at checkout. It should be easy for users to remove items from their cart, and you’re going to get bonus points for making it easy to add products to a wishlist for a user.
When I visit Cotton Bureau I look through and add all the shirts that interest me to my cart. Then I look at the hundreds of dollars the purchase will cost and cut down what I’m purchasing to meet the budget I have. The only place I fault Cotton Bureau is that they don’t let me pass the shirts I decided not to purchase to a wishlist so I can see them and purchase them later.
One thing to avoid, according to the Nielson Group, is the dreaded “Update” button. Don’t make your users update their cart to have changes reflected in the totals. Unfortunately, the default WooCommerce cart does include this update button, but you can use Auto Update Cart for WooCommerce to remove it and improve the experience of your users.
You should also take advantage of device-specific features like Hand off which lets iOS, iPadOS, and macOS users pick up where they left off in their browser sessions. If coded properly, you can take advantage of this and send the products in a user’s cart to their other devices.
Checkout
When it comes to checkout, one of the first things to do is make sure that a user is not required to create an account at checkout. Even if you have a membership site that requires an account, work to secure the purchase first. Once a user has purchased you can provide instructions on setting up their account. With WooCommerce, as long as they use the same email all purchases a user has made will show up in their account once they create one.
There is always a lot of information to fill in at checkout, so make it as easy as possible. That means you need to label your checkout fields properly so that the proper keyboard is provided to users. If you’re asking for a phone number, they should see the numeric keyboard on their devices.
It’s also worth taking advantage of any facility you can to help users by filling in information. Don’t ask for the country they’re in, you can detect that with your site and fill it in for them. If you ask for the Zip Code or Postal Code before City and State information you can fill in City and State without having your user spend time on them.
If you can’t autofill their state information, make sure you don’t present it in a dropdown without any search. Huge dropdowns are terrible to scroll through on mobile devices. At the very least let a user search for their State/Province/Country inside your dropdown to save them time and frustration.
Most mobile devices have some facility to autofill form fields, make sure that your checkout process works with these systems. You should also take the time to make sure that any password or username fields on your site will work with the password management systems built into devices.
When it comes to the order summaries on your checkout page, make sure that you present all the charges to your users. If you’ve grabbed the Zip Code, use that to estimate shipping and taxes instead of surprising users with it in a later step. If at all possible, show users their order total, and the CTA that completes a purchase on a single screen of their device.
For payment options, make sure you’re aware of what regions you’re selling into and what the preferred payment methods are. While you should offer the payment options your users want, don’t overwhelm them with every payment option you could add to your site. Look at adding Apple Pay, Google Pay, and then maybe your credit card processing. Feel free to test whether adding PayPal One-Touch or other payment gateways increase or decrease your sales, but don’t offer them a multitude of options.
If you’re offering your processing then make sure that your site works with built-in card filling systems. On iOS devices, you can open your camera and show it your Credit Card to have payment fields filled in. This can go a long way to making sure that a user isn’t frustrated at filling in a bunch of extra information.
Now that we’ve looked at the whole purchase process, let’s take a look at a few other areas you need to optimize for an ideal mCommerce experience.
Build for Speed
Many countries don’t have fast mobile bandwidth so you need to make sure that you keep the bandwidth-limited and only display the content you MUST display to get a sale. Waiting trumps site loyalty with 14% of shoppers saying they’ll go to a different site if they have to wait too long. That means you need to run speed tests on your site and cut out any interactions or code that stands in the way of a user making a purchase.
Optimize Images
While I said above that you should have high-quality images, there is a point where your images are far too big for the web. A good rule of thumb is that images should be under 1MB, well under. This can be done by optimizing images and reducing their overall dimensions.
Tools like Kraken have plugins for WordPress that can take care of this for you on image upload. For big sites that have a legacy of poorly optimized images, you can use command line tools like jpegoptim or pngcrush to optimize folders of images recursively. In early 2020 I used jpegoptim and pngcrush to deal with my clients 50K+ images build up over 10+ years. We saved 20GB of disk space and huge amounts of bandwidth monthly.
Minify CSS, JS, HTML, and Cache
In addition to compressing your images, you should be looking at minifying your CSS JavaScript and HTML. One of my favorite tools to do this is WP Rocket. I’ve found this to consistently provide huge speed improvements on client sites without huge amounts of time spent configuring the plugin.
If you want to use WP Rocket with our Nexcess CDN, we have instructions in our documentation.
Cut Tracking and Sharing
Another spot to easily optimize your site is with the tracking and sharing scripts you use. Yes, you need some analytics to see what your users are doing and to prioritize which devices need optimization, but you don’t need 5 tracking scripts and 3 social sharing scripts loaded on each page.
For most sites, social sharing buttons are a vast wasteland showing that no one is sharing your content. Worse yet, for mobile users, they often cover up portions of the content making the mobile experience terrible. I’ve left many sites because their social buttons make the content I was coming to consume unreadable.
Cut down everything you don’t need to keep the site functioning and provide a better experience to your users.
Keep Refining
Even if you go through all the suggestions above and improve your site, you’ll need to keep improving your mCommerce experience. In October 2020 Apple released iPadOS 14 which added Scribble support for the Apple Pencil. Yes, most sites should work with this without any changes, but did you test it to make sure?
Making sure that your site is optimized for mobile users is an ongoing task, just like optimizing your site for desktop users is. For each change, you make, try to do A/B testing so that you are making choices that improve user experience and site conversions. At the same time, make sure that you don’t optimize only for mobile and thus make users with other devices have a worse experience.
At the end of the day, mobile usage is not a fad. It’s here to stay and something you will need to make sure you account for if you want to keep making sales to your customers.
