Estimates say that in 2018, 50% of ecommerce revenue will come from mobile users.
That’s why it is crucial for online store owners to focus on how to optimize mobile versions of their websites and how to boost mobile conversion rate.
Some of our clients obtain up to 80% of traffic from mobile. And we don’t mean those selling apps, but physical goods. No wonder that m-commerce is one of the ecommerce trends in 2018.
Here we gathered 5 main errors that you can fix to improve the conversion rate of your ecommerce mobile website during mobile CRO optimization process:
Pssst… are you looking for more knowledge about mobile CRO? Look no further but click here: Dos and Don’ts of Mobile Shopping Cart Design, 9 Simple Ways to Improve Ecommerce Mobile Checkout Forms, 10 Elements of Your Mobile Checkout That Need Improvement, How to Design the Best Mobile Product Detail Page!
Your homepage is your business card. You have only 7 seconds to attract the customer’s attention. Or even less. And from our experience – homepages are so easy to ruin. One of the most common mistakes that ecommerce sites make: the homepage is not user friendly, nor visually welcoming. Let’s compare two e-shops.
Here, the design is, simply said, old-fashioned. You can’t see what the most hot or newest offer is right now. The hamburger menu should be placed in the upper left hand corner. But, as you can see, it isn’t there!
When you press the “Order” button, it opens up in a new window. It’s not user friendly, nor friendly for your internet connection. It shouldn’t open in an additional tab.
Now, let’s look at how an optimized homepage looks: Zalando.com. The hamburger menu is captioned. There is a visible search bar – which is essential for big eshops with a lot of SKUs.
Another example can be found at AlexixBittar.com. Look at the checkout icon in the main menu: you can clearly see how many items there are in the mobile shopping bag. And, as a bonus, you can also see the hottest promos right now.
However, there are also some aspects that could be improved: the icons are pretty small – it may be hard for bigger hands to tap. And there should be descriptions beneath the icons (just as it was on Zalando).
When you tap on the “checkout” icon, there is a toplayer which shows you what’s in your shopping bag and how many items there are. You can easily go to your shopping bag or to the checkout. Here’s even a better choice for mobile conversion rate optimization – there is a separate screen showing over your regular screen (without reloading your regular page) – just like on Amazon, when you try to add a product to your wishlist.
Growcode also recommends this eBook:
Ecommerce Optimization Checklist of a 7+ Figure Online Store
Now let’s imagine the following situation: when you enter an online shoe store, you never look for shoes, in a general sense. You always look for a certain type of shoe: flats, heels, snow boots etc. With a poor menu, you will not be able to easily find what you are looking for. If you open a menu, you should be able to easily find subcategories (they should open immediately).
First, let’s look at a bad example. What happens after you tap on “furniture” in the main menu:
The new menu opens into a new tab instead of showing you subcategories straight away. It’s not user friendly. Here, in the upper part of the screen you have types of furniture, and below, photos of furniture. You have no idea how the two relate to each other.
Now, let’s look at AlexisBittar.com. When you tap on jewelry , you have all kinds of subcategories. You can also explore all products in the category. It’s all in the same tab, it’s all easy to find. You can always see the shopping bag and main menu icon, too.
Find out more examples of how to build great menu on mobile devices in the episode of Bite-size Ecommerce Optimization!
When a customer enters a category page, they should always see the following: a main menu with a shopping cart, a heading informing the shopper which category they’re browsing , filters, and products.
Let’s look at a poor example first:
There is no price, no info on the product, and you can’t go back to the main menu.
For a good example, look below at Macys.com: there is main menu icon, shopping bag, the ability to view items in your shopping bag, category names, and filters that let you easily narrow your selection. Remember: on category pages show at least two products next to each other at once. Imagine you have 2738 coats in your online shop. With only one viewable product at a time, the customer would have to swipe forever to see all of them.
Buying incentives are your best friends here. So use them generously. Some good examples are:
In the product gallery, it’s essential to use natural swiping motions that people are used to (they swipe Facebook and Instagram constantly). So let them “swipe” the gallery, instead of “tapping” it.
Here is a good example of a product page that could easily be optimized. There are no incentives. You have to tap the photos, instead of swiping the gallery.
Now let’s look at the better example. You have the incentive, you can easily swipe the gallery, and there is, from the point of view of the customer, very important information easily viewable: the product is available. You need to communicate that whenever possible.
However, there’s still room for more mobile cro optimization. The colors of the call to action (“Add to bag” and “This piece is selling out”) infoboxes. It would improve the mobile conversion rate if buttons and infoboxes were in bright, contrasting colors.
There are a few vital steps, that you should use to optimize your check out process. First, make sure that the checkout stage inspires the trust of your customers. Let them know how secure they are when buying in your online shop. Build trust on mobile ecommerce checkout and use information on secure checkout, locks, green font.
Make sure that there is nothing on the checkout page that could distract or deter your customers from buying. There should be no additional information on other promotions, no other products. Just let your customers focus on finishing the purchase.
To optimize your mobile ecommerce website, make sure that all buttons are big enough to be easily tapped by small, medium, and large hands. Buttons should be easily tapped by both right-handed, as well as left-handed users. Look at the examples below: the buttons are almost the width of the screen – they are easily tapped from left and from right. And visible.
No matter what you sell online, remember that your final revenue is what matters the most. Read Case Study of European apparel giant Reserved.com to see how they boosted their revenue without involving their IT department, or check out 51 Trends of eCommerce for 2018 to learn what roads for ecommerce growth are possible in 2018.
Download our 115-point ecommerce optimization checklist for 7+ figure online stores. Use it to enhance every part of your store, from the home page to the checkout forms.
Oh, and don’t worry, we’ve broken it down into manageable chunks!