Clari-Fi

The majority of e-commerce transactions now take place on mobile devices, yet e-commerce images are typically designed and developed on desktops or laptops with large screens.

Clari-Fi speeds up the process of designing e-commerce images for mobiles, because it enables the visual clarity (i.e. perceptibility) of an image to be evaluated on a large screen device, and uses blurring to simulate the challenges of viewing the image at a thumbnail size within a mobile search results page.

The check levels within Clari-Fi are calibrated to population data, so provide a rational basis for target setting within design. The check levels are particularly suitable for specifying the level of visual clarity that a design agency’s output is expected to pass. Clari-Fi is a great preliminary check for your artwork, which can eliminate designs that are not worth testing with real users.

1. Visual details should be checked with both Clari-Fi AND a contrast checker

• Passing Clari-Fi means that visual details are presented at a big enough size, but visual details also need to be checked to ensure there is sufficient contrast between the foreground and background colours.
• We recommend using the Accessible Perceptual Contrast Algorithm (APCA) to check that the Lightness contrast (Lc) is greater than 60 (ideally), or greater than 45 (as an absolute minimum).
• An APCA contrast checker is bundled together with the PowerPoint and Photoshop versions of Clari-Fi (available from the Assessment tools page), and is also freely available at contrast.tools.
• The APCA Lightness contrast is recommended instead of the contrast ratio that appears in the Web Content Accessibility Guidelines (2.2), because the contrast ratio overestimates the contrast of black text on coloured backgrounds, and underestimates the contrast for white text on coloured backgrounds. These different methods for calculating contrast are discussed further in the article titled Does the contrast ratio actually predict the legibility of text?.

2. Visual details should also be checked with a colour vision deficiency simulator

• Some people may have difficulty perceiving graphical details for reasons other than visual acuity. In particular, colour vision deficiency (often called colour-blindness) affects approximately 8% of men and 0.5% of women. This typically makes red details on black backgrounds extremely difficult to perceive (and various other colour combinations)
• We recommend using a freely available colour vision deficiency simulator to check the colour combinations within your artwork, for example:
  • Inclusive design toolkit impairment simulator
  • Myndex impairment simulator

3. Clari-Fi should complement, not replace user involvement.

• Clari-Fi is a form of expert appraisal that focuses on ensuring details are presented at a big enough size, but real users may have many other issues with perceiving visual details.
• These include difficulties with determining where to look to find the information, and difficulties with understanding the meaning of the information.
• Clari-Fi is a great preliminary check that can reject designs that are not worth testing with real users, but passing Clari-Fi does not replace the need validate with real users.

Footnotes

1. This refers to the percentage of people who cannot perceive the details, because they are too small for them to see, while wearing any glasses or contact lenses that they usually wear for the majority of the day. See the Calculation assumptions panel for further details.

Footnotes

1. This refers to the percentage of people who cannot perceive the details, because they are too small for them to see, while wearing any glasses or contact lenses that they usually wear for the majority of the day. See the Calculation assumptions panel for further details.

Footnotes

1. Details that just pass Check Level A are approximately equivalent to test chart letters that have a stroke thickness of 0.25pt. When displayed on a typical high quality mobile phone screen (440 ppi) strokes of 0.25pt have a thickness of about 1.5 screen pixels, which is just about on the borderline of rendering properly, especially if the details exist within an image that has been JPG compressed. Details that fail Check Level A are unlikely to render properly on a mobile phone screen, so even if you had a magnifying glass, they still wouldn’t be perceivable.
2. This refers to the percentage of people who cannot perceive the details, because they are too small for them to see, while wearing any glasses or contact lenses that they usually wear for the majority of the day. See the Calculation assumptions panel for further details.

