[ 2 ]

In the Blink of an Eye: Vision, Attention, and Automaticity

From Representations to Experiences

Think of a time when you were asked to close your eyes for a big surprise (no peeking!), and then opened your eyes for the big reveal. At the moment you opened your eyes, you were taking in all kinds of sensations: light and dark areas in your scene, colors, objects (cake and candles?), faces (family and friends), sounds, smells, emotions (joy?). It is a great example of how instantaneous, multidimensional, and complex an experience can be.

Despite the vast ocean of input streaming in from our senses, we have the gift of nearly instant perception of an enormous portion of any given scene. It comes to us so naturally, yet is so difficult for a machine or a self-driving car. Upon reflection, it is amazing how “effortless” these processes are. They just work. You don’t have to think about how to recognize objects or make sense of the physical world in three dimensions, except in very rare circumstances (e.g., dense fog).

These automatic processes start with neurons in the back of your eyeballs, with input passing through your corpus callosum to the back of your brain in the occipital cortex, then your temporal and parietal lobes in near real time. In this chapter we’ll focus on the “what” and in the next we’ll focus on the “where” (Figure 2-1).

Figure 2-1

What/where pathways

With almost no conscious control, your brain brings together separate representations of brightness, edges, lines, line orientation, color, motion, objects, and space (in addition to sounds, feelings, and
proprioception) into a singular experience. You have no conscious awareness of these as separate and distinct representations, or that they were brought together into a single experience, or that past memories influence your perception, or that they evoke certain emotions.

This is a nontrivial accomplishment. It is incredibly difficult to build a machine that can correctly make even the most basic distinctions between objects that have similar colors and shapes—for example, between muffins and Chihuahuas—which with a brief inspection you, as a human, will get correct every time (Figure 2-2).

There are many, many things I could share about vision, object recognition, and perception, but the most important for our digital product design purposes are these: (a) there are many processes taking place simultaneously of which you have little conscious awareness or control, and (b) many computationally challenging processes are taking place constantly that don’t require conscious mental effort on your part.

Figure 2-2

Muffins or Chihuahuas?

In Nobel Prize winner Daniel Kahneman’s fantastic book Thinking, Fast and Slow, he makes the compelling point that there are two very different ways in which your brain works. You are aware of and in conscious control over the first set of processes (“thinking slow”). And you have little to no conscious control or introspection over the other set of automatic processes (“thinking fast”).

When designing products and services, we as designers are often very good at focusing on the conscious processes (e.g., decision making), but we rarely design with the intention of harnessing our fast automatic processes. They occur quickly and automatically, and we essentially “get them for free” in terms of the mental effort our audience needs to expend as it uses them. As product designers, we should harness both these conscious and automatic processes because they are relatively independent. The latter don’t meaningfully tax the former. In later chapters, we’ll see exactly how to do so in detail, but for now let’s discuss one good example of an automatic visual process we can harness: visual attention.

Unconscious Behaviors: Caught You Looking

Think back to the vignette I gave you at the start of the chapter: opening your eyes for that big surprise. If you try covering your eyes now and suddenly uncovering them, you may find that your eyes dart around the scene. In fact, that is consistent with your standard eye movements. Eyes don’t typically move in a smooth pattern. Rather, they jump from location to location (a phenomenon we call saccades). This motion can be measured using specialized tools like an infrared eye tracking system, which can now be built into specialized glasses (Figure 2-3) or a small strip under a computer monitor (Figure 2-4).

Figure 2-3

Tobii Glasses 2

Figure 2-4

Tobii X2-30 (positioned below the computer screen)

These tools have documented what is now a well-established pattern of eye movements on things like web pages and search results. Imagine that you just typed in a Google search and are viewing the results on a laptop. On average we tend to look 7 to 10 words into the first line of the results, 5 to 7 words into the next line, and even fewer words into the third line of results. There is a characteristic “F-shaped” pattern that our eye movements (saccades) form. Looking at the image in Figure 2-5, the more red the value, the more time was spent on that part of the screen.

Visual Popout

While humans are capable of controlling our eye movements, much of the time we let our automatic processes take charge. Having our eye movements on “autopilot” works well in part, because things in our visual field strongly attract our attention when they stand out from the other features in the visual scene. These outliers automatically “pop out” to draw our attention and eye movements.

