Free Webcast: How Mobile-First Thinking Builds and Maintains a Loyal Audience – Learn More ›
Popular Today in Business: All Popular Articles

20 Tips for eCommerce Web Design and Usability

Online Marketing

It might have happened to everybody: you find in the search engine a link to the product you need, click it and close the page in a few seconds. Simply because the site web design puts you off. Or vice versa: you come to the beautifully designed site, but understand nothing of how to navigate through it. Andy Booth, English designer and developer, has been working in ecommerce for many years and has gathered 20 ecommerce usability tips, which will come handy for everybody who wants to create online store or improve it.  The list isn’t exhaustive, but it covers some important features which affect the site look.

1.   Complicated filters

Almost any product may come in different sizes, colors, etc. Standard or present packing may be as an option too. If you site has a simple and clear system of filters by different parameters, even the most choosey customer will enjoy using your site. Check out what filtering options a large consumer electronics online stores offer.

2.   Keep the search line in sight

Amazon.com: under the main page is the dominating search bar. Such solution must have come from the years of experience. When a user comes to the online store and doesn’t find what he needs. he might seek for the search field – it is just that natural. So the search line shouldn’t be hidden. Of course it is relevant for web stores, which search bars work correctly.

3.   In stock / out of stock

The next advice on our usability tips list. Surely, from the SEO point of view, removing the product from the site if it is out of stock is not good. But from the business prospective, whether it is good to disappoint your site visitors, which finally find what they have been looking for, add it to the cart and the only thing they get is a cold answer “Sorry, the item is out of stock”? After all, in the end people bring you the money, not the search engine bots. So think about your customers first. Create a section with product availability information prominent, so it could be seen at once and add a field “Notify me when the item is in stock”.

 4.   Item photos

20 Tips for eCommerce Web Design and Usability image asos reviews 300x267

Probably, there is no such ecommerce expert, who has not highlighted the importance of item images. From the ecommerce UX point of view it is very essential. This is true indeed. In essence, people are buying with eyes, for ecommerce site it is especially vital as you can’t touch the product online. That is why the product photo quality should be excellent. Let the customer feel he has seen the product for real.  And don’t limit yourself to one picture only. If you have an opportunity to make 3D or video about the product – make the most of this.

Related Resources from B2C
» Free Webcast: How Mobile-First Thinking Builds and Maintains a Loyal Audience

5.   Shopping cart

Generally, there are two distinct types of shopping cart implementation. The first one is when shopping cart appears every time the item has been added, the second one – only notifies about the adding of another item. Regardless of the variant you prefer to use, it is important to place the shopping cart where it is convenient for the customer to spot it. In some online stores shopping cart remains visible when the user scrolls down the page – it is also an option. The main thing is don’t make your customer think hard when he wants to make a purchase on the site. To make shopping cart button even more attractive, you can attach to it little photos of items which have been added.

6.   Bread crumbs

Bread crumbs – a very convenient, useful and efficient navigating tool. They allow user to easily navigate through the site, especially when he has landed from the search engine results, quickly move 2-3 steps earlier and understand the category structure.  There is also a variant of bread crumbs implementation when they reflect the route the user he has just gone. Both variants have pros and cons, and if to be inventive, they can be combined. However we have not seen such cases so far.

 7.   Mega-menu

Mega-menu – is a huge fly-out menu with categories and subcategories list which overlays most of the page. We can see such menus on large sites such as eBay, which sells almost everything. Solution of this kind allows the simple navigation even if the catalog structure is complicated. Moreover, mega-menu doesn’t take up lots of space if to roll up it. So if your site has many categories, think about this option.

8.   Final cost

One more rule: show the final cost on the product page or shopping cart page. There is nothing more outrageous than extra charges for delivery which a customer finds out about only on the last stage. It puts off him immediately. You may set the single rate for delivery for the whole territory or offer delivery free of charge – just make necessary calculations to set up the right scheme.  In case you can’t afford this, include delivery cost calculation on the product page, so the price is automatically calculated depending on the customer location.

9. Every pixel

