How To Provide Instant Focus To Selected Information Items

One of the reasons why visualisation can be so powerful has its roots in the fact that there's a series of identification and recognition operations that our brain performs in an "automatic" way without the need to focus our attention or even be conscious of them.

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

Managing properly the elements that are "pre-attentively" processed can make a difference in a user interface. 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 milliseconds 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.

An example of searching for a target red circle based on a difference in hue: (a) target is present in a sea of blue circle distractors; (b) target is absent - Source: "Perception in Visualization"

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

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

Hue



Intensity

2) Form:

• Line orientation and Line collinearity. A line with a different orientation of that of the surrounding distractors or lines that follow the same direction instead of being non collinear.
  
• 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.

  

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

  

3) Movement:
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.

Spatial Position:

• 2D Position


• Stereoscopic depth. In this case, that you 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 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 you 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 differences 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.

About the author:
Original article written by Juan C. Dürsteler and entitled:
"Processes that pop out"
First published as part of Infovis issue 179, a digital magazine by Prof. Dürsteler devoted to Information Visualisation, seen as the process of incorporation of knowledge through the perception of information, mainly (but not only) in visual form.

More info at:http://www.infovis.net

Subscription, unsubscription, current and previous issues of Infovis.