Where What Vision Systems And Visual Design

Where and What Vision Systems = Better Visual Design

You can increase the effectiveness of your visual web designs and graphics by getting a little understanding of two human vision systems researched and written about by Margaret Livingstone (a neurobiologist).

Livingstone calls the system that does super-quick visual takes the "Where" vision system. She calls the system that figures out visual details the "What" vision system.

Why should you care about the Where and What vision systems?

As a web designer, you're a visual designer, too. You want to catch your viewer's attention and hold it. Since getting attention is done by triggering the Where system, and holding it is done by triggering the What system, if you understand how these systems are triggered, you can improve the biological effectiveness of your design and graphic work!

Yeah, yeah, that's too abstract. You're practical. You just want to solve a simple design problem, but the solution's been eluding you.

You've designed that new logo in a nice blue color on a peaceful green background. It looks cool, but maybe it's too cool, it doesn't really grab attention. Or you have a lot of text content to present, and you want to hold the reader's attention, but you've noticed your test subjects rolling their eyes and giving up after only a few seconds of reading, so you want to figure out how to improve the stickiness of the text content's visual design.

If you know a little about how the Where and What vision systems work, you can analyze your visual designs or graphics, and revise them to increase their attention-getting power or improve the length of time a viewer will hang around to read the text on the page.

The Where and What vision systems, explained:

In her book "Vision and Art: The Biology of Seeing" (Margaret Livingstone, David H. Hubel, ISBN 0810904063), Livingstone says that each vision system is made of distinct, different types of neurons. Both systems of neurons start their runs run at the backs of our eyes (our retinas), then pass through various areas of our brains. Each system processes visual signals in distinct, different ways, seeing different classes of things, and processing what they see at different speeds.

The Where system is sensitive to contrast, movement, direction and edges.  This system is thought to be the more primitive of the two. It tells us where things are, and how fast things are moving. The Where system is survival-oriented, to protect us from predators. It picks up and processes visual signals very quickly, then just as quickly moves on to new visual inputs. By doing this, it maximizes our awareness of danger in our surroundings, and enables us to protect ourselves better.

The What vision system is sensitive to color, details (including faces), and texture. This system is thought to have developed later in human evolution. The What system helps us recognize family, friends, and familiar surroundings. In other words, it's the non-danger vision system. It takes its time to process what it sees slowly and thoroughly.

How do the two vision systems work for us?

The Where system tells us that the fast-moving striped form on the edge of our field of vision might, just might, be a saber-toothed tiger starting a speedy predatory run at us.

The What system tells us, hey, no, wait a minute, that fast-moving striped form on the edge of our field of vision is our friend Joe, wearing the yellow-and-black striped sweater his new girlfriend bought him for the holidays, running into the supermarket to pick up enough six-packs and chips for himself and his friends before the Superbowl starts.

As you can see by my examples, the Where system sees things quickly, is associated with danger and risk, gets fatigued quickly, and doesn't do any deep analysis. It's stressful (but exciting). The What system is more Zen-like, taking a deep breath and lots of time to figure out what's really going on. It's peaceful and very concentrated.

Understanding how the two systems work will make your designs communicate better, and can solve design problems that are eluding you.

Grab attention with the "Where" vision system:

To get someone's attention fast, talk to the Where system. The ancient, survival-focused Where system sees and categorizes things quickly, is triggered by high contrast, edges, line, shape, angles, and the appearance of movement and space, and allows its focus to fade very quickly in order to process an incoming stream of new things being viewed. The Where vision system is also completely colorblind!!!

Focus for a minute on center of the first illustration (above). It will be hard to keep looking at the center. Notice where your eyes want to go, and where they want to linger.

The artwork's high contrast, sharp edges and angles, and lack of color and texture are attention-getting, but the longer you look, the more your eyes want get away from the sharp, dark mountain range that caught attention first. Your Where system is triggered by the artwork, then processes what it sees fast, and wants to move on to the next thing. This allows your What system to kick in.

What can it get involved with?

