Running head: PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

Preattentive Design in The Automotive Cockpit

Paul Naddaff

Bentley University

1

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

1.1 INTRODUCTION TO PREATTENTIVE PROCESSING

The world around us is full of sensory information; the glowing radiance of a sunset, the

cacophony of rush hour traffic, the dense weight of an iPhone, the pleasing smell of burning

leaves, or the sweet taste cider donuts. Our senses are perpetually presented with an infinite

amount of different stimuli all at once, creating distractions from what we may be focusing our

attention on. We are simply unable to process all of the information around us, as our focus is

limited. In order to understand our surroundings, we must efficiently process information. The

main purpose of preattentive processing is to provide a solid foundation for this efficiency by

starting certain low-level operations on a stimulus before attention is fully focused on it (Gray,

2006). Preattentive processing is also important because it allows us to quickly organize the scene

as a whole, and to group elements together. Furthermore, design teams who possess an

understanding of preattentive processing, can use that knowledge to more efficiently organize

information, creating easy to perceive patterns for our preattentive processing system to pick up

(Gibson, 1966; Shneiderman, 1997, Healey 1996).

The original German Gestalt psychologists, Koffka, Wertheimer, and Kohler, built a

foundational theory of preattentive processing using a collection of laws, which we will examine.

We will also provide an overview of the core preattentive theories from four leaders of

preattentive research: Treisman, Julsez, Humphreys/Quinlan, and Wolfe. Following the

theoretical overviews, we will examine the case as it relates to the preattentive process.

1.2 INTRODUCTION TO THE CASE

The

driver’s cockpit of the German made 2011 BMW 135i will be used as a launch pad for

Figure 1 Cockpit of the 2011 BMW 135i in use

2

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

discussion. BMW is respected around the world for taking their user interface design seriously.

We will point out what has been done well, as well as what could be tweaked to make the cockpit

even more preattentively efficient. As drivers are aware, being behind the wheel of a car,

especially a very fast car, brings up significant implications for safety. User satisfaction is also

important to consider. As mentioned above, this case was selected because knowledge of

preattentive processing should be used to assist in the design of interfaces, especially those

for which efficiency in target/boundary detection is important (Healey, 1996).

2.1 A CLOSER LOOK AT PREATTENTIVE THEORY

As mentioned above, as soon as one or more of our senses detects a stimulus, preattentive

processing automatically and unconsciously begins grouping that information into packets of

similar data. Preattentive processing deciphers basic information about stimuli, and attempts to

group objects together, but stops short of telling us what we are looking at (Koffka, 1935;

Treisman, 1998)).

Object characteristics that can be perceived in less than 240 ms, are generally considered to

be preattentive. This is because it takes ~200 ms for the eyes to initiate movement (Healey,

1996). The ~40ms following the movement initiation, allows the eye to detect a given stimulus

and absorb certain basic information about it such as hue, intensity, orientation, size, and motion

(Treisman, 1980). As mentioned above, this information is packaged together and is analyzed

further during later information processing stages (i.e. top-down). The preceding statement aligns

with the view of the Gestalt psychologists who claimed that “the whole precedes its parts, that we

initially perceive objects and relationships, and only later, if necessary, analyze these objects into

individual parts” (Wertheimer, 1924).

2.2 WHAT CHARACTERISTICS ARE PREATTENTIVELY EFFICIENT?

Research into what patterns are preattentively efficient is still underway. However, the

Gestalt psychologists mentioned earlier, created a set of guidelines that provide a foundation for

preattentive research and design to build off of. The word “gestalt” literally translates from

German into “pattern” or “form” and refers to basic characteristics that cause elements to be

perceived as a group. Interestingly, the German word for “design” is “gestaltung”. The below

diagram outlines core gestalt principles, each of which describe the way that we best perceive

patterns. Section 2.3 will speak to a more scientific explanation of these laws. These rules will

also be used in the analysis of the case.

3

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

2.3 CORE PREATTENTIVE THEORIES

