Hero – Single Image

This component includes a single image and 0-4 text CTAs/links

Production Examples

This component includes a single image and 0-4 text CTAs/links

Desktop/Tablet

Single Image Example 1

A hero with optional CTA bar, using all available CTAs (4)

Slimmer image with optional CTA bar, using 3 CTAs. Testing shows performance concerns when hero is present. This is because navigation & products are shown higher up on the page, allowing our members to find the products they're looking for faster.

When Do I Use This?

This component is typically used for marketing and promotions. The linked destinations should be Vertical, Categories or Subcategories, not promotions.

Usage Guidelines

1. Image Copy

Copy can be put in the image but the copy cannot be a value statement or promotional offer (pricing or % off). As promotions rapidly change, this image would need to be recreated each time. Offers should only be put in html text where they can be maintained easily; ex: CTA bar of this module, or Hero with Text Box module

Image with value statement and call to action.

Image with promotional content embedded in the photo.

2. Fonts Within Images

Font within image is at the discretion of the designer The fonts used within an image should match the style of the page and the brand. Use Open Sans for CTAs and body copy. Follow copy guidelines for CTAs, capitalization.

Image with brand approved fonts.

Image with non-brand fonts.

3. Clickable Items

Make clear: 1. Which parts of the component are clickable 2. What the destination is for each area if clicked 3. Whether it leads to one or many paths

In this image, you can shop all or shop per category.

It is not clear how to shop the promotional items.

4. Avoid using a full-height hero without a CTA

When using this component as a Hero in its taller incarnation, it must include a CTA (CTA link bar or CTA in image)

Full height single image hero with CTAs.

Full height single hero without CTAs.

5. Link Bar Colors

When using the optional link bar, make sure the colors you select are ADA compliant and visually correspond to the hero image.

Rationale

Built in response to capabilities in WCS. CTAs as link text for easy maintenance by author. Used for promos...(see above)

Research

A/B Tests Involoving Heroes on Category/Vertical Pages

Across multiple tests on category/vertical pages: HA - performance decrease w/ heroes Softlines - we didn't get strong negatives w/ heros. Takeaway - can't say absolutely that they're always negative.

view full study

Baymard Homepage & Category best practices

"Make it clear if multiple items within a single visual element lead to one or many paths." Guideline 71, page 308

view article

State of the Experience 2014

"Hero Promos: Sparse promos have replaced dense, traditional heroes, lightening the page weight as focusing users on their search." Page 11

view full study

Design Specs

ASAP Input Requirements

Image upload:

  • Must upload 1200px width image 144dpi, PNG, no compression, but height is variable. Max image upload is a 3:1 ratio - 1200 x 400.

Required/optional:

  • required - Main Image Location (source image URL)
  • required - Alt Text
  • optional - Link Image to
  • optional - Text CTAs/Links: Font Color, Background Color. See usage guidelines above.
  • optional - Text CTAs/Links: 0-4 text CTAs/links.

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: 14px, line­height 32px, font­weight 600
  2. Padding: First Link has a margin left of 0 and padding left of 22px, Second Third and Fourth all have margin left of 30px and padding left of 22px
  3. Alignment: Centered
  4. inputs ­ character count: First Link Text: max length 19, Second Link Text: max length 19, Third Link Text: max length 19, Fourth Link Text: max length 19

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.