We are living in a high-tech world where almost each human has daily access to Internet via various devices.

A few years ago most of us used only desktop computers for that, but in the recent years the situation has changed. Now mobile devices are taking the lead as more and more people prefer using their tablets and mobile phones for surfing the internet.

Ecommerce sphere is not an exception; it also experiences an increase in mobile devices usage. Today being mobile-friendly is a must for any eCommerce site. Even Google treats mobile friendliness as a ranking signal. So here is an overview of mobile sites types and a detailed guide on mobile design principles for eCommerce.

Types of Mobile-friendly Sites

There are a few ways of creating mobile-friendly sites, and here are the most common: responsive design, mobile application and a separate mobile version of the site. Each of these types has its pros and cons which should be carefully considered before you choose the one that most suits your business. Here is a more detailed overview of each solution for a mobile-friendly site.

Responsive Design

This is an approach when you have a single site which is rendered equally good on all devices: desktop, tablets, different mobile phones. The elements of the site (images, fonts, blocks, etc.) are resized according to the screen resolution you are using.

A great advantage of responsive design is that a user sees the same site on all his devices. But at the same time there are some drawbacks, the main of them being the necessity to take into account all possible scenarios and widespread screen resolutions. A designer should decide which elements will be displayed on all devices and which elements are less important and can be omitted on small displays. Moreover, adaptive layouts require more coding which can sometimes slaw down a site.

This type of a mobile site will be a good choice for small and medium online shops.

Mobile Application

A mobile application is a good way to give customers all the necessary information in a user-friendly way. But at the same time this solution requires large resources as a mobile application is developed separately from the main site. Moreover, an application should be developed for all platforms: iOS, Android, Windows phone.

A mobile application is a good choice for large online stores with many categories and products. If a customer visits a site quite often to find, buy or ask something, it’s easier to do it via an application rather than via a site.

Mobile Version

A mobile site version combines advantages of responsive design and a mobile application, thus it is an optimal way of becoming mobile-friendly.

On the one hand, a mobile version is developed separately from the desktop site and can include only necessary blocks with less code. On the other hand, there is no need to design and develop a mobile version for each platform separately as a mobile site version will look good on all devices and screens.

Some large stores combine the above mentioned types and offer 2 variants simultaneously: a mobile version and an application. A customer just needs to decide what will work best for him.

No matter which variant a merchant needs, a designer should follow particular principles while designing a mobile site. I will list the most important of them below. I’ll be mostly talking about mobile versions as they combine ideas of responsive design and an application.

Main Principles of eCommerce Mobile Design

If you have experience in designing desktop sites only, you may find it difficult to design for mobile. Your design should not only be appealing but also friendly for mobile users.

When it comes to designing for mobile devices, the main problem is screen size. Tablets and mobile phones have much smaller screens than a desktop computer. But still you should manage to provide mobile visitors with handy navigation and ensure seamless user experience.

Principle 1: Usability

These days a designer should create beautiful interfaces with usability in mind. To achieve maximum effectiveness of the online shop you’re designing for, you should get to know it better. Start from research and answer the following questions:

• What products are sold here?
• Who is an average customer of this shop?
• Which options should be available? Which of these options are more important?

You may think: how is this all connected with mobile design? I’m glad you’ve asked! The reason lies in small screen sizes that should contain only those blocks and options that are really needed.

Usability is not what a customer sees, it’s something he feels when he browses though a mobile store. Let him feel at home.

Principle 2: Prototyping

Once you’ve collected all the necessary information on the company, you can get down to designing its mobile site. It’s better to start with a prototype which greatly simplifies the process. A prototype should contain all structural elements of the page: text blocks, images, links, buttons, headings and titles, inputs, etc.You can create prototypes in different programs like Photoshop or Axure or even on paper.

Firstly, a prototype will help you to understand the project better. While creating it, you will carefully think over all the elements and their positions, so the next stage – drawing your design – will be much easier.

Secondly, by creating a prototype you save lots of time on future corrections: it’s better to make them on this stage than on next ones.

Before creating a prototype you should decide for which device you are going to create it: a mobile phone or a tablet. Moreover, consider that each of these devices has portrait and landscape modes. Note down all the structural elements that should be found on your prototype not to forget anything.

For example, for the main page of an online shop we will need: logo, checkout, search bar, navigation, products blocks with images, titles, short descriptions and price as well as some general text about the store. Once all these elements are enumerated, you can start creating 4 prototypes: for a mobile phone with portrait and landscape modes and for a tablet with portrait and landscape modes.

Once your prototypes are ready and approved, you can start designing the interface.

Principle 3: Interface

An interface is the first thing a visitor sees when he lands in an online store. Interface sets the store tone which is very important, so your mission as a designer is to make this tone positive and build positive attitude.

Help visitors to quickly understand where they are, what they can get, what functions and features they can use.It can be achieved by specific colors usage, indentations, icons, fonts. If you need to show checkout – add a checkout icon; if you need to insert a link – highlight it with color.

Principle 4: Sizes

