What people see before they buy: Design guidelines for e-commerce product pages with eyetracking data

According to IMRG/Capgemini, it is estimated that UK shoppers spent £13.16bn online in the last quarter of 2008. This is 15% more than the last quarter of 2007.

On the other hand, a statistic by Jupiter Research in September 2007 shows that 42% of 1,179 online shoppers surveyed have left a site without buying a number of products because they were unable to find answers to questions about a product in their shopping basket.

Why and what we wanted to do

I carried out a series of eye tracking studies at cxpartners to look into what shoppers need and prefer to see on a product page to help them make a decision on which products to buy. I also aimed to find out what the best design might be for a product page in helping customers: (1) to be more interested in the product they are about to buy; and (2) to easily find other items that they might need.

Elements that have been looked into in this study include: content of the page (product description, delivery), design (page, fonts, colours), features (recommendations, customers’ reviews) and layout (two versus three columns).

What product pages did we compare?

The product pages of six of the top 10 UK online retailers for 2008 were chosen for this research: Amazon, Argos, Tesco Direct, Play.com, Marks & Spencer and John Lewis. All participants were familiar with these websites and had bought an item on at least three of these websites.

How did we do it?

Three websites (homepages) were randomly chosen and presented to each participant. The order of the sites was counterbalanced over the group of participants. They were asked to search for items that they had in mind or were considering buying.

This blog focuses on the findings of product page results. We listened to the participants' comments about shopping online, observed their actions and analysed their eye activities.

What we found:

Guideline 1 - Call to action has to be clear

The main call to action of a product page is to add an item to the shopping basket. Hence, it should be visually apparent and it is preferable for it to look like a button in appearance. Participants commented that it was not clear to them where they should click on the Tesco Direct page to buy an item as it’s 'Add to basket' is not a button that stands out visually. Similar comments were made about John Lewis’s grey button, which is the same colour as other content on the page.

On the other hand, participants thought it was easy to add an item to the basket on M&S pages because it is visually appealing and stood out with it's bright colour button (see figure to the right).

Guideline 2 - Provide helpful product descriptions in bullet points

Participants wanted descriptions that tell them about the product in order to help them in making a decision. Additionally, they expected to see some 'nice' words to encourage buying, not a clinical list of words such as those on Tesco Direct.

Participants also preferred product descriptions to be in bullet points as on the Argos page for quick scanning. Putting the description in paragraphs not only clutters the page, it also requires a lot of effort on the shoppers' part to find details that they want to know: as commented by the participants about Tesco Direct’s page:

'It looks so boring and hard to read.'

Participants preferred all the details to be shown on the page (e.g. as John Lewis & Amazon do) rather than in tabs (e.g. Argos & Tesco Direct), to save having to click to find out.

Guideline 3 - Use good quality product images

Product photos were always the first thing that the participants were looking at when they first arrived at the page regardless of where their position is on the page (see eyetracking data below). Most websites placed the image on the top left of the page apart from Argos which was on the right.

Unlike buying in shops, product pictures are the only way a shopper can determine whether this particular product suits their needs and matches their preferences. It is a powerful way to showcase your products. Therefore it is very important to provide good quality product images with easy graphic manipulation functions for zooming, panning and rotations.

There are a lot of articles that explain how top retailers show their product images such as the one by Get Elastic.

In addition, it is also useful to show your product at different angles, especially giving views that show the most important part of the product. You need to recognise what your customers’ most vital considerations are and what they would like to know most about the product - e.g. for hiking trainers, it would be the soles of the shoes showing how well they grip or not. Also, if possible, show the scale of a product and it’s context of use (e.g. to help shoppers gauge the size of a bag, a photo which shows the bag filled with cans of beer would be useful).

Guideline 4 - Use simple layout

The majority of the participants preferred to see product pictures on the left and description on the right (e.g. M&S). When product details are above the fold, it is very unlikely that the users will scroll down the page.

John Lewis has a reasonably good layout with only necessary information displayed. Participants looked through almost all the content on the page regardless of the type of products they were looking for; clothes, household or digital items:

'I like it. Simple, classy and not cluttered.'

