Top 10 guidelines for an ecommerce site

Posted by Steve Temple

I've developed quite a few ecommerce sites and over time have gained a good understanding of what makes a successful site. It's amazing how often I see fundamental usability issues when shopping online. It's especially important with ecommerce to get these things right as you can immediately see a difference in conversion and sales.

Below is what I think are the most important things to be aware of, these definately don't cover everything, but should cover the basics:

1. Price should be clearly displayed next to all products

This should be fairly obvious to everyone, but I've seen a few sites where the price is tucked away or you don't see the price until you actually click the product. In some cases it's so hard to find it's easiest to add it to your basket to see how much it'll cost.

2. An obvious add to basket button

You want to make it as simple as possible for customers to add a product to their basket if they've decided that they want to buy that product. Ensure this button is at the very least prominent on the product page.

Amazon do a great job with this one:

Guidelines 1

3. Basket should be displayed on every page

It should be clear how to get to your basket or even better a visual summary of the basket on each page. This allows your customers to see if that product has added correctly and keep track of how much they're going to spend. One of the top reasons for customers abandoning their basket is that the total cost of the order is too high, making the running total clear should help users keep track of how much the order will be when they come to checkout and avoid any big suprieses.

4. Cost of delivery should be shown clearly and upfront

I see this a lot, the cost of delivery isn't displayed until you're part way through checking out. The earlier this is displayed the less likely it is to suprise the user. I've seen this listed several times as the number one reason customers don't complete the checkout process so making this clear is vital to getting that conversion rate up. Offering free shipping over a given threshold is a great way of encouraging users to place that order and potentially increase the average order value. 

On we put this information in the basket:

Guidelines 2

5. Obvious search function

For users who know what they're after the search is really important. Also users who have tried browsing and not found what they're after may try the search as a backup. The search should be prominent and consistent across the site, web users will often look in the top right for the search box. It should use the word "search" at least once and should have an obvious button to trigger it.

It's worth logging and reviewing the search terms used by customers, this could show trends, highlight common mispellings or identify misplaced products.

6. Highly visible checkout button

The checkout button should be prominent on the top and bottom of the basket page and ideally on every page of the site. Making it as easy as possible for users to place their order should be paramount.

This is what mothercare have at the top of each page:

Guidelines 3

...and in their basket:

Guidelines 4

7. Progress bar should be visible during checkout

This is another one I've seen on a few sites, not showing this will leave customers unsure of how much more information will be needed to complete their order. Showing a customer how they are progressing through the checkout and how much more there is to go reduce your dropout rate.

This is what we do on

Guidelines 5

8. Similar or related products should be shown on the product page

When browsing a product it's useful to link to other similar products or related products. This may increase your average order value or help your customers find the product they're actually after.

9. Products should have clear description and imagery

The products description should explain all the details I'd need to buy that product. I've been to sites where I'm trying to find a computer part and have to go to the manufacturers website to check that the product has the right interface because the site I've found it on doesn't have that information.

For most products having an image is a must, even if you know what you're after an image allows you to check it's definately the right one. If appropriate add videos/zoom or 360 images to help demonstrate that product.

10. You should be able to navigate within a category

Most sites are designed with a clearly defined architecture that make it easy to work your way down through categories to find the product you're after. Once you're there you should be able to switch between products in that category easily, so I can easily browse through products in that category. This will also help if I've landed on that page from a Google listing I can browse around without having to be aware of the category structure someone coming from the homepage will be aware of.

About the author

Steve Temple

Steve Temple

Steve is the Technical Director and super brain behind the development of our major projects. Steve’s enjoyment of technology escalated from his college years where he taught himself coding right through to setting up Gibe with Pete.