There are 2 main fundamental peculiarities of mobile devices: their size and the way a user interacts with a site via these devices: he uses his fingers that are much bigger than a cursor on a desktop. You should bare these peculiarities in mind while designing for mobile.

• Clickable Area Size:

  Due to the above mentioned characteristics of mobile devices an optimal clickable area size should be bigger than 44x44px. If you don’t want to frustrate your visitors by mis-clicks, try to make all the clickable elements (links, buttons, search bar, etc.) 44x44px or bigger for mdpi resolution for Android devices and non-retina displays for iOS devices. For other resolutions you should scale it up.

• Fonts Size:

  You should provide your visitors with fast scanning options and don’t forget about their sight at the same time. That’s why your font size should be no less than 11pt. This size ensures good readability provided it’s used with a contrast background. However, 11pt is more suitable for placeholders, hints and less essential information. For product descriptions and important text blocks 13pt is more suitable.

• Product Images Size:

  It won’t be an exaggeration if I say that product images are responsible for selling the products (in most cases). Many people skip reading details, they just need pics that show a product from all possible angles. This means product images should be noticeable and big enough to enable customers to examine a product in details, you can even add a zoom option for that.

  A product image should occupy not less than 45% of a mobile phone screen width in portrait orientation; and more than 30% in landscape orientation. This will help a customer to see the product details in general as well as notice its peculiarities. As far as tablets are concerned, you can figure out the best images size yourself.

  Apart from images size, you should also mind images quality. The thing is that most modern mobile devices use retina display, so images for 360x640px display resolution won’t look good on screens with 720x1280px or 1080x1920px resolutions. You should always remember that quality of images is one of the most important things for an online store.

• Icons Size:

  Icons are perceived much easier than text, that’s why icons are usually used for hints instead of text. On the one hand, icons should be noticeable; but on the other hand, they shouldn’t be too prominent as they play a secondary role. For example, if you add a search bar with 44px height, add a magnifying glass of 24х24px size. This would be enough for user to understand the purpose of this bar, and it will look nice.

• Forms Size:

  Below I’ve talked about sizes of individual elements, now it’s time to talk about size of an important block – form.

  Size of a mobile phone display is limited, and when a customer needs to fill in a form, a keyboard shows up and overlaps about a half of the screen size. This peculiarity requires keeping mobile forms as minimalistic as possible. They should contain only those fields that are really necessary: e.g. name, address, e-mail. By the way, this rule can also be applied to desktop sites if you want to increase leads: the fewer fields a form has, the more people are likely to submit it.

  A long and boring way from one input to another can frustrate a customer and make him leave the store.

Principle 5: Color

Brand style should be observed not only in the logo, business cards and booklets but also in a mobile site. It is mostly color which helps to show the brand style as well as highlight key element of each page.

Before designing an interface, you should think over which colors will be used and create a palette. If you use few colors, the interface will look boring; if you use too many colors, the interface will look too messy and distractive. So it’s better to keep balance and use 6-10 colors. This is an optimal number but of course there may be some exceptions.

Here is a step-by-step guide of choosing colors for an eCommerce site:

The color combinations you’ve created should be harmonious. Remember about contrast as it helps to attract visitors’ attention to the most important elements, for example to “Add to Cart” button.

1. Choose the main color for the site. It will be responsible for communicating the mood.
2. Choose a secondary color. It will help the main color to highlight different elements.
3. Choose the main color for product descriptions.
4. Choose color for titles. The titles should be noticeable.
5. Remember that various hints or tooltips shouldn’t stand out but still should be visible.
6. Product price is an important element, highlight it with color.
7. Links, buttons and navigation elements should be perceived as clickable elements, this can also be achieved with color.
8. You can choose some more shades of the chosen colors if you need.

Principle 6: Fonts

As with colors, you can create a “palette” for fonts you are going to use: make a list of the fonts names, sizes and styles.

Fonts should have high readability and easily convey the information to potential customers. Therefore, avoid too complex fonts that are hard to read: customers won’t lose their time trying to understand what you are trying to offer.

Your font “palette” may look as a simple txt file where you save the following information:

Heading 1 – RobotoLight 36pt

It’s up to you to decide which font to use for this or that element. Each font has its own meaning and character that will be passed to the site, so you should be careful with choosing the right fonts.

Principle 7: Adaptation

Once you have thought over UX solutions for the mobile eCommerce store, created a prototype, made colors and fonts palettes and drawn the final interface, you work is not over: it’s time for adaptation.

You are creating an online store that visitors will see on their mobile devices. These days there is a great variety of mobile devices having different sizes and resolutions.It would be unproductive to create a prototype for each of them. This means that while creating your main prototype you should consider which elements will be changed, stretched or even omitted depending on the device used.

Adaptation is very important for mobile design. Try to test your prototype at least on most popular resolutions.

Final Thoughts

While this article is dedicated to design principles of mobile eCommerce sites, some points can be used for desktop sites too: interface, colors, usability, fonts.

Remember that principles are not strict laws; you may not follow them all the time. The most important things is to design having usability in mind and thinking about the targeted audience.