Simple concepts of mobile design in eCommerce

Read more: How to Perfect the Shopping cart & Checkout

   We are starting a series of articles about main pain points of eCommerce websites. Online shopping is all about pleasing your customers on each step of their user flow. Today we’re studying the issues in mobile eCommerce and how to avoid common mistakes for better conversion.

   Mobile web is your best chance to lose a customer. In 2016, 21% of online retail revenue came from mobile devices, in 2017 it was 28%, Wolfgang Digital reports. Most users go to e-shop using different devices before deciding to buy something. It means your website must be adapted and perform well regardless whether it’s a computer, a phone, or a tablet. Let’s study mobile elements where most eCommerce website fail.


    Layout of the elements

   Desktop screens are big, and it’s difficult to click the wrong button. It’s not the same with the mobile, though. If users have to zoom or double-tap on some field to be able to read or click on it, it usually leads to frustration and they eventually abandon your website.  Your users can misclick and go to another page unintentionally, which is an undesirable action.

   To make sure your users tap on right elements, you can add some padding to clickable elements. Make sure that for different fields your website displays the right keyboard. There are four types of them, don’t confuse. Remember, that when users tap on a search bar, they expect to see a keyboard, not the last queries. It’s no good to make them double-tap because it’s an unusual action for mobile devices as it usually zooms in.  


   Hide the redundant

   eCommerce websites show lots of product info, including its details, ‘about the brand’, product terms and so on. Extended text is what mobile users want to see the least of all. Let the users tap more for every copy that doesn’t help users complete the purchase, and instead, highlight the important parts – discounts, shipping info, the total sum etc.




    Small images suck

    There’s not that much screen space on a mobile device, but the content still must be large enough to comprehend it. Images are number one priority of eCommerce mobile content, because users don’t want to read, but rather scan and observe.

   For product images, users must be able to zoom them, especially if a product contains lots of tiny details. On a product listing page, don’t put more that 6 products, otherwise images will be too small. When a user goes to a product page, you can include more thumbnail images, as well as additional text.



   The checkout is the page where most mobile eCommerce websites totally screw it up. If users made it to the checkout, chance are they are ready to complete the purchase. What you need to remember is that before the checkout, users have already seen their cart, learnt about the discount and shipping information. There’s no need to display that information again. To ensure that your users know at which step they are, you can include the numbers of steps and name each step, i.e. Billing information, Shipping Information etc.

   You must simplify the forms to fill out, especially the payment methods. Systems like PayPal, Apple Pay, and Google Pay don’t ask users to provide their personal info which saves their time. Smart search also helps reduce the time spent on a page by suggesting searches based on what users have started to type. This is very useful when users need to provide their address.

  Be careful with addresses, though. There’re names of towns and streets that are present in many places, so if it’s a Lake Street (there are almost 5000 Lake Streets in the US), always specify the town.




   Bottom Line

   When approached carefully, the mobile version can be a game-changer for your business. If poorly treated, it may ruin your business as well. To build a decent mobile e-shop, you must predict how and why users would use the mobile version of your website and what differences they expect to see compared to the desktop version.

   User experience comes first: everything you do must be for your customers. The use of mobiles presupposes quick decisions, so users expect a short but complete flow on your website. Remove everything that might make the pages load slower – extra images, banners, big header and so on. Instead, make sure the product images and big enough to see the items without having to zoom in, and all button and visible and clickable. If you succeed in building a decent mobile website, your customers will appreciate it, and the sales will rocket.  



Subscribe to our newsletter with the juiciest highlights every 2 weeks.
Choose only the topics that interest you most
Thank you for subscribing!
Don’t be shy to interact with our content. For any suggestions feel free to send an email to
Write a comment:
Read on

What can go wrong with product pages and how to avoid common mistakes for better conversion.

Author Serhii Bohachenko

Added on 2018-02-19

Here is the short guide how to avoid common mistakes for better conversion rates.

Author Serhii Bohachenko

Added on 2018-02-21

It is a vendor’s instrument of communication with the supplier of goods and services, making life of b2b client much easier. Let's talk about it.

Author Dmitry Lytvynko

Added on 2018-07-18

Get a quote or ask our expert!
We will be happy to answer any question!

Get in touch

No time to hesitate, let's discuss it!