Visual clues help readers navigate through long documents easily. Shapes, lines and color can communicate complex ideas, or show 3–D information on a 2-D page. In addition, some people simply prefer to learn from pictures, not text!
Since I have some training in graphic design, I either create graphics myself or specify the visual elements that an illustrator, photographer or graphic designer must create.
|
|
1. Color
A visual element that provides the reader with information and clues to content:
- Can identify a particular topic or a particular section of a document.
- Makes dry technical material seem more appealing, or friendly.
- Can make publication more difficult (e.g., higher printing costs or slower download).
|
Example 1. Colors from this Web site.
|
|
|
2. Layout
The overall document design, as specified in a layout template:
- Creates an easy-to-read format for each type of information.
- Makes it easy for writers to apply formats consistently.
- Makes it easy for readers to find information.
|
Level 1 Heading
Use this style for the body text. Use this style for the body text. Use this style for the body text.
Level 2 Heading
Use this style for the body text.
Table Title
| Heading |
Heading |
Heading |
| Data |
010 |
XXX |
| Data |
111 |
YYY |
Example 2. Layout template for a Web site.
|
|
|
3. Realistic Line Drawing
A true-to-life depiction of something:
- Shows how parts connect or are physically related, with emphasis on critical features.
- Can serve as a visual dictionary.
- Often replaces pages of step-by-step installation instructions.
|
Example 3. Computer hardware drawing. |
|
|
4. Diagram
A conceptual depiction of information:
- Shows complex interrelationships visually.
- Serves as a visual guide to terminology, concepts, processes or components.
- Can create a visual analogy, comparing new technology to something more familiar.
|
Example 4. Diagram from a training guide. |
|
|
5. Schematic Drawing
A description of a system using industry standard symbols:
- Shows complex electrical or mechanical systems in a compact visual format.
- Supplies detailed system specifications.
- Readable by anyone who has learned the industry standards.
|
Example 5.
Schematic from an auto manual. |
|
|
6. Screen Shot
A visual representation of a screen displayed by a software application:
- Provides a concrete guide to the menus, tools and buttons.
- Visually explains key features and functions.
- Can show the results of the user's actions.
|
Example 6. Screen shot from a user guide.
|
|
|
7. Icon
A small symbol that alerts the reader to a particular type of information:
- Highlights critical warnings related to personal safety or system failure.
- Helps the readers find information relevant to a particular topic.
|
Example 7. Warning icon from a user guide. |
|
|
8. Chart
The visual representation of data:
- Replaces or supplements tables, lists, or descriptions of facts and figures.
- Helps readers quickly compare data.
- Can show how data change over time, or change in relation to a variable.
|
Example 8. Chart showing a business process.
|
