![]() blogs & things:
design songs art poems & stories grafetti group elsewhere news (US)
news (Global)
news (India)
get your own blog at
weather (global)
help the USA
fight hunger with a game
|
![]() ![]() ![]() where / what vision systems, in practiceUnderstanding the Where and What vision systems helps with better visual designIn 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. 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. A real-world example of Where/What analysisIn 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.
|
The Where vision system sees large shapes and movement fast, and fatigues quickly. | The What vision system sees things slowly, processes details, and is long-lasting and resilient. |
The Where vision system is triggered by... | The What vision system is triggered by... |
High contrast | Low contrast |
Edges | Soft value shifts |
Large shapes | Details |
Angles | Curves |
Sharpness | Textures |
Apparent movement | Apparent depth |
Where vision system special feature: | What vision system special features: |
The Where vision system is 100% colorblind !! |
The What vision system processes ("sees") color The What vision system has a special focus on facial identification |
Summary: The Where Vision System determines how close something is and how fast it's moving. The brain uses this system to tell you WHERE the thing you're looking at is, and if it's a potential threat to you. | Summary: The What Vision System processes fine details (including facial characteristics) and color. The brain uses this system to tell you WHAT you're looking at, so you can recognize and categorize the thing. |
Using the left side of the table, and looking at the new illustration, it's easy to see and list the Where qualities of the new illustration: We can see that the illustration has large, high-contrast shapes, and some sharp edges. These are very Where features, and draw the viewer's eye down to the new illustration right away.
Using the right side of the table, and looking at the new illustration, it's just as easy to see and list the What qualities of the new illustration: There are lots of them, such as texture, color, curves, low-contrast areas, and a face. These are very What features that hold the viewer's gaze long after the initial attention grab (achieved by the illustration's Where features) has fatigued. Now I do the same for the branding area of the web page. It also has a good balance of Where and What features, but overall, they're not as strong as those in the illustration.
One of the most important concepts for the designer or artist to get about the Where/What vision systems is that they're not a theory of design, but actual components of our biology, and they directly affect how we think, feel and respond to things. The Where/What elements in the illustration trigger our brains and emotions more strongly than the branding area of the web page does. So it's actually our the difference in our biological response to the illustration, when compared to the branding area, that makes the page look bottom-heavy!
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.
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.
info@windyhilldesign.com :: © 2009 Heather Quinn WindyHill Design, All rights reserved