skip to primary navigation skip to content
 

Standard pack layouts

All products may use the following standard layouts, which are shown on the right and described in more detail below.

Whole pack

For some products, product recognisability is best achieved by showing the whole pack, without any zooming or aspect ratio distortion. This is especially valuable when the product is a distinctive shape. It is also useful when the pack shape and aspect ratio help shoppers to compare the relative size of different products in the same range.

Nevertheless, "if done carefully, a small change in the shape of the pack can sometimes be helpful", as noted in the GS1 guideline. In particular, it may sometimes be beneficial to stretch the shorter side of the product image slightly to create more space on the digital pack to communicate the 4Ws . If this is done, then care must be taken to retain product recognisability and the side should not be stretched more than 150%.

When showing the whole pack, the image may be complemented by off-pack communications. See the further details on using off pack communications at the bottom of this page.

Showing depth

  • Suppliers are encouraged to give some impression of depth within whole-pack hero images, so that they look more like a real product.
  • For cuboid-shaped products, this can be achieved through a slight camera elevation.
  • For more cylindrical products, this can be achieved through lighting effects.
  • ¾ angle should not be used for standard packs, because it reduces the visual clarity of the front pack graphics. (Note ¾ is encouraged for some multipacks, because it can help to communicate the number of items in the pack.)

Stretch to square

In this layout, the shorter side of the product image is stretched up to 150% so that the Hero Image fills the maximum available space within the square canvas. This layout should only be used when:

  • The product shape does not play a significant role in brand recognition or differentiation of the product type or size. If it does, then use the Whole pack layout instead.
  • The aspect ratio of the product is close to square (less than 3:2). Otherwise use the Zoom pack layout instead.

If the pack is stretched to fill the whole square, then there is neither space nor necessity to use off-pack communications. The whole square is already available for communicating the 4Ws within the digital pack.

Note that the digital pack does not have to be an exact replica of the front of pack. The front of pack can be manipulated to amplify the communication of the 4Ws and omit unnecessary details (see Manipulating the front of pack). As part of this, size can be included as a square lozenge in the bottom right-hand corner of the digital pack, if desired. This is shown in the Knorr example opposite.

Zoom pack

In this layout, the product image may be zoomed by up to 150% and then cropped to only show a portion of the product image. For portrait products, the top portion of the image is shown, while for landscape products the left portion is shown. This layout should only be used when:

  • The overall product shape does not play a significant role in brand recognition or differentiation of product type or size. If it does, then use the Whole pack layout instead.
  • The aspect ratio of the product is more than 3:2 (i.e. the product is tall and thin or flat and wide). If the aspect ratio is close to square (less than 3:2), use the Stretch to square layout instead.

The image should not be zoomed by more than 150%, because the greater the zooming, the less the Hero Image resembles the real product. If an image is zoomed too much, then shoppers may become concerned that information is being hidden from them.

When using the Zoom pack layout, the image may be complemented by off-pack communications. See the further details on using off pack communications at the bottom of this page.

Communicating size

Size information should always be communicated within a Mobile Ready Hero Image. The guidance for how best to do this depends on whether size information is present in the actual front of pack.

If size information is present on the front of pack

If size information is present on the actual front of pack, then you can:

  • Amplify this information within the digital pack, OR
  • Use an off-pack size lozenge in the bottom right-hand corner.

When size information is present on the front of pack, it is usually better to amplify this information within the digital pack, because this communicates all of the 4Ws in a visually integrated manner. However, for packs that are tall and thin or flat and wide, there might not be enough space to communicate all of the 4Ws such that they pass the visual clarity test. In this case, it can be prudent to remove size from the digital pack in order to make more space to communicate the other messages, and instead communicate size using an off-pack lozenge in the bottom right-hand corner.

If size information does not exist on the front of pack

If size information does not exist on the front of pack, then you can:

  • Use an off-pack size lozenge in the bottom right-hand corner, OR
  • Take assets that describe size on the back of pack, and add them into the digital pack. The other assets will likely need to be manipulated and repositioned to make this work.

If size information does not exist on the front of pack, it is usually best to communicate size using an off-pack lozenge in the bottom right-hand corner. The alternative approach of moving size onto the digital pack can work well if the front of pack has a plain area where this text can be positioned. However, it is often difficult to make this work in consistent manner across a product portfolio, while also passing the visual clarity test. The degree of asset manipulation required to get this to work might make the digital pack no longer recognisable as a representation of the front of pack.

Note that some retailers will not accept images that contain off-pack size lozenges - see the further information on satisfying conflicting guidelines for off-pack communications.

Rationale

In physical stores, the relative size of products is nearly always obvious. However, when shopping online, it is often ambiguous, because all the images are presented at the same size. This can cause confusion, and most online grocery shoppers can describe an experience where they have accidentally bought a product of the wrong size.