The following four sub-sections briefly outline the core theories that collectively make up

today’s understanding of how the preattentive process works. These theories were developed by

standing on the shoulders of the Gestalt psychologists, and the neurological basis of these

phenomena is further explained. The gestalt psychologists were not able be as accurate on the

exact science of their findings. The below theories also address why preattentive processing

occurs. Following the overviews, we will examine the case.

FEATURE INTEGRATION THEORY: Treisman’s “Feature-Integration Theory” states that

features are registered early, automatically, and in parallel across the visual field, while objects

are identified separately and only at a later stage, which requires focused attention. Stimulus

locations are processed serially with focal attention- those in the same central "fixation" of

attention are combined to form a single object. “The focal attention provides the "glue" which

integrates the initially separable features into unitary objects.” (Treisman, 1980)

Figure 2 Gestalt principles of perception

4

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

TEXTON THEORY: Julesz took a more statistical approach and suggested that the early visual

system detects a group of features he called “Textons”. Textons are small building blocks that can

be classified into three general categories: elongated blobs (line segments, rectangles, circles),

terminators (ends of line segments), and crossings of line segments. He believed that differences

in textons or their density was all that could be detected preattentively. His theory used this

information to determine grouping of similar objects and the boundaries that separate them

(Julesz, 1981; Julesz, 1985).

SIMILARITY THEORY: Quinlan and Humphreys highlighted two factors in building their

“Similarity Theory”. First, search time may depend on the number of items of information

required to identify the target. Second, search time may depend on how easily a target can be

distinguished from its distractors. They believe that search time is based on two criteria: “T-N

similarity” and “N-N similarity”. T-N similarity is the amount of similarity between the targets

and non-targets. N-N similarity is the amount of similarity within the non-targets themselves

(Humphreys, 1989).

GUIDED SEARCH MODEL: Wolfe’s “Guided Search” model posits that the preattentive stage

creates a general map of a scene made of basic features (i.e. Treisman’s theory). The elements on

the map that “peak” due to the density of perceived similarities or due to the features’ differences

from their neighbors, are more likely to be attended to. Then top down processing takes over

where necessary (Wolfe, 1994).

While the various theories do vary in how they explain how and why the preattentive

process works, they all agree that clear grouping of information is key to information being

preattentively processed.

3.1 THE COCKPIT

The cockpit on the 2010 BMW 135i is relatively sparse compared to those of other

BMW’s. Most of the buttons and dials present are necessary for regular operation of standard

features found on most cars today (climate control, vents, audio system controls, basic engine

related dials). Figure 3 serves as an overview of the primary touch points of the cockpit. Each

element is outlined in a green box to signify that the user can modulate it in some way.

Everything else not highlighted (excluding the windshield) is considered white space (which is

also an important concept) (Maeda, 2006). The following two subsections will examine a main

area of the cockpit primarily by using established Gestalt principles of grouping as well the

5

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

preattentive theories from section 2. We would like to keep in mind that most any interface can

be visually memorized (especially a dashboard), but when speed/efficiency is critical, the

designers should take steps to optimize for preattentive processing. In the case of a dashboard, it

would be ideal if users didn’t have to rely exclusively on their eyes.

Note: some automated systems have been intentionally left out of this examination (i.e.

headlights, wipers) as well as the iDrive computer interface which offers advanced control of

non-essential electronic systems. A separate assessment of the iDrive system is recommended.

3.2 CLIMATE CONTROL (24 TOUCHPOINTS)

Figure 3 Cockpit with touch points highlighted

Figure 4 Center console with regions/touch points highlighted

6

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

The center console is clearly divided into three distinct regions or groups. This is

achieved by separating clusters of controls, and packing specific controls in very close proximity

to each other, and by creating white space around each group. Approximately 60% of the core

touch points in the cockpit pertain to climate control of the cabin. The 24 touch points that make

up the climate control interface are spread out across a 1 square foot area directly to the right of

the steering wheel (regions shown in green and blue). The various buttons and dials control the

