Preattentive Attributes in Visualization –

An Example
Preattentive processing occurs without our consciousness at an extremely high speed. It is
tuned to detect a specific set of visual attributes called Preattentive Attributes.

If you want to understand more about how we process a visual, please refer to this post
on Visual Perception.

Preattentive attributes determine what information catches our attention. This is important in
visualization because it enables us to direct our viewer’s attention towards the most important
information in our visual.

Colin ware, in his book Information Visualization perception for design, defined 4 categories
of preattentive visual attributes.

1. Form
2. Color
3. Spatial Position
4. Movement
As you can see, the preattentive attributes – shorter line or the red dot catches your attention
even before you realize it. This is preattentive processing at work.

Preattentive Visual Properties and How to

Use Them in Information Visualization
A preattentive visual property is one which is processed in spatial memory without our
conscious action. In essence it takes less than 500 milliseconds for the eye and the brain to
process a preattentive property of any image. This is good news for information visualization
designers and graphic designers in more general terms too – it means that these properties can
be harnessed to make it easier for a user to understand what is presented through the design
and save them from consciously processing all the data presented in short-term memory
which requires more effort.

John Tukey, the American mathematician and statistician, said; “The greatest value of a
picture is when it forces us to notice what we never expected to see.” By tapping into
preattentive properties of visualizations you can help users find what they never expected to
see.
Colin Ware, in his book “Information Visualization: Perception for Design” defines the four
preattentive visual properties as follows:

 Color
 Form
 Movement
 Spatial Positioning

The Four Preattentive Visual Properties

1. Color

Color can be expressed in many different ways. From the RGB (Red, Green, Blue) scale to
the CMYK (Cyan, Magenta, Yellow and Key) scale to the HSL (Hue, Saturation and
Lightness) scale.

The HSL scale is useful to us when we examine color in terms of preattentiveness. Hue is a
measure of the color that we normally give a name to such as “Red” or “Violet”. Saturation
and lightness are a measure of the intensity of colors.

Hues and intensities are preattentively processed and can be used to separate visual elements
from their surroundings. This saves the user from having to perform a visual search through
data.

Author/Copyright holder: SharkD. Copyright terms and licence: CC BY-SA 3.0

The HSL scale can be visually represented itself in 3-dimensions – the idea is to try and
demonstrate how saturation and lightness relate to intensity for each hue.

2. Form

Form applies to a set of attributes (listed below) and form can be manipulated to either call
attention to a member of the data set or to reduce our attention on it. For example, if you were
to manipulate the size of an object you could use that size to indicate its importance in a data
set by making it larger. Conversely you could make it smaller and reduce its importance.

Form attributes include:

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

In the image above you can see how each form property can be used to call attention to a part
of a visualization; you might not realize 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

Movement has two sub-attributes flicker and motion. They can be used very effectively to
call someone’s attention. However, care should always be taken when employing motion in
information visualizations and other designs. This is because the motion can rapidly become
annoying or distracting from the rest of the information that is being presented. It’s also a
technique which has 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.
Author/Copyright holder: P.Ctnt. Copyright terms and licence: Public Domain.

The central traffic light in this GIF flickers to call the user’s attention to the yellow light
rather than the red light or green arrow.

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

Author/Copyright holder: Pixabay. Copyright terms and licence: Free to Use

In this image we can see the use of shading to suggest convex/concave properties. These are
then preattentively processed in the brain.

Using Preattentive Properties in Information Visualization Design

When you develop an information visualization you must decide which properties will be
used to deliver each attribute of the data set. This process is known as visual mapping.

Colin Ware indicates that the choice of these four preattentive attributes is the most
significant thing that can be done to utilize the science of vision to improve information
visualization.

However, there is no universal agreement on which attributes in which combination will be

most effective for any given user group. This means that if you intend to use preattentive
properties in your designs – you will need to test them with your user group to see if they
deliver the appropriate impact.

The Take Away

Preattentive processing takes place in sensory memory; it requires no conscious effort from
the user (or viewer) to do this processing – it’s automated and takes less than 500
milliseconds to complete. This can be very useful in design and in particular in information
visualization design because it allows the designer to grab the attention of the user without
their input or effort. This in turn allows for increased complexity of data that must be
processed in short-term memory.