Articles

Mobile UX: Avoid Using Subpages within the Product Details Page (26% Don’t)

The amount of content available on a typical mobile product page makes maintaining an overview and sense of orientation difficult for many users.

During our large-scale mobile usability testing, in an attempt to mitigate this issue, some sites placed some of the product page content on subpages.

However, on sites that used “subpages” for some product page information, a subset of users during testing were unable to find this information, while others who found the information had trouble retaining a sense of orientation or navigating back to the product page “main page”.

Yet our newest mobile benchmark reveals that 26% of mobile sites use subpages for some of their product page content.

If users fail to find critical information on the product page some will abandon, thinking, sometimes wrongly, the product won’t meet their needs.

In this article, we’ll cover our mobile research findings on mobile product page subpages, including:

  • Why subpages may seem like an attractive way to structure product page information
  • Why the most severe issue subpages cause should be enough for sites to avoid them altogether
  • How a second subissue further makes subpages difficult to navigate for users
  • How using “Vertically Collapsed Sections” resolves the issues caused by subpages

The Mobile Product Page Dilemma: Lots of Content, Little Space

Mobile product pages often contain a wealth of information, as seen here at Sephora, which is good for users — if it’s easy to access and navigate.

Product page subpages are an attempt to resolve the dilemma of providing content on mobile product pages:

  1. Enough content must be provided so that users can get the product details they need
  2. Providing too much content directly on the product page can leave users feeling intimidated and overwhelmed

First, it’s important to note that users should be provided with all the content — images, videos, reviews, Q&As, manuals, product highlights, etc. — that could help them make a purchase decision.

Our testing has consistently shown that users — especially when getting ready to make a purchase decision — zero in on the content that’s most useful to them, and the right piece of content has often been observed to be the key factor in their decision to purchase a product (e.g., “I wasn’t sure that refrigerator would fit in my space, but that video made it clear that it would”).

Therefore, it’s never a good idea to omit content from a mobile product page for fear of overwhelming users.

That said, that leaves the second part of the dilemma unresolved: how to provide all the relevant content without intimidating or overwhelming users.

Users becoming intimidated or overwhelmed is a real risk, as comments from users such as “This is too much” or “There’s so much here…I can’t find what I’m looking for” are also common when a mobile product page has a lot of content.

Indeed, some of these users will abandon a mobile product page if they feel overwhelmed by the content and the way it’s presented to them.

To resolve this dilemma, 26% of sites in our mobile benchmark provide some product page content on the “main” product page, while hiding the rest on separate product page subpages.

Subpages could, in theory, resolve this issue, as the hidden content doesn’t bother users who aren’t interested, while users who are interested make it explicit that they’d like to view it by tapping the link to see the additional information.

Yet, in reality, during testing this led to 2 severe issues.

Issue 1: Content Is Useless if It’s Never Found

During testing, the most severe issue caused by mobile product page subpages was that a subset of users missed the link to the subpage.

This left them with a very poor content experience, as they thought that the only content available was the content on the “main page” of the product page.

Many abandoned at this point, as they felt that they couldn’t get answers to some of their basic product questions, or thoroughly investigate the product’s features.

It’s also worth pointing out that the concept of having subpages within the product details page breaks with the general desktop web convention of “1 product = 1 product details page”, which has existed on desktop for more than two decades.

Furthermore, a lot of sites that use subpages use them only in their mobile implementation: 3 of the 4 test sites that had mobile subpages — Newegg, Staples, and Adidas — didn’t use a subpage implementation for the same product page section on their desktop sites, making for an inconsistent experience across platforms.

This is likely also a contributing factor to why a subgroup of users consistently overlook subpages, as they simply don’t expect them.

Issue 2: Navigating “Back” from Subpages Is Often Disorienting

A second issue that occurred during testing was users having trouble navigating back from mobile product page subpages to the main product page.

Specifically, during testing several users missed the site-provided “Back” links (if available), which were the “correct” way to go from the product page subpage back to the product page main page, and used the device “Back” button instead.

However, after tapping “Back” many users will wind up in the product list — “2 steps back” — rather than being returned to the main product page.

Worse, in addition to being sent 2 steps back, sometimes users are simply returned to the top of the product list, nowhere near the product they had been considering, and they thus have to refind the product list item first before even being able to return to the product page.

Subpages thus introduce further navigational complexity to the mobile product-browsing experience, which is often already fairly complex.

