Visual Navigation – Multi-Link

This component uses visual cues to help members make navigational choices. A row is comprised of four columns, each consisting of a single image and multiple links.

Production Examples

Desktop/Tablet

Typical use of component shown.

More Production Examples

When Do I Use This?

Use to help members navigate amongst a broad product selection (at upper levels of hierarchy; i.e. taxonomy level 1 or 2 "Vertical" or Category pages).

Usage Guidelines

  • It should be given primary real estate at the top of the page.
  • When used in a row, it represents the taxonomy of that vertical or category.
  • Each instance of the component should point to a high value category and corresponding high value sub-categories.
  • Subcategory Links should be taxonomy children of the Category Title Link (parent).
  • Don't use Visual Navigation - Multi-Link if the category in each instance is shallow (note the required minimum of 2 child links); instead, use Visual Navigation - Single Link
  • Use only 4 columns on any page template, due to character counts at smaller viewports.

1. Position

The multi-link row should always be placed at the top of the page. This component is effective at helping members select amongst a broad product selection (at upper levels of hierarchy); as such, it should be given primary real estate.

2. Recommended Frequency

It is recommended only one multi-link row be placed on a page.

3. Images

Image content should be representative of the product selection in that category. Use multiple products where possible; 3 images maximum per collage. Backgrounds should be white. Always use product images. Never use text-based images - ex: Hot Deals, Under $25, etc

4. Copy & Text Content

Capitalization is Title Case.
Content: exclude "shop", simply provide the destination name. Make sure to use the exact taxonomy label to avoid user confusion.

5. Provide a Title

The Text Box-RTE Module (link) is typically placed above the component on special project (e.g. pages other than Vertical and category) templates to label the type of information the component row is displaying. The Text Box-RTE Module can be used on the home page and vertical pages as well; it's just not as common.

6. Category Topics/Types

Avoid "one of these is not like the other" within a given row. If changing topics/type from category navigation to another, start a new row (example: promotional i.e. 50% off, BOGO or "shop by size / brand"). Signal the change to the user with label text (see above) or changes in imagery style, or consider using a different ASAP module.

Rationale

The combo of a visual anchor (when following content guidelines) and a hierarchical visual relationship of Category Links and Subcategory Links allows multiple points of confirmation that a user is making the right decision, and speeds user decision making. Additionally the presence of a sample of subcategory links allows a user to "skip a step" if their desired destination is displayed.
Visual Navigation Pattern: "A picture is worth a thousand words". This pattern relies on visual cues to facilitate making a navigation choice. A user is able to quickly digest information and make a decision via visual comparison.

Research

Overview - Vertical Page (ASAP) Testing 2014

3 of 4 tests found that multi link in top position performed best ( HA Vert., Tools Vert., BB&H Vert., Women’s Shoes)

view full study

Overview - Vertical Page Testing 2013

At Vertical pages (upper levels of hierarchy) Using single link visual navigation performed worse than using the multi-link visual navigation in row 2.
Learning: for broad product selection, multilink visual navigation performs better - helps get the user further down the funnel. See slide 10, 13: "default" variants vs "promo @ top" variants. Also, Hero above multi-link visual navigation performed worse than when multilink was top of page - see all included tests.

view full study

Tools Vertical Test - Member Profile Oriented Navigation

A content test of multi-link visual navigation. 2 factors: lifestyle imagery and narrowing approach. Findings suggest members would rather take a product focus rather than "type of person/personality" focus for narrowing. People are complex, our likelihood of really nailing "who they are" is slim - Recommendation: use personalization instead.

view full study

Baymard Homepage & Category Best Practices

Guideline 44, p173 "In general, the subjects experienced two type of issues: thinking the thumbnail would lead to a specific product, and misunderstanding what the thumbnail depicted.

  1. Thumbnails leading to a category should either heavily crop the product it depicts or include multiple products to avoid misleading users into believing it represents a specific product rather than a category.
  2. Misunderstanding what it depicts - When a category covers multiple product types, it is important that the thumbnail indicates the breadth of the category. This is best done by showing multiple different products and especially showing the different product types. For some categories, it may be impractical to feature all the product types of the category. ..In apparel and home decoration verticals, the imagery used often depicts whole outfits or decorated rooms. Such contextual images, depicting the product in a context, are especially prone to mislead users...In general, but especially in apparel and home decoration, make sure that contextual images only put focus on the product types it leads to."

view article

Baymard Homepage & Category best practices

Baymard praised this component specifically - see page 187.

view article

Design Specs

ASAP Input Requirements:
Image upload:
  • Hardlines height: 1200px, width: 1200px. Softlines height: 1800px, width: 1200px. 144dpi, PNG, no compression. 

  • Required/optional:
    • required - Image, Title, Link
    • required - Alt Text
    • required - Scene 7 Preset (how it renders on site. Default 250px wide)
    • required - subcat links 1,2
    • optional - subcat links 3,4,5
    • optional - Show "See All" link
    • Note: Link Behavior: Image, Title and "see all" map to the main link "Link"
    • Note: Scene 7 Preset - Default is 250px wide. Generally use the default setting.
  • Character counts:
    • (see specs below)
    Note: make sure to set the parent Bootstrap Row "Row style option" to "right vertical divider exclude last"

    Design & Build Specs
    1. Title is 18px, #0670a4
    2. Image center aligns and has a side padding of 5% on the left and right. Image has a min width of 114 and will max out at 90% of the container and be centered within it
    3. Title and links align left
    4. Title max length is 30 characters
    5. Link text max length is 22 characters
    6. Title and links have 16px of left padding, the Title and the list of links have a top padding of 16px, each individual link has a bottom padding of 16px

    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.