|
Introduction | | | Data Entry | | | Data Display | | | Sequence Control | | | User Guidance | | | Data Transmission | | | Data Protection | | | Table of Contents |
|
GUIDELINES FOR DESIGNING USER INTERFACE SOFTWARE
ESD-TR-86-278
|
| by Sidney L. Smith and Jane N. Mosier |
|
|
Introduction | | | Data Entry | | | Data Display | | | Sequence Control | | | User Guidance | | | Data Transmission | | | Data Protection | | | Table of Contents |
Data display refers to computer output of data to a user, and assimilation of information from such outputs. Some kind of display output is needed for all information handling tasks. Data display is particularly critical in monitoring and control tasks. Data may be output on electronic displays, or hardcopy printouts, or other auxiliary displays and signaling devices including voice output, which may alert users to unusual conditions.
In this discussion, data are considered to be display elements related to a user's information handling task. Displayed data might consist of stock market quotations, or the current position of monitored aircraft, or a page of text, or a message from another user. Displayed data might provide guidance to a user in performing a maintenance task, or might provide instruction to a user who is trying to learn mathematics or history.
There might be some display elements that themselves do not constitute task-related data. Those elements include labels, prompts, computer-generated advisory messages and other guidance that helps a user interact with a computer system. Although such user guidance display features are sometimes mentioned here in connection with data display, they are discussed more extensively in Section 4 of these guidelines.
In general, somewhat less is known about data display, and information assimilation by the user, than about data entry. In current information system design, display formatting is an art. Guidelines are surely needed. But these guidelines may simply serve to help a designer become more proficient in the art.
It must be recognized that guidelines cannot tell a designer what the specific contents of a display should be, but only how those contents should be presented. The specific data that must be displayed can only be determined through a careful task analysis to define the user's information requirements.
For effective task performance, displayed data must be relevant to a user's needs. An early statement (Smith, 1963b, pages 296-297) of the need for relevance in data display, although written before common adoption of gender-free wording, otherwise seems valid still: When we examine the process of man-computer communication from the human point of view, it is useful to make explicit a distinction which might be described as contrasting "information" with "data." Used in this sense, information can be regarded as the answer to a question, whereas data are the raw materials from which information is extracted. A man's questions may be vague, such as, "What's going on here?" or "What should I do now?" Or they may be much more specific. But if the data presented to him are not relevant to some explicit or implicit question, they will be meaningless. . . . What the computer can actually provide the man are displays of data. What information he is able to extract from those displays is indicated by his responses. How effectively the data are processed, organized, and arranged prior to presentation will determine how effectively he can and will extract the information he requires from his display. Too frequently these two terms data and information are confused, and the statement, "I need more information," is assumed to mean, "I want more symbols." The reason for the statement, usually, is that the required information is not being extracted from the data. Unless the confusion between data and information is removed, attempts to increase information in a display are directed at obtaining more data, and the trouble is exaggerated rather than relieved.
Certainly this distinction between data and information should be familiar to psychologists, who must customarily distinguish between a physical stimulus (e.g., "intensity" of a light) and its perceived effect ("brightness"). The distinction is not familiar to system designers, however, although the issue itself is often addressed. In the following description of what has been called the "information explosion", notice how the terms data and information are used interchangeably, confounding an otherwise incisive and lively analysis by Martin (1973, page 6): The sum total of human knowledge changed very slowly prior to the relatively recent beginnings of scientific thought. But it has been estimated that by 1800 it was doubling every 50 years; by 1950, doubling every 10 years; and by 1970, doubling every 5 years. . . . This is a much greater growth rate than an exponential increase. In many fields, even one as old as medicine, more reports have been written in the last 20 years than in all prior human history. And now the use of the computer vastly multiplies the rate at which information can be generated. The weight of the drawings of a jet plane is greater than the weight of the plane. The computer files of current IBM customer orders contain more than 100 billion bits of information -- more than the information in a library of 50,000 books. For man, this is a hostile environment. His mind could no more cope with this deluge of data, than his body could cope with outer space. He needs protection. The computer -- in part the cause of the problem -- is also the solution to the problem. The computer will insulate man from the raging torrents of information that are descending upon him. The information of the computerized society will be gathered, indexed, and stored in vast data banks by the computers. When man needs a small item of information he will request it from the computers. The machines, to satisfy his need, will sometimes carry on a simple dialogue with him until he obtains the data he wants. With the early computers, a manager would often have dumped on his desk an indigestible printout -- sometimes several hundred pages long. Now the manager is more likely to request information when he needs it, and receive data about a single item or situation on a screen or small printer. It is as though man were surviving in the depths of this sea of information in a bathyscaphe. Life in the bathyscaphe is simple, protected as it is from the pressure of the vast quantities of data. Every now and then man peers through the windows of the bathyscaphe to obtain facts that are necessary for some purpose or other. The facts that he obtains at any one time are no more than his animal brain can handle. The information windows must be designed so that man, with his limited capabilities, can locate the data he wants and obtain simple answers to questions that may need complex processing.
Some experts understand this distinction clearly, such as Hannemyr and Innocent (1985) who write about "transforming . . . data into information". But many system designers and users still fail to recognize the difference.
Once a designer has determined what data must be displayed, through analysis of user information requirements, the next step is to decide how those data might best be formatted. Data might be displayed as text, or in data forms, tables and/or various graphic formats. Each of those types of data display is considered separately in the guidelines presented here.
In some applications, the nature of the data will dictate the necessary format, as in the graphic situation displays used for air traffic control. In some applications, equipment limitations may constrain display formatting, as in systems without graphic capability. In many applications, however, a designer will have considerable latitude in choosing how to display data. Good judgment may be needed to decide when pictures or diagrams should be displayed rather than narrative text, or vice versa.
In the subsections of guidelines dealing with text, or data forms, or tables, or the various types of graphic displays, the initial guidelines describe generally the circumstances in which that particular type of data display may be appropriate. The design decision will require careful analysis of the users' information handling tasks to determine just what circumstances will actually prevail.
For data display, as in other areas of user interface design, some general concepts deserve emphasis, including the importance of context, consistency, and flexibility. Somehow a means must be found to provide and maintain context in data displays so that a user can find needed information. Task analysis may point the way here, indicating what data are relevant to each step in task performance. Design guidelines must emphasize the value of displaying no more data than the user needs, and the importance of maintaining consistent display formats so that the user always knows where to look for different kinds of information, on any one display and from one display to another.
Detailed user information requirements will vary, however, and may not be completely predictable in advance, even with careful task analysis. Thus flexibility is needed so that a user can tailor data displays on line to meet current needs. Such flexibility is sometimes provided through optional data category selection and display offset and expansion features. If options for tailoring display coverage are provided, a user can adjust the assimilation of displayed data in a way analogous to the self pacing of data entry.
When a user must both enter and retrieve data, which is usually the case, the formatting of data displays should be consistent with the methods used for data entry. As an example, if data entry is accomplished via form filling, with specially formatted data fields, subsequent retrieval of that data set should produce an output display with the same format, especially if the user is expected to make changes to the displayed data or additional entries. Where compaction of data output is required for greater efficiency, perhaps to review multiple data sets in a single display frame, the displayed items should retain at least the same ordering and labeling as when those fields were used for data entry.
Display design must also take into account the type of dialogue used for sequence control, and with hardware capabilities. Where user inputs are made via menu selection, using a pointing device like a lightpen, then display formats should give prominence (and adequate separation) to the labeled, lightpennable options. Location of multifunction keys at the display margin, to be labeled on the adjacent portion of the display itself, may provide flexibility for both data entry and sequence control, but will necessarily constrain display formatting.
These general concepts underlie many of the guidelines for data display proposed in the following pages. As for the other areas of user interface design, an attempt has been made to write guidelines for data display in functional terms, insofar as possible without reference to specific display devices and questions of hardware implementation. As a practical matter, however, available display technology will inevitably influence the wording of guidelines.
A discerning reader will note that the guidelines presented here deal almost exclusively with visual displays; there are only a few references to other possible display modes. Moreover, most of these guidelines implicitly assume a fairly large visual display, with room to show different kinds of data at one time -- in effect, a display with about 24 lines of 80 characters, much like the devices we now use. Consequently, many of these guidelines will not apply in applications where displays are constrained to a smaller size, such as "briefcase" terminals or handheld display devices.
As display technology develops further, it seems inevitable that some of the guidelines proposed here must be reconsidered, and other guidelines added. As an example, we may anticipate increased use of graphics in future information display design, with moving (and talking) pictures such as those we now enjoy in displays designed for entertainment.
The guidelines proposed here are intended for display designers. If we regard displays as contrived arrangements of data, then the guidelines refer to that contrivance. What happens in applications where the computer provides a flexible capability allowing users to contrive many of their own displays? If a user composes a poor page of text, with long sentences, flawed grammar, inconsistent spacing, etc., can a software designer be held responsible? Presumably not, or at least not today.
One might imagine future systems, however, where some form of expertise is stored in the computer, including expertise on user interface design. In applications where users design their own displays, a computer might someday suggest pertinent guidelines, or perhaps even enforce design rules where warranted. For example, if a user entered irregularly spaced text, a smart computer might regularize the spacing in subsequent output of that text.
The guidelines presented here can themselves be regarded as a long multipage data display. Problems of display organization arise in presenting the guidelines material, in terms of content, wording, and format. As in other sections, the topical organization of these guidelines is based on function, dealing with different types of displayed data and display manipulation. As in other sections, the guidelines here recommend specific ways to accomplish some very general objectives.
Objectives
Consistency of data display
Efficient information assimilation by the user
Minimal memory load on user
Compatibility of data display with data entry
Flexibility for user control of data display
Data display refers to computer output of data to a user, and assimilation of information from such outputs.
Ensure that whatever data a user needs for any transaction will be available for display.
Example
As a minor example, header information should be retained or generated
anew when a user is paging/scrolling data tables.
Example
As a negative example, even temporary loss of needed data, as might be
caused by display blanking during automatic data update, is not
acceptable in many design applications.
Comment
The designer of user interface software must employ some method of task
analysis (e.g., operational sequence diagrams) in order to determine a
user's detailed information requirements for any transaction.
Comment
If data requirements exceed a user's ability to assimilate information
from the display, break the task into smaller steps. Prototype testing
may be required to determine optimum data displays for critical tasks.
Comment
A user should not have to remember data from one display to the next.
Reference
See also
4.0/5
Tailor displayed data to user needs, providing only necessary and immediately usable data for any transaction; do not overload displays with extraneous data.
Example
(Good)
| CODE DATA TYPE |
| su = Summary |
| d = Detailed list |
| se = Sequences |(Bad)
| CODE DATA TYPE DATE IMPLEMENTED |
| su = Summary 5-17-82 |
| d = Detailed list 7-14-82 |
| se = Sequences 9-25-82 |
Comment
Display of extraneous data may confuse a user and hinder assimilation of
needed information.
Comment
When user information requirements cannot be exactly anticipated by the
designer, allow users to tailor displays on line by controlling data
selection (Section 2.7.1), data coverage within a display frame (Section
2.7.2), suppression of displayed data (Section 2.7.4), and data window
overlay (Section 2.7.5).
Reference
See also
2.0/8
|
2.7/1
|
2.8/1
|
4.0/5
Display data to users in directly usable form; do not make users convert displayed data.
Example
If altitude might be required in either meters or feet, then display
both values.
Example
This recommendation applies to error messages and other forms of user
guidance as well as to data displays.
(Probably adequate)
| Character in NAME entry cannot be recognized. |(Too cryptic)
| Error 459 in column 64. |
Comment
Do not require a user to transpose, compute, interpolate, or translate
displayed data into other units, or refer to documentation to determine
the meaning of displayed data.
Reference
See also
4.4/1
Display data consistently with standards and conventions familiar to users.
Example
As a negative example, if users work with metric units of measurement,
do not display data in English units.
Example
Computer time records that are not in directly usable format should be
converted for display, to a conventional 12-hour (AM/PM) clock or a
24-hour clock, in local time or whatever other time standard is
appropriate to user needs.
Example
Calendar formats should follow user customs.
(American calendar) (European calendar)
S M T W T F S S 1 8 15 22 29
1 2 3 4 5 6 7 M 2 9 16 23 30
8 9 10 11 12 13 14 T 3 10 17 24 31
15 16 17 18 19 20 21 W 4 11 18 25
22 23 24 25 26 27 28 T 5 12 19 26
29 30 31 F 6 13 20 27
S 7 14 21 28
Reference
See also
4.0/16
When no specific user conventions have been established, adopt some consistent interface design standards for data display.
For any particular type of data display, maintain consistent format from one display to another.
Comment
When an item is missing from a standard format, display that item as a
labeled blank rather than omitting it altogether.
Reference
See also
4.0/6
Ensure that data display is consistent in word choice, format, and basic style with requirements for data and control entry.
Example
When the computer displays a list of current files, the names in that
list should be in a format which would be recognized by the computer if
they were part of a control entry; thus a user could mimic the displayed
list if specifying a file for editing or mailing.
Comment
When composing data and control entries, users will tend to mimic the
vocabulary, formats, and word order used in computer displays, including
displayed data, labels, error messages, and other forms of user
guidance. When entry formats are consistent with display formats, users
are more likely to compose an acceptable entry on their first try.
Reference
Allow users to control the amount, format, and complexity of displayed data as necessary to meet task requirements.
Comment
An experienced user may be able to deal with more complex displays than
a novice. But a user experienced in one task may be a novice in
another. Thus a range of display tailoring capabilities may be
desirable for any particular task.
Comment
Increasing the options for user control of data displays will complicate
what a new user must learn about a system, and so will involve a
trade-off against simplicity of user interface design.
Reference
Allow users to change displayed data or enter new data when that is required by a task.
Comment
For some displays, of course, it is not desirable for users to change
data, such as in operations monitoring (process control) displays, or
displays permitting access to a protected data base.
Comment
Some consistent formatting cue, perhaps different cursor shape or
different initial cursor placement, should be provided to inform users
when displayed data can or cannot be changed.
Reference
See also
1.0/6
|
1.3/2
|
6.2/4
When protection of displayed data is essential, maintain computer control over the display and do not permit a user to change controlled items.
Comment
Never assume compliance with instructions by the user, who may attempt
unwanted changes by mistake, or for curiosity, or to subvert the system.
Reference
See also
1.1/23
|
1.4/7
|
6.2/3
|
6.3/2
Ensure that each data display will provide needed context, recapitulating prior data as necessary so that a user does not have to rely on memory to interpret new data.
Comment
When user information requirements cannot be determined in advance, it
may be desirable to provide a separate display window as a "notepad" in
which a user can preserve needed items by marking those to be saved.
Comment
If data must be remembered from one display to another, display no more
than four to six items.
Reference
The wording of displayed data and labels should incorporate familiar terms and the task-oriented jargon of the users, and avoid the unfamiliar jargon of designers and programmers.
Comment
When in doubt, pretest the meaning of words for prospective users to
ensure that there is no ambiguity.
Reference
See also
1.4/19
|
4.0/16
|
4.0/17
|
4.3/3
For displayed data and labels, choose words carefully and then use them consistently.
Example
(Good)
| Record A Change |
| Record B Change |
| Record C Change |(Bad)
| Update of Record A |
| Record B Maintenance |
| Change in Record C |
Example
As a negative example, the word "screen" should not be used to mean
"display frame" in one place, and "menu selection option" in another.
Comment
Consistent word usage is particularly important for technical terms.
Standard terminology should be defined and documented in a glossary for
reference by interface designers as well as by users.
Reference
Ensure that wording is consistent from one display to another.
Example
The title of a display should be identical to the menu option used to
request that display.
Reference
Use consistent grammatical structure for data and labels within and across displays.
Example
(Good)
| Starting date: |
| Leaving date: |
| Home phone: |
| Work phone: |(Bad)
| Starting date: |
| When did you quit: |
| Home phone: |
| Phone number at work: |
Comment
Even minor inconsistencies can distract a user and delay comprehension
as the user wonders momentarily whether some apparent difference
represents a real difference.
Reference
See also
4.0/23
Display complete words in preference to abbreviations.
Exception
Abbreviations may be displayed if they are significantly shorter, save
needed space, and will be understood by the prospective users.
Exception
When abbreviations are used for data entry, then corresponding use of
those abbreviations in data display may help a user learn them for data
entry.
Reference
When abbreviations are used, choose those abbreviations that are commonly recognized, and do not abbreviate words that produce uncommon or ambiguous abbreviations.
Example
In a process control application where system components are commonly
abbreviated, messages to users could include those common abbreviations,
while displaying in full form those words that are not commonly
abbreviated, as
(Acceptable) | CST pressure low |
(Poor) | Condensate Storage Tank prssr lw |
(Acceptable) | Restricted Acct |
(Poor) | Rstr Account |
Comment
The point here is that when abbreviation is necessary due to space
constraints, often a designer can still choose which words will be
abbreviated. The words chosen for abbreviation should be those that are
commonly known in their abbreviated form, and/or those words whose
abbreviations can be unambiguously interpreted.
Reference
When defining abbreviations, follow some simple rule and ensure that users understand that rule.
Comment
Abbreviation by truncation is the best choice, except when word endings
convey important information. When a truncation rule is used,
abbreviations are easy for a designer to derive and easy for a user to
decode.
Comment
If an abbreviation deviates from the consistent rule, it may be helpful
to give it some special mark whenever it is displayed.
Reference
See also
1.0/17
|
1.0/18
|
1.0/19
|
1.0/20
|
1.0/21
|
1.0/22
|
1.0/23
Ensure that abbreviations are distinctive, so that abbreviations for different words are distinguishable.
Reference
Minimize punctuation of abbreviations and acronyms.
Example
(Good)
| USAF |(Bad)
| U.S.A.F. |
Exception
Punctuation should be retained when needed for clarity, e.g., "4-in.
front dimension" rather than "4 in front dimension".
Exception
Punctuation of abbreviations might be justified when an abbreviation
represents more than one word, and more than the first letter of each
word is included in the abbreviation, e.g., "common services"
abbreviated as "COM.SER" rather than "COMSER".
Reference
If abbreviations are used, provide a dictionary of abbreviations available for on-line user reference.
Reference
See also
4.4/20
Text displays provide output of stored textual data, along with messages and other text intended for user guidance.
Example Text Display
These sample displays represent a broadcast message received by all
users logging onto an on-line office support system. The wording of the
bad display is taken from an actual instance. The good display
clarifies wording of the text and improves display formatting.
The bad display is annotated to indicate violations of several of the design guidelines proposed here for text display. Although most of its noted deficiencies are minor, in sum they create a display that is potentially confusing to its users.
Good Sample Text Display
|----------------------------------------------------------|
| SYSTEM BROADCAST MESSAGES |
| |
| 27 March 1984 |
| |
| Word Processing Users: |
| |
| Please do NOT print multiple copies of large |
| documents (more than 100 printed pages) during normal |
| working hours. Large print requests will delay |
| printing service for all users. |
| |
| If you do need bulk printing, submit your request |
| before leaving at 4:30 pm. Your printouts will be |
| ready by the next morning. |
| |
| Network Users: |
| |
| Please report any net-related problems to the |
| User Support Center, x2222. |
| |
| |
| |
| * Press CONTINUE to display the Office Systems Menu. |
| < |
|----------------------------------------------------------|
Bad Sample Text Display
|----------------------------------------------------------|
| -- System Broadcast Messages -- |
| SYSTEM #22 - WPS 27 March 1984 |
| |
| **** NOTICE **** |
| |
| WPS USERS ARE REMINDED NOT TO PRINT MULTIPLE |
| COPIES OF LARGE SIZE DOCUMENTS (100 PAGES OR |
| MORE) TO THE 6670 PRINTER OR LINEPRINTER SINCE IT |
| CAUSES LONG DELAYS ON THOSE PRINTERS. |
| IF YOU NEED MULTIPLE COPIES, PLEASE SUBMIT |
| YOUR REQUEST BEFORE LEAVING AT 4:30 P.M. THANK |
| YOU. |
| ****** |
| |
| NETWORK USERS -- Please report any network |
| related problems to the User Support Center, |
| X2222. |
| |
| Questions or problems should be referred to the |
| USC, X2222. |
| |
| Press the RETURN key to enter the Office Systems |
| Menu |
| < |
|----------------------------------------------------------|
This bad text display violates in some degree several design guidelines in this section: 2.1/1 Conventional text display 2.1/3 Consistent text format 2.1/6 Conventional use of mixed case 2.1/7 Separation of paragraphs 2.1/8 Consistent word spacing 2.1/10 Conventional punctuation 2.1/11 Clarity of wording 2.1/13 Simple sentence structure
Ensure that computer-generated displays of textual data, messages, or instructions, will generally follow design conventions for printed text.
Example
See sample displays in this section.
Comment
Adoption of familiar design conventions for text display will permit
users to rely on prior reading skills.
When a user must read lengthy textual material, consider providing that text in printed form rather than requiring the user to read it on-line.
Comment
Reading lengthy text on an electronic display may be 20-30 percent
slower than reading it from a printed copy.
Comment
There are many good reasons for displaying lengthy textual material on
line. Lengthy text may be displayed for editing, mailing, or search
tasks. Or a lengthy text might be updated frequently, and so on-line
display would be the best way to ensure that all users are reading the
most recent version. The intent of this guideline is not to discourage
such on-line display of text when that is needed, but rather to
discourage on-line display when the text would be more useful in paper
form. For instance, if HELP displays consist merely of screen after
screen of text which is not tailored to a user's current task, than that
text might be better displayed in a printed users' manual.
Reference
When textual material is formatted, as in structured messages, adopt a consistent format from one display to another.
Example
See sample displays in this section.
See also
2.0/6
When a user must read continuous text on line, display at least four lines of text at one time.
Comment
Four lines of text is the minimum which should be displayed when the
reading material is simple in content. If the content is more complex,
or if a reader will need to refer frequently to previous material, then
display more lines of text.
Comment
When space for text display is limited, display a few long lines of text
rather than many short lines of text.
Reference
Display continuous text in wide columns, containing at least 50 characters per line.
Comment
Text displayed in wide columns will be read significantly faster than
text displayed in narrow columns.
Comment
When space for text display is limited, display a few long lines of text
rather than many short lines of text.
Reference
See also
2.1/28
Display continuous text conventionally in mixed upper and lower case.
Example
See sample displays in this section.
Exception
An item intended to attract the user's attention, such as a label or
title, might be displayed in upper case.
Exception
Upper case should be used when lower case letters will have decreased
legibility, e.g., on a display terminal that cannot show true descenders
for lower case letters.
Comment
Reading text is easier when capitalization is used conventionally to
start sentences and to indicate proper nouns and acronyms.
Reference
Ensure that displayed paragraphs of text are separated by at least one blank line.
Example
See sample displays in this section.
Reference
Maintain consistent spacing between the words of displayed text, with left justification of lines and ragged right margins if that is the result.
Example
See sample displays in this section.
Exception
Right justification should be employed if it can be achieved by variable
spacing, maintaining constant proportional differences in spacing
between and within words, and consistent spacing between words in a
line.
Comment
Reading is easier with constant spacing, which outweighs the advantage
of an even right margin achieved at the cost of uneven spacing. Uneven
spacing is a greater problem with narrow column formats than with wide
columns. Uneven spacing handicaps poor readers more than good readers.
Reference
See also
1.3/18
In display of textual material, keep words intact, with minimal breaking by hyphenation between lines.
Comment
Text is more readable if each word is entirely on one line, even if that
makes the right margin more ragged.
Reference
See also
1.3/19
Use conventional punctuation in textual display; sentences should end with a period or other special punctuation.
Example
See sample displays in this section.
Reference
In designing text displays, especially text composed for user guidance, strive for simplicity and clarity of wording.
Example
See sample displays in this section.
Put the main topic of each sentence near the beginning of the sentence.
Reference
Use short simple sentences.
Example
See sample displays in this section.
Comment
Long sentences with multiple clauses may confuse the user. Consider
breaking long sentences into two or more shorter statements.
Reference
See also
4.3/5
When speed of display output for textual material is slower than the user's normal reading speed, make an extra effort to word the text concisely.
Comment
Assume a normal average reading speed of 250 words per minute.
Comment
The goal here is to make wording concise but not cryptic. Omitting
articles ("the", "a"), prepositions ("of", "by") and relative pronouns
("that", "which", "who") may save some space, but may also reduce
comprehension.
Reference
See also
4.3/5
Use distinct words rather than contractions or combined forms, especially in phrases involving negation.
Example
(Good)
"will not", "not complete"
(Bad)
"won't", "incomplete"
Comment
This practice will help users understand the sense of a message.
Reference
Use affirmative statements rather than negative statements.
Example
(Good)
| Clear the screen before entering data. |(Bad)
| Do not enter data before clearing the screen. |
Comment
Tell the user what to do rather than what to avoid.
Reference
See also
4.0/20
Compose sentences in the active rather than passive voice.
Example
(Good)
| Clear the screen by pressing RESET. |(Bad)
| The screen is cleared by pressing RESET. |
Comment
Sentences in the active voice will generally be easier to understand.
Reference
See also
4.0/21
When a sentence describes a sequence of events, phrase it with a corresponding word order.
Example
(Good)
| Enter LOGON before running programs. |(Bad)
| Before running programs enter LOGON. |
Comment
Temporal order is clearer. Reverse order may confuse a user.
Reference
See also
4.0/22
For a series of related items (words, phrases, instructions, etc.), display those items in a list rather than as continuous text.
Comment
A list format will facilitate rapid, accurate scanning.
Reference
Format lists so that each item starts on a new line; i.e., a list should be displayed as a single column.
Example
(Good)
| Major USI functional areas include |
| |
| Data Entry |
| Data Display |
| Sequence Control |
| User Guidance |
| Data Transmission |
| Data Protection |(Bad)
| Major USI functional areas include |
| |
| Data Entry Data Display |
| Sequence Control User Guidance |
| Data Transmission Data Protection |
Exception
Listing in multiple columns may be considered where shortage of display
space dictates a compact format.
Exception
Multiple columns of data should be used where that facilitates
comparison of corresponding data sets, as in tabular displays (Section
2.3).
Reference
See also
3.1.3/3
When a single item in a list continues for more than one line, mark items in some way so that the continuation of an item is obvious, i.e., so that a continued portion does not appear to be a separate item.
Example
Items might be separated by a blank space, or continuing lines within an
item might be indented, or each item might be numbered or marked by a
special symbol such as an arrow or bullet.
Comment
Some demarcation is particularly needed when a list is comprised of a
mixture of long and short items.
When listed items will be numbered, use Arabic rather than Roman numerals.
Comment
Arabic numbers are more familiar to most users, and therefore require
less interpretation than Roman numerals do. The advantage of Arabic
numbers becomes greater when large numbers are used. For instance,
contrast XXVIII with 28.
Reference
Adopt some logical principle by which to order lists; where no other principle applies, order lists alphabetically.
Comment
It is the user's logic which should prevail rather than the designer's
logic, where those are different.
Reference
See also
2.3/2
|
2.5/14
|
2.5/15
|
2.5/16
|
2.5/17
|
2.5/18
If a list is displayed in multiple columns, order the items vertically within each column.
Example
(Good)
| S.R. Abbott B.M. Drake |
| C.N. Abernethy S.M. Dray |
| C.A. Adams M.G. Dumoff |
| H.L. Ammerman R.C. Eakins |
| C.J. Arbak S.L. Ehrenreich |
| etc. |(Bad)
| S.R. Abbott C.N. Abernethy |
| C.A. Adams H.L. Ammerman |
| C.J. Arbak A.J. Aretz |
| A.F. Aucella J.A. Ballas |
| M.C. Bardales S.H. Barry |
| etc. |
For a long list, extending more than one displayed page, consider adopting a hierarchic structure to permit its logical partitioning into related shorter lists.
When words in text displays are abbreviated, define each abbreviation in parentheses following its first appearance.
Comment
This practice will help only those users who read displayed text from
front to back and remember what they have read. For forgetful users,
and for users who sample later sections of a multipage text display,
abbreviations may still seem undefined. For such users, it might be
helpful to provide an on-line dictionary of abbreviations for convenient
reference.
Reference
See also
4.4/20
When a critical passage merits emphasis to set it apart from other text, highlight that passage by bolding/brightening or color coding or by some auxiliary annotation, rather than by capitalization.
Comment
A single word might be capitalized for emphasis, but capitalizing an
extended passage will reduce its readability.
See also
2.1/6
When text is combined with graphics or other data in a single display, thus limiting the space available for text, format the text in a few wide lines rather than in narrow columns of many short lines.
Example
(Good)
| Text is easier to read when displayed in wide |
| lines than when displayed in thin columns. |(Bad)
| Text is harder |
| to read when |
| displayed in |
| thin columns |
| than when |
| displayed in |
| wide lines. |
Exception
Listed items might be displayed in a narrow column format.
Reference
See also
2.1/5
When tables and/or graphics are combined with text, place each figure near its first citation in the text, preferably in the same display frame.
Exception
If a figure is cited at several points in the text, then it might be
desirable to allow optional display of the figure at user request,
perhaps as a temporary window overlay at each point of citation.
Exception
If a figure is cited at several points in printed text, and particularly
if that text may be accessed at different places by its readers (as in
the case of printed reference material), then it might be desirable to
group figures consistently at a particular location, such as at the end
of each section.
Comment
Readers may not bother to find and look at a figure is it is displayed
separately from its citation in the text.
Reference
Data forms can display sets of related data items in labeled fields formatted to aid data entry and review.
Example Data Form Displays
These sample displays represent a possible form for review (and possible
revision) of visa application data. In the good display, data entries
are bolded to help distinguish them from labels and field delimiters.
Fields are ordered consistently in relation to a (supposed) paper
application form, and formatted to facilitate data review.
The bad display is annotated to indicate violations of several of the design guidelines proposed here for data form displays. The data entries in the bad display were invented to suggest what a user might have entered, if confused by inadequate labeling and the absence of field delimiters.
Good Sample Data Form Display
|----------------------------------------------------------|
| VISA APPLICATION |
| |
| NAME: Jones, Andrew David VISA: 356 478 |
| LAST, FIRST MIDDLE |
| |
| BIRTH COUNTRY: UK DATE: 3/22/25 |
| M D Y |
| |
| NATIONALITY: UK PASSPORT: Z196284 |
| |
| ADDRESS: 5 Fairview Lane |
| Loughborough, LE11 3RG |
| England |
| |
| OTHER TRAVELERS ON THIS VISA |
| BIRTH |
| NAME: COUNTRY: DATE: |
| Jones, Sandra Jean UK 10/11/28 |
| Jones, Cynthia Leigh FR 6/12/68 |
| __________________________ __ __/__/__ |
| __________________________ __ __/__/__ |
| LAST, FIRST MIDDLE M D Y |
| |
| * Review and ENTER changes if needed. |
|----------------------------------------------------------|
Bad Sample Data Form Display
|----------------------------------------------------------|
| Name Andrew D. Jones Visa Number 356478 |
| |
| Birthplace London Nationality English |
| |
| Passport Z196284 Birthdate Mar. 22, |
| |
| Address 1925 |
| 5 Fairview Lane, Loughborough, L |
| E11 3RG, England |
| |
| Other travelers on this visa |
| Traveler's Name Date of Birth - Place |
| Sandra J. Jones Oct. 11, - 1928 |
| Birmingham |
| Cynthia L. Jones June 12, - 1968 |
| Paris, France |
| |
| |
| |
| |
| |
| |
| |
| Review and ENTER changes if needed |
|----------------------------------------------------------|
This bad data form display violates in some degree several design guidelines in this section: 2.2/2 Visually distinctive data fields 2.2/4 Descriptive wording of labels 2.2/5 Consistent wording of labels 2.2/8 Distinctive label format 2.2/14 Partitioning long data items 2.2/15 Distinguishing blanks from nulls This bad data form also violates various design guidelines pertaining to data entry, as noted at the end of Section 1.4.
Use forms to display related sets of data items in separately labeled fields.
Comment
Forms can aid review of related data items by displaying explanatory
labels to caption each data field.
Provide clear visual definition of data fields, so that the data are distinct from labels and other display features.
Example
See sample displays in this section.
Reference
Identify each data field with a displayed label.
Comment
Do not assume that the user can identify individual data fields because
of past familiarity. Context may play a significant role: 617-271-7768
might be recognized as a telephone number if seen in a telephone
directory, but might not be recognized as such in an unlabeled display.
Reference
See also
1.4/5
|
1.4/6
|
1.4/7
|
1.4/8
|
4.0/11
Choose a word or phrase to label each field that will describe the data content of that field.
Example
See sample displays in this section.
Comment
Labels should be worded carefully so that they assist users in scanning
the display and assimilating information quickly.
Reference
Ensure that labels are worded consistently, so that the same data item is given the same label if it appears in different displayed forms.
Example
See sample displays in this section.
Comment
It may also help to employ consistent grammatical format for different
labels; i.e., do not use single words or phrases for some labels and
short sentences for others, or use verbs for some and nouns for others.
Reference
See also
4.0/23
Ensure that field labels are worded distinctively from one another.
Reference
Place each label in a consistent location above or to the left of its associated data field(s).
Example
In a numbered list, vertically formatted, the numeric labels should be
aligned so that the data items start in a fixed column position on the
display.
Comment
Consistent alignment of labels and data will aid display scanning by a
user.
Reference
See also
2.3
Ensure that labels are distinctive in format/positioning to help users distinguish them from data and other display features.
Example
Labels might be capitalized when data are displayed in mixed case, or
might be dim when data are bright, or might perhaps be displayed in a
different font where that capability exists.
Example
See sample displays in this section.
Reference
See also
4.0/8
Ensure that each label is sufficiently close to be associated with its data field, but is separated from its data field by at least one space.
Reference
See also
1.4/8
Include the units of measurement for displayed data either in the label or as part of each data item.
Example
| DISTANCE (KM): __ __ __ |
or
| DISTANCE: __ __ __ KM |
Reference
See also
1.4/21
Ensure that the ordering and layout of corresponding data fields is consistent from one display to another.
Reference
See also
2.3/12
When forms are used for data entry as well as for data display, ensure that the format for data display is compatible with whatever format is used for data entry; use the same item labels and ordering for both.
See also
1.4/24
Ensure that the internal format of frequently used data fields is consistent from one display to another.
Example
Telephone numbers should be consistently punctuated, perhaps as
213-394-1811.
Example
Time records might be consistently punctuated with colons, as HH:MM:SS
or HH:MM or MM:SS.S, whatever is appropriate.
Example
Date records might be consistently formatted with slashes, as MM/DD/YY.
Comment
The convention chosen should be familiar to the prospective users. For
European users, the customary format for telephone numbers and dates is
different than suggested in the examples above. For military users,
date-time data are frequently combined in an accepted special format.
For many user groups, time records are kept on a 24-hour clock, which
should be acknowledged in display formatting.
Reference
Divide long data items of mixed alphanumeric characters into subgroups of three or four characters separated by a blank or by some special symbol.
Example
See sample displays in this section.
Exception
Words should be displayed intact, whatever their length.
Comment
Hyphens may be used instead of blanks where that is customary. Slashes
are less preferred for separating groups, since they are more easily
confused with alphanumerics.
Comment
Where a common usage has been established, as in the NNN-NN-NNNN of US
social security numbers, grouping should follow that usage.
Reference
See also
1.0/16
Distinguish blanks (keyed spaces) from nulls (no entry at all) in the display of data forms, where that can aid task performance.
Example
See sample displays in this section.
Comment
Some special symbol might be adopted to denote null entry. If field
delimiters are displayed to guide data entry, then it will often be
sufficient simply to leave those delimiters unchanged when no entry has
been made.
See also
1.4/10
Tables can display data in row-column format to aid detailed comparison of ordered sets of items.
Example Tabular Displays
These sample displays represent a table for finding the owner of a car
with a particular license plate. (Perhaps it is an employee who has
parked in the wrong place, or who has left headlights burning.) In the
good display, data entries are ordered by license number to aid the
search.
The bad display is ordered alphabetically by employees' last name, which will not prove helpful for this task. The bad display is annotated to indicate several other violations of the design guidelines proposed here for tabular displays.
Good Sample Tabular Display
|----------------------------------------------------------|
| AUTOMOBILE OWNERS Page 1 of 4 |
| |
| LICENSE EMPLOYEE EXT DEPT |
| |
| MA 127 355 Michaels, Allison 7715 91 |
| MA 135 449 Duvet, William 3898 81 |
| MA 227 379 Smithson, Jill 2491 63 |
| MA 227 GBH Zadrowski, Susan 2687 53 |
| MA 253 198 Jenskin, Erik 3687 31 |
| |
| MA 286 PAM Hilsmith, Joseph 2443 100 |
| MA 291 302 Leonard, John 7410 92 |
| MA 297 210 Toth, Kelley 7538 45 |
| MA 328 647 Cooksey, Roger 2144 64 |
| MA 342 NCG Hesen, Christopher 7544 21 |
| |
| MA 367 923 Maddox, Patrick 7070 66 |
| MA 375 NRC Ashley, Maria 3397 34 |
| MA 376 386 Wheetley, Katherine 2638 58 |
| MA 385 248 Malone, Frank 2144 64 |
| MA 391 293 Lowman, Edward 8263 77 |
| |
| n = Next page |
| < |
|----------------------------------------------------------|
This bad tabular display violates in some degree several design guidelines in this section: 2.3/2 Logical organization 2.3/4 Tables referenced by first column 2.3/6 Row and column labels 2.3/12 Consistent column spacing 2.3/13 Column scanning cues 2.3/14 Row scanning cues 2.3/16 Justification of numeric data Various other guidelines are also violated in this bad table, including those pertaining to identification of multipage displays and display of control options.
Bad Sample Tabular Display
|----------------------------------------------------------|
| Automobile Owners |
| Sara Alwine 2438 MA 929 448 103 |
| Christopher Aranyi 2716 MA 797 AND 97 |
| Maria Ashley 3397 MA 375 NRC 34 |
| Arlene Atchison 7672 NH 60731 28 |
| Steven Bahr 3272 MA 635 203 35 |
| David Baldwin 3295 NH 63577 75 |
| David Benkley 3581 MA 589 ADE 58 |
| Marlin Boudreau 3413 MA 816 HER 93 |
| Roger Cooksey 2144 MA 328 647 64 |
| Joseph Curran 3167 RI 4693 83 |
| Kent Delacy 3619 MA 749 827 29 |
| Susan Doucette 2797 MA 525 115 41 |
| Joseph Drury 7604 NH 42265 27 |
| William Duvet 3898 MA 135 449 81 |
| Samuel Everett 3619 MA 635 ASK 29 |
| Jeanne Fiske 7642 MA 614 CSU 10 |
| Nancy Graham 2358 MA 745 CKJ 10 |
| Paul Greenbaum 3979 MA 846 BLN 103 |
| Christopher Hesen 7544 MA 342 NCG 21 |
| Joseph Hilsmith 2443 MA 286 PAM 100 |
| |
| |
| < |
|----------------------------------------------------------|
When information handling requires detailed comparison of ordered sets of data, adopt a tabular format for data display.
Organize tabular data in some recognizable order to facilitate scanning and assimilation.
Example
Dates might be ordered chronologically, names alphabetically.
Example
See sample displays in this section.
Reference
Construct a table so that row and column labels represent the information a user has prior to consulting the table, i.e., the information that can be used to access table entries for a particular task.
Example
If a user's task were to determine characteristics of various raw
materials, then a table might be organized as
| Raw Transport Processing Consumer |
| Material Costs Time Acceptance |
| A High Slow Good |
| B High Fast Good |
| C Low Slow Good |
| D High Slow Poor |
| E High Fast Poor |
| F Low Fast Poor |whereas if the user's task were to identify what raw material meets certain criteria, then the table might be organized as
| Consumer |
| Acceptance |
| Good Poor |
| |
| High Fast Processing B E |
| Transport |
| Costs Slow Processing A D |
| |
| Low Fast Processing F |
| Transport |
| Costs Slow Processing C |
Reference
When tables are used for reference, display the reference items, i.e., those by which the table will be accessed, in the left column; display the material most relevant for user response in the next adjacent column; and display associated but less significant material in columns further to the right.
Example
See sample displays in this section.
Comment
As a corollary, when a list of people is ordered alphabetically by their
last name, then their last names should be displayed first, i.e., as the
leftmost element in each row.
Reference
If data items must be compared on a character-by-character basis, display one directly above the other.
Comment
But remember that users will not be entirely accurate in making such
comparisons; automated comparison by computer analysis would be more
reliable.
Reference
Label the rows and columns of tabular displays following the guidelines proposed for labeling the fields of data forms.
Example
See sample displays in this section.
Reference
See also
2.2
Adopt a consistent format for labeling the rows and columns of displayed tables.
Example
Each column label might be left-justified with the leftmost character of
the column entries beneath it.
Comment
Consistent left justification of column labels will prove especially
helpful when columns vary in width.
Reference
Ensure that row and column labels are distinguishable from the data displayed within tables, and from the labels of displayed lists such as menu options or instructions to users.
Comment
There are many ways to distinguish different types of labeled material,
including consistent differences in display format/placement as well as
special fonts and markers.
Reference
See also
3.1.3/20
When rows or columns are labeled by number, start the numbering with "1", rather than "0".
Comment
In counting, people start with "one"; in measuring, they start with
"zero".
Reference
For hierarchic lists with compound numbers, display the complete numbers; do not omit repeated elements.
Example
(Good)
| 2.1 Position Designation |
| 2.1.1 arbitrary positions |
| 2.1.1.1 discrete |
| 2.1.1.2 continuous |
| 2.1.2 predefined positions |
| 2.1.2.1 HOME |
| 2.1.2.2 other |(Bad)
| 2.1. Position Designation |
| 1. arbitrary positions |
| 1 discrete |
| 2 continuous |
| 2. predefined positions |
| 1 HOME |
| 2 other |
Comment
Implicit numbering, as in the "bad" example, may be acceptable for tasks
involving perception of list structure. Complete numbering is better,
however, for tasks requiring search and identification of individual
items in the list.
Reference
In tabular displays, either consistently include the units of displayed data in the column labels, or else place them after the first row entry.
Example
(Good)
| Time Velocity Temperature |
| (s)_ (m/s)___ (0C)_______ |
| 5 8 25 |
| 21 49 29 |
| 43 87 35 |(Also acceptable)
| Time Velocity Temperature |
| 5 s 8 m/s 25 0C |
| 21 49 29 |
| 43 87 35 |
Reference
Maintain consistent column spacing within a table, and from one table to another.
Example
See sample displays in this section.
Exception
When columns are grouped under superheadings, it may help to add extra
space between superheadings, in order to emphasize that the columns
under any single superheading are related.
Reference
See also
2.2/11
Separate the columns in a table by enough blank spaces, or by some other distinctive feature, to ensure separation of entries within a row.
Example
See sample displays in this section.
Comment
For most tables, a column separation of at least three spaces should be
maintained. Certainly the spacing between columns should be greater
than any internal spaces that might be displayed within a tabulated data
item.
Reference
In dense tables with many rows, insert a blank line (or some other distinctive feature to aid horizontal scanning) after a group of rows at regular intervals.
Example
For many applications it will suffice to insert a blank line after every
five rows.
Example
See sample displays in this section.
See also
1.5/10
Show columns of alphabetic data with left justification to permit rapid scanning.
Example
(Good)
| APL | (Bad) | APL |
| COBOL | | COBOL |
| FORTRAN | | FORTRAN |
| PL1 | | PL1 |
Exception
Indentation can be used to indicate subordinate elements in hierarchic
lists.
Exception
A short list, of just four or five items could be displayed horizontally
on a single line, in the interests of compact display format, if that is
done consistently.
Reference
Justify columns of numeric data with respect to a fixed decimal point; if there is no decimal point, then numbers should be right-justified.
Example
See sample displays in this section.
Reference
See also
1.5/7
When a user must enter numeric values that will later be displayed, maintain all significant zeros; zeros should not be arbitrarily removed after a decimal point if they affect the meaning of the number in terms of significant digits.
Reference
See also
1.5/8
Graphics show spatial, temporal, or other relations among data by special formatting of displayed elements.
Consider graphics rather than text description or tabulation, for display of data showing relations in space or time.
Comment
People cannot readily assimilate detailed textual or tabular data,
although sometimes such data are necessary. Therefore, a graphic
display might be designed where graphic elements showing trends and
differences are combined with text annotation and tabular presentation
of detailed data. In some applications, it might prove helpful to
supplement a primary graphic display with alternative displays of
detailed data available as a user-selected option.
Reference
When users must quickly scan and compare related sets of data, consider graphic format to display the data.
Example
Graphic display might help users discern errors in a data base, since
deviant "outliers" will appear visually distinct from the body of
correct data.
Reference
When users must monitor changing data, consider graphic format to display the data.
Comment
Whenever possible, the computer should handle data monitoring and should
call abnormalities to the user's attention. When that is not possible,
and a user must monitor data changes, graphic display will make it
easier for the user to detect critical changes and/or values outside the
normal range.
Comment
The current lore of graphic design derives chiefly from static, printed
displays. Computer processing, however, offers a potential for
continuous dynamic display of changing data that should be considered in
all methods of graphic presentation.
Reference
Use consistent logic in the design of graphic displays, and maintain standard format, labeling, etc., for each method of graphic presentation.
Comment
Consistency in graphic design will allow users to focus on changes in
displayed data without being distracted by changes in display format.
Comment
The standardization advocated here has to do with the logic of user
interface design, not with internal processing by graphics software.
Recent efforts to establish international standards for graphics
software have been focused on the internal encoding, processing, storage
and transmission of graphics displays in digital form. Such data
processing standards do not in themselves specify or significantly
constrain user interface design.
Reference
See also
2.0/6
Tailor graphic displays to user needs and provide only those data necessary for user tasks.
Comment
Current advances in the technology (and theory) of graphic display
permit realistic depiction of complex natural scenes. Such technology
has been successfully applied to generate displays for arts and
entertainment, and may also find increasing application to information
displays. For many information displays, however, less may be more: an
abstracted schematic diagram, omitting much detail, may convey more
effective information than a photographic image. For any particular
application, the amount of detail needed should be determined based on a
task analysis.
Reference
See also
2.0/2
When a user's attention must be directed to a portion of a graphic display showing critical or abnormal data, highlight that feature with some distinctive means of data coding.
Example
On a bar chart, one bar representing an out-of-tolerance condition might
be textured or shaded differently to call attention to it and to
contrast it with other bars.
Comment
More specific recommendations for highlighting different kinds of
graphic displays are provided elsewhere in this section.
See also
2.6/1
When a user must compare graphic data to some significant level or critical value, include a reference index or baseline in the display.
Example
A horizontal line might be displayed on a profit-and-loss graph to
indicate where displayed curves exceed the break-even point.
Comment
Most data plots include a displayed baseline of some sort. An
additional reference index may be displayed as well. The baseline
should be chosen with care to provide an appropriate reference for
displayed data. A graph without a baseline, or with a poorly chosen
baseline, may distort the interpretation of displayed data.
Comment
More specific recommendations for indexing different kinds of graphic
displays are provided elsewhere in this section.
Reference
When a graph contains some outstanding or discrepant feature that merits attention by a user, consider displaying supplementary text to emphasize that feature.
Example
A flow diagram for process control might include a current advisory
message, POSSIBLE PRESSURE VALVE FAILURE, as well as appropriate graphic
indications of the problem.
Comment
This recommendation derives from the lore of audiovisual aids, where
speakers are exhorted to "get the message across" with words as well as
pictures. In some information system applications, a graphic display
may convey many messages at once. It might then prove difficult to
determine which message(s) should be stated in words. As in other
aspects of display design, some priorities must be established in
relation to the user's information requirements.
Reference
When precise reading of a graphic display is required, annotate the display with actual data values to supplement their graphic representation.
Example
Adjacent numeric annotation might be added to the ends of displayed bars
on a bar graph; numeric data might be displayed to mark the points of a
plotted curve.
Comment
Some displays may require complete data annotation, but many displays
will require annotation only for selected data elements.
Format any displayed annotation consistently in relation to the graphic elements.
Example
Labels might always be placed over the displayed points with which they
are associated.
Comment
Sometimes it might be necessary to displace a label from its "standard"
position to avoid overlap or crowding on the display; such exceptions
should themselves be handled consistently.
See also
2.4/4
Display the annotation of graphic displays, including labels for the axes of graphs, in a normal orientation for reading text.
Example
For users reading English, labels should be displayed horizontally, even
for the vertical axis of a graph.
Comment
A conventional text orientation of labels will permit faster, more
accurate reading. With a printed graph, it may be possible to tilt the
page to read a disoriented label. With an electronic display, a user
usually cannot tilt the display screen but instead must tilt his/her
head.
Comment
More specific recommendations for labeling different kinds of graphic
displays are provided elsewhere in this section.
Reference
Establish standard meanings for graphic symbols and use them consistently within a system and among systems with the same users.
Example
As a negative example, if an aircraft symbol is used to denote an
aircraft on one display, that symbol should not be used to mark
airfields on another display.
Comment
If users may be unfamiliar with the graphic symbology used, consider
incorporating a legend to define displayed symbols. Alternatively,
users might be allowed to request a supplementary display of symbol
definitions or to request the definition of a particular displayed
symbol by pointing at it.
Reference
Design pictorial symbols (e.g., icons, pictograms) to look like the objects or processes they represent, and test the resulting symbol set with a representative group of users to ensure that the intended meanings will be understood.
Comment
Some pictorial symbols have conventional meanings within a user
population, which must be followed to ensure their correct
interpretation. Novel symbol design must always be tested. It can
happen that a symbol whose meaning seems perfectly clear to its designer
may not be understood by system users.
Reference
See also
3.1.8/3
In selecting textures to code displayed areas, choose simple hatching rather than elaborate patterns.
Comment
Compared with manual drafting methods, it is temptingly easy to have a
computer generate texture codes of considerable complexity. A designer
should resist that temptation. When in doubt, create some sample
displays and check them to ensure that texture codes do not produce
distracting visual effects such as moire patterns.
Comment
Texture coding is a technique specifically related to graphics. Other
kinds of display coding -- size, shape, brightness, color, etc. -- can
be applied more generally in display design. Display coding is
considered in Section 2.6 of these guidelines.
Reference
When a user may need to perceive graphic relations more accurately, or to view pictures, diagrams, maps, etc. in greater detail, provide a zooming capability that allows the user to expand the display of any selected area.
Comment
Zooming can increase display spacing among crowded data items so that
they can be perceived better. Thus an air traffic controller might
expand a portion of a situation display to see more clearly the spacing
of converging tracks that threaten a collision.
Comment
Zooming can increase the degree of detail, i.e., can add data to a
display. Thus a user might expand a city map to see detailed road
structures that are not shown in a small-scale map. When used this way,
a zooming capability implies that graphic data be "layered"
hierarchically at different levels of aggregation, which may require
complex data files and data management techniques.
Comment
Zooming might be implemented as a continuous function, by which a
display can be expanded to any degree, analogous to a continuous panning
capability. Or zooming might be implemented in discrete increments, as
in increasing the magnification of an optical instrument to x2, x4, etc.
Incremental zooming, with abrupt changes in display scale, may tend to
disorient a user, but might prove acceptable in some applications.
See also
2.7.2/13
When a map or other graphic display has been expanded from its normal coverage, provide some scale indicator of the expansion factor.
Example
A linear indicator of current map scale might be shown in the margin, or
perhaps simply a numeric indication of the display expansion factor
(e.g., | x4 |).
Comment
In many applications it may be helpful to show the scale even for a
display with normal, unexpanded coverage.
See also
2.7.2/14
When a display has been expanded from its normal coverage, provide some graphic indicator of the position in the overall display of the visible section.
Example
In a corner of any frame of an expanded display, the computer might show
a rectangle representing the overall display, in which a smaller
rectangle is placed to indicate the position and extent of the currently
visible portion of that display.
Comment
A graphic indication of the current coverage of an expanded display will
provide some visual context to help a user maintain a conceptual
orientation between the visible part and the whole display from which
that part has been expanded.
Reference
Consider animation, the movement of data elements under computer control, for displaying a temporal sequence of changing events, or for the pictorial display of complex objects.
Example
For air traffic control, sequential frames of radar data might be
displayed (with time compression) to aid perception of the tracks from
moving aircraft.
Example
A complex molecular structure might be perceived more effectively if a
viewer is shown sequential displays depicting a computer-stored model
from different angles.
Example
An architect might demonstrate a proposed building design with a
sequential "walk through" displayed from a computer-stored model.
Comment
Animation can be used to enhance a variety of graphic displays,
including scatterplots, curves, bar graphs, flow charts, etc. Computer
tools to support display animation are growing more powerful, and should
find increased use in information displays. Prototype testing may be
required to determine optimal timing for sequential display, which will
vary with different applications.
Reference
See also
2.7.3/4
When sequential relations or other connectivity between display elements requires highlighting, consider animation for that purpose.
Example
Connectivity might be emphasized by an arrow moving repeatedly between
two displayed elements.
Example
Sequential relations might be emphasized by an animated "sprite", i.e.,
a moving pointer under computer control.
Comment
There was a time when viewers of "sing-along" motion pictures were
exhorted to "follow the bouncing ball" which marked their place. A
moving marker of that kind is now often called a "sprite", or sometimes
a "movable object block" (MOB). Sprites can simplify the process of
animating computer-generated displays. Once a graphic element has been
defined to a computer as a sprite, that element can be moved about a
display independently of a fixed background or of other sprites.
Comment
If only one element is shown moving on an otherwise stable display, that
moving element will be seen as distinctive. Such animated highlighting
is probably subject to diminishing returns. If one sprite is good for
directing a user's attention, two may not be. The simultaneous display
of multiple sprites may confuse a user.
When on-line graphic displays must be printed, allow users to display the material exactly as it will appear in the printed output.
Comment
On-line displays can offer some advantages over printed graphics, in
terms of animation and highlighting. When a user is preparing a display
for printed output, however, it is important that limitations of the
print medium can be taken realistically into account. If the printed
version does not appear satisfactory, it may be necessary to reformat
the display in some way. Alternatively, it may be possible to find a
printer with greater capabilities.
Scaling refers to the positioning of displayed data elements with respect to a defined measurement standard.
Follow conventional scaling practice, so that values on an axis increase as they move away from the origin, and the horizontal X-axis is used to plot time or the postulated cause of an event (the independent variable) and the vertical Y-axis is used to plot a caused effect (the dependent variable).
Example
In a graph showing plant growth, the X-axis might show successive days,
or it might show increasing amounts of water or fertilizer applied.
Comment
Scaling conventions also apply to the placement of the origin of a
graph. When graphed data represent positive numbers, which is usually
the case, the graph should be displayed with the origin at the lower
left. When the data include negative values and the axes must extend in
both directions from a zero point, that origin should be displayed in
the center of the graph.
Comment
When the X-axis represents time intervals, the labeled scale points
should represent the end of each time interval. This consistent usage
will aid interpretation of all data plots, including scatterplots, line
graphs, and bar charts.
If users must compare graphic data across a series of charts, use the same scale for each chart.
Comment
Users will find it difficult to compare data sets that are scaled
differently. Moreover, users may overlook differences in labeling, and
assume that the same scale has been used even when displayed scales are
actually different from one another.
Comment
Note that in many applications it may prove more effective to display
data for comparison in a single combined chart, rather than requiring
users to compare data across a series of charts.
Reference
Label each scale axis clearly with its description and measurement units, if any.
Example
Labels might include "Population in Thousands", "Price in $1000",
"Percent", "Fiscal Year", etc.
Comment
Labels should be displayed in conventional text orientation on both the
X- and Y-axis for ease of reading.
Reference
See also
2.4/11
Employ a linear scale for displayed data, in preference to logarithmic or other non-linear methods of scaling.
Exception
A logarithmic scale shows percentage change rather than arithmetic
change; it may be appropriate for some special applications.
Comment
Most users are more familiar with linear scales and will interpret
linear scales more accurately than other methods of scaling.
Construct scales with tick marks at a standard interval of 1, 2, 5, or 10 (or their multiples by 10) for labeled divisions; intervening tick marks to aid visual interpolation should be consistent with the labeled scale interval.
Example
As a negative example, it is not acceptable to let the computer divide
available scale space automatically if that results in a scale labeled
in unfamiliar intervals such as 6 or 13.
Exception
In special instances, the X-axis might be scaled in odd intervals to
show customary divisions, such as the seven days in a week or the 12
months in a year.
Comment
Users will find it difficult to interpret scales based on odd intervals,
even if computers do not.
When users must compare aggregate quantities within a display, or within a series of displays, scaling of numeric data should begin with zero.
Comment
If for any reason the zero point is omitted, the display should include
a clear indication of that omission.
When data comparisons of interest fall within a limited range, consider constructing the scaled axis to emphasize that range, with a break in the displayed axis to indicate discontinuity with the scale origin.
Comment
Note, however, that a broken axis distorts the displayed amount in
relation to a base value and so risks confusing users. In effect, a
user will expect that a scale marked in regular intervals will continue
in a consistent fashion. If an axis must be broken, label that break
clearly, perhaps with some indicator that extends across the displayed
graph.
Reference
When scaled data will contain extreme values, display duplicate axes, so that the X-axis appears at both the top and bottom, and the Y-axis at both the left and right sides of the graph.
Comment
Extreme data values may be located far from conventionally placed axes.
When duplicate axes are displayed at the top and right side, users will
find it easier to read the extreme values.
Reference
Design graphs so that only a single scale is shown on each axis, rather than including different scales for different curves in the graph.
Exception
For users experienced in data analysis, multiple-scale charts may prove
an effective tool for comparing relative values of different variables.
Comment
Single-scale graphs will generally permit more accurate reading than
graphs displaying several scales. Many users will be confused by
multiple-scale graphs and make errors when interpreting them. Moreover,
by changing the relative scale factors of multiple-scale graphs it is
possible to change radically their apparent meaning and bias
interpretation by users.
Comment
If multiple-scale graphs are used, an interactive display capability
might aid interpretation, e.g., permitting a user to select any curve
and have the computer highlight the corresponding scale for that curve.
If different variables on a single graph seem to require different scales, consider scaling them against a common baseline index, rather than showing multiple scales.
Example
Rather than showing sales in units and profits in dollars, both might be
graphed in terms of percent change from a baseline period.
Comment
An indexed chart can permit comparisons among different variables when
multiple scales would otherwise be needed. However, care should be
taken in selecting an appropriate base period against which to index, in
order to ensure that comparisons will not be biased.
Comment
Index scaling may also be appropriate for showing the effect of a single
variable (such as money) whose units of measurement change in real value
with time.
See also
2.4/7
Where accuracy of reading graphic data is required, provide computer aids for exact interpolation.
Example
It might suffice to allow users to request a fine grid as an optional
display feature; or it might be better to display vertical and
horizontal rules that a user could move to intersect the axes of a
chart; or it might prove best simply to let a user point at any data
item and have the computer label that item with a readout of its exact
value(s).
When grid lines are displayed, ensure that they do not look like data and do not obscure data elements -- curves, bars, plotted points, etc.
Comment
Grid lines should be thinner than data curves, and should be invisible
behind depicted objects and areas such as the bars on a bar chart. Note
in particular that heavy vertical grid lines may conceal the height of
plotted peaks.
Comment
In this respect, electronic displays offer more flexibility than printed
graphs. Grids can be displayed or suppressed by user selection. For
reading the value of a particular data point, perhaps no grid is needed
at all. A user might simply ask the computer to display the value of
any selected point.
Reference
Consider three-dimensional scaling, where a Z-axis is added to the display, only in special applications for experienced users.
Comment
Showing a Z-axis on a display that is limited to two actual dimensions
will confuse many users. If three-dimensional scaling is employed,
adopt a consistent method of representation, e.g., isometric or
orthographic projection, perspective drawing, or triangular coordinate
grid.
Comment
It is often possible in graphic display to show a third dimension
through use of auxiliary coding -- e.g., color or shape coding, or
supplementary annotation -- which may prove more effective than trying
to represent a third spatial dimension pictorially.
Scatterplots show relations among the individual data points in a two-dimensional array.
Consider scatterplots, in which data are plotted as points in a two-dimensional graph, to display how two variables are correlated or to show the distribution of points in space.
Example
A changing display of points representing radar data, such as those used
for monitoring aircraft tracks, might be regarded as a dynamic
scatterplot.
Comment
Curves can be superimposed on scatterplots to indicate computed data
trends, correlations, or other derived statistical measures, thus
combining two types of graphic display.
Comment
Scatterplots, as the name implies, are sometimes used to show a
dispersal intended to indicate non-correlation of variables. But
scatterplots may not be convincing for that purpose, because users will
often perceive or imagine patterns in scattered data points where none
actually exist.
Comment
Note that scatterplots cannot be shown effectively in most forms of
three-dimensional spatial representation because of inherent display
ambiguities. (Here the triangular grid might be considered an
exception.) A third dimension might be represented by coding the symbols
used to plot different data categories. If that is done, however, the
visual correlation between any two variables in the scatterplot will be
obscured.
If some plotted points represent data of particular significance, highlight those points to make them visually distinctive from others.
Example
Significant data points might be highlighted by bolding, color,
blinking, shape coding, or other means, or might be designated by
supplementary display annotation.
When relations among several variables must be examined, consider displaying an ordered group (matrix) of scatterplots, each showing the relation between just two variables.
Comment
The ordering of several scatterplots in a single display might help a
user discern relations among interacting variables.
Reference
When scatterplots are grouped in a single display to show relations among several variables, provide some interactive aid for analysis so that if a user selects a set of data in one plot then the corresponding data points in other plots will be highlighted.
Comment
Data selection might be accomplished by "brushing" a scatterplot with a
superimposed box of controllable size to define the data set of
interest. That technique can exploit the capabilities of interactive
graphics to permit a range of data analysis not possible when using
printed graphs.
Reference
Curves and line graphs show relations among sets of data defined by two continuous variables.
Consider curves (in which data relations are summarized by a smoothed line) or line graphs (in which plotted data points are connected by straight line segments) for displaying relations between two continuous variables, particularly for showing data changes over time.
Comment
Line graphs are regarded here merely as a special form of plotted
curves, hence recommendations for displaying curves are intended to
apply also to line graphs.
Comment
Curves are generally superior to other graphic methods for speed and
accuracy in interpreting data trends. Unlike printed graphs,
computer-generated curves can show dynamic data change, as in
oscilloscope displays.
Comment
A curve implies a continuous function. Where that could be misleading,
a better choice might be a bar graph composed of discrete display
elements from one data point to the next.
Comment
Sometimes curves may be combined with other graph types. For example,
annual sales for the past several years might be displayed as a bar
chart, followed by curves to indicate monthly sales during the current
year.
Reference
When several curves must each be compared with the others, display them in one combined graph.
Comment
The objective here is an integrated display that will provide a user
with all needed information. On the other hand, as more curves are
added to a graph the user's tas