Product Page Usability

Exploring the customer’s product page experience

A part of Baymard Premium access

This product page study provides you with 2 years’ worth of usability testing and research on product details pages, all condensed into 95 usability guidelines.

Full access to this Product Page Usability​ study includes 12 reports with 95 actionable product page guidelines, and a benchmark database with 5,800 UX performance scores and 4,100 categorized product page implementation examples.

(Beyond including full access to this E-Commerce Product Page research study, the Baymard Premium access also include 6 additional studies (Homepage & Category Navigation, E-Commerce Search, Product Lists & Filtering, Cart & Checkout, Mobile E-Commerce, and Account & Self-Service) with a total of 640+ guidelines covered in 69 e-commerce UX research reports)

This research-based and pragmatic toolset will help you achieve the best possible product page design, user experience, and conversion rate.

Sears Logo

“Baymard produces some of the most relevant and actionable user experience research available. They really understand the needs of UX and Product Management professionals, and their deep experience in the eCommerce field allows them to offer sophisticated, nuanced insights.

12 Reports with 95 Research-Driven Guidelines on Perfecting Product Pages

It’s often on the product page where users make up their mind on whether or not they want to purchase the featured product. This makes the product page layout, design, and features, the centerpiece of the user’s e-commerce experience. At the same time, the product page layout and features are under a lot of strain as they’re largely a template reused for almost every single product on the site.

This original usability study focuses on exactly how users interpret and interact with the product page on e-commerce sites. The findings presented in these 12 reports (600-pages in total) are based on Baymard’s large-scale qualitative testing of e-commerce product pages, along with an additional large-scale eye-tracking test.

Throughout the test sessions, users would repeatedly abandon sites due to issues with the product page layout, content types, or features. Indeed, the test subjects encountered 1,300+ usability issues, despite testing the product pages of multi-million-dollar sites like Sears, Home Depot, Bose, Sephora, Lowe’s, etc.

In these 12 reports, we have distilled all 1,300+ product page usability issues encountered by the test subjects into 95 product page user experience guidelines, and prioritized them by UX impact – providing you with a concise set of design guidelines that will help you improve the performance of your product pages.


What you’ll get in the 12 Product Page Usability reports

95 actionable design guidelines divided into 12 topics.

492 user quotes illustrating what customers think when they evaluate and abandon product pages.

1,437 screenshots illustrating concrete design and usability issues – and solutions to them.

60 benchmark case studies of real life examples illustrating what works and what doesn’t.

600 print-optimized pages exploring the customer’s product page experience.

Belk Logo

“I can not tell you how much help your benchmark studies have been for our company, e-commerce and UX teams. We have used and continue to use these reports for baseline benchmarks as we build test protocols or eye tracking scripts etc. in lab.

Topics Covered in the 12 Product Page Reports

12 × Product Page Topics

Product Page

Product Page Layout

Product Page

Product Page Layout

8 Guidelines, 53 Pages

The 4 predominant Product Details Page layouts used in e-commerce: ‘Horizontal Tabs’, ‘Sticky TOCs’, ‘Collapsed Sections’, ‘One Long Page’, how they each perform, and which layout to generally avoid.

Product Page

Product Images

Product Page

Product Images

9 Guidelines, 49 Pages

How users rely on images on the product page, the 7 different product image types users generally need, the amount of images needed, and how large sites can approach some of the image sourcing.

Product Page

Image Gallery UI

Product Page

Image Gallery UI

10 Guidelines, 45 Pages

How to design a high-performing imagery gallery that serves as the perfect container for the product images, incl. image navigation, how to zoom images, overlays, default image size, etc.

Product Page

Product Video & 360-View

Product Page

Product Video & 360-View

4 Guidelines, 21 Pages

‘Rich visuals’ like product video and 360-views, how users utilize it, and the features each of these need in order for users to be able to reliably control the content.

Product Page

The 'Buy' Section

Product Page

The 'Buy' Section

9 Guidelines, 43 Pages

