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
2
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
Figure 1 Cockpit of the 2011 BMW 135i in use
The driver’s cockpit of the German made 2011 BMW 135i will be used as a launch pad for
discussion. BMW is respected around the world for taking their user interface design seriously.
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
3
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.
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
4
Figure 2 Gestalt principles of perception
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)
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
5
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
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
6
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.
Figure 3 Cockpit with touch points highlighted
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
7
3.2 CLIMATE CONTROL (24 TOUCHPOINTS)
Figure 4 Center console with regions/touch points highlighted
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
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
8
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
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
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
9
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)
Figure 5 Gauge cluster with regions/touch points highlighted
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
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.
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
10
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
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).
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
Figure 9 Standard climate control center
Figure 6 Preattentively enhanced climate control center. Added: texture, color, spacing, and depth
Figure 8 Standard gauge cluster
Figure 7 Preattentively enhanced gauge cluster. Added: inset to sub-gauges, color, dimmer to
kph.
11
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
12
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: General,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
PREATTENTIVE DESIGN IN THE AUTOMOTIVE COCKPIT
13
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.