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.
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).
- 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.
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.
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.
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.
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.
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.
- 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.
- 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."
Baymard Homepage & Category best practices
Baymard praised this component specifically - see page 187.view article
- Hardlines height: 1200px, width: 1200px. Softlines height: 1800px, width: 1200px. 144dpi, PNG, no compression.
- 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.
- (see specs below)
- Title is 18px, #0670a4
- 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
- Title and links align left
- Title max length is 30 characters
- Link text max length is 22 characters
- 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