To minimise this negative experience, size information should always be communicated within the image tile, or immediately next to it by the retailer. This applies even if a brand only makes a product in a single size because similar products from other brands could be a different size.

Avoiding showing contents outside of packs

In standard pack layouts, the contents of the pack should not be shown outside of, or next to the pack. This adds visual disruption without helping to communicate any of the 4Ws. If suppliers want to show the texture or usage of the product, this should be done with secondary images.

Showing individual items outside of a pack is only allowable within multipack layouts, but these layouts can only be used if the product contains discrete items, and the number of items is described on the shelf label. See the additional layouts for multipacks for further information.

Deciding if a strip is appropriate

Firstly, note that the GS1 guideline explicitly states that strips are not conformant. However, the guideline also acknowledges that the 4W's should pass its visual clarity test, and that for packs that are tall and thin or flat and wide, this is an unsolved issue for which the GS1 guidelines provide no viable solution.

Our view is that if every available strategy has been used to maximise the visual clarity of the 4W's, and it's still not possible to pass the visual clarity test, then using a strip is better than forcing shoppers to rely on reading the product title. In this regard, the Cambridge and GS1 guidelines diverge. In order to meet both guidelines, we recommend that if a strip is used, a duplicate version of the image should be created that omits the strip, so that a version that’s conformant with the GS1 guideline is always available, and retailers can choose the version that works best for their platform. (see further information on Satisfying conflicting guidelines on off-pack communications).

If a strip is used, it should be vertical for portrait products and horizontal for landscape products. Furthermore, it should communicate either ‘what is it’ or ‘which variety is it’. A strip should always accompany a size lozenge that communicates ‘HoW much of it is there?’ (as described in the Communicating size panel above). Communicating these pieces of information off-pack should give more room to amplify the remaining ‘Ws’ within the digital pack so that they pass the visual clarity test. Read more about designing strips.

Satisfying conflicting guidelines for off-pack communications

Summary: Whenever size lozenges and/or strips are used, duplicate version(s) of the image should be created that omit these communications, so that a version that’s conformant with the GS1 guideline is always available, and retailers can choose the version that works best for their platform.

Further details

The GS1 guideline allows the use of off-pack size lozenges as an interim measure. It explicitly states that strips are not conformant, yet also states that the 4Ws should pass its visual clarity test. For packs that are tall and thin or flat and wide this is an unsolved issue for which the GS1 guidelines provide no viable solution.

Furthermore, some retailers around the world:

  • will refuse hero images that contain any off pack communications
  • will accept hero images that contain size off pack, but refuse any that contain strips
  • will accept any hero images, including those that contain embedded size lozenges and/or strips

Furthermore, Google’s shopping feed will not include any images that contain any off-pack communications. However, at the time of writing (June 2019), the vast majority of retailers around the world are not capable of presenting size information immediately adjacent to the image in any other way. Presenting size information immediately adjacent to the image is important because it falls within the field of view when the shopper focuses on the image.

The following guidelines represent Cambridge’s best attempts to address these conflicting requirements:

  • Whenever size lozenges and/or strips are used, duplicate version(s) of the image should be created that omit these communications, so that a version that’s conformant with the GS1 guideline is always available, and retailers can choose the version that works best for their platform.
  • Suppliers and retailers are encouraged to use e-commerce image solution providers who can automate this process at scale using Dynamic imaging.
  • Using dynamic imaging should make it possible for Google to specifically request the version of the image without any off pack communications.
  • When the image is viewed without its off-pack communications, shoppers will have to rely on the product title to distinguish any of the 4Ws that cannot be discerned from the image. The effectiveness of this strategy may vary depending on the shopper behaviour, the retailer, and whether the image is viewed on a mobile or a desktop.

Feedback

We would welcome your feedback on this page:

Your name:


Your email:


I would like to receive the Inclusive Design Toolkit news bulletin. This bulletin showcases people’s achievements with inclusive design tools, and highlights new tools. It comes out once or twice a year.

I would be interested in contributing to the Inclusive Design Toolkit news bulletin.

I would like a FREE activation code for the Inclusive Design Toolkit's impairment simulator software.

Your comments:


Please leave this field blank (it's a spam trap):
Submit feedback

Privacy policy. If your feedback comments warrant follow-up communication, we will send you an email using the details you have provided. Feedback comments are anonymized and then stored on our file server. If you select the option to receive or contribute to the news bulletin, we will store your name and email address on our file server for the purposes of managing your subscription. You can unsubscribe and have your details deleted at any time, by using our Unsubscribe form. If you select the option to receive an activation code, we will store your name and email address on our fileserver indefinitely. This information will only be used to contact you for the specific purpose that you have indicated; it will not be shared. We use this personal information with your consent, which you can withdraw at any time.

Read more about how we use your personal data. Any e-mails that are sent or received are stored on our mail server for up to 24 months.

Unless otherwise stated, all images are © Unilever and used with permission. Walkers is a trademark owned and designed by PepsiCo and used with permission.