Product Page Layout

Question 1

What are the four types of product page layouts that dominate the e-commerce landscape?

Answer 1

1. Horizontal Tabs
2. Vertically Collapsed Sections
3. One Long Page
4. One Long Page with a Sticky Table of Contents (TOC)

Question 2

Why should “Horizontal Tabs” generally be avoided in product page layouts across all industries?

Answer 2

Subgroups of users overlook the tabbed content sections entirely.
- The issues were furthermore found not to be resolvable regardless of how sites style their tabs.

Question 3

For which types of products do “One Long Page” layouts without a “Sticky TOC” perform well?

Answer 3

One Long Page” layouts without a “Sticky TOC” perform well for products that are mainly aesthetically driven and have very little textual product information, such as most apparel products.

Question 4

Which two product page layout types are consistently capable of performing well across various e-commerce sites?

Answer 4

The two layout types consistently capable of performing well are:

1. Vertically Collapsed Sections
2. One Long Page with a Sticky Table of Contents (TOC)

Question 5

What is the core issue with long uncollapsed sections on a product page layout?

Answer 5

The core issue with long uncollapsed sections is that they make it difficult for users to get an overview of the product page, as each section pushes the next one out of view.

Question 6

The testing of “Vertically Collapsed PDP Section”-layouts showed that this pattern has some unique benefits, contributing to its good overall performance:

Answer 6

The unique benefits of using a “Vertically Collapsed PDP Section” layout include:

1. Sections are collapsed by default, making it easier for users to get an overview of the page content and reducing the intimidation of the product page.
2. Few users overlook the vertically collapsed sections, unlike with “Horizontal Tabs” layouts.
3. One section, typically the product description, can be expanded by default for extra exposure without causing significant issues, provided it isn’t too long.
4. The design performs well when vertical sections run the full page width or are placed within a partial-width column (e.g., alongside an image gallery).
5. This layout is particularly effective for mobile e-commerce sites and helps maintain a consistent user interface when used on both desktop and mobile.

Question 7

Why do vertically collapsed product page layouts perform well in e-commerce?

Answer 7

Vertically collapsed product page layouts perform well because they quickly provide users with an overview of the product page content sections. After users review the core product information at the top of the page (such as the image gallery, product title, variations, and price) and decide the product is worth exploring further, they can easily navigate to the vertically collapsed sections, which effectively act as a “Table of Contents” for the rest of the product page.

Question 8

What are the benefits of the collapsible nature of content sections in a product page layout?

Answer 8

The collapsible nature of content sections in a product page layout has two distinct benefits:

1. When users land on the product page, they can first get an overview of the available sections without being immediately overwhelmed by large amounts of content. This creates a less intimidating initial appearance compared to long scrollable pages with no collapsed sections.
2. Once users start engaging with the product page, it is easier for them to reorient themselves. They can collapse and expand individual sections as needed, such as switching their focus from “Product Specs” to “Q&A.”

Question 9

Why is the “Vertically Collapsed Sections” layout recommended for product pages, while the “Horizontal Tabs” layout is not?

Answer 9

The “Vertically Collapsed Sections” layout is recommended for product pages because it significantly reduces the likelihood of users overlooking content sections entirely. In contrast, “Horizontal Tabs” layouts are not recommended because users are more likely to miss tabbed content, leading to a poorer user experience.

Question 10

What are two common usability issues observed with “Vertically Collapsed Sections” layouts on product pages?

Answer 10

1. Inconsistent use of the navigational pattern across all core product page sections can make it unnecessarily difficult for users to navigate the page, increasing the likelihood of them overlooking some sections.
2. Section titles can be misinterpreted or may not be compelling enough, leading users to either choose the wrong sections or ignore relevant ones altogether.

Question 11

What are the benefits of using “Vertically Collapsed Sections” as a desktop product page layout?

Answer 11

The benefits of using “Vertically Collapsed Sections” as a desktop product page layout include:

1. It is relatively easy to adapt the layout for a consistent mobile UI experience.
   Users are less likely to miss entire sections or be unaware that they are present on the page.
2. Users can get an overview of the available page sections before being exposed to large amounts of product data.

