Product Page Layout Flashcards
What are the four types of product page layouts that dominate the e-commerce landscape?
- Horizontal Tabs
- Vertically Collapsed Sections
- One Long Page
- One Long Page with a Sticky Table of Contents (TOC)
Why should “Horizontal Tabs” generally be avoided in product page layouts across all industries?
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.
For which types of products do “One Long Page” layouts without a “Sticky TOC” perform well?
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.
Which two product page layout types are consistently capable of performing well across various e-commerce sites?
The two layout types consistently capable of performing well are:
- Vertically Collapsed Sections
- One Long Page with a Sticky Table of Contents (TOC)
What is the core issue with long uncollapsed sections on a product page layout?
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.
The testing of “Vertically Collapsed PDP Section”-layouts showed that this pattern has some unique benefits, contributing to its good overall performance:
The unique benefits of using a “Vertically Collapsed PDP Section” layout include:
- 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.
- Few users overlook the vertically collapsed sections, unlike with “Horizontal Tabs” layouts.
- One section, typically the product description, can be expanded by default for extra exposure without causing significant issues, provided it isn’t too long.
- 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).
- This layout is particularly effective for mobile e-commerce sites and helps maintain a consistent user interface when used on both desktop and mobile.
Why do vertically collapsed product page layouts perform well in e-commerce?
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.
What are the benefits of the collapsible nature of content sections in a product page layout?
The collapsible nature of content sections in a product page layout has two distinct benefits:
- 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.
- 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.”
Why is the “Vertically Collapsed Sections” layout recommended for product pages, while the “Horizontal Tabs” layout is not?
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.
What are two common usability issues observed with “Vertically Collapsed Sections” layouts on product pages?
- 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.
- Section titles can be misinterpreted or may not be compelling enough, leading users to either choose the wrong sections or ignore relevant ones altogether.
What are the benefits of using “Vertically Collapsed Sections” as a desktop product page layout?
The benefits of using “Vertically Collapsed Sections” as a desktop product page layout include:
- 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. - Users can get an overview of the available page sections before being exposed to large amounts of product data.
For which type of product pages should the “One Long Page” layout be reserved?
The “One Long Page” layout should be reserved for product pages that are truly simple and mostly visual in nature.
Why is the “Vertically Collapsed Sections” layout considered one of the “safe” product page layouts for most e-commerce sites?
The “Vertically Collapsed Sections” layout is considered one of the “safe” product page layouts for most e-commerce sites because:
- The page appears less intimidating, as most of the content is collapsed.
- 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.
- Sections are less likely to be overlooked compared to “Horizontal Tabs.”
- 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.
- 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.
However, as on desktop product pages, there are two key implementation details to ensuring “Vertically Collapsed Sections” layouts perform well for end users:
-The layout must be consistently used for all the major product page sections
-Section titles must be informative and easily interpreted
In particular, the major product page sections should all be implemented as “Vertically Collapsed Sections”
The product description
User reviews
Q&As
Shipping info
Specs
Any other product type–specific content (e.g., “Ingredients”, “Fit”, etc.)