The design and position of elements such as the ‘Add to Cart’ button, prices & discounts, the quantity field, ‘Out of Stock’, ‘Save to List’, etc.

Product Page

Shipping, Returns, and Gifting

Product Page

Shipping, Returns, and Gifting

7 Guidelines, 42 Pages

The best-performing designs for displaying shipping and return info at the product page, the amount of info required, along with how to best present “Free Shipping”, handle gifting, and “Find in Store” features.

Product Page

Product Variations

Product Page

Product Variations

9 Guidelines, 40 Pages

The selection interface for color and size variations, reusing content across variations, size guides, along with the interfaces required for both product customizations and personalizations.

Product Page

Product Descriptions

Product Page

Product Descriptions

7 Guidelines, 36 Pages

How users engage with and rely on product information and descriptions, the type of content needed, product headlines sub-titles, along with both the text structure and styling that performs the best.

Product Page

Specifications Sheet

Product Page

Specifications Sheet

5 Guidelines, 26 Pages

How users engage with spec sheets, and how both the spec sheet layout, spec sheet features, and post-processing of vendor data are critical for making users less prone to users misread the specs.

Product Page

User Reviews

Product Page

User Reviews

13 Guidelines, 71 Pages

The user review submission form, review filtering, sorting & navigation, rating distribution summaries, and more.

Product Page

Auxiliary Content

Product Page

Auxiliary Content

5 Guidelines, 25 Pages

A variety of auxiliary content types found on e-commerce product pages, such as Q&A, FAQs, product manuals, social media tools, and expert-generated content.

Product Page

Cross-Sells & Cross-Navigation

Product Page

Cross-Sells & Cross-Navigation

9 Guidelines, 51 Pages

How cross-sells and cross-navigation are vital for users’ overall success at locating their desired products, incl. cross-sell design, placement, and logic, and cross-navigation elements such as ‘Recently Viewed’, parent links, etc.

Office Depot Logo

“Baymard has been a great resource in helping us improve the customer experience. We are continually applying these best practices to our sites.

Benchmark: Are Your Product Pages UX Better Than Macy’s or Nike’s?

Based on the findings of this product page research study we’ve also benchmarked the product details pages of 60 top-grossing e-commerce sites in the US and Europe. This provides you with the most comprehensive product page UX database in the world with 285 manually reviewed pages, more than 1,700 screenshots, and 4,100+ categorized implementation examples of the 95 product page usability guidelines presented in the 12 reports.

When you purchase the product page usability study you get full access to this benchmark database.

Furthermore the benchmark database includes tools that allow you to review your own (or your clients’) product page UX and see how it stacks up against the competition.


What you’ll get in the Product Page Usability benchmark

Full unrestricted access to the benchmark database with 60 product page case studies of top grossing e-commerce sites.

285 annotated page designs for systematic design inspiration of specific product page elements (e.g. Image Gallery, User Reviews, etc).

An interactive review tool to rate your own product page UX performance and see how it stacks up against the competition.

5,700+ UX performance scores providing a detailed breakdown of product page strengths and weaknesses.

4,100+ performance-verified best-practice examples, illustrating how to implement the 95 product page usability guidelines.

Lenovo Logo

“Excellent tool – looking forward to using it with our other sites and prototypes as they’re developed.

Get your 5 search reports and benchmark with Baymard Premium

Get instant access to the 12 product page UX reports (along with 60 other e-commerce UX research reports) and the full benchmark database with Baymard Premium access.

Refund policy: We stand by our research and offer you a full 14 days “no questions asked” refund. If you’re not satisfied, simply e-mail us at christian@baymard.com for a full refund.


Baymard Institute’s research is used by:

Nike Inc. Logo

“Intelligent, consumer-focused insights that are clear and actionable. The team in the room really loved the way the Baymard Institute highlighted the optimizations in the various user experience elements (copy, layout, design, calls-to-action…), from the perspective of consumer struggles. Baymard’s Usability research really complements our other existing research tools.

Etsy Logo

