Vertical Page Best Practices

Executive Summary

The purpose of the Vertical page.
  • Vertical pages represent Level 1 of our taxonomy. After the homepage, this is the first page that a user may visit
  • The purpose of this page is way-finding; to help the user make a navigation decision.
  • The success metric for this type of page is Product Detail Page (PDP) visits
Page layout and component content are important.
  • Components that reflect the taxonomy should be at the top of the page. Putting promotions inside navigation components, replacing or deprecating a navigation component with promotions generally impacts performance negatively.
  • Our strongest results involve "Visual Navigation - Multi-Link" in row 1 AND a "Left Nav" ... BOTH with good content. As you get further from this ideal, performance will decrease.

Best Practices for Layout

Left nav - content matters. MultiLinks Vis nav in row 1 - content matters. Promos in row 2

Best Practices for Content

1) "Visual Navigation - Multi-Link" Content

This component with the right content can be a power house at clarifying the complex and makes a user confident in their navigation decisions. Use in row 1.

Guidelines derived from research: Testing has repeatedly shown that Visual Nav Multi-link component should be in row 1 vs any other component, and that its content matters.
  • Choose categories that reflect the highest revenue or that meet user needs (which may not be same as revenue).
  • Make it easy for the majority of people to get where they want to go. Make sure the content covers 80% of your traffic based on user traffic reporting, Clicktale reports, and other user-centered insights.
  • 3 columns in row 1 can be better if the 4th is “noise” to the user (e.g. promotions, gifts ideas or low-traffic categories)
  • Ensure images: 1) assist the user in making a navigation decision by allowing for quick visual comparison and 2)represent the product selection in that category and not just one product. More content guidelines for this module
  • This component is so magnetic that its content and images can cause confusion or frustration on the page if not populated with the right content.
  • A link to "shop/see all" categories is a recommended safety net in the Visual Navigation area.
  • Vis Nav Multi-Link is better than Vis Nav Single Link on Vertical pages
Individual Tests: Tools (TID293), Appliances (TID292), Fitness (TID217), TID171-174,
Multiple Test Summaries: 2013 Vertical Tests, Heroes and Visual Navigation , Visual Navigation - Multi Link Research, Visual Navigation - Single Link Research

2) "Left Nav" Content

Guidelines derived from research: Start with categories, generally
  • Left Nav with bad content is worse than no Left Nav at all.
  • The Left Nav should contain logical groupings that are apparent to a user upon initial scan.
    Examples include alphabetical (i.e. brand listings, categories) or by size (i.e. bed size, clothing size).
  • Non alpha grouping, such as top revenue categories, are ok for a group of 4-5 links as that number of links is easily scannable.
  • For groupings with 10+ links, use alphabetical order. By Revenue or other non-apparent approach tests poorly for large groups of links.
  • If you are covering 80% of your traffic needs in your Vis Nav, a left nav with alphabetical categories offers a scannable list for the user and can be a safety net for performance.
  • Left Nav has to be all inclusive; it’s the only place that a user can access everything (all available level 2 category choices) on this page OR in the browse experience.
  • Recent winning A/B tests placed “shop by category” at the top of the Left Nav, alphabetical. This content change was the explanation for a shift in absence/presence findings over the years on the Appliances Vertical
Individual tests: For the Home (TID294), Appliances (TID292), For Home (TID174), Appliances (TID171)
Multiple Test Summary: 2013 Testing

"Alpha vs revenue" findings from Global Nav (Header) test: If revenue, users see the ends, but have a hard time with middle. This is relevant because this is ultimately an Information Architecture problem.
External articles From: Kissmetrics, Journal of Usability Studies, ConversionXL

3) Promos / Messages Content

Aka: banners / heroes / offers

Guidelines derived from research: Value to user.
  • Unless a promo appeals to the majority of the audience visiting that page or represents the majority of products on that page, it is just getting in the way of a user getting where they want to go.
  • A good promo message in the wrong location can negatively impact users' propensity to purchase. Consider where is the member in their journey. Remember, it’s not just online. Starting a member's experience with offers may actually hurt performance because a customer hasn’t yet found a product in which they are interested.
  • If needed, a promo can be placed below the first row of visual navigation without impacting page performance.



  • A promotion, hero or anything highly graphic has a high cost in row 1 above the Multi-Link Vis Nav. "Cost" in this case means bounce, exit, and reduced PDP visits. It is hard to measure revenue impacts this far up in the Top of Funnel.
  • In 2013 testing, most promotion spots were larger heroes. Their presence mostly performed negative including softlines. Since 2013, they were often thinner banners, but they still generally produced a negative impact if at top of page.
  • Clicktale heatmaps on promotions on vertical pages are often stone cold. Links/CTAs in Heroes generally have low engagement.
  • Content AND Styling are both believed to be impactful for promos that perform:
    - Heatmaps have repeatedly shown that if members see value in the promotion, those promotions will get more "heat"
    - There are some softlines tests that provide scent for promo content that may be effective.
Individual Tests: For the Home (TID294), Appliances (TID292), Jewelry (TID121)
Multiple Test Summary: Heroes and Visual Navigation
Other data: UX Research "State of the experience" (PDF), Clicktale Vertical page comparison with comments - June 2015 (PPT), Promotions Engagement Eye-tracking Study - good to review in its entirety.

A couple heat-map examples with commentary:
Example 1
Shoes vertical pg. (left) - Work boots is a dominantly male category; so it would be better on the men's page.
However, even on the men's shoes page (image on the right), there is no interaction with the promotion even though the category in the visual navigation is the #2 clicked item on the page. The clicks are all on the left nav and vis nav, and not on the CTAs in the promotion itself.

Example 2
The promos in the left nav and above the Vis Nav are essentially cold. Also note the #1 and #2 user actions are to use search and global navigation, indicating their needs are not being met on this page.

The user's goal is to get to the next page which may be why we have seen very little if any success with promotions on this page.


Everyone wants a simple answer...

Q: Where promos can go? (on the page or in the flow)?

A: The answer is not only WHERE on the page, but WHAT is the content and WHEN in the flow. See "Promos" section above.

Q: What is the optimal mix of navigation and promotion on the vertical page?
(Balancing Member Benefit: Increased product findability vs Biz benefit: increased BOP)

A: First, some context. Vertical and category pages are fundamentally for navigation; that's why it is a page and we don't just put the user on a product listing page. We are trying to assist them with decision making.
Research suggests users pay little attention to any promos at the vertical page. Users may be more open to auxiliary content and promotions closer to the product they seek; the content of the promotion and its relevance to a user are factors.
A series of tests "2014 - Vertical Page Deals Placement (TID171 thru TID174)" did focus on this question: 3 of 4 tests winners had the promo below VisNav. Women's Shoes (not a Vertical) had a very slight improvement when the promo was placed above VisNav vs below. The belief is that it was the content of the promo and its relevance to the user that created a different result versus the other tests.

Q: Where on the page can the merchant have control

A: (see wireframe at top of page. Consider: "left nav and row 1 require product mgmt approval")


Where else can I get data?


Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.