You resize the browser and smile as the content magically shifts to fit the screen.
You can see all of the content from your website on your smartphone, so you must have built a mobile-friendly site, right?
You’ll be raking in the sales as customers breeze through your online checkout on both desktop and mobile. ...Right?
As much as it pains me, the brutal truth is that you are losing users and probably money if your only solution for mobile is responsive design. The good news is that your site can be saved and you can recapture mobile shoppers.
Why is it so important that you care about best practices for mobile commerce design?
For starters, 30% of all eCommerce sales are taking place on smartphones and tablets.
Comparing that to just a few years ago when the iPhone was first released in 2007, when that number was zero, the growth is simply astonishing.
In 2015, $104 billion in revenue is coming straight from the mobile customer. Can you afford to sweep aside those numbers? I’d say not unless you are a billionaire who is running an eCommerce site for fun on the side.
Responsive design alone isn’t going to cut it
People love responsive design simply because it’s easy to implement. Developers spend time coding for just one device and the content automatically adjusts to different screen sizes.
But responsive design is not a silver bullet.
Especially when it comes to mobile commerce.
Here are some best practices for online shops to implement beyond responsive design to capture more mobile sales:
1. Respect the “thumb-friendly zone”
No offense to our southpaw’d friends, but the majority of people (70-95%!) are right handed so it makes sense to cater the design to the masses.
For right handed users, certain areas of the screen are more accessible for quick interactions when they use their right thumbs.
This area is called the “thumb friendly zone.” Parachute Design overlaid the Thumb Zone to the Facebook iPhone application. The most important navigational tools are located close to or within the green sweet spot. Less frequently used features are positioned in area of importance outside of the green area.
It’s important to be mindful of this zone when designing for a mobile commerce experience. And of course, as our devices continue to change, the thumb-friendly zone will evolve, too.
2. Sticky navigation bars are your friend
On mobile devices, speed is king.
Quick and easy flow through a website makes a user happy and that is extremely important. Think about the last time you used Facebook or Twitter on your phone.
You’re scrolling down through the gossip and photos of other people’s babies and decide to post a photo of your dinner. Imagine if the site required you to scroll upward the same distance you scrolled down before you could share that photo.
Pretty annoying, right?
Adding a fixed navigation bar into your mobile design keeps the key information in view at all times. For commerce, you can include at least three elements: a homepage link, a checkout link, and an “add to cart” call to action.
Shopify shared this example of cosmetic brand Frank Body’s use of a sticky navigation bar. As the user scrolls down a page, “Add to Cart” buttons slide into the navigation bar and remain there until you have scrolled to the next section.
3. Reign in the detailed product copy
Screen real estate on mobile devices is as valuable as unicorn tears.
I’m sure your widget is best described with twelve adjectives and a Shakespearean-level sonnet, but mobile is just not the place.
When it comes to product copy, brevity will serve you best as visitors scroll through your site on their phones. It’s best to pare product descriptions down to the bare minimum of product name, price, variant option and your call to action button only. Any extra space should be allocated to product photography.
Schuh does a great job of minimizing product copy and emphasizing their product photography.
4. Minimize cognitive load
When you have a million tabs and programs open on your computer, it starts to get a little slow or even crash the machine.
We work around this by closing programs that we’re not using. In the case of websites and mobile commerce product pages, longer pages require more scrolling, which forces visitors to remember what they saw and where they saw it - a heavy cognitive load.
Do your visitors a favor and go easy on their brains by keeping pages shorter. Reduce cognitive load by using links and navigation to help visitors find the additional information they might need and add call to action buttons in multiple places on the page.
Useful Usability shared a comparison of Shinola and Nike product pages as an example. Shinola does a better job than Nike at keeping cognitive load lower. The page is shorter, but still has the content necessary to inform visitors about the product.
No matter which design methods you use for your eCommerce site, always put yourself in the mind of the user.
Do your design efforts help or hinder the overall user experience?
Make sure that your design supports the overall goal of your website - to make sales! It’s a big world out there.
If you don’t captivate your visitors with a beautiful, optimized design - someone else will.
