• Preattentive processing is the brain’s ability to react to stimuli without thinking
• Visual stimuli that can be processed in less than 250 milliseconds are considered preattentive
• Understanding and taking advantage of preattentive processing will improve intuitiveness and yield a faster and more natural user experience

In the last 20 years, some interesting research into vision has discovered and documented the visual properties that “catch our eye”, i.e., those properties that trigger a reaction in our unconscious brain without any effort or thought.

These visual properties are known as preattentive. Tasks that can be performed on screen in less than 200 to 250 milliseconds are considered to be preattentive. This has big implications for website usability. Let me explain.

When analysing a website’s usability, I use a bespoke 265-point check developed in-house at Endless Gain. This rigorous usability analysis spans 10 key aspects of the “user experience” and scores them towards a full report of recommendations for improvement.

And one of the most important aspects that we scrutinise in a usability analysis is visual hierarchy.

Visual hierarchy is ultimately concerned with what stands out. And what stands out should be directly correlated to what is important.

You might think this is just about your call to action (CTA), but it actually works on many subtler levels than that. This can be tested by analysing time to first fixation.

Time to first fixation analysis

‍

This graphic from our User Testing Laboratory shows the time to first fixation on various aspects of a user interface. We can use this technology to examine the visual hierarchy of web pages. By understanding visual hierarchy, we can begin to exert some control over the order in which our information is consumed. Time to first fixation is discussed in greater detail in this article.

What catches your eye?

Think about things that your eyes are immediately drawn to. A sudden movement. A splash of colour. An unusual shape. Your brain is asking—what is this saying to me? Why is it like that? This is preattentive processing.

Understanding preattentive processing is useful for those designing websites and apps as it will improve intuitiveness and yield a faster and more natural user experience. I believe it is something all communication designers should be thinking about.

What are the preattentive properties?

Colin Ware, in his book “Information Visualization: Perception for Design” (Morgan Kaufmann, 2012) defines the four preattentive visual properties as follows:

• Colour
• Form
• Movement
• Spatial Positioning

Let’s look at each of these in detail.

1. Colour

‍

What is preattentive in terms of colour is contextual, it’s about what stands out in the wider environment and it is closely related to the design principle of contrast.

Colour can be about differences in hue (red, orange, yellow, green, blue, violet), saturation (intensity), tint (lightness) or shade (darkness).

2. Form

Form can be manipulated to either call attention to something or to reduce our attention on it. For example, in data presentation, you can manipulate the size of an object to indicate its importance by making it larger, and you can make it smaller to reduce its importance.

Form attributes include:

• Collinearity
• Curvature
• Length, breadth and width
• Marks added to objects
• Numerosity
• Shape
• Size
• Spatial grouping
• Spatial orientation

The following image is a graphical representation of each of the above.

‍

You can see how each form property can be used to call attention to a part of a visualisation; you might not realise it but you didn’t even have to think to see these differences—it was all done in your Sensory Memory without conscious effort.

3. Movement

‍

There are two sub attributes of movement, motion and flicker. Movement is an extremely effective way of grabbing attention, but it quickly gets annoying and can distract too much from all of the other information that you are trying to present. It has also been over-employed in banner adverts and other forms of web advertising over the years and may be a primary reason for the rise of ad-blocking software.

4. Spatial positioning

‍

There are several considerations for spatial positioning including:

• 2D positioning—this is often the best way to deliver data that can be easily recognised and processed visually. It is particularly effective for quantitative data representations.
• Stereoscopic depth—we perceive depth by combining the images generated by the left and right eyes in the brain. This depth is preattentively processed. It is possible to recreate stereoscopic depth using two separate cameras set at different angles to a subject and imposing the images over each other.
• Concave and convex positioning—this can be created through the use of shading.

How to use preattentive processing in your design

1. List everything you want to convey to the user and each action you would like them to take
2. Sort these in order of importance (create your hierarchy)
3. Consider the preattentive cues that you can use to lead the user through this visual hierarchy
4. Rank these cues and assign to the messages
5. Once you’ve applied the cues, do a quick blink test and note what jumps out
6. Always test your design—how else can you improve on it?

“Don’t make me think”

Clearly, I believe that the best interfaces employ preattentive processing to help users see without thinking…something we’ve learned from web and mobile usability experts such as Steve Krug.

Activities, tasks and goals have different priorities for you and for your users—and the more you can guide users to easily complete these tasks, the happier they will be and that could mean more conversions for your website.

‍