Writing to the World Wide Web
Graphics on the Web (continued):
Visual Perception and Cognition

The human visual perception system is based on our survival needs. It has changed relatively little from our jungle-dwelling ancestors. They used information from the environment to make basic distinctions between danger/safety, edible/inedible, hot/cold, and so forth.

You may have heard the term "information overload." People complain of suffering from information overload, of being paralyzed from making a decision by the "sheer magnitude" of information out there. What's good? What's bad?

Habits for dealing with Information Overload.

Due to information overload, people don't have time to read/see everything. Everyone has a threshold (a shrinking one, it seems) Therefore, we as designers are always trying to r raise this threshold. We are engineered to conserve limited attention resources, to seek out the economical, the elegant. Our limited resource -- attention -- must be spent on the most important tasks. We conserve this by:

1. Figure-to-Ground.
How do we decide what is most important in the environment? By identifying and interpreting objects. By deciding what information is relevant to our current needs, and what may present a danger to them. What information is most important? It is information which helps us to accurately and rapidly define objects (boundaries), place objects (field-ground), identify objects (what is it?), and interpret objects (what does it mean?) (which we do based on our experience -- memory -- in the context of our current needs). Therefore, the first primary perceptual task is to orient ourselves: we separate (meaningful) figure from (meaningless) ground. Figure-ground relationships are not "out there" but rather, created by the mind. We foreground some things, background others. We need to make the differences explicit enough in our design. Our perceptual system ignores, tunes out stuff that it determines as "no information." This evaluation is a function of:

The key tasks in figure/ground separation are to:

2. Parallel vs. Sequential Processes.
Parallel processes (scanning, seeing and reading) are relatively effortless -- they are like getting a lot of information for free. Sequential processes (identification, interpretation) are effortful - they cost a lot. If we can maximize the information our audience gets from parallel (early, pre-attentive) processes, they will get more information "for free" - leaving more attention available for sequential, effortful processes: interpretation, comprehension, retention, recall.

Another way to think about parallel processes is as follows: I personally don't like a lot of text in a web site. That requires sequential processing. With pictures, I get a lot of information in parallel, coming at me. With text embedded, that's just another parallel line of information.

Assumptions used to "parallelize" information:

3. Contrast.
In this context, easily perceivable contrast is of key importance in controlling the meaning, impact, and utility of the visual message. Contrast:

Ambiguity, on the other hand,

Now, there are times when we want ambiguity (as in those deliberately out-of-focus tv ads). In those cases, the intention is to have you linger over the ad i.e., if I stay with this a little more, maybe I'll stay with that product). Implication: If we can more quickly direct attention, more (of the information we want the viewer to get) will be absorbed and retained - with little effort.

Find a partner. Together, look at the sites listed below. For each site, ask yourselves the following questions:

  1. What is your first, immediate, overall reaction -- before you have read a word?
  2. Where do your eyes go first? Second? Third?
  3. What visual elements draw/repel you?
  4. What do you think the purpose of the site is?
  5. What do you associate the visual messages with? (Think about colors, graphics, layout?)
  6. Does the site effectively distinguish between figure-ground? If so, how?
  7. Does the site effectively utilize parallel / sequential processes? In other words, are you able to quickly gather the meaning of the site, and where things are located?
  8. Does the site effectively utilize contrast?
Write your observations either in another web document or on a sheet of paper. Be prepared to discuss your findings in class. Here are the sites:

Portland's Mayor
L.L. Bean
Note:These notes were developed by Fil Sapienza for his Writing to the World Wide Web course. Thanks to Fil for allowing me to use them.

Return Home