- Our latest e-commerce UX benchmark of product page performance reveals that 55% of sites have a poor-to-mediocre product page UX
- As a result, participants during testing often abandoned suitable products — solely due to resolvable UX issues
- In this article we’ll detail 15 best practices for improving your product page UX
The product page is the centerpiece of users’ product-purchasing decisions, as nearly all users go through product pages before deciding whether or not they’ll purchase an item.
It’s therefore crucial that product pages perform well for the end user.
However, our latest e-commerce UX Product Page benchmark reveals that only 15% of the 71 top-grossing US and European e-commerce sites have a “good” product page UX performance — and no sites have a “perfect” performance.
Clearly, there’s much room for improvement in e-commerce product page UX.
Our e-commerce UX Product Page benchmark contains 8,000+ product page usability scores that have been manually reviewed and scored by Baymard’s team of UX researchers.
Additionally, 5,000+ best- and worst-practice examples from the top-grossing e-commerce sites in the US and Europe (performance verified) have been added.
In this article we’ll analyze this dataset to provide you with the current state of e-commerce product page UX by describing the results from our Premium research findings.
In particular, we’ll outline 15 best practices applicable to most e-commerce sites.
The Current State of Product Page UX
For this analysis we’ve summarized the 8,000+ usability scores across 8 core topics that collectively constitute users’ product page experience.
Additionally, we’ve plotted the 71 benchmarked sites’ UX performances across these in the scatterplot above.
Each dot therefore represents the summarized UX score of one site, across the 9–16 guidelines within that respective topic.
Only 15% of the 71 top-grossing US and European e-commerce sites have a “good” product page UX performance
The high-level benchmark results show that 44% of e-commerce sites have an overall “decent” or “good” UX performance for their product pages (improved from 39% in 2019 and 22% in 2017).
On the other hand, there’s a group of 55% with “mediocre” to “poor” product page implementations.
On the extreme ends of performance, 4% of sites currently have an overall “broken” product page UX performance that fails to align with commonly observed user behavior in our large-scale PDP testing.
This is an unfortunate shift downward from 2019, which had no sites with “broken” product page performances.
At the other end of the scale, there are no sites with an overall “perfect” product page implementation either.
This is another downward shift, as our 2019 benchmarking showed 5% of sites in this upper bracket.
Below, we’ll discuss the results of our benchmarking in greater detail by describing 15 best practices for 5 of the 8 topics of Product Page UX.
These best practices were developed from our large-scale user testing (available as our Premium research findings) of product pages on desktop and mobile sites, as well as apps.
In practice, product images often act as users’ primary method for evaluating a product.
Indeed, without the ability to physically inspect the product or hold the item in their hands (as you generally would expect to be able to do if evaluating a product in person), product images often represent the best way for users to gain a rich visual understanding of the product.
Ultimately, an inconsistency around the quantity and types of product images provided to users results in unpredictable user experiences with significant friction.
In particular, sites struggle with providing “In Scale” images, “Human Model” images, and “Included Accessories” images.
For inspiration on “good” and “perfect” Product Image implementations, see our benchmark reviews of Best Buy and Wayfair.
1) Provide “In Scale” Images (49% Don’t)
Our testing shows that 42% of users try to grasp the size of a product though the product page images, but without an “In Scale” image this becomes needlessly difficult.
Determining the size of a product is crucial to the online shopping experience, as users can’t physically evaluate the size of a product (as they can in a brick and mortar store).
Therefore, it’s important to always provide “In Scale” product images.
An “In Scale” image can be created by simply placing a human or computer-generated model, or an object of known size, next to the product as a reference point.
2) Provide a “Human Model” Image (81% Don’t)
“In Scale” images are vital for helping users determine the overall size and scale of products they are viewing online.
However, for certain products, simply displaying the product in context or in comparison to items of a known size is not enough for users to get a sense of their physical qualities.
Specifically, products designed to be worn — apparel; accessories such as bags, jewelry, or watches; and cosmetics — require the context of a human model in order to get the truest sense of the product.
“Human Model” images can furnish a more comprehensive picture of the product and help users understand its visual qualities, which help them decide if the product is suitable for them.
3) Provide an “Included Accessories” Image (20% Don’t)
Any ambiguity about what is included in the purchase price of a product was observed during testing to dramatically impact participants’ purchasing decisions.
Moreover, most participants during our large-scale Product Page usability testing attempted to infer product features from the product images provided in the main image gallery.
Therefore, it should be made to clear to users what’s included with the purchase of a product by showing the product alongside included accessories in a single image (an “Included Accessories” image).
Additionally, sites should consider highlighting optional accessories — accessories not included in the purchase price of a product — in an image alongside the product as well.
However, it should be made clear to users that these aren’t included in the purchase price with, for example, descriptive microcopy stating that fact.
The “Buy” Section
The “Buy” section, which includes the features, elements, and information near the “Add to Cart” button, is one of the lowest-performing areas on the product page.
Yet this section is key for users, as it often is considered most intently when users are deciding whether or not to add a product to the cart.
In particular, sites struggle with allowing users to purchase “Out of Stock” products, requiring an account to use “Save” or “Wishlist” features, and failing to provide unit prices for relevant products.
For inspiration on “good” and “perfect” “Buy” section implementations, see our benchmark reviews of Crate & Barrel and B&H Photo.
4) Allow Users to Purchase “Out of Stock” Products by Increasing the Delivery Time (87% Don’t)
If users are prevented from purchasing an item that’s temporarily out of stock, it almost guarantees they will abandon the site to look for the product elsewhere.
Indeed, presenting users with text that simply states a product is “out of stock” is a UX dead end: users can’t go any further on a site if they are truly set on purchasing that particular product.
Therefore, if a product is only temporarily out of stock, for the best “out of stock UX” users should be allowed to complete the purchase and simply have a longer delivery time.
5) Make It Easy to Access and Use “Save” Features (96% Don’t)
A minority of users want to use “Save” or “List” features to save products they find interesting. (A larger subgroup uses the cart as a temporary storage tool.)
Additionally, many users are loath to part with personal information (evidenced in their hesitation when it comes to the phone number field).
It’s therefore important that sites allow any “Save”, “Favorite”, or “Wishlist” to be used by guest users.
It is understandable why sites want to have users sign up for accounts: they will have the ability to reach out more often to users to offer them promotions and sales, users may be inclined to shop more frequently at a site at which they’ve already registered, and having an account can allow for more robust list management and features.
However, such legitimate interests come at the expense of scaring away a significant amount of new users, and potentially forfeiting a significant amount of sales, here and now.
6) Display “Price Per Unit” for Products Sold in Varying Quantities or Amounts (80% Don’t)
Not providing a “price per unit” on the product page, which we also found to be an issue in our Product Lists & Filtering and Mobile E-Commerce studies, makes it difficult to compare products of varying amounts or quantities (e.g., a 3.5 oz. bottle of hand lotion for $4.95 and a 1.2 oz. bottle of hand lotion for $2.35).
Indeed, without a price per unit, not only is it more difficult for users to judge prices, but it is also detrimental to sites’ ability to sell users bulk orders, which increase the average order value.
These issues often occur at a critical time in the purchase-decision process, when users are just deciding whether to add a product to the cart — disruptions here will cause unnecessary abandonments for some users.
Therefore, to avoid users cutting their comparison process short, product pages should calculate and display price per unit for any product available in multiple quantities or sizes.
Shipping, Returns, & Gifting
We’ve previously documented in our Checkout Study that 18% of users have abandoned orders because they couldn’t see order costs up front.
In this latest study of product pages, we found users are looking for shipping costs not only at the shopping cart or shipping methods selection step in the checkout, but that 64% of users are searching for shipping costs as early as the product page.
In particular, sites struggle with providing total order estimates and making return and “free shipping” info sufficiently prominent.
For inspiration on “perfect” Shipping, Returns, and Gifting implementations, see our benchmark reviews of Nordstrom, Home Depot, Overstock, Walmart, and Hayneedle.
7) Provide a “Total Order Cost” Estimate Near the “Buy” Section (56% Don’t)
When users make purchases online, there can be a number of “hidden costs” that can quickly add up — for example, taxes, shipping costs, oversize item fees — and these costs can vary significantly from site to site.
If the total order cost is missing from the product page, users will have to take the extra step of adding the product to their cart to see this information (assuming it is provided at the “Add to Cart” step).
This quickly becomes tedious, especially as users compare products across sites and must take the extra steps of adding a product to the cart just to get an idea of how much their total purchase will cost them in the end.
Instead, the lowest full order cost should be displayed on the product page by default; in particular, by showing the lowest shipping cost (or at the least an estimate and its conditions).
Additionally, if selling items where shipping and tax costs may be significant, consider making the section expandable and including a shipping and tax calculator to allow users to more accurately determine the total order cost.
8) Display or Link to the Return Policy from the Main Product Page Content (45% Don’t)
When shopping for products online, users understand that even seemingly perfect products may not work in reality.
Indeed, a strict return policy can even be a reason for site abandonment, as our quantitative study of 4,384 online shoppers in the US revealed: 12% of e-commerce customers have abandoned orders in the last quarter because they found the return policy unsatisfactory (see our cart abandonment rate page).
Consequently, lacking access to the return policy early on in users’ product search — especially for products such as apparel items, which can have dramatically different sizes depending on where you shop — is a source of anxiety for many users.
Therefore, a link to the return policy, or a brief summary of the general return policy, should be prominently displayed on the product page (as well as in the footer), and the return policy text must be written to be understandable by the average user.
9) Place “Free Shipping” Information In or Near the “Buy” Section (23% Don’t)
During testing, the now decade-old “banner blindness” issue was once again observed, as some users overlooked “free shipping” information located in sitewide banners either in the page header or at the top of the product page.
As most users will associate any banners with ads, they will consequently ignore the “free shipping” banner, as it occurred for up to up to 27% of the participants during testing.
As a result, some users will conduct extended searches for this information on the product page, while a subset will wrongly conclude that “free shipping” isn’t available at all at a particular site.
Instead, “free shipping” information should be placed near the “Buy” section, where it’s much easier for most users to locate.
This may also help reduce users abandoning their orders due to extra costs being too high, which is the case for 48% of users, as indicated in our cart abandonment rate data.
Users relying on the spec sheet are typically observed to be those with a good level of domain knowledge.
Indeed, many are seeking answers to very specific questions.
However, in testing, issues with spec sheets caused misinterpretations about the product specifications that were sometimes so severe that participants (wrongfully) discarded perfectly matching products.
In particular, sites struggle with making spec sheets scannable and consistent, and fail to provide sufficient supplementary information for spec sheet attributes.
For inspiration on “perfect” Spec Sheet implementations, see our benchmark reviews of Build.com, Newegg, and Hayneedle.
10) Provide Highly Scannable Spec Sheets (62% Don’t)
During testing, even relatively short spec sheets became unscannable when they were presented as a “wall of specs.”
Indeed, users are at risk of mistakenly overlooking important specifications hidden among the abundance of other figures and measurements, which can lead to unanswered questions — and eventual product or site abandonment.
Therefore, it’s key to make spec sheets scannable.
Spec sheets of just medium length (for example, anything above 20 specs) will need to be grouped into subsections of related information, each with a title, to be easier for users to scan and read.
Additionally, use background colors, icons, and lines to improve scannability, and only use multicolumn formats for spec sheets very cautiously, as both this and our prior testing reveal that a two-column layout makes it exponentially harder for users to locate and interpret information, when compared to a one-column design.
11) Harmonize Vendor-Supplied Specs to Ensure Consistency and Uniformity (43% Don’t)
During testing, many sites struggled with consistency across the spec sheets for products of the same product type.
For example, different brands of refrigerators that have different specifications listed or use different units for the specs (e.g., “inches” vs. “centimeters”).
This often occurs when sites with multiple vendors have vendor-supplied spec sheets and don’t post-process the data to ensure consistency.
Consequently, users have a difficult time comparing products.
Therefore, specs for products of the same product type should be presented consistently to users to facilitate comparisons — in practice this means post-processing all vendor-supplied specs so they are more uniform.
12) Explain or Define Most Specification Labels in the Spec Sheet (69% Don’t)
During testing, many sites used spec terminology that required domain-specific knowledge, which a general user would likely lack (e.g., “amps”).
Consequently, users are in practice observed to be unable to decipher a spec’s meaning.
As a result, users end up guessing at the meaning, or have to go off-site to look up the terms.
To alleviate this issue, use explanatory tooltips for all specifications that relate to dimensions, specifications that use industry terminology, or where the implications of the listed specifications aren’t completely self-explanatory.
After product images, user reviews proved in our testing to be the most important product page content for users.
It’s therefore problematic that many sites struggle with implementing user reviews on the PDP — with no sites in our benchmark having a “perfect” implementation.
In particular, sites fail by requiring too much information from users to submit reviews, fail to respond to negative reviews, and don’t provide a ratings distribution chart at the top of the reviews section.
For inspiration on “good” User Review implementations, see our benchmark reviews of Home Depot, Sports Direct, and Vitamin World.
13) Request Only Highly Relevant Personal Reviewer Info in Review Submission Forms (90% Don’t)
Requiring too much information from users to submit a review will result in users submitting fewer reviews.
This is a serious issue, as our testing reveals that most sites suffer from a dearth of review content.
This is truly a missed opportunity for sites, as product reviews are unique sales content that is being provided by users for free.
Therefore, sites should do everything possible to make it easy for users to quickly submit a review.
In particular, by designing the review form so that users are only asked to provide answers to highly relevant questions that are tailored to the product type.
14) Respond to Negative User Reviews (89% Don’t)
Not responding to negative reviews leaves users doubtful about the quality of both the specific product they’re viewing and, for single-brand sites, the customer service they’ll receive if they purchase any product on the site.
Negative reviews, if not responded to, can have severely deleterious effects, since reviews may negatively describe not just an experience with a particular product but also external circumstances surrounding the purchase (e.g., shipping or an in-store experience).
Therefore, it’s important to respond to negative reviews.
Even if a response to a negative review does not change the dissatisfied customer into a satisfied one, we consistently observed in testing that it does have the positive effect of showing new users that the company does “care” and has proactive, easily reachable customer support.
An important implementation detail, when responding to negative reviews, is to style the staff responses differently from the reviews, to make them easily discernible for users.
15) Provide a Ratings Distribution Chart at the Top of the Review Section (19% Don’t)
When sites don’t provide a ratings distribution summary at the start of the review section, users are deprived of the possibility of performing a quantitative interpretation of the reviews.
Indeed, without a ratings distribution summary at the top of the review section, users are prone to let the first handful or page of reviews determine if they perceive the product as being overall well or poorly rated.
On the other hand, when offered, a ratings distribution summary was the most utilized feature of the “Reviews” section during testing — as in, more utilized than the reviews themselves — with 90% of test participants using the rating distribution summary to analyze the suitability of products to meet their needs.
In addition, because users are likely to actively seek out negative reviews — around half of participants were observed to either filter or sort to see the lowest reviews — a ratings distribution chart provides necessary perspective to the overall ratings of the product.
Product Page UX: Follow These 15 Best Practices
This high-level analysis of the current state of Product Page UX focuses on only 5 of the 8 product page topics included in our e-commerce UX benchmark analysis.
The 3 other topics should be reviewed as well to gain a comprehensive understanding of the current state of Product Page UX, and to identify additional site-specific issues not covered here.
Although our benchmark has revealed that only 4% of sites have a completely broken product page UX, it’s clear that there’s much room for improvement, as 55% of sites have “mediocre” to “poor” product page implementations.
Avoiding the 15 pitfalls described above is the first step toward improving users’ product page experience:
- Provide “In Scale” images (49% don’t)
- Provide a “Human Model” image (81% don’t)
- Provide an “Included Accessories” image (20% don’t)
- Allow users to purchase “out of stock” products by increasing the delivery time (87% don’t)
- Make it easy to access and use “save” features (96% don’t)
- Display “price per unit” for products sold in varying quantities or amounts (80% don’t)
- Provide a “total order cost” estimate near the “Buy” section (56% don’t)
- Display or link to the return policy from the main product page content (45% don’t)
- Place “free shipping” information in or near the “Buy” section (23% don’t)
- Provide highly scannable spec sheets (62% don’t)
- Harmonize vendor-supplied specs to ensure consistency and uniformity (43% don’t)
- Explain or define most specification labels in the spec sheet (69% don’t)
- Request only highly relevant personal reviewer info in review submission forms (90% don’t)
- Respond to negative user reviews (89% don’t)
- Provide a ratings distribution chart at the top of the review section (19% don’t)
For inspiration on the benchmarked sites’ implementations and to see how they perform UX-wise, head to the publicly available part of the Product Page Benchmark.
Here you can browse the product page implementations of all 71 benchmarked sites, and get inspiration on improving your site’s product page UX.
Ultimately, a high-performing product page will help ensure users’ have the information and features they need to make a purchase decision, and begin the checkout process.
This article presents just parts of the benchmark analysis of our Product Page study — get full access to get it all, and the 98 Product Page UX guidelines identified in our large-scale testing.