Squint your eyes – and improve the usability of your design

Use the blur filter, or simply squint your eyes, to make sure that your design is easy and quick to understand visually.

✎ By Marie Louise Holm Møller, Human Factors Consultant, April 2022

Key takeaways from this article:

– Even though we are not consciously aware of it, most of our visual field is blurry and poor at seeing details and colours. This fact will affect how your user perceive your design

— The blur filter tool helps you create a design that is easily understood by your users

Does Your Design Only Support 2-4% of The User’s Visual Field? 

Did you know that you only see 2-4% of your entire visual field in high resolution and vivid colours? Even though we do not consciously perceive it, most of our visual field is blurry and not very sensitive to colour. This article presents an easy-to-apply UX tool that will give you a feel for the visual hierarchy of you design, and instantly enable you to design for how your users actually see your design.

The eye has two “types” of vision that support different parts of our brain and behaviour: 

1. The central or focal vision extends from the centre of our gaze (where we are looking) to an approximately 5-degree visual angle (about the width of your fist when you stretch out your arm in front of you). This covers around 2-4% of our visual field.

2. The peripheral vision is everything around the central vision. The peripheral vision accounts for 96-98 % of our visual field.

Here is the problem…

In graphical design, such as graphical user interfaces, we often target the central vision and do not provide adequate support for the peripheral vision - even though this is most of what our users see. 

This leaves a large part of the user’s visual field unused by your design. Even worse, we risk making a design that does not communicate meaningful information to the vast majority of our visual field (peripheral vision). This is critical since the two types of vision - central and peripheral - are quite different.

The Difference Between Central And Peripheral Vision

Our central vision is associated with our attention and what we consciously perceive. This part of the eye is made up of cells that have a high resolution and very colour sensitive. However, this type of vision only makes up a tiny portion of what we’re seeing.

The largest part of our visual field is our peripheral vision, which is blurry and poor at distinguishing shapes, details, and colour. The further away from the centre of our gaze, the poorer the colour perception becomes. 

While the central vision is very good at specific and detailed object recognition, peripheral vision is needed for understanding the whole scene, such as your graphical user interface. That is why it is essential to design for the entire field of vision.

By also designing for peripheral vision, you can ensure that: 

• The user’s focus is efficiently guided to the correct places.

• Even when users only glance at your design, they can easily find the most important elements.

• The user will easily be able to both separate the different parts of a design (for instance a website) and see which elements belong together.

• The arrangement of the elements on the page will effectively communicate your design’s purpose, and the user will more intuitively understand the design structure.

When we perceive the world, we are not aware of the blurriness and lack of colour in our peripheral vision. Therefore, we need a tool to help bring peripheral vision into consciousness – and this is where the blur filter comes into the picture.

Using The Blur Filter to Design for How We Actually See

Take a step back. Look at your design and squint your eyes (close them partially to make your vision blurry). Now, you are able to see the design more like the way your peripheral vision sees it.

For instance, like in the image below, where a blur filter is applied to simulate squinting your eyes:

Simply squinting your eyes, or using a blur filter, provides us with a tool to inspect how well a visual design supports the parts of the vision that are outside the central area. Blurring the image helps bring the peripheral vision into consciousness, as it blurs out the parts the central eye sees and leaves only the information the peripheral eye sees.

Another thing that can be added to your investigation process is desaturating the image to simulate the low sensitivity to colour in peripheral vision, as is done in the following example.

Example 1: Where to Check In and Check Out?

For instance, when looking directly at the check-in and check-out stations on the image below (these stations are found on Danish metro and bus stations), it is easy to see the difference due to the distinct green and red colours. 

But when you are at the metro station and are in a hurry to find out where to check in before your train leaves, you will likely have to spot the check-in station with your peripheral vision. Our peripheral vision’s blurriness and low sensitivity to colour are also simulated in the image below. Now, it is almost impossible to figure out whether to go left or right to check in. 

Redesigning for Peripheral Vision

Let us have a look at an alternative solution. The blur test shows that by introducing a difference in shape and contrast, it will be easier to spot where to check in out of the corner of your eye.

Example 2: Using Blur to Improve Data Visualisation

Another example could be a table that needs to be read from left to right to find information about specific patients.

The blur filter reveals that information is intuitively grouped on the vertical axis, and therefore the table can be difficult to quickly read on the horizontal axis. Adding alternative row colour helps. 

Download Our Guide To Blur Filter Now

Using a blur filter on Mac or PC is easy to do, either in the Mac terminal, in PowerPoint, in a photo editor or in Figma.

Download it by clicking on the picture to the right.

* * *

Next Steps