Andy has found a great example: organic food internet store Abel & Cole. The author assures that each pixel works for the site success. When developing a new showcase page, thinking over a customer’s actions and impression, amending existing online store, always question yourself, why this or that block should have such look exactly, why it is better than other variants, and most importantly – how much it can contribute to your success and customers satisfaction.

10. SEO

Under the circumstances of a steady growth of the ecommerce market which becomes more and more competitive, SEO – is one the keys to success. Design may have to do with SEO as well. For example, search engines like right HTML coding with correct use of heading tags H (in place where they really need to be used).

11. Stand out from the crowd20 Tips for eCommerce Web Design and Usability image stand out 300x202

In any case, the ecommerce site design should be original and unique, at least in some elements. To invent something completely new is difficult, but if your site doesn’t have any distinct feature at all, it is easy for it to be lost among other competitors.  Web store original feature is the first thing a customer will remember.

12. Social media

No doubt that a typical online store selling garden tools is unlikely to attract hundreds of fans in social media. Nevertheless, this option shouldn’t be neglected at least for SEO reasons. Social media icons placement on the site is not a simple task. Such block shouldn’t attract too many attention (as sliding buttons on many blogs), but at the same time it should be visible for a customer. If the user only grabs a great photo or original description to his news feed without even having liked your site, you still benefit from it as more people will find out about your store.

13. Quick product overview20 Tips for eCommerce Web Design and Usability image product overview 300x200

Quick product overview – is a convenient feature, offering the customer a chance to quickly scan the catalog, paying attention to the products he is interested in. Quick overview allows looking at the product without leaving the category page. Even if the user sees the same product page but in light box with darker background, not in the separate tab, it is considered as quick overview. It is better however to fill the light box with something between product card and full product page.

14. Newsletter subscription

Email marketing is alive and will be so for many years to come. That is why building a potential buyers email list is important. Place the subscription form whether the users might be looking for it: in the blog, news block, new items and sales categories, etc.  In case you have a high frequency of new content publishing, you may think of launching several newsletters: one for those who wants to be the first to know about your deals, other with information about new arrivals, the third with interesting and useful materials.

15. Clean pages

In real life, nobody likes to shop at the dirty store. It is true for online store as well. Do not clutter category and subcategory pages with useless elements; try to incorporate only those blocks which bring value. Think of each page as a part of the whole, avoid too much differentiation.

16. Testimonials

Testimonials are an important part of today’s ecommerce site. Usually they are placed on he product pages, but if we are talking about the feedback related to the whole store, Andy suggests placing such block on the sidebar or as a slider. A page specifically for testimonials is good, but do many people will get there?

17. Product variations

In Victoria’s Secret online store size and color variations are shown very prominently and are clear for the customer without any explanations. When it comes to the choosing from product variations, try your best to make such experience for the customer as easy as possible. Graphic presentation is better than words, that is why colors should be marked with colors, and other characteristics with icons.

20 Tips for eCommerce Web Design and Usability image victoria secret 300x220

 18. Simple checkout

Ordering pages is your goal, where you lead the user. When he comes there, you shouldn’t allow him to leave the page. Remove additional links and blocks; don’t try to sell him another item. The less distracting factors the checkout page has, the more chances customer will make a purchase.

 19. “Add to cart”

An obvious rule in online shop usability: the Add to cart button is call to action, so it should stand out from the rest of blocks and elements. It shouldn’t be less visible than, for example, “like” social media buttons.

 20. Contacts

Among UX tips which professionals usually mention is the way you let your customers contact you.  Naturally, many customers may want to get in touch with you with some questions. Ideally, internet-store should have 8-800 number for free of charge calls. Try, at least, indicate your email address and telephone number, and offer your site visitors an option to send the letter via special contact form. Live chat – a window with instant connection to the manager – can be a valuable addition to the contact options you online store is equipped with.

Comments on this Article: 2

Add a Comment
  1. It is the true challenge to successfully marry the beautiful visuals with a good structure and flow. These tips and certainly helpful

  2. Stuart says:

    Website visitors will be motivated to return to an e-commerce website if they find that the website offers ease of use and a convenient navigation system. Hence, website developers should make it a point to follow these simple tips when developing a website.

Add a Comment:


Thank you for adding to the conversation!

Our comments are moderated. Your comment may not appear immediately.