Notes from 48th International STC Conference
Chicago, Illinois, May 13-16, 2001

Making Information Visual: Creating Effective Web Pages

Janice (Ginny) Redish, Ph.D.
Redish and Associates, Inc.

Ginny Redish is a recognized expert in usability, online documentation, and Web publication. She has co-authored two books in this area and owns her own documentation company, Redish and Associates, Inc.

Session Description: The Web is about content -- about information -- and to be effective, information has to be designed. This session provided practical examples on how to turn staid prose into easily accessible byte-sized chunks of information, thereby making it much more usable.

Note: For a hard copy of the presenter's slides, contact Dan Voss. Also available is an excellent hard-copy bibliography of resources to help in "Making Information Visual."

• Information overload is a major problem in the business world today. Nobody can read everything that comes through on e-mail, on paper. Of necessity, we perform "triage" on e-mail, sorting it by relevance, deadline, criticality, etc.
• Beleaguered with information overload, above anything else most users want quick answers to their questions.
• People use the Web by a "skim, scan, and select (3S)" technique. By comparison, most people don't read paper documents word for word either.
• Most business reading is purpose-driven...reading "to do" rather than reading to learn. Proper use of the Web involves understanding and acting upon this premise.
• People want information from the Web quickly. Since we read -- and scan -- more slowly on the screen, seeing less of the screen at a time than we do on paper, effective Web design must be driven by users' need to get information quickly.
• Most Web sites use many more words than they need to convey their messages. In other cases, the content of the site does not match what users are looking for.
• Different types of Web pages
   
• Home
• Scan, select, and move on
• Scan and get information...focus of this workshop (not overall architecture of the site, which is, of course, also very important)
• Give or verify information (form)
• Writers must meet business objectives while helping users meet their goals, making it easy for busy users to get the information they need...using fewer words without losing meaning.
• Get out of the "prose mode," layer the information, and think "information" or "topics," not books.
• "Less is more" is a good mantra for the Web. Don't just edit; find the essence of the message. Morkes and Nielson cut the words by 54% and people thought the site's treatment of topics was more complete.
• Tabulation of data that divides into a couple of basic categories makes user access much faster. An example: location of a museum, hours of operation, prices. Tables are very well suited for comparisons... data organized in this fashion is much easier to process than details buried in text. Tables are very well suited to "if, then" or "to do this, then do this" type of sequences; they make such sequences easier to follow than even a bullet list.
• Bullet lists make information accessible more quickly. Lists are well suited to steps, options, conditions, and items. Lists facilitate scanning, create chunks, separate ideas, show relationships, and allow counting.
• Enumerate the steps in instructions to make them easy to follow, using the imperative mood for verbs, and including some active space between steps.
• White space is precious, yet critical. Judiciously allocating a small amount of free space significantly enhances processibility of information. Tables help greatly with this.
• A typical structure would be like this: If yes, then bullet-bullet-bullet. If no, then bullet-bullet-bullet. That way, users can zero in rapidly on the information that is relevant to their particular situations.
• Even small graphic tidbits (e.g. tiny red "hotline" telephones next to bullet items involving points of contact for disaster relief; green checkmarks for lists of the steps in the relief process; bold type for phone numbers...all helping to break up text and increase legibility) significantly increase a site's usability.
• Get out of the prose mode! Visual writing lets readers "grab and go." It includes hyperlinks, fragments, pictures, and lists.
• Take advantage of options the Web gives you, such as linking. Instead of a 3-paragraph essay on 3 subtopics, create a sub-menu listing the 3 and link to lower-level pages, each of which visually depicts what was in the all-prose paragraph for that subtopic.
• A "chunk" on the Web needs to be even smaller than a chunk on paper. One-sentence paragraphs are fine. Sentence fragments are fine. The key is to compress and highlight with space.
• Layering is an important technique to allow users to get as little or as much detail as they want.
• Clearance cycles are a problem on Government Web sites.
• People who go to the Web are not in "book mode." At any one time, a user only wants one topic.
• Many companies are replacing lengthy books of documentation with an online knowledge book.
• PDFs are usually optimized for printing, not on-screen reading. Given enough time, optimizing for the screen is an important way to add usability for Web sites.
• Government regulation for Web site accessibility for the visually impaired: http://www.usability.gov is a Web site with a whole section on accessibility. 50A governs specs for Web pages, proper use of tables, etc. (2-column tables that read L-R are OK for readers for the visually impaired; thus, the "if, then" and "to do this, do this" tabular schema for writing visually does work re accessibility criteria.)
• Use graphics to save space. Compare a map with hot buttons for the 50 states to a bullet list of 50 links to the states.
• A sensible, intuitive navigation trail leading the user rapidly through the "tunneling" process is an important accessory to the use of layering for simplification and accessibility. It doesn't matter how cleverly and concisely the material is presented if the user can't get to it.
• Functional pictures add speed to e-commerce sites, which is critical to snare the buyer while the impulse is hot.
• Two words (e.g., "Great Buys") in a box can stand out amongst a bunch of thumbnail graphics.