However, all participants missed the 'Your viewed items' section at the bottom of the John Lewis product page. They scrolled down but stopped when they arrived at the end of the content section and scrolled up again (see figure to the right). This was because this section was visually separated from all other content and it therefore looked like the end of the page. In general, vertical layout encourages users to scroll down.

Guideline 5 - No lengthy pages

Customers never, or hardly ever read everything you put on the page especially when there is a lot of content! Even if it has a good layout, a long page does not work well. Users often ignore the bottom bits or skim through without paying attention to all sections. And even if they do scroll down, they do not necessarily read or pay attention to all the content below the page.

'Even if I scroll down, I won't even look at them' [Amazon]

Both Play.com and Amazon have very long product pages (Amazon’s product page is about 8 times longer than Tesco Direct's!). Participants used the term 'trying too hard' to describe the page. As shown in the quote below, participants only saw 2/3 of the page and totally ignored the other 1/3.

'I block them out. Don't know where it starts and where it finishes. Need concentration to read' [Play.com]

'I tend to see only the top of the page because I know they throw out random stuff below the fold especially for such a long page. So I ignore them' [Amazon]

Guideline 6 - Provide only necessary information about the product

Don't overwhelm shoppers. Provide only important information based on the products you are selling.
It is not a good idea to throw everything to the customers and let them choose what they want to know about the product. It's best to know your product (e.g. it’s uniqueness) and know what questions your customers might ask about it.

It is very easy for users to ignore or miss out information which might be important to them when there is too much information on a product page. On Amazon, participants did not look or scroll down to see content below customer reviews. Therefore, they have missed out customer discussions, testimonials and ‘Look for similar items’.

Guideline 7 - Prioritise important content (avoid hide-and-seek)

Unlike shopping in the offline world, there is no salesperson to tell the shoppers what they want to know about the product. They will have to find the answers themselves on a product page which is full of all kinds of information. If they cannot find it or lose patience when looking for that piece of information, they will leave the website in a flash and never come back.

For instance, technical details about a DVD such as year, screen, language, subtitles and region are what buyers are concerned about. However on Play.com, participants commented that a lot of scrolling is needed before they can see this information, which comes after customer reviews and related items (e.g. DVD, gadgets and games). Don't play hide-and-seek with your customers!

Guideline 8 - Avoid placing important information on the left and right hand column if product related content is in one column

When users come to a product page, their main task is to understand a product and look to purchase. They do not like to be distracted and easily block out information that they do not think could help their task. Therefore, all participants completely ignored the right and left columns on Play.com especially when you have all the product information vertically in one column. However, if the product page has a 3 column layout (2 columns for product related information), participants were more likely to pay attention (although not so much) to the left hand column such as on M&S and John Lewis pages (see figure below).

Therefore, if you use a single vertical layout for your main content, try to avoid putting important information that you want your shoppers to see (e.g. cross-selling) on the side column(s).

Guideline 9 - Provide reasonable space and don't overuse colours

M&S has crammed too much information next to its product image on the right - product name, price, product code, ratings and reviews, product description and availability. Furthermore, all the fonts are a similar size and there is not much white space between them. This section therefore looked cluttered and participants tended to ignore it unless they could not find specific information in other sections.

The colours used on the page distracted participants. Tesco Direct uses more than five colours for it’s fonts - red for price and card point, black for content, green for 'add to basket', blue for tab labels and grey for some links (see figure below). This confused the participants and increased visual clutter.

Guideline 10 - Avoid requiring clicking if you want your users to read

Participants did not like to click on a link or button when they were not sure where it linked to. For example, Tesco Direct has a link for alternative products which will open a new window when it is clicked. Participants declined to click on it commenting that they were worried that it might take them away from the product page.

Summary

Give your customers what they want to know (e.g. product image, succinct description, price and delivery) as quickly as possible. Avoid overloading them by offering a simple and clear (not colourful or long) page. Show good quality product photos (it is even better if you can show them in use or in context) because they can tell a lot about a product. Offer your customers a great shopping experience, make them happy and they will come back to you again and again.

If you found this research interesting, we'd be happy to talk more about it with you. Contact us either on +44 (0) 117 946 3930, or via info@cxpartners.co.uk.