A world of mobile is here. You may love it or hate it but in any case you have to consider this modern tendency. Today more and more transactions are happening via smartphones and tablets, so it’s not enough just to have a responsive checkout, your whole site must be mobile-friendly. In case you’ve missed it, even Google treats mobile-friendliness as a ranking signal. So in this article I will cover some mobile design principles which will be useful for any eCommerce store.
Usability
According to Wikipedia, “usability is the degree to which a software can be used by specified consumers to achieve quantified objectives with effectiveness, efficiency, and satisfaction in a quantified context of use.” So a good mobile site (and desktop too, by the way) should let users complete the needed actions effectively and easily and get overall satisfaction from that experience.
Unfortunately, there is no one single rule for all eCommerce sites how to increase usability and make user experience seamless. However, before designing any store, one should understand the target audience, its objectives as well as what actions a store owner needs visitors to complete. For example, a sign up page will differ from a product page as their goals are different: the former collects leads while the latter sells a product. All such things should be carefully considered in order to make interface easy to understand and use.
Sizes
It’s strange but many designers forget about the fact that a display on mobile devices is much smaller than on desktop computers. As a result, some elements are placed too close to each other which leads to many misclicks and frustration. Many clients just leave a page because they can’t fill in the form without being redirected to another page. Bounce rates are increasing while revenue is decreasing. So please consider the importance of sizes on all stages of developing a mobile site.
What is more, do not forget that some elements which can be easily seen on PC are hard to notice on mobile displays. You can omit some unneeded parts and make most important ones more prominent.
Color
I won’t take you by surprise if I say that a color combination you want to use for your mobile design should be harmonious. Don’t try to use many colors as in this case it would be hard to understand which elements are more important and which ones are less prominent.
Highlight main elements by using contrasting colors. For example, an “Add to Cart” button shouldn’t be the same color as the main menu or anything else on the page.
Adaptation
Adaptation is very important for mobile design. If your store is displayed accurately only on a particular device with particular resolution, this is a fail. A design should be tested on all most popular resolutions and browsers to make sure everything works fine. While creating your main prototype you should decide which elements will be stretched, changed or even omitted depending on the device used by a visitor. This is not an easy process, but it’s definitely one of the key ones.
Final Thoughts
Designing a good mobile interface for an online store is not an easy task; it is far beyond the design itself. It’s about understanding the objectives of this particular site, its audience and other peculiarities. Only this way there is a chance to make a great mobile-friendly site.
