where / what vision systems, in practice

Understanding the Where and What vision systems helps with better visual design

In my first article about the Where and What vision systems (defined by Margaret Livingstone, a neurobiologist, in her book "Vision and Art: The Biology of Seeing" (Margaret Livingstone, David H. Hubel, ISBN 0810904063)), I wrote about the differences between the two vision system, and I made a strong claim: By learning about the vision systems and their differences, you'll be able to do more effective visual design.

This article puts that theory to work.

I took a visual design problem on my own website, and analyzed it for Where/What balance. Using what I learned from the analysis, I changed web site's title and navigation graphics.  The result is a more effective page design, with a small investment in time and effort. 

How can Where/What analysis help the designer?

Whether designing or redesigning, the designer works in a recursive loop: doing work, viewing it, critiquing it, planning changes to be made, moving back to the original work to apply the planned changes, and so on. As a designer, you sometimes feel as if you may get stuck in recursion mode forever. You want to break out, and yet you want your final work to be effective.

You're in luck: The objective nature of Where/What analysis can help you break out of the design loop, and make sure your work is communicating with viewers the way you intend it to.

Where/What analysis can remove the shadows and mystery from your design problems.  As you begin to understand exactly what's causing a problem, you can more easily develop a solution.  And, as you work to resolve a problem, you can recheck a revised design to make sure it's effective.  The robustness and accuracy of Where/What design analysis will give you a level of solid confidence about your design decisions that's a welcome counterbalance to the often subjective nature of design. 

Are you in a position of presenting your firm's design proposals to existing or potential clients? Sometimes it's hard to help a client understand how great your firm's work is.  When you need an additional tool to educate the client, you can use Where/What analysis to show either that an old design (or a competitor's stuff) is not working, or that your firm's proposed designs are going to make a powerful and effective visual statement.

A real-world example of Where/What analysis

In searching for a good example to show how Where/What analysis can work, I thought of using my own website. Since I often feel driven by changes in the world (including seasonal shifts) to modify my website's look on an ad-hoc basis, I've often found I've created a design problem for myself that must be straightened out before I can publish my updated site.  In February 2004, I replaced an existing bit of art on my site's main page with a new illustration. This created a problem: the new illustration made my site's design look "off" somehow.

With a design problem of my own making, and midwinter having generated an impatience for springtime in any form, I was motivated to do a site redesign. In my redesign plan, I had two goals to accomplish: To resolve the visual disharmony that a new illustration created on my site, and to shift my site's look a little, in honor of the upcoming spring season.

From acceptable design to a problem...

Before I added the new illustration to my site's main page, the page looked like the screenshot on the right.  The page was designed to allow the eye to move from the branding in the top left corner, diagonally down and right to the main page content.  The page elements had a good balance between Where features (mainly high contrast and sharp edges) and What features (color, texture, details and apparent depth).  This balance worked to both capture a viewer's attention and hold it.

The next screenshot, below, shows the page with the new illustration in place. You'll see that adding the new illustration has messed up the page's visual dynamic. 

Comparing the two screenshots without thinking about the Where and What vision systems, we'd say that the new illustration is too strong.  It pulls the eye down to the bottom right of the page, and keeps it there. We'd say the page looks bottom-heavy.

What can be done to resolve this?  Standard quick-fix options might be to remove the illustration, make it smaller, or change its dimensions.  But I don't want to do this.  I like the image as it is, and I'd like to keep it where it is, so I need to do some more analysis.  What is it that makes it draw and hold the eye?  Is it that big apparent curve?  The dog's face?  What can I change?  Well, as I've said, I like it as is, so what about its setting — the existing web page?  Should I change the branding area of the page, making it stronger to balance the illustration?  If so, how should I make it change it to make it stronger?  It's a big risk and lots of work to change the logo area, and maybe the change would unbalance the page in some other way.

A good answer to all these questions is to look at the problem in a less chaotic way, by using a simple Where/What analysis to find out what's really wrong, and help develop a good approach to fixing the problem.

Doing the Where/What analysis

How do you do a Where/What analysis?  If you haven't read my first article about the Where and What vision systems, now is a good time to do so. You can't do an analysis unless you know what you're looking for, or why.

Once you're familiar with the basics of the Where/What visions systems, you're ready to go.  You're going to look at the illustration or design two time.  The first time, you'll look for all the Where qualities you can find, and write them down.  The second time, you'll look for all the Where qualities you can find, and write them down, too.  Then, by comparing the lists, you'll see whether your illustration or design is more Where (which will help it get attention), more What, (which will help it hold attention), or if it has a balance between both Where and What (which will make it strong both in getting and holding attention).

Below is a table of Where and What vision system features:

Using Where/What analysis in more depth to develop a solution

The Where/What analysis has confirmed that the new illustration is a strong visual element, which was our instinctive assessment.  It also tells us that the new illustration has more and stronger Where and What features than the rest of the page. So you can see this more clearly, I've made close-up snips of the branding area and the illustration, on the right. Even with the new illustration cropped and partially overlaid by a snip of the branding area, the new illustration still draws and holds attention better than the branding.

The viewer's visions systems are captured by the new illustration's strong Where features, and, due to the new illustration's strong What features, never released to the rest of the page.  It's hard for the casual viewer to pay attention to the site's branding and rest of the page content.

