Today we're talking about a topic I've been meaning to write about. It's so easy to launch your own online shop, but for it to be successful, it's important to keep in mind these 7 principle rules of mobile design, which focus on the mobile user experience.

Nowadays it's evident that the main screen in our lives is mobile: navigation from mobiles exceeds that of desktop computers since last year.

In fact, a while back Google launched technology AMP that, once applied to your site, quadruples your mobile speed. They also developed tools to check the performance of your site and optimise it. That is how they improve their user experience.

7 principle rules of mobile design for your e-commerce

Mobile web performance

It's imperative that your online shop performs perfectly in mobile. It should look as sexy as possible, since most likely your visitors will probably find you via mobile.

Take into account that if your site takes more than 3 seconds to load or is not shown optimised for the small screen, you could lose a potential client. We users are more impatient than ever and we'll look for an alternative solution if the navigation experience is a negative one.

That said, I'm going to lay out 7 of the best rules of mobile design for your e-commerce.

If you obey them, you'll be encouraging a good user experience by facilitating simple, smooth navigation and you'll incentivise more sales in your online shop.

And to accompany this post I'd like to share 8 examples of well-executed e-commerces that you can copy for your online shop.

The shopping cart should form part of the main menu

In fact, not only should the shopping cart icon be highly visible, but it is also recommended that it show the number of products you've added to it. This way, with just one click the user can finalise the purchase without thinking about how or where to make the purchase.

Visibility of the main menu throughout the navigation

Obviously, how you navigate with a touch screen is different from how you navigate from your desktop computer. If your site isn't optimised for mobile, not only will you provoke a negative experience, but the user can get lost among all the content in your site. In these situations you can be sure that the user is clicking "back" to reorientate their navigation and start again or leave.

This is why it's so important that the main menu is always present and visible so that the user has all the relevant tools at hand to find what they need in as few clicks as possible.

Simple, intuitive navigation encourages purchases in any e-commerce. All you have to do is make it as easy as possible for your clients!

Relation between the titles and background images

Whenever we use a space as a header or featured spot that has a background image and title, it's crucial that it can be read easily. At the end of the day, the goal is that this space sends a message that provokes a desired action. For example, indicating with a title what the site is about, explain what makes you different from the rest, present a special offer or feature a new product.

To achieve all this, you should make sure that the background photo makes it easy to read what is written and that the text is centred and well-arranged. The main title should be large and the second line of supporting text should be smaller.

Centred product images

There are two main reasons why images should be placed in the centre:

1. Decision-making based on design

After having seen the undeniable success social networks like Instagram have had, it's clear that in mobiles users love to consume content in visual formats. So, what's going to make all the difference from the first impression is how you position your images and their quality. The majority of online purchases are impulsive. Users base their designs on the design and product presentation. Your product images should be in plain site, clearly represented, and presented in the most attractive way in your e-commerce.

2. Design for web layout

Spaces in the images and texts in the web layout work with percentages. Knowing that a responsive web is viewed in different resolutions and on different screens, if we put important elements, such as the title or product image in the centre, we ensure that it has good visibility in all resolutions. This is because the centre of a responsive web is the same in all resolutions. This way it's less likely that an image will appear displaced or will be seen cut off.

Be brief in the product description but show more images 

Get to the point! A mobile screen doesn't give you room to write much about your product, so take advantage of the little space you have. When a user reaches your product listing they should immediately see the product image in the centre and in full size.

It's recommended that you enrich the listing with 2 or 3 secondary backup images that let the user get a full picture of the product (frontal image, side, top, in use, in movement... etc). Then include the name of the product, the features, the price, quantities and most relevant data without going over 2 or 3 lines. And of course, the "Buy" button.

If you have important additional information, it's best to position it at the end of the listing as extra supporting content or give the user access to the info through a secondary dropdown menu.

Be authentic, use your own real images 

Don't fool your users with fake images that give them a false impression. It will only end in a terrible user experience once they receive the product. It's important to represent the best aspects of your product, as long as you are honest and use images that best represent the product you're selling. That way you reflect an image of trust and security.

8 e-commerce for inspiration for your online shop: