How to Create a Layout for eCommerce site that Can Attract Customers

TMO Group TMO Group

Ecommerce has come a long way in the past 10 years. Now web developers understand customers’ expectations and create the website layout accordingly.  However, if you pay close attention to online commerce, you will find that some big players like Amazon and EBay dominates this market. What makes them so special? If your ecommerce website is not satisfying the visitors and conversion rate is low, then here are some tips to create a layout for eCommerce website that can attract customers.

1. Tiled Navigation to Enhance User Experience

To make the user experience in a website better, navigation has to be world-class. It makes no sense to have a navigation, which the users won’t be able to comprehend and leave from the landing page itself. Instead, you need to create a design that ensures easy navigation from one page of the ecommerce website to another, thus giving the potential customers a detailed view of the products offered.

To make the navigation interesting, it is important to go for something that attracts the users. And what can be more attractive than an image? These days, a large number of sites are using images to create tiled navigation. The image tiles with graphics of different elements of the website are sure to make it easier for the website visitors to navigate without getting lost.

The use of tiled navigation in the design of ecommerce websites is likely to be in line with the upcoming trend of web design as a whole where visual content will gain ground.

2. Create Sign up Buttons

The first and most important function you can have is a sign up button on your site, ideally one that’s on every page of your site, is easy to see and features a minimalistic design. Don’t go for big flashy numbers as it will make your site seem like it’s only interested in getting people to join. You want something that says ‘You can sign up if you like, it’s your choice’.

Also make sure that when your customers choose to sign up they don’t have to go through several pages of excessively long forms to fill in. No one in their right mind enjoys filling those in, especially if something goes wrong and you need to enter your details in again.

3. Readability

Internet users don’t read, they scan. This just means there’s a lot more scanning going on than there is reading word for word.

A study carried out by Wichita State University showed that with optimal leading and margins — white space between and around text — comprehension improved.  The study fundamentally demonstrates that white space affects the reading experience. Many designs can be improved simply by increasing the leading of text. The analog of leading in web design is the line-height CSS property.

For web designs, a popular line-height to font-size ratio is 150%. For example, if the font-size is 20px, then the line-height would be 30px. The 150% ratio will vary depending on the font you’re using, but it’s a good starting point.

Compare the two paragraphs below. The text content and font-size is the same, but the line-height and padding properties are different. Which version is easier and more pleasant to read?

Whitespace readability comparison

CSS properties of Version 1:

font-size: 16px
line-height: 16px
padding-left: 3px
padding-right: 3px

CSS property of Version 2:

font-size: 16px
line-height: 24px
padding-left: 15px
padding-right: 15px

By having sufficient white space in the form of line-height and padding, we can improve readability quite drastically.

TMO Group provide eCommerce website development through UI design in early stage to long term development. More details about our services please leave a message at our website.

Subscribe to our newsletter

News of the eCommerce world, best practices to use in your eCommerce platform, insights and analytics of Chinese and South East Asian eCommerce markets - all that and much more in our monthly newsletter.