temperature of the air, the speed of the fan, and the direction/location of the air flow- these three

variables are modulated to create the ideal cabin climate.

Starting with the center region (shown in green), a .5” border of white space encapsulates

20 touch points, all of which are dedicated to the climate control system. This border broadly

frames the collection of controls, allowing for a closed rectangular shape- this closure lets the

user know that everything within is related. The border, which is smooth and matte black,

contrasts against the raised controls, each of which have some sort of detail on it. The contrast

between simple background and detailed foreground provides a clear dimension of figure/ground.

This fundamental juxtaposition preattentively lets the user know that there is a group of related

objects contained within. Grouping, as mentioned earlier, is critical to preattentive processing

because it allows us focus on a given area, free from distraction.

Moving to the controls themselves, starting on the left (of the green region). There are

three buttons that control which vent the air comes out of, head, chest, or feet- one button for

each. These three buttons are of the same size, shape, color, and orientation (all preattentive

grouping cues) and are perfectly vertically arranged- even this minor design choice signifies those

three buttons as a group, whereas if they were placed at a slope, the grouping would not be as

strong. They are also placed very close to one another, giving a solid sense of proximity to the trio

itself, which is one of the strongest preattentive cues (Slocum, 1983).

To the right of the trio is a three-dimensional dial that controls the temperature of the air.

The dial has a smooth black .25” border around it, which distinguishes it from its immediate

surroundings (figure/ground). The circular dial has perfect/strong closure, which tends to help it

be preattentively classified as an object (Ware, 2004). Because it shares close proximity to the

other climate controls, the user can assume that it is related (and isn’t an audio system dial).

There is a similarly shaped blue/white/red band immediately surrounding the dial, mimicking the

dial’s shape. Preattentively indicating that these two pieces of visual information are related. The

circular button contained in the center of the dial “Max *snowflake*” must also be related to

7

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

temperature because of the tight proximity, closure, and shape. However, it is a different

color/material. This difference, as well as the textured grip on the dial itself, provides a subtle

visual and haptic “affordance” to the user, hinting at a function (Gibson, 1979). Because this car

is equipped with dual climate control, an exact replica of this dial exists on the far right side of

the climate panel, intentionally just out of comfortable resting reach of the driver, suggesting that

it can be ignored.

The center of the climate control panel contains five buttons and a LCD display. The

most important of which is the fan’s speed control, a rocker button. This important button is

prominently placed in the center and has a distinct border around it (figure/ground). It has

extremely close proximity to the LCD display, which displays the selected speed of the fan. Also

on the LCD are two temperature readouts, one for each circular temperature dial. This

temperature display should be closer to the dial, as it is not clear that they are related

without first interacting with the dials. An additional enhancement that could be made

would be to design in subtle color and/or texture differences for each climate sub function

(i.e. temp, speed, flow), as virtually all the controls are currently the same color/texture.

Additionally, the blue region contains three controls (center), which have no relation to

climate control- they should be placed elsewhere.

3.3 MOTOR RELATED GAUGES (5 TOUCHPOINTS)

There are four primary motor related gauges directly behind the steering wheel- fuel

level, oil temp (deg.), speed (mph/kph), and tachometer (rpm). The four dials are grouped into

two main regions, which are made immediately evident by the strong sense of closure created by

Figure 5 Gauge cluster with regions/touch points highlighted

8

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

a silver band around each region. Each global region also stands out from the background using a

perfect figure/ground composition with ample white space around each gauge.

The information (mph and rpm) contained within each region, follows the smooth

circular shape of the global region, which shows strong continuity, further grouping this group of

information together as one. Additionally the text and markings are all the same color, relative

size, and share the same orientation- perfect gestalt organization. On the speedometer gauge,

there is a second ring of information (kph) separated by white space from the mph readout, which

also follows the smooth arc of the global region. However this text is smaller from the mph

readout, signaling that it is of a different group. It is also grouped together in close proximity.

Integrated into each global region, there are two sub-gauges, fuel level and engine

