After you have defined your product categories and how to structure them (see Usability and e-commerce Part 1) you are ready to define the product pages. Let’s start with the product overview page:

1. It is recommended, that the product overview pages follow all a consistent structure. This gives the user the chance to learn your site and with continuing navigation he can orient himself faster.
2. The amount of products presented should allow the user to gain a quick overview.
3. The most relevant questions the user has at this stage should be answered. This allows faster scanning of the products and saves the user possible disappointment on the individual product page itself. This includes the listing of the price and availability.
4. Especially with rather technical or complex products, an online product comparison option is essential to avoid lots of work for the call centre.
5. In addition, sorting functionalities support the user to “customise” the results to his personal needs, such as price, distance, weight, colour etc.

Let’s have a look at two examples buying a Sony Laptop and a new Esprit Jacket:

On the Sony Laptop overview page, the user receives all the essential data he needs.
They even consider the two target groups returning and new customer. The returning one can add the product directly to the shopping cart the new one can add the product to a wish list.
There is the option for product comparison and a sort option.

And the product comparison site: The user can delete rows or columns, start over, get the product advisor and create a PDF for print out and later use.

On the Esprit page as well, the product overview page answers the main questions such as: material, prize, availability, colour selection and new arrivals.

Check out the entire series:

Part 2) Product overview

Part 3) Product presentation

Part 4) Search

Part 5) Check out process

Part 6) The shopping basket

On March 31^st the BBC launched its new Web site and since then they have received over 1600 comments in their blog. Many users are complaining about the relaunch.

Looking at their new homepage, I noticed three main points regarding usability and branding:

#1 Fast access to information on homepage

The main purpose of visiting a news Web site is usually to quickly learn about what is going on in the world or in the personal field of interest – for example sports. This means users want to be able to quickly scan the site and then pick an article.

It is exactly this which is impossible on the new BBC home page. Counting the visible news (at a 1024 resolution) entries on the home pages of major news sites today:

• BBC: 9 articles (not counting weather)
• CNN: 19 headlines
• NY Times: 18 headlines
• Yahoo: 14 headlines

Most other news sites make it much easier to get a quick overview.

When the user personalizes the homepage he can get up to about 12 visible entries without scrolling. However, studies have shown that usually only a small percentage of users make use of personalising a site. And why can the user not move the big picture on top; the one that is actually taking up most of the space?

Studies have shown that a minimum font size of 12 px and a bigger line spacing leads to the best results in reading efficiency and information transfer. So this is solved nicely on the new homepage. However, especially on the homepage there is too much unused space. For example the weather and blog quote are huge compared to the information they transfer.

#2 Accessing other topics via the homepage

In addition, the user has no chance to quickly access the topics provided by BBC. The user has to scroll to the end of the home page to find these:

These links are provided as a general navigation on almost every other news Web site. They allow easy and convenient access to the user’s field of interest. BBC offers those links also on all its subpages. Why not on the homepage?

For example Yahoo has solved those points on their homepage in a good manner: The navigation to the left with easy access to the main topics and lots of information in the content area.

#3 Visual consistency and branding

While the homepage looks like a clear attempt in trendy design with rounded corners, fading colours and light effects all the subpages have a totally different look and feel. They are flat 2 dimensional design, squared corners, no shading. What does BBC stand for?

The real shop

Imagine you are in a convenience store such as Sainbury’s and you are looking for batteries. Where do you start to look for them? Kitchen supplies, the area where the stationary is, where could they be? Where the garbage bags are? You might walk around for a while and then ask a sales person for assistance.

Now online

Image the same scenario online. You click here, you click there. However, there is no sales person that can help and the competitor’s site is just one click away. That is why especially for e-commerce sites good usability is so crucial.

The above study shows, that a bad online shopping experience does not only mean that you have lost this one sale. The customer is also rather likely not to buy from you at all.

You suffer from:

1. Lost sales,
2. a weakend reputation and
   
3. it harms the perception of your overall brand.

Some common issues on e-commerce sites are:

Navigation and start page

You need to consider that you have to types of people visiting your online shop:

1. The ones who already exactly know what they want. They need to be guided directly to the product they are looking for. Structuring and clustering of the shop items in a clearly visible navigation bar is essential for them.
2. The others are the users who just want to browse your site or inform themselves. They might be looking for the special offer, new products or seasional trends. Visual teasers and images usually guide those the best.

Give the visitors also a chance to concentrate on your main items. Cluttered sites are likely to overwhelm the user. In an online shop users prefer structure and visual guidance and do not want to feel like being on a flea market.

Creating the right structure

1. Competitors’ analysis: Do you know what they are doing?
   Your users are very likely to also use other e-commerce sites. Over the last years, patterns of structuring, organising and labelling content have evolved. Your users have learned those patterns. Therefore we recommend not to re-event the wheel and to stick to conventions. The best way to find those patterns and conventions is a competitors’ analysis. In addition, a regular competitors’ analysis gives insight in new trends and strategies. You can only become the benchmark by knowing what your are up against.A competitors’ analysis can be done at any stage of the project. We recommend to perform it in regular intervals. Depending on the market every 1-3 months to at least once a year.
2. Card sorting: How would your clients structure the content?
   One basic method is card sorting. Card sorting is used to develop the structure of Web sites. How does it work?
   Product categories or product names are written down on individual cards. Then (potential) users of the site are asked to structure the cards into groups or to sort them into predefined metacategories.
   • Structure: This gives valuable insight into how your customers would structure the content and therefore where they would be looking for the information when navigating through your site. This aids to define the ideal placement of individual products and how to create useful product categories. Recall the example with the matches from the beginning? Where would customers look for them the most likely?
   • Wording: Though it is not always the wrong structure that misleads customers. Equally important is to find the right wording for the individual categories and navigation items.

In the next entries the following topics will be covered:

Part 2) Product overview

Part 3) Product presentation

Part 4) Search

Part 5) Check out process

Part 6) The shopping basket