At first glance, a “Horizontal Tabs” Product Details Page (PDP) layout 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, our 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. Our 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.
In this article, we’ll discuss the test findings from our Product Details Page usability study related to “Horizontal Tabs” product page layouts, including:
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.
However, during our product page testing the 27% of users who never found the content were understandably frustrated, perplexed, and upset.
It was demonstrated time and again during testing that users need more than product images and a brief description to make a decision on a product. Users considering products will need to dive into product details at a more granular level by considering specs, a full product description, reviews, and even manuals and other auxiliary content. Hence when they are unable to find this content, they end up frustrated or confused.
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.
Besides the severe issue of a subgroup of users overlooking the tabs, horizontal tabs were also observed to have a number of other intersecting issues.
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 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.
To resolve the issue caused by limited horizontal tab width (i.e., to provide longer titles), sites might be tempted to place some product page sections outside the tabbed interface.
However, moving some of the content sections outside of the main product page navigation was observed to perform very poorly during testing. This is due to a combination of some users overlooking the content placed outside the “primary” product page content, while others will suffer from the increased complexity caused by having two different navigational patterns on the same product page.
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”. 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”).
For implementation details and a much deeper discussion of this product page layout, see guideline 751 in Baymard Premium.
“One Long Page with a Sticky TOC”. 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.
(Note: “One Long Page” layouts, without a sticky TOC, were only observed to perform well for simple products that offer primarily visual content — see guideline 757 in Premium.)
For implementation details and a much deeper discussion of this product page layout, see our guideline on Sticky TOC layouts and our guideline on Sticky TOC layout implementation details in Baymard Premium.
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.
This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” product page user experience.
Join 25,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Assuming the cross for to the Sears ‘sticky TOC’ caption should be a tick? :)
Hi Jonathan, thank you for point it out – yes the Sears example is positive. A last minute edit caused this. It’s corrected now.
Dont horizontal tabs and a sticky TOC on one long page appear exactly the same most of the time?. Yes with a long page there is also content discoverability if users scroll, but navigation readability would be the same.
or are you only referring to sticky TOC that is in a single column list.
I was wondering this is well. If I had to guess, I’d say the main differences with the sticky ToC are that it “jumps” out of the page content as you scroll, looks like a main header menu — and so it is more noticeable, and is in a location usually associated with the task of “getting more info”. Basically, it’s always visible and you don’t have to hunt around for it in the page contents. The fact that the user can alternate between the click and scroll behavior organically and get the same result probably helps too.
Hi Maak and Lincoln, sorry for the article not clarifying this. Our research findings in Baymard Premium on PDP layouts are 4*times longer than this, so we had to cut it down for this article and decided to focus mainly on the issues with Horizontal Tabs.
Yes you can say that the visual appearance of Horizontal Tabs and a Sticky TOC are similar – in fact the Sticky TOC is probably less visually dominating. The reasons we see a very big difference in how well the perform with users are because when users overlook the Sticky TOC no content on the PDP is hidden – they can still just scroll the page and find all content.. Whereas with Horizontal Tabs, when they overlook the tabs, 20-80% of the product page content are then essentially lost/invisible/not there.
“However, our large-scale Product Details Page usability testing reveals that 27% of users overlook the hidden content — which can have dire consequences.”
Another perspective could be that 73% of visitors successfully navigated the content of the site.
Tabbed content, in my experience, derives from business/product owners having the reins instead of sharing them with design/teams teams. Allowing greater design control/input may push that number but those tend to be directions from senior leaders based on revenue, growth, etc.
I understand the need to be more inclusive in your design, but what would you say is an acceptable percentage from your study? You will never get a design that works for 100% of the visitors to your site, so what would you consider an acceptable metric that would allow you to claim a win and move onto other design problems that may require greater investment in time and resources?
Hi Matthew, thank you for your comment.
Yep 73% were indeed able to navigate the tabs and designs are never perfect – there will always be some users who will have issues.. The reason we conclude 23% is in fact a very poor performance for a PDP layout, is because when testing the two alternative PDP layout designs (again, across user demographics, across industries, and in different design variations) we observe that for Vertically Collapsed Sections it’s only 8% and for Sticky TOCs it’s only 7%.
The real problem with horizontal tabs is that modern designers obsessed with so-called “minimalism” design tabs that don’t look like tabs. The solution is simple: tabs should look like tabs. Here is an example of how normal tabs should look: https://interruptions.net/private/misc/Normal-tabs.png
Note that there should be also a bottom row of tabs.
While the tab design obviously plays a large role in the issue, we did also observe on sites with quite “traditional” horizontal tab designs, like these three also shown in the article:
https://cdn.baymard.com/research/media_files/attachments/33019/original/research-media-file-3bb22ee99d3643e5dc8dfc95fb550d60.jpg (in this screenshots this exact user didn’t overlook it but many others did on that page)
Hello, what do you mean by “search on page”, do you mean CTRL+F search?
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 email@example.com