“Thank you. This was an excellent piece of work: professional, thorough, and actionable for the team. We're very happy with the work Baymard has done for us so far, and I hope we'll have the chance to work together again on future projects.

ClickBank Logo

“It is immensely valuable having a thorough, independent study to help validate my work and in particular, help facilitate buy-off from stakeholders. Baymard has quickly become one of my most trusted resources for the UX/UI field.

Sears Logo

“Baymard produces some of the most relevant and actionable user experience research available. They really understand the needs of UX and Product Management professionals, and their deep experience in the eCommerce field allows them to offer sophisticated, nuanced insights.

Author of 'Don't Make Me Think' Logo

“Damn. The reports that the @Baymard folks do cost money, but they're worth it.

Kohl’s Logo

“I really like the work Baymard Institute does around usability. Their articles often get my Ecom gears turning.

Smashing Magazine Logo

“This is very, very useful! Let me check what we can do to improve the usability in the Smashing Shop.

Sports Authority Logo

“Thank you for all the value delivered ahead of our new fiscal years. Your insights not only provided a definitive foundation for our UX roadmap but completely sold our executive team on the value of expert usability insights. Your service paid for itself in a matter of days and ensured all critical gaps will be filled ahead of us running the audit again next year.

Clicktale Logo

“Some time ago we purchased the Ecommerce Homepage & Category report - the research and insights are extremely useful to us and help us a lot in our work!

Belk Logo

“I can not tell you how much help your benchmark studies have been for our company, e-commerce and UX teams. We have used and continue to use these reports for baseline benchmarks as we build test protocols or eye tracking scripts etc. in lab.

Hallmark Logo

“These reports are fabulous. The content is exactly what our team has been looking for, and so much more! Extremely helpful, thank you!

B&H Photo & Electronics Corp. Logo

“I can confirm that the list was fully implemented. Every time we put up a change we either A/B test or we watch it very closely to determine that it's doing better and not the opposite. So I can confirm that these fixes have improved our checkout. Thanks for everything.

Office Depot Logo

“Baymard has been a great resource in helping us improve the customer experience. We are continually applying these best practices to our sites.

Lenovo Logo

“Excellent tool – looking forward to using it with our other sites and prototypes as they’re developed.

Elastic Path Logo

“Baymard’s real-user research is invaluable for ecommerce marketers. It leaves no stone unturned, and with the guideline checklists provided, you’ll be well equipped to optimize your mobile presence.

“We recommend it, especially if you plan on re-developing your website – and you want to make sure your web company is doing something near best practice.

Room & Board Logo

“The Baymard reports have proven to be an invaluable resource for us. Comprehensive, pragmatic and actionable. We have redesigned our checkout process and made changes to our category pages based on usability guidelines in the reports.

Jarden Consumer Solutions Logo

“Thanks for everything. The audit was extremely useful, I think we have gained valuable insight.

Overstock Inc. Logo

“Thanks again for the great work on our checkout project. Our whole group found it incredibly insightful. We’re applying the suggestions you provided to our new checkout design which launches at the end of the month! One of my colleagues was also interested in your group’s competitive expertise with regard to responsive web and native apps.

@paulirvine

“New e-commerce usability report c/o @Baymard helps us help our customers find the products they are looking for: http://t.co/6dRtNcUeuG

T-Mobile / Deutsche Telekom AG Logo

“Thank you very much for the 7 usability audits of our country-specific sites. The audits have provided us with specific and actionable advice, allowed us to prioritize development resources , and enabled us to compare UX performance between the 7 different country-specific sites, and against State of the Art implementations. The audit itself is done really professionally and the recommendations contain actionable and insightful information.

@experience_ux

“All you need to know about navigation & categories for a successful e-commerce website http://t.co/EqdqtTltWm Via @Baymard

Keurig Green Mountain Logo

“I have found the M-Commerce and E-Commerce reports very useful, thank you!

@SAP_Retail

“Does your #ecommerce site suffer from the usability problems Baymard Institute's study uncovered? http://t.co/QTx4U5NrWl RT @boxuk

John Lewis Logo