temperature. These two groups, although similar in color/size, rely solely on proximity to

separate themselves from the other information. Additionally, the continuity of the sub gauges is

offset slightly (likely to conserve space). Overall, the gauges follow preattentive theory

effectively. However, the use of subtle color differences to further differentiate the various

kinds of information would be effective. Additionally, the sub-gauges could benefit from an

enhanced figure/ground effect (i.e. adding depth by insetting them slightly) to create further

separation. The kph readout will be used rarely in the US, it could linked to a separate

dimmer.

4.1 CONCLUSION

In looking at the core preattentive theories, gestalt principles, and the case- it is clear that

much thought went into the design of this interface. The team at BMW, despite the faults we have

identified, for the most part adhered core gestalt guidelines, and it shows. Additionally, they also

kept their design clean and simple, allowing for generous amounts of white space, which holds

enormous weight when used in conjunction with the design methods discussed herein.

Information is clearly grouped into broad regions, and within those regions, it is efficiently laid

out. As stated in the introduction, the dashboard in this specific vehicle is understated yet highly

efficient and easy to use quickly- this is owed primarily to the strict adherence to preattentive

guidelines.

The research on preattentive design for haptic environments exists, but is not as

developed as those of vision and sound- it is interesting, therefore, that the one area that didn’t

9

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

work as well as it could have, related to using the system without looking at it (haptic). This

confirms our belief that taking preattentive factors into consideration is critical to design.

We have made some adjustments to the interface, taking all of the above into

consideration (please see final page).

Figure 6 Standard climate control center

Figure 7 Preattentively enhanced climate control center. Added: texture, color, spacing, and depth

Figure 8 Standard gauge cluster

10

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

REFERENCES

Card, S.K, Mackinlay M.D, Shneiderman B. (1999), Readings in Information Visualization:

Using Vision to Think. Morgan Kaufmann Publishers. San Francisco, CA

Gibson, J. J. (1966). The senses considered as perceptual systems. Houghton Mifflin Co. Boston,

MA.

Gibson, J.J. (1979). The Ecological Approach to Visual Perception. Houghton Mifflin. Boston,

MA.

Gray, Peter (2006). Psychology (5th ed). Worth Publishers (p.314-317)

Healey, C., Booth, K, Enns J., (1996) High-Speed Visual Estimation Using Preattentive

Processing ACM Trans. Computer-Human Interaction, vol. 3, no. 2, pp. 107-135

Humphreys, G.W., Riddoch, M.J., & Quinlan, P.T. (1989). Grouping processes in visual search:

Effects of single- and combined-feature targets. Journal of Experimental Psychology: Gen-

eral,118, 258–279.

Julesz, B. (1981). Textons, the elements of texture perception and their interactions. Nature,

290,91-97.

Julesz, B (1985). Texton Gradients: Texton Theory Revisited. Biological Cybernetics (1986)

Volume: 54, Issue: 4-5, Pages: 245-251

Koffka, K. (1935). Principles of Gestalt psychology. New York: Harcourt Brace.

Marr, D. (1982). Vision: A computational investigation into the human representation and

processing of visual information. Freeman. San Francisco, CA

Maeda, J (2006). The Laws of Simplicity. The MIT Press. Cambridge, MA (pp 5-25)

Neisser, U (1976). Cognition and Reality: Principles and Implications of Cognitive Psychology

W H Freeman and Co.

Shneiderman, B (1997) Designing the User Interface, third ed: Addison-Wesley. Reading, Mass

11

PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT

Treisman, A., Gormican, S. (1988). Feature analysis in early vision: Evidence from search

asymmetries. Psychological Review, 95, 15-48.

Wertheimer, M. (1924). Gestalt Theory. Retrieved 11/2/2002 from the Gestalt Archive,

http://www.enabling.org/ia/gestalt/gerhards/wert1.html

Wolfe, J.M., & Bennett, S.C. (1997). Preattentive object files: Shapeless bundles of basic

features. VisionResearch,35, 25–43.

12