Smaller details in the artwork, and the text, which "talks" to your What system, via the type's curves, details and texture. You'll find it hard to look at the artwork without wanting to look around and read the text. The artwork gets your attention at first, but it's too Where to hold your attention for long. The more What-ish text will be the thing that keeps you visually involved. (By the way, the Where system processes movement, too, which explains why infinite-loop animated gifs are often so fatiguing to look at — they're being processed by our most easily-fatigued vision system!)

Hold attention with the "What" vision system:

To hold someone's attention, talk to the more intellectual and slower-to-process What system, which is triggered by reduced contrast, gradual value shifts, curves, texture, details, and color.

Focus for a minute on center of the second illustration (above). Don't let your eyes wander, but try to notice if your eyes want to move, and where they want to go.

You'll find your eyes are held pretty continually by the artwork, which has lots of Where qualities such as low contrasts, texture, color and curves. Your eyes will want to "walk" around the artwork, along the curves, noticing the texture and colors. At some point, you'll find your eyes drawn briefly to the text (which is more Where-ish than the artwork due to being more high-contrast).

You won't be able to hold your attention on the text for long, because it will be processed by the fast-processing, easily-fatigued Where vision system (due to being more high-contrast than the artwork). The artwork will hold you and pull you deep into it, and it'll be hard to break away to read the text at the bottom. The curvy, low-contrast, textured mountain range should hold your attention the longest.

Get and hold attention using both vision systems:

Too many Where elements grab attention, then lose it.  Too many What elements may never have the chance to grab attention long enough to hold it.  You need both!

In the third illustration (above), your eye can move easily between the artwork and text portions of the image. The artwork catches your attention with its Where features (high contrast, space, angular shape, line), and holds it with its What features (low contrast, curves, texture, detail, color). Because of the relatively equal balance between Where and What features, it doesn't fight with the text below it, which also contains both Where and What features (as all high-contrast text does). You'll find you can easily focus within either the artwork area or the text area.

This balanced activation of the Where and What vision systems is your goal as a designer. You want your visual design to be integral with the text content, getting the viewer's attention in the first place (via Where features), then releasing it to the text content, while still having enough richness (via What features) to support the text content visually when the viewer needs to take a break from reading.

Tips for designing:

If your design catches attention but doesn't hold it long, it has too many Where features. Soften it by reducing contrast, softening angles, adding curves, detail and/or texture, and introducing color. We often intuitively add gradients, soften edges, add shadows, use line as detail or texture, and add colored edges to angular shapes. In doing these things, we're unconsciously adding What features to a Where-heavy design so the adjusted design holds attention better.

If your design doesn't catch the eye initially, but holds it well once you force yourself to look at it, it has too many What features. Sharpen it by increasing contrast, adding angles, removing or fading curves, detail and/or texture, and removing color.  We often intuitively add areas of high contrast, use line and shape to emulate motion and space, and desaturate colored areas. In doing these things, we're unconsciously adding Where features to a What-heavy design, so the adjusted design grabs attention better.

Text is normally both Where and What. But sometimes the bright background of a monitor gives too much contrast between text and its background, making the text too Where. If this happens, your audience will find it hard to stay focused on the text. Try increasing Whatness by using a curvier typeface, a smaller typeface, less contrast between type and background, or a combination of these changes.

Finally, realize that when working in color, it's hard to see the contrasts and edges that your Where system sees. Don't forget, the Where system is completely colorblind.!

If attention-getting Whereness is important to your design, try doing your initial work completely in grayscale, only adding color later.

Once deep into your project, from time to time do a screen capture, and paste it into your favourite graphics program. Then, convert the capture to grayscale. This is what your Where system is seeing. In a pinch, you can get a quick grayscale view of your work by squinting your eyes or viewing it in a dim light.

Both techniques will desaturate the colors and make contrast and edges more noticeable. Once viewing a grayscale version of your work, see if you need to punch up the contrast or tone it down, soften or sharpen edges or angles, or add or remove details, texture or curves. Work to balance attention-getting Whereness and attention-holding Whatness, to maximize your visual design's effectiveness.