Grid teaser

Component Description#

Grid teaser are internal ads for promoting deeper view of Lidl's assortment. Internal graphics like the grid teaser component can – when linking to relevant content – be immensely helpful to users. When Grid teasers are placed within a product list it should be handle with care. Users tend to interpret it as the end of the list.

component preview#

1x1 Teaser#

XSSMMDLG
preview-xspreview-smpreview-xspreview-lg

2x1 Teaser#

XSSMMDLG
preview-xspreview-smpreview-xspreview-lg

4x1 Teaser#

XSSMMDLG
preview-xspreview-smpreview-xspreview-lg

1 Grid teaser image#

2 Grid teaser headline#

3 Teaser copy text#

Recommendations of Use – Do's and Don'ts#

Grid teaser usage#

Grid teaser Do'sGrid teaser Don'ts
  • linking to relevant content like sub categories / thematically similar categories
  • Grid teasers without context to the product list topic can lead users leave the page

Image & Text#

Grid teaser Do'sGrid teaser Don'ts
 dos-xsdonts-xs
  • Users need emotional images to get inspired and get excited about a product or content.
  • All emotional images should be directly related to the products itself, enhancing users’ understanding of the products and its use cases.
  • The teaser text should provide the user with a first impression of the content.

  • Avoid unclear image content - grid teaser should show the theme/title of the campaign in terms of content

  • Ensure size of images is fitting for all breakpoints and images are not cropped.

SEO-Requirements#

Recommendation: if possible, use Grid Teaser to link to existing categories (/h/-directory). This ensures that permanent category-assortment profits from campaign-linkjuice and traffic.

Accessability, WCAG#

All elements and ingredients of the Grid teaser component must fulfill the guidelines of the WCAG

Source references#

  • baymard.com/blog/avoid-these-ecommerce-graphics
  • Evaluation of customer survey - Hero Teaser