Question 12

For which type of product pages should the “One Long Page” layout be reserved?

Answer 12

The “One Long Page” layout should be reserved for product pages that are truly simple and mostly visual in nature.

Question 13

Why is the “Vertically Collapsed Sections” layout considered one of the “safe” product page layouts for most e-commerce sites?

Answer 13

The “Vertically Collapsed Sections” layout is considered one of the “safe” product page layouts for most e-commerce sites because:

1. The page appears less intimidating, as most of the content is collapsed.
2. It is easier for users to establish and retain an overview of the page since section headers can be scanned, and unwanted content can be collapsed.
3. Sections are less likely to be overlooked compared to “Horizontal Tabs.”
4. The headers of each section can provide more informative cues about the type of product information contained, as each collapsed section header is on its own line.
5. The page length is better controlled than in many “One Long Page” layouts, allowing users to easily access elements like the footer or cross-sells placed below the collapsed sections.

Question 14

However, as on desktop product pages, there are two key implementation details to ensuring “Vertically Collapsed Sections” layouts perform well for end users:

Answer 14

-The layout must be consistently used for all the major product page sections
-Section titles must be informative and easily interpreted

Question 15

In particular, the major product page sections should all be implemented as “Vertically Collapsed Sections”

Answer 15

The product description
User reviews
Q&As
Shipping info
Specs
Any other product type–specific content (e.g., “Ingredients”, “Fit”, etc.)

Question 16

What do users need to be able to do when they first land on a new product page?

Answer 16

When users first land on a new product page, they need to be able to quickly establish an overview of all the content available on the page. This includes understanding what types of product information are available, as the information often differs from product to product, identifying the various product page sections, and determining what content each section contains or is likely to contain while skimming the page.

Question 17

What problems are caused by “Horizontal Tabs” layouts on product pages?

Answer 17

“Horizontal Tabs” layouts cause several problems on product pages, including:

1. Section titles often being overly short and less descriptive because multiple tabs need to fit on the same line, leading to a tendency to shorten product page section titles.
2. The lack of informative tab titles makes it difficult for users to evaluate if the product page contains specific types of information they are looking for. As a result, short and generic tab titles are likely to cause users to miss important product information.

Question 18

What are the common usability issues that need to be mitigated for a “Sticky TOC” design to perform well?

Answer 18

he common usability issues that a “Sticky TOC” (Table of Contents) design must actively mitigate to perform well include:

1. Ensuring that users do not overlook the “Sticky TOC” element entirely.
2. Ensuring that the Table of Contents does not only become “Sticky” too far down the product page.
3. Making sure users understand the concept of being “jumped around the page” when clicking on TOC links.
4. Ensuring that section titles in the TOC are clear and not open to misinterpretation.

Question 19

What are some key pieces of advice for using a “Sticky TOC” product page layout effectively?

Answer 19

To use a “Sticky TOC” product page layout effectively, consider the following advice:

1. Ensure that the TOC is placed high on the product page, ideally within the browser fold and integrated with features like the ‘Reviews Shortcut.’
2. Use a TOC design that is not too tall and has high contrast for better visibility and usability.
3. Implement a ‘smooth scroll’ feature so users are smoothly scrolled to sections rather than being abruptly jumped around the page.
4. Avoid using a permanently visible “Sticky TOC” on smaller mobile devices, as it can occupy too much space in the user’s viewport. Instead, a “Vertically Collapsed Sections” layout is generally more effective for mobile devices.

Question 20

What does TOC stand for?

Answer 20

TOC stands for “Table of Contents

Question 21

What are the issues caused by placing a “Sticky TOC” (Table of Contents) outside the page fold on a product page?

Answer 21

Placing a “Sticky TOC” outside the page fold on a product page can cause several issues:

