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:
- being selective (defense against overload, camouflage)
- employing staged processes (we 'skim')
- constantly deciding where to focus attention
- utilizing the most return for the least effort
- looking for "closure:" reducing uncertainty, identifying the object and moving on
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:
- habituation
- normalization
- salience
The key tasks in figure/ground separation are to:
- detect edges, boundaries -- tasks of early vision
- estimate depth (pre-attentive -- before we've done something -- vision; near-far, dangerous or not?)
- process: scan the visual field, in parallel, for critical features, looking for for contrasts in:
- size
- tone, texture
- intensity
- color
- orientation
- spatial position
- motion
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:
- Adhere to Gestalt principles that describe pattern-making processes, and use them in order
to simplify visual data. Note that our visual system will seek the simplest interpretation of visual data.
What and how we interpret that data depends on familiarity and context.
- Establish meaningful patterns that enable us to more quickly identify, interpret, and reach closure
- Group/organize
- Fill in the blanks with information that is not physically present
- Follow Law of Pragnanz (economy, efficiency)
3. Contrast.
In this context, easily perceivable contrast is of key importance in
controlling the meaning, impact, and utility of the visual message. Contrast:
·
- focuses attention
- simplifies complexity
- clarifies visual structure (edges) & intended message
- decreases user effort
Ambiguity, on the other hand,
- scatters attention
·
- increases complexity
·
- obscures visual structure (edges) & intended message; multiple interpretations are possible
- increases user effort
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:
- What is your first, immediate, overall reaction -- before you have read a word?
- Where do your eyes go first? Second? Third?
- What visual elements draw/repel you?
- What do you think the purpose of the site is?
- What do you associate the visual messages with? (Think about colors, graphics, layout?)
- Does the site effectively distinguish between figure-ground? If so, how?
- 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?
- 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
Stanford
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