“Many thanks for presenting earlier. I have caught up with the teams and they all found your audit report really useful and are on board with the suggestions.

@davidpetersimon

“Quite excited to read this report covering e-commerce taxonomy: http://t.co/jCgZyAmt5H ht @benkappler #ia

Epicenter Consulting Logo

“Given the tricky science of conversion rate optimization, it is great to know that you are dealing with professionals whose advice is based on solid research. It was a pleasure collaborating with the Baymard team.

IATV Logo

“A great report with many important findings and insights. A must-read for every web design professional.

PLI Logo

“The 3 reports I purchased before were helpful to me and my colleagues, which is why I immediately wanted to purchase the 'E-Commerce Usability: Product Page' study. It is also very timely as we are in the process of preparing to completely redesign our website including adding new CMS and other tools.

RepairClinic.com Logo

“Within a very short time Baymard Institute provided 15 clear, useful improvement suggestions for our checkout process. We intend to implement all of them. It’s easy to find companies that offer website improvement suggestions. But, most companies don’t do their homework and don’t provide specific examples of how best to make the improvements. With Baymard Institute, the checkout process suggestions they made were intuitive, specific, and actionable. I highly recommend their audit service.

StickerMule.com Logo

“Wow, this is great! Just reviewed it with the team. It's a huge help and we're excited to fix these issues.

Hallmark Cards, Inc. Logo

“The walkthrough today was great. The report was very, very well done and loaded with great opportunities for us to improve our business. I wanted to again express my appreciation for working with us on such a condensed time frame last month. You and your team have been amazing partners to us and we very much appreciate the work, expertise and partnership.

S3 Stores Logo

“We implemented “E-Commerce Checkout Usability” guide for all our stores and saw doubling of checkout conversion rates. We will soon work on implementation of other usability guidelines. Thank you Christian and Jamie for your excellent work!

Carnival Cruise Lines Logo

“We like what we are reviewing from the audit - great analysis and feedback.

n11.com Logo

“We have worked with a number of third party companies before on various projects/audits, and I can certainly say that working with Baymard was not only a pleasure; but you delivered on time; to the level of depth we wanted; addressing important issues; and answering all our questions; and you did all this for a great price. A big THANK YOU on behalf of N11.

@ecomchat

“Big recommendation from @waligorski: I REALLY recommend the BI report. http://t.co/xw6LXkm5iP - best 150$ spent. (cc @baymard) #ecomchat

EasyAsk Logo

“I have purchased the e-commerce search usability report and it's great. We use it as a benchmark for search best practices.

@digital_darts

“The Baymard Institute have some seriously good reports on ecommerce usability, design, and best practices: http://t.co/cuxO3VwiVe

IATV Logo

“Worth every dollar. It’s well done, good looking and simply very useful.

iProspect Logo

“I love the information that you guys provide and have bought a couple of reports. Love them.

Harley-Davidson Logo

“We found the audits extremely helpful and validated a number of changes we have been wanting to make or are in the process of making, so thank again for all the great insights.

Kingfisher PLC Logo

“The Baymard E-commerce Usability reports have proven to be a valuable resource for UX teams within our organisation both at group and operating company level. The reports contain precise, actionable insights and recommendations which are backed up by extensive research and data. The severity and frequency ratings have helped our development teams to prioritise which areas to improve first. The most recent improvements we’ve recommended from the Ecommerce Search report have been extremely well received by senior stakeholders and have already been fed into the backlog.

Retail Express Logo

“I often refer to myself as 'the worst type of user' because I have adapted to standard/bad UX practices when browsing eCommerce sites. I have found Baymard Institute is an incredible resource for getting some insight into user behaviour for making websites foolproof.

VictoriaPlum.com Logo

“Another excellent piece of research. We're currently re designing our PDP templates now using your studies as our UX fundamentals checklist. Keep up the great work.

Zalando Logo

“Hi Baymard-Team, I'm a fan of your reports – I bought some of them, learned from them and continuously use them in my day-to-day. I like them so much that I also recommend them in expert groups. Thank you for the great work!