Color

• focused attention
• speed searching
• orientation (cueing, etc)
• more efficient acquisition of information

Poor color use can do the opposite: decrease attention, decrease performance, cause disorientation, and increase difficulty on the part of your audience.

Aside from making your web pages appealing (which we've talked about before), color is good for communicating a document's information structure.

According to Keyes, "Color's effectiveness as an information cue depends on several factors: where color is used within the information structure, what elements are cued, how color cues are differentiated, and what color characteristics are used." (646). (See The Yuckiest Site On the Internet. and Friends and Partners and Sony for cueing)

Here are some other things to think about when using color:

• Color can distort size
  

• Colors can index depth
  

• Warm colors are brighter, more dynamic, more active than cool colors (see the 'dashboard' symbol)
  

• Warm colors appear closer to the viewer than cool ones
  

• Light or pale colors make objects appear larger; dark colors make objects look smaller
  

• Maximum visibility is with yellow; then comes orange, vermillion, and yellow-green
  

• Color can index motion
  

• Color can be used to prioritize information. Audiences will look at brightest area first.
  

  (See Federal Express)

• Color can be used to emphasize information
  
  

• Eight percent of men and one percent of women are colorblind, green and red being the problem colors. Blue is the universally recognizable color

• Color has holiday connotations
  

  

  

  

  

• Color has cultural connotations. Black is the color for mourning in the West; in China, it is White. White in the West also connotes purity, refinement; Black in the west can mean evil, dementia. Note: there are racial connections to this distinction. Other color connotations:
  • Green can mean sourness. It also connotes "go." It can also mean envy. Green signifies health services
    

  • Black and Ye llow signify "hazardous waste," which explains why the government chose them: in surveys this combination proved to be the most legible

  • Orange is informal, cheerful, but can also mean caution. Brown is also similar to orange in this manner, except it is not a "power color" (See Seraphim Rose Books )

  • Red signifies stop, danger, fire, heat.
    

    Red can also signify embarrasment
    

    

  • Yellow signifies slow, testing, and sunlight (sunniness). It is the most visible of all colors, so it can make people jittery as well.
    

    Yellow can also signify jaundice.
    

    

  • Grey is neutral, symbolic of business success

  • Blue is the most popular color for lots of things -- one reason is that it is politically conservative. It also connotes calm, authority, respect, water, cold, reliability, and corporate strength to financial people. Blue road signs mean OK
    

    Red overrules blue
    

    

    To doctors, blue connotes death.

  • Purple can signify royalty

    or rage
    

    

1. Bakersfield
   
2. Ellen's Place
   
3. Turtle
   
4. The Peabody Home Page
   
5. APFire
   
6. Eric
   
7. Sun Microsystems
   

   ---

   Layout

   Probably the most important result of layout is to ensure that your audience is not lost. The bottom line is that people want to know where they are in relation to your site (figure-ground), where to look for things on your site (parallel vs. sequential processes), and where to focus their attention (contrast). See this law firm.

   On the other hand, don't bore your users with plain-looking gifs and layout because you don't want them to be lost. Sure, the bottom line is that people want to know where to look for things -- this is necessary not just for orientation, but so that readers can have the freedom to read your document in order they want. Take a look at GolfWeb or Virtual Society on the Web.

   So, be creative, but be sensible. Things that can help include the following:

   • Providing identification cues. These are located at top of page in 95% of web sites, so that's where most people expect to find them. So, it is probably not advisable to move them unless you have a really good reason -- which you'll need to justify for me.

   • Common cognitive cues including colored bullets/icons that have similar meaning in each page of the document.

   • Common header and footer elements. Recall in our discussion of figure-ground last week: readers need boundaries.

   • Common graphics style and size. Think about the effects of pairing shiny photo-style graphics with amateurish cartoons -- get my point?

   • Use frames judiciously. See Where frames do not work and Where frames do work

   • Use tables judiciously. Again, see Technical Writers.

   • Use whitespace (remember: figure-ground?).

   • Audience!. Different layouts are applicable to different audiences. See Federal Express and The Yuckiest Site On the Internet.

   • Group informationin order to make meaningful patterns that will enable our audience to more quickly identify, interpret, and reach 'closure' in your document. Some techniques for grouping include:
     • Limit the number of things we must attend to (5 +-2 theory)

     • Create/imply meaningful relationships using proximity, similarity in size, shape, color, texture, tone, orientation, and/or shared alignment

     • Employ chunking (group relevant items for memory). This is usually the first step in structuring the visual field.

     • Utilize queuing / separating functions . Create a visual hierarchy. Create a sequence of first, second, third, and fourth levels of importance. Think about where, and in what order, you want your audiences' eye path to go. See McGrane-Chauss: Reader as User: Applying interface Design Techniques to the Web..

     • Filtering.. Layering information for easy access by different audiences (who have different purposes for using your document). Filtering builds layers through typography, color, visual cues, bullet lists and symbols. See Dallas Cowboys )

     • Mixing Modes/Multiple Access. Different people learn in different ways. Some learn better through text than pictures, and vice versa. Let the user learn to use your document from many different modes. Give them not just visual or text, but an "effective balance" of both. See Intercultural Computer-Mediated Communication.

     • Sketch out (on paper)a grid of your proposed web site. We'll go through how to do this in class, but for now, look at 3 sketches of how you might do this. The latter two are sketches of the grid for the class syllabus. (Note: I will expect sketches of grids for your final projects!).
       

       

       

   

   ---

   Find a partner or two. Look at each of the sites listed below. Considering the issues about layout that we just discussed, try to ascertain 1) how the layout fits the intended audience for the site, and 2) how the layout best allows for the purpose and proper functioning of the site.

   APFire
   Eric
   Sun Microsystems
   (note: These notes were developed by Fil Sapienza for his Writing to the World Wide Web course. Portions paraphrased from Elizabeth Keyes "Topics in Visual Literacy," 1991 and from her courses on "Publication Practicum" (1994) and "Visual Communication" (1994)). Some graphics taken from Jan V. White, Color in the Electronic Age, 1990).

   ---

   Return Home

   ---