Visual Navigation – Single Link

This component uses visual cues to help members make navigational choices. Each choice is comprised of a single image and one link.

Production Examples

Visual navigation must be arranged in bootstrap rows of four or six. Each Single Link Visual Navigation element requires an image, link text, and a destination url.

Desktop/Tablet

More Production Examples

When Do I Use This?

Multiple studies have shown visual navigation to be "magnetic" and positively viewed by users as efficient. There are caveats, see below.

Usage Guidelines

1. Images

Use a white background on images. Image content should be representative of the category. Use multiple products where possible up to 3 in a collage. If using a single image, the product shown should be prominently located on the destination page.

2. Copy

  • Capitalization for the link should be Title Case (first left of each word is capitalized)
  • Exclude the word "shop" in the link name. Simply provide the destination name. Given its typical use as part of a group, aiding a user in making a decision between categories, extra words like "shop" are superflous.
  • Make sure to use the exact taxonomy label to avoid user confusion

3. Total Items

There is no limit, but it is recommended that they reflect the entirety of available category/subcategory children

4. Titles

Text Box-RTE Module 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. TheText Box-RTE Module can be used on the home page and vertical pages as well; it's just not as common.

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

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. Visual Navigation - Single Link Module: Was built to replace and improve upon existing functionality in WCS and to align with Ecommerce trends for category page visual navigation.

Research

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

State of Experience 2014

"Users generally find visual navigation designs appealing and efficient." Caveat: "...users assume that the entire breadth of a vertical / category is included. For deep verticals, this can lead users to wrongly assume Sears does not sell an item when it is not included in the curated (aka visual nav single link) section." See Page 11

view full study

Header Optimization

The winning header variant included visual navigation (aligns with standard). Finding based on click tracking: "When available, Image Navigation contributes two-thirds of the overall success rate." "Images catch users' attention more quickly than text. Images can help a user quickly narrow options." Caveat: "In some cases, Image Navigation has a strong potential to distract the user from the most appropriate answer in the flyout. Action to take: Implement Image Navigation with tight controls on categorization and standardization." See page 13-15

view full study

Overview - Vertical Page Testing

At Vertical pages (broad selection) Using only single link visual navigation performed worse than using the multi-link visual navigation. Learning: for broad selection, multilink visual navigation performs better - helps get the user further down the funnel. See "default" variants "promo @ top" variants - slide 10, 13 Using single link visual navigation performs better than a variant that looks like an "ad", see slide 7 Lawn & Garden

view full study

Outdoor Living Imagery Test

Moderate lift in Add to Cart clicks by going to Lifestyle/environment images.

view full study

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
  • Note: Link Behavior: Image, Title 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. Text Styling: Open-sans, 14px, font weight 600
  2. Padding: Image has side padding of 5% on left and right (done in the image)
  3. Alignment: Image and Title center
  4. Inputs Character count: Title 35 max length

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.