1
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.1INTRODUCTION 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 fromfour 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 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 morepreattentively 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, ifnecessary, 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.
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, andthe 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 thatfeatures 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)
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 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 theiDrive system is recommended.
3.2 CLIMATE CONTROL (24 TOUCHPOINTS)
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 24touch 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 proximityto 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 distinguishesit 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 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 texturedifferences 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 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, relysolely 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 thisinterface. 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).
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 ProcessingACM 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
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,
Wolfe, J.M., & Bennett, S.C. (1997). Preattentive object files: Shapeless bundles of basic features.VisionResearch,35, 25–43.