The importance of mobile for eCommerce no longer needs debating. While it may have been a competitive advantage some time ago, now it’s definitely a must for businesses of various sizes and niches.
By 2019, MarketsandMarkets forecasts that the mCommerce market will grow up to $467.3 billion and some vendors have already seen such an increase in their mobile sales that they discarded the desktop version of their sites.
Mobile will have a saying in your sales too. But those sales don’t depend just on your products being available for ordering and buying on mobile devices.
Product presentation matters and there are a few particular aspects you need to take into consideration when you’re doing it on mobile screens.
Those screens are way smaller than desktops, so what’s the first thing you should do when designing your website for them? As you might have guessed –
Focus on showing what’s relevant and give those elements enough screen-space to easily stand out and be found by your customers. Here are some ways to help you avoid overcrowding your mobile ecommerce website:
Use data mining and other processes to figure out what products your customers are likely to buy or share, then show them that personalized selection instead of your entire catalogue. This helps you avoid clutter, but also increases your chances of sales. Also, if what your customers see upfront suits their taste, they’re more likely to check out what else you have for them. So make sure your entire catalogue is available, as well as easy to find and navigate.
2. Minimize copy.
Analyse and decide which CTAs are the most important and fitting for your business and only keep those. Eliminate extraneous information. Keep all your messages clear and concise. People have shorter attention spans on mobile devices, so you should get to the point really fast. Shorter copy will also help you avoid tiny fonts, which are a big no-no for mobile websites.
3. Give space.
After you’ve worked out what’s important for you to show, let it stand out. Use a clean background, be it white or any colour that contrasts with your product pictures, to make them the centre of attention. Don’t pile too many pictures on the screen and don’t overuse copy-over-images. Make sure to always have enough space around your links and turn them into buttons whenever applicable. Never forget that the very first criterion your mobile website design should fulfil is being “finger-friendly”.
4. Organize options.
If you have lots of products and possibilities on your website, it may seem overwhelming to your customers. Make it easy for them to choose and search within the categories they’re interested in. Use thin and minimalistic menus with very clear and visibly separated options in the dropdown.
Another way to organize your options is through swiping. Swiping is particularly useful for saving space on small screens and it’s fairly intuitive for your customers when presented well. Use swiping on product pages when you want to show different versions of your product, for example, or when you want to show a series of related products.
Winnowing out extraneous elements and allowing the remaining relevant ones to stand out is the very first step you should take when designing your website for mobile devices.
Some other aspects you should consider for your product pages on mobile screens include:
Keep it simple and make sure everything your customers may need is highly accessible.
Use finger-friendly sizes and shapes and ensure easy finger-based navigation.
Choose colours for your CTAs and important buttons that contrast with your background.
Make sure the mobile version retains the look and feel of your desktop version.
Use large, high-quality visuals and show your product from different angles when applicable.
Enable customers to zoom in and out on your products by pinching so they can see all the details.
Using models and displaying your products in context can also help convince your customers.
Of course, this is just scratching the surface when it comes to optimizing mobile commerce websites and different things may or may not work for different types of businesses.
Research, try, analyse and tell us what’s worked and what didn’t for you in the comments below.
Try Google’s Mobile-Friendly Test to see where your current website stands and use some of the advice above to make it even better.
Until next time!