 |
|
|
Color: First Impressions are Important
Background Colors
- the lighter, the better (e.g., light grey, beige, pale yellow)
- avoid dark colors (especially black!)
- avoid patterned backgrounds (graphical balance, legibility of text)
- off-white almost always works: remember, many people print the content of web pages (stark white, for some people, may offer too much contrast when used as a background)
Text Colors
- avoid light colored text (especially white!)
- avoid "electric" colors for narrative text
- coordinate your text colors (text, active links, followed links, etc.)
- changes in text color, other than hyperlinks, should indicate a point of emphasis
Why is color important?
- Your goal is to present information. It has to be readable.
- People read content on a monitor different from printed content. Many actually print textual content rather than read it on a web page, especially when color choices and text formatting decisions have been poor.
- Text tends to "close up" when presented in white or bright colors. Remember your goal is legibility.
- The primary concern with color is that there be a significant, but not jarring, contrast between the background and the foreground "palette" of color
Examples of good use of color, the color schemes in need of a web doctor, and the color choices you can't stand to look at.
Recommendations on Uses of Text
- avoid blinking text
- avoid ongoing boldface narrative text
- don't use ALL CAPS
- beware of italics
- avoid the convention of "click here" to create a link
- avoid ambiguous or wrapped links (limit links to 1-3 words, on average)
- favor bulleted text of exposition on primary pages
- don't "clutter" pages with too much information
Why is text formatting important?
- 96% of web "readers" are goal-driven: looking for a particular fact or document, to gain an understanding of a topic, or to make a decision
- rate of reading text on a monitor is up to 40% slower than paper text
- most web "browsers" scan text for meaning (average of 10 seconds before moving on); looking for keywords in content to let them know they've found information they are looking for.
Examples of good use of text, the text use in need of a web doctor, and the text choices you can't stand to look at.
Recommendations on Graphical Effects
- Second to overall color scheme, graphics capture the eye's attention
- 5 second "squint" test: does a simple survey tell me what the web page is about?
- create rules lines with the horizontal rule command--don't create lines out of a sequence of graphics, particularly animated graphics
- use convention of clickable images (to get to graphics requiring a larger format)
- consider thumbnails or black and white images in tandem with clickable images
- balance issues of load time versus visual impact
- limit image file sizes to 10-12kb maximum; 5kb is a preferred target
Why is careful integration of graphical content important?
Well Organized Sites are Effective Sites
- avoid requiring too many plug-ins to promote "special effects"
- Consistency, consistency, consistency: navigational tools, color schemes, logo placement, etc.
- "Splash page" limited to one 800x600 pixel screen; two screen primary page the maximum.
- Use jump buttons: on web pages longer than two vertical screens provide users a jump button (to top of page and back to Home).
- Page should be discernably "chunky" (chunk each page into a few paragraphs (use the Post-it note technique)
- Pages that "must" be long (few links, graphics, etc.) should have color schemes that will translate to easy printing (because most people will print text-intensive web pages rather than reading them on-screen).
- Use tables to manage screen layout; note that if you think people will be printing your web pages, use a table to define width of web page at 535 pixels--this is the widest table that will print on standard 8.5" x 11" paper.
Exemplary pages to illustrate a variety of page and site organization styles.
|