In a grayscale version of the snips graphic, below, you can see Where qualities more easily — viewing a grayscale version of your design is a good quick way to check the Where half of your Where/What analysis: Because the Where vision system is completely colorblind, temporarily removing all the color from your work will allow you to clearly see and identify the Where qualities in your design.  (Otherwise, the strong Whatness of color can mask or interfere with your ability to see the design's Where features.  Remember that our responses to all Where and What features, including the What feature of color, are biological and not under our control!)  Grayscale also makes it easier to untangle value shifts from color transitions, so you can use it to double-check the What portion of your analysis, too.

Notice that the new illustration has significantly more large high-contrast areas than the branding graphic does. These are Where features. It also has more value shifts (low contrast areas of changing brightness), detail, texture, curves and that cute little doggie face. All of these are What features. In fact, the dog's face is one of the strongest What features in the illustration: The What system is believed to have developed to help us recognize faces and bodies.  So in the grayscale image it's very obvious that there are more and stronger Where and What features in the new illustration than on the rest of the page.  And this is the clear and simple reason why the new illustration dominates everything else.

My site's pre-new illustration design was done with the Where/What vision systems in mind.  The original page focus was the branding area in the top left of the page, consisting of a logotype and an illustration of a horse (designers are workhorses, you know!).  The logotype and branding illustration have large shapes, sharp edges, angles and high contrast. These features made it the most Where area of the page, so it would get attention first.  The color of the logotype and its background, and the texture, detail, curves and color of the horse illustration, were What features that were deliberately introduced into this area of the design to make it less Where.  I wanted viewers to see the logotype first, and stick around long enough to read it, too.  (The Where vision system fatigues very quickly.  To hold attention on a Where element, you must add What features to counterbalance the element's Where qualities.)  The combination of strong Where/What features helped the branding corner be the page's main focus. 

All this design planning was undone by the well-balanced strengths of the new illustration, which "talks" very loudly and directly to both the Where and What vision systems, and "pokes a hole" in the balance and dynamics of the original page design.

The solution?

So what's the solution?  The cause of my design problem is the strong relative amount of Where and What features in the new illustration, vis-à-vis the original branding graphic.  I don't want to change the new illustration.  So, my only logical (and intuitive) option is to turn my attention to the branding area, specifically the logotype and its background, and change them so they work better with the new illustration.

Since I change my website several times a year, and I'm a busy person (just as you are), I don't want to spend a lot of time fixing the problem.  To save time, I make the decision that there'll be no changes to shapes, sizes or positions of the original logotype graphic images themselves.  All changes I make will have to stay in the "geographic" area of the original logotype graphic.

Turning to the theory of Where/What for my solution, I think I can rebalance the page by adding stronger Where features to the logotype, to enhance its basic attention-getting qualities.  But: I know that if I do this, I'll run a strong risk of making it so Where that people see it and run the other way.  So, as well as making the logotype more Where, I'll probably also need to enhance its What features, to make sure the entire branding areas has good Where/What balance so people will stay long enough to read the logo, just as in the original.

Remember this two-part key to effective visual design: Too many Where elements, without What elements, will grab attention, then lose it right away.  Too many What elements, without Where elements, will never be able to hold attention because there's nothing to get the viewer's attention in the first place.  You need a good mixture of both Where and What features to effectively grab and hold the viewer's attention.  And remember that underling these somewhat abstract-sounding tips is the vibrant fact that your design and art work trigger your audience's actual biology via the two visions systems, Where and What, and your understanidng of these is your key to getting the desired audience response. 

Above and below are a snip and a screenshot that show how the solution worked out. And here's how Where and What features were added to the logotype graphic: The logotype font was made higher-contrast, and a block of warm transparent color in back of the logotype was removed. The higher contrast and reduced color created stronger attention-getting Whereness.  The increase in Whereness was balanced by reducing the logotype font size, then adding a fine, colored texture in back of the logotype. Texture (besides the textured block, the reduced font increased texture) and color create stronger attention-holding Whatness. The stronger Whatness rebalanced the stronger Whereness of the logotype.  Then, the stronger, reenergized branding area was viewed jointly with the existing block of navigation graphics. It was very obvious that the new logotype and existing navigation were too Where, when considered together.  Since the new logotype was well-balanced, a decision was made to reduce Whereness in the navigation block, by reducing contrast and font size. These changes created effective Where/What balance for the entire top left block of the web page layout layout.

Overall, these small changes completely rebalanced the entire page, and worked well on other pages on the site that had not been otherwise changed.  In addition, when the original warm color block in back of the logotype was replaced with the block of textured green, and the logotype font was darkened and reduced in size, the web site took on a kind of spring-dress look, with cooler colors and more delicate elements. It only took about 90 minutes to do the analysis, make the changes, and publish the results.

Thus, using Where/What analysis helped me build an effective solution to a visual design problem, in very little time!

When you first start exploring how your human viewers' Where and What vision systems respond to your designs, and how you can best communicate with the visual systems of your audience, you'll need to do a bit of deep thinking and analysis. The payoff is that, over time, you'll find yourself integrating an awareness of these issues into your general design skills, and you'll be incorporating Where/What theory into your work, intuitively. Whether you're just starting to understand these two vision systems and how humans process what they see, or you're farther along in researching how vision systems work, grappling with these theories and trying to put them to use will help you design more effectively.

Content and graphics © 2004 Heather Quinn, WindyHill Design, All rights reserved

This article is also published at Evolt.org.

This site hosted by:

info@windyhilldesign.com :: © 2009 Heather Quinn  WindyHill Design, All rights reserved