Pre-attentive processing. Finding the concaveity is immediate, "pop out". Source: author, from an example from Colin Ware in Information Visualization: Perception for Design. (pág. 163)

It sometimes happens that certain elements of a graphic representation, maybe a colour or an icon "pop out". We detect them instantaneously.

These phenomena, whose visual identification is performed in a very short time lapse (typically between 200 and 250 miliseconds or less) are called pre-attentive since they occur without the intervention of consciousness. There's no need to focus on the search task. Even when they are hidden among many other objects they are identified immediately.

As a familiar example, the previous paragraphs and the following ones have some words in bold text. This is a way of highlighting text, quite typical of the web, where users have very little time to read long paragraphs in the screen, in an environment where you jump to another page very easily.

The goal of this common practice is providing the key ideas of the text. Since illumination is processed pre-attentively, our sight identifies the sentences in bold face first so that, when properly constructed, you can read the essentials of the text synthesized in a few lines.

In order to know whether a phenomenon is pre-attentive  or not the procedure usually consists of measuring the time needed to identify the target in a set of other objects called "distractors". Pre-attentive processes are basically independent of the number of distractors placed. It doesn't matter how many of them are present, the time to identify the target is constant and typically below 1/4 of a second. On the contrary, if we get larger times when more distractors are added, the phenomenon is not pre-attentively processed.

According to Colin Ware in his book Information Visualization: Perception for Design the list of features that are pre-attentively processed can be grouped into four basic categories: Colour, Form, Movement and Spatial Localization. Let's look at them more in detail.

Colour:

Both Hue (difference between elements) and intensity are processed pre-attentively. Some examples follow:

Hue	Intensity

• Line orientation. A line with a different orientation of that of the surrounding distractors.
  
  
• Line length. A change in the length of the line compared to those of the surrounding distractors.
  
  
• Line width. The same as before but with width.
  
  
• Line collinearity.  Lines that follow the same direction instead of being non collinear.
  
  
• Size. An object of different size of the distractors.

• Curvature. A straight line is clearly perceived if surrounded by curved ones.
  
  
• Spatial grouping. Groups of objects in a random distribution background of objects.
  
  
• Added marks. making a mark, like circling around an object makes it "pop out".
  
  
• Numerosity. One group of elements is preattentively detected when the other groups all have a fixed number of elements but different in cardinality from the target group.

Again the best way to understand is by looking at some examples: 

Orientation	Length	Line width
Size	Added Marks	Shape
Curvature	Spatial grouping	Number

• Direction of motion. An object moving against a still background or in relation with a homogeneously moving background in a different direction is detected immediately. 
  
  
• Flicker. An element that appears and disappears, the blinking of a car signal or the flashes of the anti collision lights of the planes are detected pre-attentively. For this reason they are used as safety elements in aviation, populating planes, antennas and potentually dangerous obstacles.

Motion	Flicker

Spatial Postion:

• 2D Position
  
  
• Stereoscopic depth. In this case, that we can not reproduce here due to the difficulty to produce stereoscopic vision, the objects placed in a particular depth layer are pre-attentively identified respect the distractors placed in other depth layers.
  
  
• Concavity / convexity, produced by the shading of objects. This is the example that we have placed at the beginning of the article. The human visual system tends to consider that shadows are produced by light coming from above. For this reason objects with their upper part brighter than the lower appear as convex or protruding objects. 
  
  Conversely the object whose shadows appear above and are lit from below tend to appear as concave. An object whose illumination suggests concavity is easily detected among objects of convex appearance is pre-attentively detected. The inverse is also true: a convex object pops out from a concave population of objects.

If we focus on what all these phenomena have in common we see that there's always a clear difference between the whole and the part. The brain is able to discriminate certain dfferences in a pre-conscious way. You don't need to focus your attention or be conscious of the meaning or implications for these phenomena to "pop out". 

On the other hand the conjunction of several pre-attentive elements can reduce its effect and limit its pre-attentive processing. As the variety (not the quantity) of the distractors increases the search time can increase. In other words, the best case is when you have all the distractors equal. There are several theories that try to explain how pre-attentive processing works. You can consult, among others, the whole article Perception in Visualization by Christopher Healey

Needless to say that a proper use of the pre-attentive phenomena is fundamental for the generation of good user interfaces and graphics. Still today we can find many websites full of animated gifs that compete for our attention overloading our cognitive capabilities. Making this knowledge a good practice is our responsibility as professionals of information visualisation.

Links of this issue: