E-commerce usability

Product category pages

If your users cannot find a product, then they cannot buy it! This section guides you through all the stages of successful online selling.

Home page
The home page is essentially one of your category pages. It is best practice to:

show clear links directly to your products for sale (usually, you will be linking to the product categories)
make it clear that people can buy online on your site
provide clear links to important information, such as purchasing options, privacy or data protection policy, delivery information and company information

Category pages
Most sales will fail because people cannot find the product they want to buy. It is best practice to:

take time to make categories meaningful to your customers (try card sorting, survey your customers and look at your competitors)
consider using multiple classification schemes (for example, allow users to find products by brand and type)
avoid showing too many products on one page
avoid spreading your products over more than one page (if you have to do this, make it as easy as possible for users to navigate the pages, with categories of A-C, D-F and so on, or £0-£10, £11-£20 and so on)
allow customers to sort the products (for example, by price, brand, size or a combination of features)
make any thumbnail images on category pages clear enough to show off the most important features of the products

Comparison
You should provide a way of helping users to compare products at the category stage. At the very least, you should include prices, but users should also be able to compare key features of similar products. Using your research findings, you should include comparison criteria that your users actually want to see.

On sites with few products or few comparison criteria, it may be enough to include a brief description of each product on the category page. On larger sites, or where the products have many different features, you should allow users to select the products to compare and provide a table that allows them to compare the main features.

Try to include data for every comparison criteria so that users are not left guessing. If a particular feature does not apply to a product, tell your users. Your comparison data should also be directly comparable (for example, use the same units of measurement).

Product detail pages

Providing information

Provide the information that your users want and need to know.
Write the information in clear, jargon-free language.
Layer the information, without giving too many details all at once (instead, link the information to technical or extended details)
Explain everything, especially anything that does not appear in photographs.

Images
You should include photographs and images with every product. The images need to be large enough and clear enough to show all of the relevant details of the product. They should clearly show the actual items for sale, with nothing to distract the user and confuse them about what they are buying.

In some cases you will need to show a number of images or allow users to enlarge the image to see more detail.

Prices
It is vital to show the pricing and options for your products effectively. It is best practice to:

show prices on the category page as well as on the product detail page
show prices that are fully inclusive, including all taxes and, where possible, delivery charges, and give details of what the price includes
specify the currency if you are selling internationally and try to show prices in the user’s local currency or link to a currency converter (XE.com shopper’s currency converter provides a free link)
link to any guarantees and policies (for example, your returns policy)
show the expected delivery times and product availability

Product options
It is essential to display product options effectively, so that your users can be confident that they are selecting the right product. It is best practice to:

show all the options on one page
use conventional names for colours
show an image of each option, with colours as true as possible
enable customers to select options before they add the product to their shopping cart

Adding to the shopping cart
Once a user has decided to buy a product, the process must be made easy for them.

Try not to use ‘clever’ names for the ‘add to cart’ button. Tests have shown that the most effectively labelled buttons include ‘add to shopping cart’, ‘add to basket’ and ‘buy’.
The ‘add to cart’ button should be a simple button.
Allow users to buy the product from enlarged views or extended information pages.
Let people know when they have added an item to their cart – usually by re-directing them to the shopping cart page.

Shopping carts

Once the user has reached the shopping cart, you are nearly there. It is vital that this system is as easy as possible to use, to avoid losing any sales.

Show instructions on the empty cart page (users need to know why their cart is empty and how to go about adding items to it).
Show all the items along with any options that have been selected and the total prices, including tax and delivery charges.
Provide links to any guarantees, terms and policies.
Provide a ‘return to shopping’ link. A user should be able to return to the main product menu or category.
Help users to update quantities or remove items easily from their cart. The updates should be saved automatically if possible. Include a ‘remove item’ link or button next to each item in the cart.

The checkout process

The user has found the product on your site, added it to their shopping cart, and now they actually want to pay for it. Take care not to lose them at this crucial stage. Make the checkout process as easy as possible for them.

The checkout steps
Your checkout is likely to be divided into steps, starting with the shopping cart and ending with the order summary page. The usual steps are:

Terms and conditions (required by EU law)
Gift options and wrapping
Select delivery method
Enter delivery information
Enter billing information (often the same as delivery information)
Enter credit card information

You should indicate the checkout steps, usually by using a graphic representation of the process at the top of each checkout page.

The ‘buy’ button should be prominent and clearly separated from the ‘cancel’ button.

Registration and login
A login feature that allows past customers to retrieve their details may seem helpful. However, research has shown that it often leads to a failed checkout. New users are often concerned enough about giving their details without being asked to register before continuing with their purchase.

Avoid any kind of login screen as part of the checkout process.

Checkout forms
The main purpose of the checkout is to collect the information needed to process the order. Many people are concerned about giving their personal information and many sales are lost at this stage.

Ask only for the information required to process the order.
Tell people what you are going to do with their data before the submit button (this is required by law).
Make a clear distinction between the delivery address and the billing address. In the UK, research has shown that users tend to understand the word ‘delivery’ better than ‘shipping’.

Order summary
By law, you must provide a printable order summary page. This should contain all the order details, including the customer’s details, items ordered and total prices. If appropriate, the summary should show card details in a masked format (for example, xxxx-xxxx-xxxx-1234). This summary should have a unique order number.

At the same time, the summary should also be sent by email to the customer. It should include any legally required information, such as details of the customer’s cancellation period. It should also have details of any returns policy. You should include your email address and telephone number, in case your customer has made a mistake with the order and needs to contact you straight away.

References

E-Commerce User Experience – Nielsen Norman Group (available from nngroup.com).

Next - User testing