There are many decisions to be made in creating a Mobile Ready Hero image, such as:
- Should size be presented off pack or on pack?
- Should zoom be used?
- Should an item that is inside the pack be pulled out?
For any of these questions, the answer is usually to choose whichever option best enables consumers to recognise the product and distinguish it from other similar products, when the image is viewed at approximately 16 x 16mm on a mobile.
On this page
It is important that shoppers can distinguish their target products from other similar products on a mobile device. They can do this by reading the words in the product title or by looking at the product image, often at high speed. Some shoppers rely more on the product titles, and others rely more on the images, as described on the page on shopper behaviour.
The product title is typically presented large enough that the majority of shoppers are able to read it. However, not all shoppers do so accurately because they tend to scan the titles at high speed. In fact, nearly everyone who has done grocery shopping online can tell a story of accidentally buying a product that was not what they thought it was (especially on size).
As a result, it is important to consider the visual clarity of the information in the image as well as that in the product title. The key question is whether the shoppers can look at the image at a realistic size (typically 16 x 16mm) on a mobile and correctly identify the 4Ws.
Some approaches to testing visual clarity have been developed by the Cambridge Engineering Design Centre. The SEE-IT method, in particular, is well suited for testing Mobile Ready Hero Images. A hero image can be considered to ‘pass’ a minimum level of visual clarity if all of the 4Ws score less than 25% exclusion using this test.
Another helpful approach is using the Gaussian Blur function, which is available in most image manipulation programs. In Photoshop, a Gaussian Blur with a radius of 34 pixels applied to a 3000 x 3000 pixel image simulates the challenges of viewing that image at 16 x 16 mm on a mobile phone held 40cm from the user. This approach is particularly beneficial when discussing and reviewing images presented on large screens during meetings.
A hero image can be considered to ‘pass’ a minimum level of visual clarity if all of the 4Ws remain distinguishable in the blurred version of the image. This level of blurring is explicitly specified in the Check visual clarity section of the GS1 guideline.
This blurring process is automated in the Clari-Fi tool developed by the Cambridge Engineering Design Centre. The tool uses PowerPoint to produce the simulated images, and can process lots of images at the click of a single button.
Clari-Fi is now available to download from clarifi.inclusivedesigntoolkit.com. Single user licences for Clari-Fi cost £250 + VAT.
A/B split tests
An A/B split test is run live on a retailer’s actual website and/or app. When shoppers visit this website or app, half of them (randomly selected) are shown packshots, and the other half are shown hero images. The actual product sales for the two different conditions are then compared
A/B split tests have the advantage of running large sample sizes at comparatively low costs, and they measure sales uplift, which is the single outcome metric that suppliers and retailers both care most about. However, the results are averaged across the whole portfolio of images tested, so this kind of test is of limited use for diagnostics or comparing multiple alternative options. Furthermore, even if there is no sales uplift associated with a change, there may be many other benefits that are not captured by this kind of test, such as enabling people to shop faster and with fewer errors.
Shopper research involves recruiting shoppers to perform particular tasks in a controlled environment. The shoppers might be prompted with purchasing instructions, or might be asked to spend their own money buying their own things. The research might involve shopping on live retailer sites, or simulated testing environments. It may also include:
- Testing various sets of images, which may include different mixes of hero images and pack shots,
- Observing the shop as it happens,
- Tracking the shoppers’ eyes and interaction patterns,
- Following up with interviews.
Effective shopper research needs to be planned carefully with appropriate experimental design. It has the advantage of complementing quantitative outcome data with qualitative information from interviews. However, it is comparatively expensive to run, so sample sizes are usually fairly small.
We recommend using a visual clarity test as the primary method for informing the choices made when designing hero images. This is the fastest test, and so can be applied at scale for many products and many alternatives. It can also measure the visual clarity of each of the 4Ws in turn, which gives feedback for image improvements.
However, it is important to realise that shoppers may like or dislike an image for many reasons, and this may impact their purchasing behaviour. As such, Cambridge recommends complementing visual clarity tests with A/B split tests and other methods of shopper research.
We would welcome your feedback on this page:
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.
Thanks for sending your feedback!