At first glance, “Horizontal Tabs” on Product Details Page (PDP) may appear to be an efficient way of grouping product page content.

Indeed, by hiding content in separate tabs, product pages can often be shorter, or the space saved can be used for highlighting other featured content.

However, Baymard Institute’s large-scale Product Details Page usability testing reveals that 27% of users overlook the hidden content — which can have dire consequences.

Content that is hidden in “Horizontal Tabs” layouts will often be crucial to a user’s purchase decision — e.g., user reviews, specs, FAQs, cross-sells, manuals, etc. Baymard’s testing shows that some users who are unable to locate this content — despite actively looking for it — will abandon a product or a site as a direct result of this perceived lack of information.

This article is going to reveal:

• The severe issues caused when users miss content in “Horizontal Tabs” layouts
• How even when “Horizontal Tabs” layouts are found by users they still cause issues by failing to provide sufficient information scent, being prone to misinterpretation, and discouraging exploration
• Other product page layouts that are verified to perform better

Content That Is Never Found May as Well Not Be There

It should be noted that the majority of users during testing did find the content hidden within horizontal tabs. For this group, the tabs were observed to be an efficient in-page navigational anchor.

At Sephora, 18% of all users overlooked the tabs, despite trying to find the very content the tabs contained.

However, during the product page testing the 27% of users who never found the content were understandably frustrated, perplexed, and upset.

Furthermore, this has consequences for not only how users perceive the current product they’re viewing, but, even worse, how they perceive the site.

If users cannot find the product information, some will assume that this site simply doesn’t have much information available for their products. Which can ultimately make them likely to leave the site and go to a competitor if the information is crucial enough, such as user reviews.

Other Issues Caused by ‘Horizontal Tabs’

Unclear Return on Investment. Hiding product page content in “Horizontal Tabs” makes it difficult for users to know whether it’s “worth it” to click to open a particular section. As a result, some users won’t click to open content, even though if they had seen the content it would have helped answer a question they had about a product. Other users click to open the content, only to be disappointed when there is no content available, or it’s too meager to be useful.

Hindrance to Exploration. When content is hidden in “Horizontal Tabs” layouts it’s very difficult for users to “stumble” onto content that could end up being extremely valuable to their purchasing decision — for example, a fuller description of the materials used, or a discussion of production ethics (both of which were observed to be happy “accidental discoveries” some users had when exploring product pages).

Users have to actively choose to click to view content, which they often choose not to do when they only have the title alone to influence their decision.

Misinterpretation of Tab Titles. Hiding product page content places more strain on the title of the section, which must be both enticing and descriptive enough to get users to click.

As horizontal tabs are placed next to each other, they have a limitation in terms of the width they can consume. In practice, this has the side consequence of horizontal tab titles often ending up being too short— leaving them open to misinterpretation and allowing users to read their own meaning into the short one-to-three-word tab titles.

Other Product Page Layouts to Consider Instead

During testing, two product page layouts were observed to generally perform well across product types and industries. These are “Vertically Collapsed Sections” and “One Long Page with a Sticky TOC” layouts.

“Vertically Collapsed Sections” layouts, as seen here at Lowe’s, proved to perform well during testing, as they provide users a good overview of the product page sections without suffering from a subgroup of users overlooking content.

Vertically Collapsed Sections offer many benefits, including providing users with a good overview of product page content and ensuring a high discoverability of the hidden content, and additionally is the pattern we observe to generally perform best on mobile sites. Two pitfalls to avoid, however, are (1) not using the pattern consistently for all the product page content, and (2) failing to provide descriptive and intriguing titles for sections.

The titling issue is shared with “Horizontal Tabs” layouts. However, in “Vertically Collapsed Sections” layouts it’s typically less of an issue, as longer, more descriptive section titles can provide more information scent.

Crucially, in testing “Vertically Collapsed Sections” only 8% of users overlooked this content (compared with 27% for “Horizontal Tabs”).

One Long Page with a Sticky Table of Contents. At Sears, the majority of users instantly grasped that the three navigational links at the top of the product page (reviews, description, specification) were links to content sections. This gave them a very good start by providing an immediate overview of the page content.

One Long Page with a Sticky Table of Contents. Similarly to “Vertically Collapsed Sections”, “One Long Page with a Sticky TOC” layouts offer users a good overview of page content. Additionally, the permanently visible TOC offers easily accessible links to different sections, even as users scroll down the page.

Furthermore, even if users happen to miss the sticky TOC (which isn’t likely — only 7% of users in testing overlooked sticky TOCs on product pages), the fact that all sections are expanded by default offers a good fallback, as users will see the sections as they scroll down the page.

Conclusion

28% of sites still use a “Horizontal Tabs” layout, despite the issues that were identified during testing with using this layout — primarily that a significant subset of users will completely miss the tabs.

That issue alone is grave enough that sites, in general, should avoid such layouts entirely.

This is especially true given that there are better alternatives available in “One Long Page with a Sticky TOC” and “Vertically Collapsed Sections” layouts — assuming the multiple implementation details for each layout are adhered to.

Adopting a layout that has a higher discoverability for core product content will help ensure users can find this crucial content — and won’t decide to go elsewhere to look for it.

PDP UX: Core Product Content Is Overlooked in ‘Horizontal Tabs’ Layouts (Yet 28% of Sites Have This Layout)

PS. Before optimizing the product page’s layout, work on good photos and descriptions. These two elements have the greatest impact.