Key Takeaways
- 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.
Product Images
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 “perfect” Product Image implementations, see our benchmark reviews of Walmart, Bang & Olufsen, and LEGO.
1) Provide “In Scale” Images (45% Don’t)
At Crutchfield, users are simply provided with cut out images of the dash cam, which makes it difficult for them to accurately judge its scale.
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).
GoPro provides an “In Scale” image of a camera and illustrates its size in relation to a model’s hands. “In Scale” images are critical for users to get a sense of the relative size of products.
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)
“I think without the model that it’s hard to picture it. So that’s why I’m not really interested in seeing it. So I would prefer the one with the model.” The lack of an image showing a model wearing this dress in the Urban Outfitter’s app made it too difficult for this test participant to evaluate it properly.
“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.
“I can also see the model so I can see that it’s quite large”. Showing a handbag being worn by a model answers any questions users may have about its size, as demonstrated here on Next (UK) during our large-scale European testing.
“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)
“Well it doesn’t really say that it’s a certain scent”. This user was hoping information about the scent of the hand lotion would be provided in the product image.
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.
“Maybe it’s waterproof? Is it waterproof?…Yeah, it is, cool!”. During testing, users clued in to the water resistance of the speaker due to the graphic of splashing water around it — a feature which some users then double-checked by reading the product headline or description. As another user said, “I like that the image has the water around it…That’s a great initial visual, that tells me a lot of selling features right upfront”.
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.
For inspiration on “good” and “perfect” “Buy” section implementations, see our benchmark reviews of Crate & Barrel and Sports Direct.
4) Avoid These 4 Pitfalls When Displaying Price Discounts on the Product Page (18%+ Have One or More)
“I can’t see how much it costs…there’s no price, not that I can see…am I missing something? I really do not see a price anywhere…oh for fuck’s sake, it’s right there, Jesus Christ.” This participant scrolled up and down the product page, looking for the price, before finally spotting it underneath the product title. In fact, 67% of participants during testing at Patagonia had trouble finding the price.
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.
World Market makes good use of color to draw attention to the product price.
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)
“So I’m not logged in, so I’ll have to…damn it! I just don’t want to share my information.” Along with other participants during testing, this one on Zalando (Germany) was annoyed to be forced into registering in order to add this dress to her wishlist. If users prefer saving products using this method, they might go to another site that allows then to use wishlists without disclosing their personal information.
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).
“But see what happens if I put it on the wish list. Maybe I would have to make an account. No, that’s cool, okay…I think that it’s great in this case, no account is needed to use the wishlist function.” A German test participant at BonPrix appreciated being able to avoid registering in order to save items. As well as making comparing items easier, not forcing users to register makes a good impression.
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)
6 rolls for $5.99 (first image) or 18 rolls for $12.99 (second image) — how much better of a deal is the larger quantity? Users must rely on their own arithmetic skills to compare prices across products sold in varying quantities, as shown here at Target.
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.
“I like the fact that this website gives you a cost per ounce.” This participant appreciated the clear unit price indicated on the product details page, allowing for easy comparison against similar items.
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.
For inspiration on “perfect” Shipping, Returns, and Gifting implementations, see our benchmark reviews of Nordstrom, Home Depot, Overstock, Lowe’s, and Hayneedle.
7) Provide a “Total Order Cost” Estimate near the “Buy” Section (55% Don’t)
At Ann Taylor, users are given no estimation of the shipping price on the product page. When users on the product page don’t have any idea how much shipping will cost, those costs may come as a surprise at checkout and will cause some to abandon their order.
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.
On Boohoo (UK) during large-scale European testing, delivery options and costs were clearly shown. This allows users to calculate the total cost and assess the value of a faster delivery before adding items to the cart.
At B&H Photo, users are informed of the tax-exempt status of orders for most states (“$0.00 Tax Collected Outside NY and NJ”). Since most users will fall outside the affected states, letting those users know that sales tax won’t be added to their order during checkout is helpful as they assess their total order cost.
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)
“I think the fact that there is no information now on how to send it back, it’s a problem.” During large-scale testing on European sites, participants such as this one on Zalando (Germany) checked for return policies and were very hesitant to buy if they couldn’t find them easily.
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.
“‘Returns info’, that would be something important for me.” This test participant at Boohoo UK was happy to quickly find the “Returns Info” section on the product page. Returns policies on apparel sites are especially important, given the importance of trying on clothing to judge their suitability.
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)
At Ulta, “free shipping” information is only promoted in a banner at the top of the product page. During testing, many participants overlooked such notices and instead focused on exploring information near the “Buy” section.
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.
“I also like that they have written this, ‘free shipping’ and ‘free return’. Which I also said before was important for me.” During our large-scale European testing, this test participant quickly spotted the prominent “Free Shipping” information just below the primary button on a product page of the Nordic apparel site Miinto.
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.
Specifications Sheets
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 Evo, Backdrop, and Hayneedle.
10) Provide Highly Scannable Spec Sheets (72% Don’t)
Laptops have an abundance of associated specifications but, at Staples, these specs are not organized in any meaningful way. In order to pinpoint a specific attribute, such as “SSD Capacity”, users may have to scan through dozens of other specs they aren’t interested in, wasting time and effort.
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.
B&H Photo’s robust specifications sheet is divided into sections beneath easily understandable subheadings — helping users home in on the exact specs they are interested in without forcing them to scan through every specification. For example, users interested in the “Effective Flash Range” can scan for the “Flash” section subheading to quickly locate this information.
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)
“It’s a bit annoying, because when it is positioned like this, then you would compare them, and then it seems a bit confusing, when they don’t use the same unit of measure.” At Tesco, different products’ specifications were presented using different measurement units, forcing this participant to mentally convert them in order to perform a useful comparison. Many users may decide this task is not worth the effort and seek an alternative means to decide among products — which may result in site abandonment.
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.
Specifications at Home Depot are displayed in consistent units, making it easy to compare attributes such as product dimensions.
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)
Some terms in this spec sheet at Hi-Fi Klubben during large-scale European testing — such as “aptX”, “aptX HD”, “aptX Adaptive”, and “AAC” may not be understood by nonexpert users. When such terms are not clear, users will wonder whether these specs are important, and comparing items will be more difficult.
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.
When reading user reviews at Crutchfield, this participant was puzzled by how the term “Weather-resistant” differed from “Waterproof”. She was able to clarify the difference using the tooltip explanation in the product-specifications sheet.
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.
User Reviews
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.
For inspiration on “perfect” “User Review” implementations, see our benchmark reviews of Vitamin World, Northern Tool, and Lowe’s.
13) Request Only Highly Relevant Personal Reviewer Info in Review Submission Forms (94% Don’t)
Alongside legitimate demographic information, KitchenAid asks users for invasive personal information — such as the product brand they want to replace, the length of their home residency, and the number of people in their household (first image) — that is not featured in the review (second image). This marketing information harvesting risks lowering the amount of reviews submitted.
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.
Urban Outfitter’s has a simplified review form (first image) that avoids intimidating users, which results in more users submitting reviews and a more robust reviews section for products (second image).
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)
“Now when I see these, I look at a bad review, this is one I’d read cause I want to know what’s so bad about it. I read bad reviews more than I read good reviews.” Many participants during app testing, like this one in the Amazon app, checked negative reviews frequently. Not responding to negative reviews leaves users with a doubly bad impression.
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).
“I get a good feeling always when people reply to reviews…it just shows that they care. They even offer some support. So that’s good.” Replying to negative reviews can give users the impression that the company cares, as confirmed by this test participant on the German site Cyberport during large-scale European testing.
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)
“I like to look at the overall number of 1 and 2 stars versus the overall number of 5 stars.” This participant at Staples explicitly wanted to see a reviews summary for this product to better gauge the overall star ratings. Without this important way of interpreting the spread of reviews, she eventually abandoned the product.
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.
“Out of the 700, the majority of them are five stars. So, that gives me a good idea that people like this.” The ratings distribution chart provided this participant at Sephora with a good indication of the review consensus around the product.
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.