1. Users cannot see an overview of the product page content sections when they first land on the page. Since most users spend time initially inspecting product images, it can take several minutes before they scroll far enough to view the Table of Contents.
2. Because the TOC is only visible after users have already started scrolling, it adds complexity to the navigation by introducing a secondary in-page navigational schema later in the browsing session. This can lead to confusion; some users may take a significant amount of time, even over 10 minutes, before noticing the “Sticky TOC.”
3. If the Table of Contents is placed outside the fold, the small review summary and shortcut at the top of the product page—often clicked first by up to 11% of users—can bypass the “Sticky TOC,” making it harder for users to realize there is another primary in-page navigation method available.

Question 22

Why are product pages with tall cross-sell sections, long product descriptions, or other extensive content not suited for a “One Long Page” layout?

Answer 22

Product pages with tall cross-sell sections, long product descriptions, or extensive content (such as ads, Q&As, auxiliary information, etc.) are not suited for a “One Long Page” layout because mobile users can quickly become lost and overwhelmed trying to navigate the extensive content on the product page.

Question 23

For which types of product pages is the “One Long Page” layout suitable, and when should it be avoided?

Answer 23

The “One Long Page” layout is suitable for simple, mainly visual product pages, as testing has shown that participants had no difficulties navigating such layouts for these types of products. However, this layout should be avoided on mobile sites that sell products that are specification-oriented or where different aspects of the product require an in-depth explanation. For example, it is poorly suited for sites selling consumer electronics, small and large appliances, technical or outdoor sports apparel, furniture, mass-market goods, toys, software, and similar products.

Question 24

What layout is recommended for mobile product pages, and under what conditions should it be used?

Answer 24

For mobile product pages, a “One Long Page” layout should be reserved for product pages that are truly simple and mostly visual in nature. If there is any doubt about the suitability of this layout, or if the site has a mixed product catalog, a safer option is to use “Vertically Collapsed Sections.” This layout ensures better usability across a range of product types.

Question 25

What are the benefits of using a “Vertically Collapsed Sections” layout on a product page?

Answer 25

1. The page appears less intimidating, as most of the content is collapsed
2. It’s easier to establish and retain overview of the page, as section headers can be scanned and unwanted content can be collapsed
3. The sections are less likely to be overlooked compared to “Horizontal Tabs”
4. The headers can contain more information scent on what type of product info it contains because each collapsed section header is on its own line
5. Page length is controlled better than the length on many “One Long Page” layouts, allowing users to access, for example, the footer very easily or cross-sells (if placed below the collapsed sections)

Question 26

Why is consistent implementation of “Vertically Collapsed Sections” important on a product page, and which sections should be included?

Answer 26

Consistent implementation of “Vertically Collapsed Sections” is important because it helps users quickly understand and internalize the page structure. If these sections are only partially implemented

(e.g., if the product description is collapsed, but reviews are on a subpage), it becomes harder for users to navigate the page effectively. To maintain consistency, all major product page sections should be implemented as “Vertically Collapsed Sections,” including:

• Product Description
• User reviews
• Q&As
• Shipping information
• Specifications
• Any other product-specific content (e.g., “Ingredients,” “Fit,” etc.)

Question 27

Should all content on a product page follow the “Vertically Collapsed Sections” layout?

Answer 27

Not all content on a product page needs to follow the “Vertically Collapsed Sections” layout. Secondary content, such as cross-sells, ads, company information, special offers, or promotions, doesn’t necessarily have to use this pattern. However, it is acceptable to use the layout for all content sections if it makes sense given the specific content. The key is to have all primary product content (such as product description, user reviews, Q&As, shipping info, and specs) grouped in one location and sharing the same “Vertically Collapsed Sections” layout to ensure a consistent and understandable page structure.

Question 28

If using “Vertically Collapsed Sections” on your mobile site, which typical product page section does not need to be implemented in that style, or can be left expanded by default?

A. Product Description
B. Cross-Sells
C. User Reviews
D. Shipping Info
E. Specification Sheets

Answer 28

B. Cross-Sells

Question 29

Why should “Horizontal Tabs” be avoided as a product page layout and in-page navigation?

Answer 29

“Horizontal Tabs” should be avoided as a product page layout and in-page navigation because a significant subgroup of users tends to overlook the tabbed content entirely. Additionally, this pattern has inherent issues with tab titling, as the titles are often too short and less descriptive, making it difficult for users to understand what content is available.