Professional Documents
Culture Documents
Preattentive Visual Properties
Preattentive Visual Properties
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
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.
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
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.
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.
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.
Colin Ware. Information Visualization: Perception for Design. Morgan Kaufmann, San
Francisco, CA, 2nd edition, 2004.
Hero Image: Author/Copyright holder: Marcin Ignac. Copyright terms and licence: CC BY-
NC-ND 2.0