Principles of Good Interface and Screen Design 271

Step 3: Principles of Good Interface and Screen Design 271

The most important part of the graphic is the data. Emphasize the data by making the data lines the heaviest. Of secondary importance are the axes lines. Display them in a medium thickness. Axes lines should be extended entirely around the graphic to create a rectangle (or box). This will define the graphic area and help focus attention on the data itself.

Grid lines should be avoided if at all possible, unless absolutely needed for accurate data interpretation. When included, grids should be in the background. Let the user turn the grid on or off as needed.

Labeling

A graph also needs a label for its title, the axes, its key or legend, and its data. First, however, some general labeling guidelines follow.

Employ clear, detailed and thorough labeling.

Maintain a left-to-right reading orientation.

Integrate the labeling with the drawing. — Do not curve letters to match the shape of curved lines.

Use only one typeface, font, and weight. — For emphasis, use different type sizes.

Do not separate labeling from the data through ruled lines. Clear and detailed. Employ clear, detailed, and thorough labeling. Words should be

fully spelled out. Follow standard capitalization schemes, using both upper and lowercase, with lowercase used for textual information. Use the simplest and shortest word forms possible. If an abbreviation is necessary, use standard word abbreviations.

Left-to-right. Maintain a left-to-right reading orientation. Display all labels hori-

zontally. Avoid words that are organized vertically or words that run in different directions. Whereas non-horizontal words on hard-copy graphics can easily be read by turning the paper, this screen capability is not available, nor yet easy to accomplish.

Integrate. Integrate the labeling with the drawing. Explanations on graphics help

the viewer and should be incorporated as much as possible. Words are data, and they can occupy space freed up by nondata elements or redundant data. Integrating words and captions with the graphic eliminates the need for a legend and the eye movements back and forth required to read it. Also, incorporate mes- sages to explain the data, and label interesting or important points. Never curve letters to match the shape of curved lines. This is terribly distracting. Run all text horizontally.

One typeface. Use only one typeface, font, and weight. Using the same type style

for graphics and text aids the visual integration of the two. If text needs to be emphasized, use different type sizes.

Separation. Do not separate labeling from the data through ruled lines. Again, this

272 Part 2: The User Interface Design Process Title

Create a short, simple, clear, and distinctive title describing the purpose of the graphic.

Position the title above, centered, or left-aligned to the rectangle formed by the extended axes.

Spell it out fully, using a mixed-case or uppercase font.

A title should be brief and descriptive of the graphic. A title may be centered or flush left to the rectangle formed by the extended axes. Marcus (1992) feels that left- aligning it yields a stronger composition. Titles should be spelled out fully, and may be displayed larger, bolder, and in mixed- or uppercase font.