The end result for many users is that they’re left feeling disoriented and frustrated as they attempt to navigate product lists, product pages, and product page subpages.

Consider Using “Vertically Collapsed Sections” if Providing a Lot of Product Page Content

Our mobile testing identified the “Vertically Collapsed Sections” product page layout as, for most sites beyond those that only sell visually driven products, one of the two “safe” product page layouts.

The benefits include the following:

  • The page appears less intimidating, as most of the content is collapsed
  • It’s easier to establish and retain overview of the page, as section headers can be scanned and unwanted content can be collapsed
  • The sections are less likely to be overlooked compared to “Horizontal Tabs”
  • 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
  • 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)

Under Armour uses a “Vertically Collapsed Sections” layout for the primary product page content. Note how users can get an overview of the content types and have a decent chance of discovering that there’s a “Fit” section available after the “Size Chart” section.

Thus a major benefit a “Vertically Collapsed Sections” layout provides is its overall simplicity: the major product page content is usually visible in 1 or 2 viewports, and it’s typically clear how to access the content, or hide it when desired.

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

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

The Layout Must Be Consistently Used for All the Major Product Page Sections

Overstock’s “Vertically Collapsed Sections” are inconsistently implemented and broken up with ads and cross-sells. The benefits provided by a “Vertically Collapsed Sections” layout are lost when it’s this poorly implemented — many users will fail to intuit and internalize the page structure, and will find navigating the content and exploring product details difficult.

A consistent implementation of “Vertically Collapsed Sections” is key to users’ ability to quickly understand the design pattern.

If “Vertically Collapsed Sections” are only partially implemented — for example, if the product description is implemented as a “Vertically Collapsed Section”, but reviews are on a subpage — then it’s harder for users to quickly internalize the page structure.

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.)

Other secondary content — for example, cross-sells, ads, company info, special offers or promos, etc. — doesn’t necessarily have to follow the same “Vertically Collapsed Sections” pattern, although it’s also fine if the layout is used for all content sections where it makes sense given the specific content in question. The key is to have all primary product content grouped in one location, and share the same “Vertically Collapsed Sections” layout.

Section Titles Must Be Informative and Easily Interpreted

At Under Armour the “Vertically Collapsed Sections” titles are all fairly informative and easy to understand immediately — even “Product DNA”, which will likely be understood by the vast majority of users without issues, as it’s first in the list and expanded by default (though more standard titles, such as “Product Description”, can always be used as well to eliminate all doubt). Additionally, note how the number of reviews are specified in the section title, giving users useful information scent (though the same implementation should be used for the “Questions” section below).

Because the content in a “Vertically Collapsed Section” is typically hidden, it’s crucial to have informative section titles so that users know what content is contained in the section before they open it.

Often sticking with conventional titles is a safe choice — for example, “Product Description”, “Reviews”, “Specifications”, “Shipping & Returns”, and “Q&A” — though these can be tweaked to suit a particular site’s preferred terminology (within reason).

Furthermore, for sections where it’s helpful to provide a count of the content available — typically, reviews and Q&As, though potentially other auxiliary content as well such as manuals or videos — this should be provided as well in the section title (e.g., “Reviews (14)”).

Finally, when it comes to sections with dynamic content, be aware that the section title should then ideally also be dynamic.

Help Users Find All the Content They’re Looking For

Hayneedle uses truncation effectively to avoid overwhelming users on the product page, while also avoiding subpages.

Given the severe issue a subgroup of users will have of completely missing product page content because of its placement on a subpage, avoid using subpages for product page sections.

In particular, the major product page sections should all be on the main product page — it’s less severe if, for example, a store locator or special offer notice are implemented as subpages.

Instead, when there’s lots of content to provide on a mobile product page, consider using “Vertically Collapsed Sections”. Just be sure to use the design pattern consistently for all major product page sections and make section titles easy to understand and interpret.

Despite the clear pitfalls inherent in using product page subpages for some product page content, 26% of sites use this design pattern, ensuring a subgroup of their users will never find important product page content.

This will result in user abandonments, and furthermore is a waste of resources, as the most engaging and informative product page content will be completely overlooked by some of the very users who would benefit the most from seeing it.

This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.

Authored by Edward Scott on November 2, 2020

Share:
If you have any comments on this article you can leave them on LinkedIn

User Experience Research, Delivered Twice a Month

Join 37,000+ UX professionals and get a new UX article every second week.

A screenshot of the UX article newsletter