Use a Sticky Table of Contents (TOC) for Long Product Pages (PDPs)

Findings

Baymard’s research, based on extensive e-commerce usability testing, provides strong evidence for using a sticky Table of Contents (TOC) and reveals several interesting insights:

Content Discovery Rates:

• Pages with horizontal tabs see 27% of users missing content entirely
• Sticky TOC reduces this oversight to just 7% on average
• Some well-implemented sticky TOC designs achieve perfect discovery rates (0% oversight)

User Behavior Analysis:

• Scrolling requires significantly less effort than clicking through tabs
• Users don't need to learn new navigation patterns
• Cross-pollination occurs naturally as users scroll, exposing them to more content

Layout Performance:

• "One Long Page with Sticky TOC" is one of only two "safe" layout patterns that work across all industries
• This layout handles inconsistent product data more effectively than other approaches
• It is particularly beneficial for returning visitors navigating between multiple products

Tips for desktop

Perfect Your TOC Placement

Position it high on the product page, within the browser's initial viewport. Research shows this is crucial because placing the TOC outside the fold makes it impossible for users to view product page content sections upon landing.

This high placement is especially important for re-visiting customers, who need to quickly re-establish their bearings when jumping between different product pages.

During testing, when users couldn't immediately see the TOC, they often concluded that certain product sections simply didn't exist on the site. This occurs because e-commerce sites vary in their content offerings - some have FAQs, product videos, or comparison tables, while others don't. Without seeing these sections in the TOC immediately, users assume the content isn't available rather than looking for it further down the page.

Additionally, the TOC should be integrated with the Reviews shortcut for a critical reason: while users expect reviews at the bottom of product pages, testing showed they need them earlier for purchase decisions and finding alternative products. Integration with the TOC solves this by keeping reviews accessible regardless of their position on the page.

This store's "One Long Page" layout, combined with a sticky TOC at the top, has proven highly effective. The design ensures a seamless experience: while a small percentage of users rely on scrolling, the majority benefit from the always-accessible TOC for quick and efficient navigation. Source: Baymard

Design for Usability

Use a not-too-tall and high-contrast design. Testing showed that overly large or graphical TOC designs are often ignored by users, being mistaken for advertisements or decorative elements. The TOC must provide a compact, efficient overview of product sections while remaining noticeable to users.

Section titles must be specific and accurate because there's no web convention for product page content. Research shows that when titles are vague or generic, users struggle to understand what content is available and may miss important information entirely.

The TOC needs to provide a very compact and efficient overview of the product page sections, as demonstrated by successful implementations in testing.

This store designs its TOC in a simple, intuitive way, ensuring that each section name is clear and effectively provides an overview of the product page content. Source: Baymard

Improve Navigation Experience

Implement smooth scrolling animations when users click TOC links. This helps users understand their movement on the page and maintain context when jumping between sections. The permanent visibility of the TOC allows users to efficiently navigate back to previous sections without losing their place, particularly when comparing multiple products in different tabs.

The sticky effect creates an essential navigational anchor. This proves superior to horizontal tabs or collapsed sections, where users must first scroll to find navigation controls before accessing content.

Optimize Content Structure

A key consideration in content placement: users expect reviews and cross-sells at the page bottom, yet these are core elements for purchase decisions. Each additional section increases the risk of users missing content further down. The TOC resolves this by providing a clear overview of all available sections while maintaining their natural placement order.

Accurate section titles are crucial. Without them, users often miss important content simply because they can't recognize where it's located on the page. This becomes even more critical for sites with extensive product information spread across multiple sections. For example:

Poor titles: "Info", "More".

Better titles: "Product Specifications", "Size & Dimensions", "Technical Features".

At The Home Depot, most test participants actively engaged with the Sticky TOC, using it as a checklist to navigate key content and systematically assess whether a product met their needs during the evaluation process. Source: Baymard

Use PageFly to Create an Optimized Sticky TOC

With PageFly, you can easily build a Sticky Table of Contents (TOC) using the ‘Button’ elements and Sticky feature to enhance navigation on long product pages.

To begin, select the Button element and name each item based on the corresponding section title. You have complete creative freedom to design the TOC in your preferred style by adjusting colors, fonts, and backgrounds.

To ensure optimal visibility, enable full-width mode so the TOC spans the desired section effectively.

Once you’ve finalized the TOC design, enhance usability by linking each TOC item to its corresponding section. This way, when a customer clicks on a title, they are instantly directed to the relevant content without unnecessary scrolling.

Next, make the TOC sticky so it remains visible while users scroll, ensuring effortless navigation.

For those looking to add advanced customization, PageFly also allows for custom code integration to enhance the TOC’s functionality and styling. This option is ideal for users with coding experience who want more precise control over interactions and design elements.

By leveraging PageFly’s flexible design capabilities, you can create a highly functional and visually appealing Sticky TOC, improving navigation, boosting engagement, and enhancing the overall shopping experience for your customers.

Tips for Mobile

A sticky TOC, while effective on desktops and tablets, presents significant challenges on mobile devices. The permanently visible TOC takes up too much valuable screen space, and TOC links often wrap to multiple lines on smaller screens, further reducing usable viewport area.

PageFly recommends implementing these mobile-optimized alternatives to enhance user experience and navigation efficiency:

• Vertical Collapse: Opt for a vertically collapsed section layout to maximize space and minimize clutter. This design helps users focus on what’s essential, avoiding overwhelming amounts of information in a small viewport.
• Two-Tap Access: Consider allowing mobile users to access sub-sections with minimal taps, ensuring that even deeper content is only a quick interaction away without overwhelming users.
• Responsive Testing: Always conduct thorough testing across various devices to ensure that the sticky TOC works seamlessly, adjusts properly, and enhances usability on all platforms.

The key is choosing the right approach based on your product's content volume while prioritizing efficient use of limited mobile screen space.

Conclusion

Implementing a Sticky TOC on long PDPs can significantly enhance user navigation, providing a structured and user-friendly experience. By understanding the nuances of placement, design, and responsiveness, you can optimize your PDPs to foster deeper engagement, ultimately leading to higher conversion rates.

In the fast-paced arena of digital commerce, small enhancements like these can create a competitive edge. With PageFly, merchants can effortlessly integrate a Sticky TOC, ensuring a seamless and conversion-optimized browsing experience for their customers.