Using Clari-Fi to assess media adverts is more objective than an assessor looking at the digital artwork directly, and deciding if they think the 4 key messages (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 who hasn't seen the advert before, and whose knowledge of the brand portfolio is similar to that of the shoppers.

Nevertheless, the person who designed the advert will still gain considerable insight from performing the Clari-Fi assessment themselves, as long as they:

• are consciously aware of the advantage that their prior experience gives them in perceiving the details that they are assessing;
• do their best to mitigate this issue when performing the assessments.

Having the designer of the e-commerce image perform the Clari-Fi assessment allows for very fast iteration cycles of improvement and testing. However, it's important that these Clari-Fi assessments are validated by someone else who hasn't worked on the project, and ultimately validated with real users, as described further in the panel titled Important notes.

The assessor's eyesight ability doesn't usually matter, as long as their vision is good enough to drive, and they don't have any specific issues with near vision (wearing glasses or contact lenses if needed).

Clari-Fi is available in PowerPoint, Photoshop and browser-based versions, and these can be accessed from the Assessment tools page.

To assess an e-commerce image at Check Level AAA:

1. Recruit an appropriate assessor, as described in the panel titled Who should perform Clari-Fi assessments?
2. Set up a laptop or monitor screen for the assessment, so that the ‘Check Level AAA’ version of the image is visible on the screen (at the largest possible size), and nothing else.
3. Show this image to the assessor. The exact size at which the image is presented, how far away the monitor is and whether the assessor has perfect eyesight don’t usually matter. Within reasonable variations of these parameters, it is the applied blurring that limits the graphical details that can be perceived.
4. Ask the assessor to look at this image, and see if they can identify the 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?’.
5. Each of these messages passes Check Level AAA if the assessor can determine them from the blurred version of the image.

If any of the messages fail at Level AAA, this procedure can be repeated to test at Check Level AA, and then again at A.

It is fine to test at Level AAA first, and then repeat the procedure to test at Level AA. However, it is not suitable to test at AA and then subsequently test at AAA, because the details that you have already seen in the AA image will subconsciously assist your visual perception of the AAA image.

Firstly, follow the assessment procedure, which was described previously in the panel titled How to perform a Clari-Fi assessment. A summarised description of this procedure is:

1. Recruit an appropriate assessor, as described in the panel titled Who should perform Clari-Fi assessments?
2. Ask them to look at the Check Level AAA version of the image, and see if they can identify the 4Ws.
3. If any of the messages fail at Level AAA, then test again at Check Level AA, and then again at A.

Having completed this procedure, consult the bullet point list below:

Footnotes

1. This refers to the percentage of people who cannot perceive the details, because they are too small for them to see, while wearing any glasses or contact lenses that they usually wear for the majority of the day. See the Calculation assumptions panel for further details.
2. Details that just pass Check Level A are approximately equivalent to test chart letters that have a stroke thickness of 0.25pt. When displayed on a typical high quality mobile phone screen (440 ppi) strokes of 0.25pt have a thickness of about 1.5 screen pixels, which is just about on the borderline of rendering properly, especially if the details exist within an image that has been JPG compressed. Details that fail Check Level A are unlikely to render properly on a mobile phone screen, so even if you had a magnifying glass, they still wouldn’t be perceivable.

Population percentages refer to people who cannot perceive particular visual details, because they are too small. Importantly, there are many other reasons that might cause people to have difficulty perceiving these details. Clari-Fi assessments should be accompanied by checking contrast, simulating colour vision deficiency, and testing with users, as described in the Important notes section (earlier on this page).

All population figures presented on this page are estimated based on a household based UK survey¹ with 362 participants conducted in 2010, which tested people’s near vision. To find out more about the survey, see the page titled Relating the Clari-Fi levels to population data.

The test intended to measure people’s ‘real-world’ near vision ability (i.e. the level of near vision ability that they have for the majority of the day). So, if participants were wearing glasses or contact lenses before the test, then they kept them on. If they weren’t wearing any glasses or contact lenses before the test, then the test was conducted without glasses or contact lenses.

On this basis, all population figures on this page refer to the percentage of people who cannot perceive particular details ‘natively’, without any assistive strategies² or assistive devices³. This matches the aim of inclusive solutions, which shouldn’t require people to use assistive strategies or devices.

All assessments relate to perceiving particular details within an image, when it is displayed at a thumbnail size of 16 x 16mm, which is typical for a search results listing.

Footnotes

1. Towards better design, 2010. [data collection]. UK Data Service, SN: 6997. Available at: dx.doi.org/10.5255/UKDA-SN-6997-1
2. One common assistive strategy is to use a mobile phone, either as a portable magnifier, or by taking a photo and then zooming in. For people who are heavily shortsighted, another possible assistive strategy is to drop the glasses down low on the nose, look over the top of them, and hold the stimulus very close to the nose.
3. Common assistive devices include handheld magnifiers and reading glasses.