skip to primary navigation skip to content

Clari-Fi

Clari-Fi uses blurring to simulate the challenges of viewing small icons, images and text on mobile screens

 

Worked example for assessing mobile screenshots

Clari-Fi helps to evaluate the visual clarity (i.e. perceptibility) of icons, images and text that are intended to be viewed on a mobile device.

This page presents a worked example for a mobile version of a library map, as shown opposite.

This page first introduces the Clari-Fi assessment process, then showcases the details within the map that will be assessed, and then describes each of the Clari-Fi Check Levels in turn (these are named Check Level AAA, Check Level AA and Check Level A). Finally, a table is presented that summarises the calibration of the different Check Levels to population data.

On this page:

Introduction to the Clari-Fi assessment process

Interfaces for apps and websites on mobile devices often contain lots of icons, images and text. However, the graphical features within these interfaces are typically designed and developed on desktops or laptops with large screens.

Clari-Fi speeds up the process of developing and evaluating interfaces for mobiles, because it enables the visual clarity (i.e. perceptibility) of the features within an interface to be evaluated on a large screen device, and uses blurring to simulate the challenges of viewing these features on a mobile device.

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 confident that if the graphical features of their interface appear 'easy to see' in the blurred version of the image, then the vast majority of their users will find these features 'easy to see' on their mobile devices.

The process will now be described in more detail for icons, although the same process is also applicable for any other kinds of graphical features within an interface.

Clari-Fi applies a calibrated level of Gaussian blurring to an entire mobile screenshot, which contains the icon(s) that are being evaluated. The assessor then 'zooms in' on the blurred version of these icon(s), and evaluates whether the salient details within the icons remain visible, despite the applied blurring.

This process is more objective than an assessors looking at an unblurred version of the icon, and deciding if they think the salient details are sufficiently clear. However, some degree of subjectivity remains in the process, because the assessor's familiarity with the icon(s) being assessed can influence the details that need to be perceived for the icon to work. To mitigate this issue, the assessments should be performed by someone whose knowledge of the set of icons is similar to the users. The assessment should not be performed by the person that created the icons that are being assessed!

When evaluating the blurred versions of these icons, it doesn’t matter exactly how large they appear on the screen that they are being viewed on, as long as they are viewed at a reasonably large size, such that the applied blurring is the limiting factor on whether the salient details 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 icons appear 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 assessment can be performed 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.

Map details that are assessed

The image below shows the details of the map that will be assessed within this worked example. These particular features have been chosen because they illustrate a range of text sizes and icon shapes that pass or fail the different Clari-Fi Check Levels.

The visual clarity (i.e. perceptibility) of these particular features will now be assessed. For all the assessments on this page, the screen size is assumed to be 68 mm wide, which corresponds to iPhone 6+ / 7+ / 8+.

This library map was designed for a mobile device. However, this worked example is intended to be viewed on a desktop, or laptop with a reasonably large screen (15" or bigger).

Check Level AAA

Check Level AAA applies the most severe level of blurring, so graphical details that remain visible at Check Level AAA are extremely easy to see. When viewed on a mobile device, the percentage of people who might have difficulty perceiving these details is in the range 0-28%*. When designing icons for mobile devices, this can be considered a best practice level of visual clarity. See the understand page, to find out more about this calibration to population data.

The icons within the screenshot are first assessed against Check Level AAA. Any of the icons 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 icons before, and in this way the details of the icons are progressively revealed throughout the assessment process.

In order to help understand Check Level AAA, the following features are assessed:

  • The text ‘The Museum of Interesting Facts’, and the icon that accompanies it. Both of these pass Check Level AAA, so the percentage of people who might have difficulty perceiving these details is in the range 0-28%*. This can be considered a best practice level of visual clarity.
  • The text ‘Cafe’, and the icon that accompanies it. Both of these fail Check Level AAA, so these features will subsequently be assessed at a less stringent check level.

* 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 graphical details that remain visible at Check Level AA are reasonably easy to see. When viewed on a mobile device, the percentage of people who might have difficulty perceiving these details is in the range 28-52%*. When designing icons for mobile devices, this can be considered a minimally acceptable level of visual clarity.

In order to help understand Check Level AA, the following features are assessed:

  • The text ‘Cafe’, and the icon that accompanies it. Both of these pass Check Level AA, so the percentage of people who might have difficulty perceiving these details is in the range 28-52%*. This can be considered a minimally acceptable level of visual clarity.
  • The text ‘Tickets’, and the icon that accompanies it. Both of these fail Check Level AA, so these features will subsequently be assessed at a less stringent check level.

* 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 A

Check Level A applies a small amount of blurring. Graphical details that pass Check Level A will be visible to some degree, but these do not reach the minimally acceptable level of visual clarity. When viewed on a mobile device, 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 these details are displayed on a mobile device, they are so small that they are probably beyond the limit of human vision.

In order to help understand Check Level A, the following features are assessed:

  • The text ‘Tickets’, and the icon that accompanies it. Both of these pass Check Level A, so the percentage of people who might have difficulty perceiving these details is in the range 52-100%*. These features do not reach a minimally acceptable level of visual clarity, but at least some people will be able to see them.
  • The text "LIFT", and the icon that accompanies it. Both of these fail Check Level A, so when these details are displayed on a mobile device, they are so small that they are probably beyond the limit of human vision.

* 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 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%*  Fail

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 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.

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.