Principles of Good Interface and Screen Design 217 Tables

Step 3: Principles of Good Interface and Screen Design 217 Tables

Large amounts of information that must be viewed and compared can be displayed in

a table. Like a data entry grid, a table is a matrix of information arranged in columns and rows. Tables usually consume less screen space than do individual data elements.

A table may be created from a query but may also be fixed in format.

Table Title and Headings: — Provide a clear and descriptive title, headings and, where appropriate, subhead-

ings for columns and rows. • Do not include colons (:) after the headings. • Show units of measurement.

— Justify column headings according to the data presented in the table cells. • Left-justify for columns containing text. • Right-justify for columns containing numbers.

— Left-justify row headings.

Table Data or Information: — Organize the presented data or information logically and clearly.

• Place similar information together. • Place most important or frequently used at the top. • Arrange chronologically or sequentially.

— Justify the data presented in a column according to its content. • Left-justify textual data. • Right-justify numeric data. • To reduce table width, wrap information in a column of cells.

Table Format: — Provide alternate-row shading. — Use light backgrounds. — Highlight a particular cell, column, or row using a contrasting display technique.

• Avoid scrolling, if possible.

Printouts: — The entire record listing must be printed, not simply what is currently visible. — Users must be able to modify the font size and type and/or column width so the

printout completely fits on the available printer paper. — The printout must maintain the users choices of columns, column locations, and sort, not resetting these elements to a default. — The printout must have a header and footer.

A table, illustrated in Table 3.1, should possess the following qualities: Descriptive headings. Provide clear and descriptive headings and, where neces-

sary and appropriate, subheadings for columns and rows. Do not include colons (:) after the headings. Avoid abbreviations in column headings whenever possi- ble. If an abbreviation is necessary, use a ToolTip to spell out an abbreviation. (ToolTips are described in Step 7.) Some types of data can be described by differ- ent units of measurement (for example, inches or centimeters, miles or kilome- ters?). If there is any possibility of ambiguity, always include the unit of

218 Part 2: The User Interface Design Process

Heading justification. Justify column headings according to the data presented in the table cells. Use left-justification for columns containing text and right-justifi- cation for columns containing numbers. Row headings should be left-justified.

Table organization. Organization of table data or information will follow the gen- eral organization guidelines described previously. Organize table data logically and clearly so it can be quickly identified, scanned, and compared. Place most important or frequently used information at the top, place together information that must be directly compared, and arrange it chronologically or sequentially.

Data justification. Justify the data presented in a column according to its content. For textual data, use left-justification; for numeric data, use right-justification. Alignment of numeric data is important for any report containing numbers. Data comparisons will be easier to perform, and errors easier to detect. In reports, numbers in columns should always be presented right-aligned using mono- spaced fonts. A monospaced type is fixed-width, meaning each number pos- sesses the same width. The standard PC monospaced typeface is Courier. Monaco is the standard on the Macintosh. Courier, however, is a very wide type. The numbers in some of the common software fonts are always presented as monospaced, even though the letters are not. Examples include Arial, Times New Roman, and Verdana. Always use proportional fonts (variable-width letters depending on character width) for textual information because monospaced text will consume about 30 percent more real estate on a screen.

Table width. To reduce the width of a table, a cell’s content can be wrapped into

two lines, as illustrated in the “LANGUAGES” column in Table 3.2. Alternate-row shading. Visually distinguish individual rows by displaying alter- nate rows in a light color. Tullis (2003) evaluated three methods of distinguishing

rows and/or columns: (1) alternate-row shading using alternating white and light gray backgrounds; (2) horizontal and vertical line row and column separa- tors; and (3) horizontal line separators only. These methods were compared with

a fourth alternative: space as the only separator. The finding — in the visual search task alternate-row shading yielded the best performance (speed and accu- racy of response) and was rated as the best alternative by study participants. Borders apparently interfere with scanning and readability. If alternate-row spac- ing cannot be implemented, or if more than seven rows are presented, insert extra white space after every fifth row.

Table 3.1: A Table EUROPEAN UNION NEW MEMBER STATES IN 2004

AREA (SQ.MI.)

30,450 Estonia

Czech Republic

Prague

Republic

17,413 Hungary

Tallinn

Republic