- Our latest e-commerce UX benchmark of Product Page performance reveals that 44% 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, Baymard’s latest e-commerce UX Product Page benchmark reveals that only 48% of the top-grossing US and European e-commerce sites have a “decent” or “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 13,000+ product page usability scores that have been manually reviewed and scored by Baymard’s team of UX researchers.
Additionally, our database now contains 11,000+ best and worst practice examples from the top-grossing e-commerce sites in the US and Europe (performance verified).
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 2023’s 13,000+ usability scores across the 11 Product Page topics in this theme that collectively constitutes users’ product page experience.
Additionally, we’ve plotted the 133 benchmarked sites’ product page UX performance in the scatterplot above.
Each dot above, therefore, represents the summarized weighted UX performance of one site, across the 4–18 guidelines within that respective topic.
Only 48% of the top-grossing US and European e-commerce sites have a “decent” or “good” product page UX performance
The high-level benchmark results show that 48% of e-commerce sites have an overall “decent” or “good” UX performance for their product pages (improved from 44% in 2021 and 39% in 2019).
On the other hand, 44% of sites have “mediocre” or worse product page implementations.
On the extreme ends of performance, only a couple of sites had a very “poor” product page UX performance that failed to align with commonly observed user behavior in our large-scale PDP testing.
This is a fortunate shift upward from 2021, which previously had 4% of sites with below “poor” performances.
At the other end of the scale, there aren’t any sites with an overall “Perfect” or “State of the Art” product page implementation (unchanged since 2021).
While there has been positive performance growth within this theme, there remain large fluctuations and wide performance ranges in both the individual site’s and the average site’s performance.
Below, we’ll discuss the results of our benchmarking in greater detail by describing 15 best practices for 5 of the 11 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.
1) Provide “In Scale” Images (45% Don’t)
Our testing shows that 42% of users try to ascertain the size of a product from 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 (like 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 them 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 informs users about its visual qualities, helping them decide whether the product is suitable for them.
3) Include Descriptive Text or Graphics for Some Product Images (52% Don’t)
There are limitations to what can be conveyed visually through product images — the biggest one being the challenge in highlighting product details that aren’t obvious from images alone.
This is especially true when product details consist of nonvisual or abstract information — such as weather resistance, weight, or scent — which, during testing, participants tried to obtain visually from product images.
Therefore, for some images, include descriptive text or graphics in order to communicate key product features that some users would otherwise miss.
Additionally, creatively combining product images with descriptive text and graphics can save sites from having to shoot multiple images of product features, cutting down on the overall expense of creating the product page images.
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 scrutinized intensively 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 providing unit prices for relevant products.
4) Avoid These 4 Pitfalls When Displaying Price Discounts on the Product Page (18%+ Have One or More)
During testing, participants reacted very strongly when the price wasn’t highly visible, to the extent that they began to view the entire site negatively.
Indeed, the lack of a clear price can lead to distrust in the site, bolstering the user’s perception that the site is hiding vital information on purpose.
Therefore, to optimize findability and clarity, sites should avoid these 4 common pricing pitfalls:
1) Pricing and discounts blending in with other PDP elements
2) Locating discounts far away from the product price
3) Displaying promotions multiple times on the PDP
4) Failing to highlight percent or amount off
Clarity around pricing and discounts gives users confidence that a product will fit their preferences and help them decide to move forward with the purchase, ultimately giving users satisfaction while bolstering the site’s e-commerce conversion rate.
5) Make It Easy to Access and Use “Save” Features (97% Don’t)
A minority of users want to use “Save” or “List” features to save products they find interesting while a larger subgroup uses the cart as a temporary storage tool.
Additionally, many users are loath to part with personal information (as 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 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 an important number of sales, here and now.
6) Display “Price Per Unit” for Products Sold in Varying Quantities or Amounts (88% 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 vs. 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 hinders 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 that 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.
7) Provide a “Total Order Cost” Estimate near the “Buy” Section (55% 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 (53% 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 2,219 online shoppers in the US revealed: 16% 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 (24% Don’t)
During testing, the now decade-old “banner blindness” issue was once again observed, as some users overlooked “free shipping” information located in 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 demonstrated by 27% of the participants who overlooked them 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 occurs in 50% of cases — as reflected 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.
10) Provide Highly Scannable Spec Sheets (72% 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 medium length (for example, anything above 20 specs) will need to be grouped into subsections of related information, each with a title, so that they are easier for users to scan and read.
Additionally, use background colors, icons, and lines to improve scannability, and use multicolumn formats for spec sheets very cautiously, as both current as well as our prior testing reveal that a 2-column layout makes it exponentially harder for users to locate and interpret information, as compared to a 1-column design.
11) Harmonize Vendor-Supplied Specs to Ensure Consistency and Uniformity (58% 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 had different specifications listed or used 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 in order to facilitate comparisons — in practice this means post-processing all vendor-supplied specs to be 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 will 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, all specifications that use industry terminology, and where the implications of the listed specifications aren’t completely self-explanatory.
After product images, testing showed that user reviews are the most important product page content for users.
It’s therefore problematic that many sites struggle with implementing user reviews on the PDP — with 50% of sites in our benchmark having a “mediocre to poor” performance.
In particular, sites fall short by requiring too much information from users to submit reviews, failing to respond to negative reviews, and by omitting to provide a ratings distribution chart at the top of the reviews section.
13) Request Only Highly Relevant Personal Reviewer Info in Review Submission Forms (94% 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 (67% 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 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 though a response to a negative review may not change a dissatisfied customer into a satisfied one, testing demonstrated that doing so was positively perceived by participants to reflect customer care and 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 (69% 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 judge the product based on only the first few reviews.
On the other hand, when offered, a ratings distribution summary was the most used feature of the “Reviews” section during testing — in fact, more consulted 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 rated 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 11 Product Page topics included in our e-commerce UX benchmark analysis.
The 6 other topics should equally be reviewed 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 a couple of sites have a completely broken product page UX, it’s clear that there’s much room for improvement, as 44% of sites have “mediocre” to “poor” product page implementations.
Adhering to the 15 best practices described above is the first step toward improving users’ product page experience:
- Provide “In Scale” images (45% don’t)
- Provide a “Human Model” image (81% don’t)
- Include descriptive text or graphics for some product images (52% Don’t)
- Avoid 4 pitfalls when displaying price discounts on the product page (18%+ have one or more)
- Make it easy to access and use “save” features (97% don’t)
- Display “price per unit” for products sold in varying quantities or amounts (88% don’t)
- Provide a “total order cost” estimate near the “Buy” section (55% don’t)
- Display or link to the return policy from the main product page content (53% don’t)
- Place “free shipping” information in or near the “Buy” section (24% don’t)
- Provide highly scannable spec sheets (72% don’t)
- Harmonize vendor-supplied specs to ensure consistency and uniformity (58% 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 (94% don’t)
- Respond to negative user reviews (67% don’t)
- Provide a ratings distribution chart at the top of the review section (69% don’t)
A high-performing product page will help ensure that users have the information and features they need to make a purchase decision and begin the checkout process.
For more details about the implementation and UX performance of the benchmarked sites, see the publicly available section of the Product Page Benchmark, which provides the product page implementations of all 133 benchmarked sites as well as inspiration for improving product page UX.
This article presents the research findings from just a few of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
If you want to know how your desktop site, mobile site, or app performs and compares, then learn more about getting Baymard to conduct a UX Audit of your site or app.