E-Commerce Design

A useful feature of an e-commerce shop and a ever-present standard of ecommerce web design is the inclusion of customer reviews on a product page. Speaking personally, if I’m about to buy an album, DVD or book, I find my decision to buy the book greatly influenced by how good the customer reviews for it are.

Obviously this can have detrimental effects if the reviews are condemning the product for poor quality. You also find that people who haven’t even used the product will begin to slate it due to preferences of a rival brand, or simply just unreasonable bias. However it is normally quite obvious to spot poor reviews and you tend to find yourself siding with reviews that make sense of your preconceptions of the product. There’s nothing you can do about difference of opinion, after all. You usually find that the more reviews the better the overall score. A customer with one five-star review is a less accurate representation thana  product with 100 reviews and 4/5 stars.

As with Amazon and Play.com it is beneficial to have the star rating appear on the search results page so that the user is aware of the overall judgement of the product’s quality before seeing it in detail.

In order to achieve a greater rate of conversions, a bold and clear ‘add to cart button’ should be added to each product page and it should be made to stand out from the rest of the content so that it is easy to locate for any shopper. Use reds, blues and images to display it so that is is easily noticable to the user.

It is also important to use the correct terminology. Using terms such as ‘buy’ or ‘order’ may scare the user into thinking they are commiting to the purchase right now, whereas ‘add to cart’ or ‘add to basket’ acts as a nice first step in the buying process where the user may only still be browsing.

The example above, taken from PFT Central shows a good usage of an ‘add to cart button’. It stands out using a bold red color, and by using button styles it looks ‘clickable’. The terminology is good and the small trolley icon is good for people who may not speak or read English. It is easily noticable on the page and the use knows exactly what it means so this is how I would reccommend doingthis type of button.

As previously explained, as site search function is a must for any e-commerce website as it allows users to find what they’re looking for. However it is not unusual to be flooded by a huge number of search results in such an instance, so an option to narrow the criteria of a search is a very useful tool. If you searched for ‘Lord of the Rings: Return of the king’, you’ll no doubt be given results from CD, DVD and Video Games which match the search keywords. Narrowing it to a search within ‘CD’ would ensure only the soundtrack would appear from the search.

I think Zavvi has it right. It’s not too complicated either. You don’t want a hug list of categories to navigate through, just the main ones which will really help in narrowing down your search.

There’s nothing worse in an e-commerce shop than to be a customer who doesn’t realise which part of the shop they’re viewing. It should always be made clear at the top of the page, using breadrumb navigation to shop how deep into the shop they have gone. Doing this is alos a great way of creating clean, simple page headings, which is great for SEO.

A good example would be: Home > Electronics > Video games > PS3 > PS3 Accessories… etc.

Having this path clear at the top, with a nice, clear title at the top of the page can make all the difference when a user browses the shop. Amazon UK shows how it should be done:

Post by Adam Moss

One of the most frequently asked questions that we are asked by customers, is; Why is the design of my shop so important? Surely if the prices are right and the navigation works, why do I need a fancy design?

There isn’t a quick and simple answer to this question, but in our opinion you need a good, appropriate and professional design. When people are on a budget to create an online shop, the design can be one of the easiest factors to drop in order to save money.

As a web developer and keen online shopper myself, I completely understand how e-commerce and online payments work. I am very selective over the web-sites that I choose to enter my credit card details on. On the odd occasion should I wish to buy something from a new online shop, that I haven’t visited before,  if the site doesn’t look right, I go elsewhere. I look for reassurance in a web-site that they are a serious legitamate company. Once the homepage has loaded, I can tell this within seconds.

Put yourself in the shoes of your potential customer, and ask yourself the questions:

1. Do I trust this web-site with my credit card details?
2. Is this a legitimate company based in the UK, with visible UK contact information?
3. Will my order be dispatched correctly and quickly?

A professional and well designed web-site will reassure your web-site’s browsers that they have come to the right place and maximise sales conversions.

For more advice about shop design, contact us for more information.