Clari-Fi helps to evaluate the visual clarity (i.e. perceptibility) of e-commerce images, focusing on whether the critical details will remain visible when the image is presented as a small thumbnail within a mobile search results page.
This page describes why Clari-Fi should be used to assess e-commerce images, then gives further details on who should perform the assessments, and what screen the images should be assessed on. A worked example is then used to describe each of the Clari-Fi Check Levels in turn (these are named Check Level AAA, Check Level AA and Check Level A). Finally, a summary is presented of the assessment process, and the calibration to population data.
The Free version of this tool processes one image at a time, and only shows Check Level AA. The Pro version of this tool allows you to process multiple images, and shows all 3 Check Levels.
On this page:
Clari-Fi helps to evaluate the visual clarity (i.e. perceptibility) of e-commerce images, focusing on whether the critical details will remain visible when the image is presented as a small thumbnail within a mobile search results page..
Why should Clari-Fi be used to assess e-commerce images?
The majority of e-commerce transactions now take place on mobiles, yet e-commerce images are typically designed and developed on desktops or laptops with large screens.
As defined in the GS1 MRHI guideline, there are 4 key messages that an e-commerce image should communicate (the 4Ws). These are: ‘Who is the brand?’, ‘What is it?’, ‘Which variety is it?’ (e.g. flavour/fragrance), and ‘HoW much of it is there?’.
Clari-Fi speeds up the process of optimising e-commerce images for mobiles, because it enables the visual clarity (i.e. perceptibility) of the 4Ws to be evaluated on a large screen device, and uses blurring to simulate the challenges of perceiving the 4Ws when the image is displayed within a mobile search results page.
Importantly though, Clari-Fi only simulates the challenges of perceiving graphical features due to visual acuity issues. Some people may have difficulty perceiving graphical details for other reasons, especially colourblindness.
Who should perform the assessments?
Using Clari-Fi to assess e-commerce images is more objective than an assessor looking at an unblurred version of the image, and deciding if they think the 4Ws are communicated clearly enough within it.
However, some degree of subjectivity remains in the process, because the assessor's familiarity with the brand portfolio can influence the details that they need to perceive in order to determine the 4Ws. To mitigate this issue, the assessments should be performed by someone whose knowledge of the brand portfolio is similar to the shoppers. The assessment should not be performed by the person that created the image that is being assessed!
Furthermore, Clari-Fi should be used to complement involving users in the design process. It does not replace the need for involving users.
How to perform the assessment?
When using Clari-Fi to evaluate an e-commerce image, the image is first processed in order to produce a blurred version of it. The assessment is then performed by showing the blurred version of the image on a large screen monitor, and checking whether the 4Ws can still be perceived, despite the apply blurring.
It doesn’t usually matter exactly how large the screenshot is presented on the monitor that is used for the assessment, or how far away the monitor is, or whether the assessor has perfect eyesight. Within reasonable variations of these parameters, it’s the applied blurring that limits whether the graphical details within the screenshot can be perceived. This makes Clari-Fi assessments quick and convenient to perform.
In order to demonstrate that it doesn’t matter exactly how large the e-commerce image appears on the screen that it’s being evaluated on, the image below shows 4 lines of test chart letters that have been blurred. The same image is then presented again at double the size, with the same degree of blurring applied. Note that doubling the size at which the image is viewed doesn’t make any difference to the readability of the letters, because this is being limited by the degree of blurring that has been applied, which is the same in both cases.
This effect is particularly convenient because it means the e-commerce image can be evaluated on a large screen monitor, and it doesn't matter exactly how large the monitor is, how far away the assessor is from the monitor, or what the exact zoom level is.
Worked example
A worked example will now be presented for the e-commerce image shown opposite. The image will be assessed against each of the Clari-Fi Check Levels in turn (these are named Check Level AAA, Check Level AA and Check Level A).
For all the assessments on this page, the level of blurring that is applied corresponds to a thumbnail size of 16 x 16 mm, which is typical for a mobile search results page.
The e-commerce image that is going to be assessed is first shown at an enlarged size, and within the context of a typical mobile search results page.
The e-commerce images within this mobile search results page are not shown at actual size.
Check Level AAA
Check Level AAA applies the most severe level of blurring, so visual details that remain visible at Check Level AAA are extremely easy to see. When the image is displayed within a mobile search results page, the percentage of people who might have difficulty perceiving these details is in the range 0-28%*.
See the understand page, to find out more about this calibration to population data.
All 4Ws passing Check Level AAA is a ‘best practice’ stretch target for e-commerce images. This target can usually be achieved for products that have a reasonably square aspect ratio, but may not be achievable for products that are tall and thin or flat and wide (because there isn’t as much space available within the pack image).
The 4Ws are first assessed against Check Level AAA. Any of the 4Ws that fail Check Level AAA are then assessed at less stringent Check Levels. The assessments are done in this order, because it’s better if the assessor hasn’t seen the e-commerce image before, and in this way the details of the e-commerce image are progressively revealed throughout the assessment process.
Considering the example opposite:
- Determining that it’s made by Dove (Who is the brand?) passes Check Level AAA, so the percentage of shoppers who might have difficulty perceiving this message is in the range 0-28%* (when the image is displayed within a mobile search results page). This message meets the ‘best practice’ stretch target for e-commerce images.
- Determining ‘What is it?’, ‘Which variety is it?’ and ‘HoW much of it is there?’ fail at Check Level AAA, so these messages are now assessed against Check Level AA.
Clari-Fi has processed this e-commerce image to apply blurring at Check Level AAA.
* Population percentages refer to people who might have difficulty because of visual acuity issues. Some people may have difficulty perceiving these details for other reasons, especially colourblindness.
Check Level AA
Check Level AA applies a moderate level of blurring, so visual details that remain visible at Check Level AA are reasonably easy to see. When the image is displayed within a mobile search results page, the percentage of people who might have difficulty perceiving these details is in the range 28-52%*.
Check Level AA should be the minimally acceptable level of visual clarity for e-commerce images+. This target should be achievable for all e-commerce images, and Unilever now requires that any new or updated e-commerce images must pass Check Level AA before they are sent to retailers.
Considering the example opposite:
- Determining that it’s a box of soap bars (What is it?) passes Check Level AA, although this is a judgement call that may depend on the familiarity with the brand portfolio. The percentage of shoppers who might have difficulty perceiving this message is in the range 28-52%* (when the image is displayed within a mobile search results page). This message meets the minimally acceptable level of visual clarity for e-commerce images+.
- Determining ‘Which variety is it?’ and ‘HoW much of it is there?’ fail at Check Level AA, so these messages are now assessed against Check Level A.
Clari-Fi has processed this e-commerce image to apply blurring at Check Level AA
* Population percentages refer to people who might have difficulty because of visual acuity issues. Some people may have difficulty perceiving these details for other reasons, especially colourblindness.
+ 28-52% of the population having difficulty wouldn’t normally be considered a minimally acceptable level. However, designing for mobile screens is an extreme challenge, and many details within mobile interfaces would be improved if they could at least reach this level of visual clarity.
Check Level A
Check Level A applies a small amount of blurring. When the image is displayed within a mobile search results page, details that pass Check Level A will be visible to some degree, but these do not reach the minimally acceptable level of visual clarity for an e-commerce image. The percentage of people who might have difficulty perceiving these details is in the range 52-100%*.
Details that fail Check Level A are extremely difficult, if not impossible to see. When the image is displayed within a mobile search results page, these details are so small that they are probably beyond the limit of human vision.
Considering the example opposite:
- Reading the text to determine that it’s the ‘beauty cream’ variant (Which variety is it?) passes Check Level A, so the percentage of shoppers who might have difficulty perceiving this message is in the range 52-100%* (when the image is displayed within a mobile search results page). This message does not reach the minimally acceptable level of visual clarity for an e-commerce image.
- Determining that the box contains 4x100g bars (HoW much of it is there?) fails Check Level A. When the image is displayed within a mobile search results page, the details that convey this message are so small that they are probably beyond the limit of human vision.
Many products still use pack shots for their e-commerce images, in which case it is likely that one or more of the 4Ws will fail Check Level A. Digitally enhancing these images so that they pass Check Level A would be an improvement, but Check Level AA should be the minimally acceptable level for e-commerce images.
In order to pass Check level AA, it is likely that the image will need to be digitally manipulated to amplify the communication of the 4Ws, and omit unnecessary details. See the Manipulating the front of pack page within the Mobile Ready Hero Image Guidelines for further information.
Clari-Fi has processed this e-commerce image to apply blurring at Check Level A
* Population percentages refer to people who might have difficulty because of visual acuity issues. Some people may have difficulty perceiving these details for other reasons, especially colourblindness.
Summary of the assessment process
The Clari-Fi assessment process is summarised as follows:
- On a large screen laptop or monitor, show the Check Level AAA version of the image to someone who hasn't seen the image before, but is familiar with the brand in general. Ask that person if they can identify the 4Ws in the image ('Who is the brand?', 'What is it?', 'Which variety is it?' (e.g. flavour/fragrance), and 'HoW much of it is there?').
- Each of these messages passes Check Level AAA if the assessor can determine them from the blurred image 'quickly and with certainty'.
- If the 4Ws fail at Check Level AAA, then the assessment can be repeated at Check Level AA, and then again at Check Level A. The assessments are done in this order, because it’s better if the assessor hasn’t seen the e-commerce image before, and in this way the details of the e-commerce image are progressively revealed throughout the assessment process.
- The next panel describes how these Check Levels are calibrated to population data.
The level of blurring that's applied by Clari-Fi is calibrated to survey data that was gathered using a handheld test card, so the design team can be reasonably confident that if the 4Ws appear 'easy to see' in the blurred version of the e-commerce image, then the vast majority of shoppers will find the 4Ws 'easy to see', even when the image is presented as a small thumbnail within a mobile search results page.
In order to assess an e-commerce image in Clari-Fi, the assessor determines whether the 4Ws can be determined 'quickly and with certainty' in the blurred version of the image. It is important for the assessor to consider whether the 4Ws can be determined 'quickly and with certainty', in order to predict the performance of the image when shoppers are fast scrolling through a mobile search results page.
Summary of calibration population data
The following table summarises how the different Check Levels are calibrated to population data.
| If the details within the image remain perceptible at … | then the percentage of people that might have difficulty perceiving these details is … | and the conclusion is … | ||
|---|---|---|---|---|
| Check Level AAA | 0-28%* | Best practice | ||
| Check Level AA | 28-52%* | Minimally acceptable+ | ||
| Check Level A | 52-100%* | Not good enough |
Details that fail Check Level A are impossible to see. When these details are displayed on a mobile phone screen, they are so small that they are beyond the limit of human vision.
If you want to find out more about the survey that underpins the population data within this tool, see understand page.
* Population percentages refer to people who might have difficulty because of visual acuity issues. Some people may have difficulty perceiving these details for other reasons, especially colourblindness.
+ 28-52% of the population having difficulty wouldn’t normally be considered a minimally acceptable level. However, designing e-commerce images for mobile screens is an extreme challenge, and many e-commerce images would be improved if they could at least reach this level of visual clarity.
Feedback
We would welcome your feedback on this page:
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.