Decoding the product page

Editor's note: Mirna Djuric is senior research manager at EyeSee Research, Belgrade, Serbia. Olivier Tilleuil is founder and CEO, EyeSee Research, New York. Mina Miljkovic is former marketing and behavioral science projects manager with EyeSee Research.

With online shopping booming, significant growth opportunities are opening up for retailers and brands. To take advantage of this potential, companies need to invest in a clean and streamlined user experience. But, as our research has found, some Web page elements are more important than others. For example, product pages are one of the key factors that can make or break your online sales.

To uncover the basic elements that drive conversion on these pages, our team conducted an eye-tracking study analyzing the product pages of leading retailers Walmart, Amazon and Target. The research showed that shoppers are more likely to buy the product from Walmart than from the other two retailers after browsing their product pages. Our goal was to discover the elements that correlate with purchase intent and offer recommendations for both retailers and their client companies.

We conducted our study in partnership with the panel company Lightspeed. The recruited 300 online shoppers were asked to browse two product pages of their preferred online grocery shop while the EyeSee team tracked their eye gaze. We chose popular brands within two large categories: Colgate (toothpaste) and Tide (laundry detergent). Afterwards, the online shoppers were asked to choose products they would prefer to buy.

You may think of a product page as an equivalent of picking up a product with one’s hands and mulling over the purchase. Many questions emerge in this thought process but most of these activities take place in the subconscious part of the mind of which we are seldom aware. By changing the features of the product page, we can influence both conscious and subconscious aspects of the decision-making process.

More than half of the shoppers (53 percent) who land on the Walmart product page also end up purchasing the product, while only 47 percent of Amazon- and 46 percent of Target-based shoppers make the purchase after browsing the product page (Figure 1). What drives this advantage? 

Although all three pages have essential elements that help to drive successful online sales, Walmart’s product page has slight advantages: a larger product image; a visible and user-friendly “add to cart” section; visible and user-friendly size and quantity options.

Eye-tracking enabled us to measure the amount of time online shoppers spent gazing the different elements of the product pages (Figure 2). At Walmart, they paid much more attention to the product image: 23 percent of total time spent per page, with much lower rates on Amazon and Target pages (14 percent and 17 percent, respectively).

Given its larger size, design and proximity to the product image, the “add to cart” section yielded a greater number of views as well. On top of that, Walmart’s “add to cart” is considered to be much more relevant and useful for the purchase decision than the same section on other Web sites (30 percent better than Amazon and four times better than Target).

Does not translate

While the time people spend looking at the product image is positively related to purchase intent, this is not the case with the time spent on the page as a whole. Amazon holds shoppers on the page 50 percent longer compared to Walmart and Target but this alone does not translate into purchase intent.

Exploring the product image for a longer period of time shows positive emotional engagement – in this case, consumers presumably like what they see and are interested in learning more. However, spending too much time on the product page might also indicate confusion. It is possible that the consumers could not find what they were looking for or that the page was not entirely user-friendly. Shoppers might find this frustrating and give up on further browsing of that particular site.

Product picture is the most attention-grabbing element of the product page (Figure 3). It is the first-to-be-seen and the-longest-looked-at element, taking in around 20 percent of the total time dedicated to the product page. This section is one of two areas considered the most useful and relevant for the purchase decision.

A shopper can obtain a lot of information about the product just by looking at the image; he/she does not need to read the description to make a purchase decision. Also, since people base their purchase decisions on the package design while shopping in the store, it makes sense that they’re influenced by the product image in an online environment. Plus, images attract more attention in general and communicate more efficiently than words. 

Most important areas

Optimization of the product page should be focused on the most important areas of the page. According to our data, these are (1) the product image and (2) the “add to cart” section, followed by product name and suggested products. People devote most of their attention to these areas and consider them useful and relevant for their purchase decision. 

Size matters. To make the most of the online “moment of truth,” product image should be optimally-sized, at a high resolution and well-positioned. Multiple-angle product images are an added bonus. On average, respondents spend more time looking at larger product images, as they attract more attention, which is positively correlated with the purchase intent. On the tested pages, the product image area with Walmart is twice as big as the same area with Amazon and 1.5 times bigger than with Target. 

Another example of a best practice demonstrated by Amazon is boosting the product image area with hero shots (visually presented product benefits). This detail has turned out to be very useful and relevant for the purchase decision.

Tweaking the “add to cart” section. It’s vital for this section to be clear and user-friendly. Walmart’s design takes the prize, being large, with sizeable buttons and print, and positioned close to the product image. The information offered is clear, with important details highlighted (price, discount, shipping, etc.) and excessive ones omitted. This design attracted the most attention compared to other sites, as all these factors contribute to better visibility. On average, 92 percent of respondents noticed this section on the Walmart page, 86 percent on the Amazon page and 34 percent on the Target product page.

Amazon’s “add to cart” is overloaded with small print and is potentially missing the most relevant information – therefore, visitors don’t consider this section useful and relevant for their purchase decision (on average four times less frequently than on other sites). Target, on the other hand, also has a poor “add to cart” section but consumers still evaluated it much better than Amazon’s crowded checkout area. 

Complementary vs. alternative products. While Target and Walmart offer alternative products (i.e., variants of the SKUs within the category), Amazon uses the “complementary products” strategy that shows other categories of products that are frequently bought together. Both strategies are legitimate but they support different goals: While the “alternative products” strategy helps shoppers decide on the exact product they want, with the aim of reducing dropoffs or selling more expensive products (upselling), the “complete-the-basket” strategy can drive direct sales (cross-selling). 

When it comes to boosting e-commerce revenue, it is expected for complementary products (cross-selling) to be the most effective at the checkout page. Our study shows some advantages of the cross-sell strategy at the product page as well. The complementary products section holds 30 percent more attention than the alternative products section, which could also signify higher purchase consideration. As expected, visitors spend more time looking at new items rather than contemplating on, or second-guessing whether, their purchase was the right one.

What to offer. When choosing between these two strategies, companies should primarily consider customer experience; that is, offer what is appropriate in each stage of the decision-making process. Dependent on the category, these strategies can be equally useful and relevant for the purchase decision. Alternative products were perceived as more useful once they provided an opportunity for price comparison between single and multi-packs (toothpaste) while in the detergent category complementary products performed better. This section should be positioned closely below the product image (above the fold) rather than below the description and other information. This way it has sufficient visibility to potentially affect purchase decisions. 

Focus on key elements

When optimizing the design of product pages, retailers should focus on key elements (i.e., product image, the “add to cart” section, etc.) and their size and positioning. These are directly correlated to consumers’ attention spans and the time they spend on the page, which can either positively or negatively impact the level of sales. Leading shoppers through the browsing and shopping processes and providing a seamless user experience is vital for achieving consumer satisfaction and increasing conversion rates.