As product designers, we often fail to harness this powerful automatic process, yet it’s a great way to draw attention to the right elements in a display—think of the children’s song from Sesame Street (“One of these things is not like the others, one of these things just doesn’t belong…”). Some of the ways you can create visual pop out in a scene are demonstrated in Figure 2-6. Other important features I would add to this list are visual contrast (relative brightness and darkness) and motion. The items in the bottom-right corner “pop out” because they have both a unique attribute (e.g., shape, size, orientation) and a unique visual contrast relative to the others in their groupings.

Figure 2-6

Visual popout

One interesting thing about visual popout is that the unique object draws attention regardless of the number of competing elements. In a complex scene (e.g., modern car dashboards), this can be an extremely helpful method of directing one’s attention when needed.

If you are an astute reader thinking about the locus of control with eye movements, you might be wondering “Who decides where to look next if you aren’t consciously directing your eyes?” and “How exactly do your eyes get drawn to one part of a visual scene?” It turns out that your visual attention system—the system used to decide where to take your eyes next—forms a blurry (somewhat Gaussian, for you Photoshop users) and largely black-and-white representation of the scene to make the decision. It uses that representation, which is constantly being updated, to decide where the locus of your attention should be, provided “you” are not consciously directing your eyes. To ponder: “Is it you when it is done automatically?”

As a designer you can anticipate where someone’s eyes might go in a visual scene if you take that scene and use a program like Photoshop to turn down the color and squint your eyes (and/or use more than one Gaussian blur). That test will give you a pretty good idea of where people’s eyes would be drawn in the scene, were you to measure their actual eye gaze pattern using an eye tracking device.

Oops, You Missed That!

One of the most interesting results you get from studying eye movements is the null result: what people never look at. For example, I’ve seen a web form design in which the designers tried to put helpful supplemental information in a column off to the side on the right of the screen—exactly where ads are typically placed. Unfortunately, we as consumers have been trained to assume that information on the right side of the screen is an ad and as a result will simply ignore anything in that location (helpful or not). Knowing about past experiences will surely help us to anticipate where people are looking and help us to craft designs in a way that actually directs—not repels—attention to the helpful information.

If your customers never look at a part of your product or screen, then they will never know what is there. You might as well not have put the information there to begin with. However, when attentional systems are harnessed correctly through psychology-driven design, there is amazing potential to draw people’s attention to precisely what they need. This is the opportunity we as product designers should always exploit to optimize the experience.

Our Visual System Creates Clarity When There Is None

I can’t resist sharing one more characteristic of human vision—specifically, about visual acuity. When looking at a scene, our subjective experience is that all parts of that scene are equally clear, in focus, and detailed. In actuality, both your visual acuity and your ability to
perceive color drop off precipitously from your focal point (what you are staring at). Only about 2° of visual angle (the equivalent of your two thumbs at arm’s-length distance) are packed with neurons and can provide both excellent acuity and strong color accuracy.

Don’t believe me? Go to your closest bookshelf. Stare at one particular book cover and try to read the name of the book that is two books over. You may be shocked to realize you are unable to do so. Go ahead, I’ll wait!

Just a few degrees of visual angle from where our eyes are staring (foveating), our brains make all kinds of assumptions as to what is there, and we are unable to fully process it. This makes where you are looking turn out to be crucial for an experience. Nearby just doesn’t cut it!

Ceci N’est Pas une Pipe: Learning What Someone Understands Something to Be, Not What Might Actually Be There

Whether we present words on a page, image, or chart, the displayed elements are only useful to the extent the end users accurately identify the objects that they are seeing.

Icons are a particularly good example. If you ask someone who has never used Instagram what each of the icons in Figure 2-7 represent, I’m willing to bet they won’t correctly guess what each icon means. For that person that icon is the meaning they put on it at that moment (regardless of what it was meant to represent). As a design team, it is essential to test all of your visual elements and make sure that they are widely identified correctly or, if absolutely needed, that they can be learned with practice. When in doubt, do not battle standards to be creative. Go with the standard icon and be unique in other ways.

Figure 2-7

Instagram controls

Further Reading

Evans, J. S. B. T. (2008). “Dual-Processing Accounts of Reasoning, Judgment, and Social Cognition.” Annual Review of Psychology 59: 255–278.

Evans, J. S. B. T., & Stanovich, K. E. (2013). “Dual-Process Theories of Higher Cognition: Advancing the Debate.” Perspectives on Psychological Science 8(3): 223–241.

Kahneman, D. (2011). Thinking, Fast and Slow. New York: Macmillan.