United States
Environmental Protection
Agency
Office of Information
Resources
Management
077131
2183
4/30/93
e: 4/30/94
COMMON USER INTERFACE GUIDELINES
EPA 2183 - COMMON USER INTERFACE
GUIDELINES
1993 Edition
-------
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Table of Contents
Introduction i
1.0 Background 1
1.1 Principles of GUI 3
1.2 User Interface Guidelines 4
1.2.1 User Interface Criteria 5
1.2.1.1 Familiar User's Conceptual Model (Metaphor) 5
1.2.1.2 User-Driven Interface 5
1.2.1.3 Consistency 6
1.2.1.4 Modeless Operation 7
1.2.1.5 Transparent Interface 7
1.2.1.6 Simplicity and Forgiveness 7
1.2.1.7 Positive Feedback 8
1.2.1.8 Universal Commands 8
1.2.2 User Interactions 9
1.2.2.1 Process Sequence 9
1.2.2.2 Object and Action Selection 10
1.2.2.3 Selection Techniques 11
1.2.2.4 Selection Indicators and Emphasis 11
1.3 Benefits of Common User Interface 12
1.4 GUI Interface Models 13
1.4.1 Graphic Common User Interface 15
1.4.2 Entry Common User Interface 15
2.0 Graphic Common User Interface 17
2.1 Basic Windows Concepts 17
2.1.1 Interacting with a Window 21
2.1.2 Operating on a Window 21
2.1.3 User Interface 22
2.1.4 Messages 23
2.1.5 Presentation Manager 24
2.2 Presentation Elements of Graphic User Interface 25
2.2.1 Basic Window Components 25
2.2.1.1 Tide Bar . .- 25
2.2.1.2 Window Border 25
2.2.1.3 Menu Bar 25
2.2.1.4 Work Area 26
2.2.1.5 Window Elements and Controls 26
Table of Contents • 1
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
2.2.1.6 Scroll Bars 26
222 Title Bar 26
2.2.2.1 System Menu Button 27
2.2.2.2 Window Title 27
2.2.2.3 Window Control Buttons 27
2.2.3 Window Border 27
2.2.4 Menu Bar and Pull-Downs 28
2.2.4.1 Operation of Menu Bar and Pull-Downs 29
2.2.5 Work Area , 34
2.2.6 Window Elements and Controls 34
2.2.6.1 Field and Group Identifiers 36
2.2.6.2 Radio Button 37
2.2.6.3 Check Box 38
2.2.6.4 List Box 38
2.2.6.5 Value Set 39
2.2.6.6 Spin Button 40
2.2.6.7 Combination Box 40
2.2.6.8 Drop-Down Box 41
2.2.6.9 Drop-Down List 41
2.2.6.10 Dialogue Box 42
2.2.6.11 Entry Fields 44
2.2.6.12 Pushbuttons 46
2.2.6.13 Logo Window 48
2.2.7 Scroll Bars 49
2.2.7.1 Interaction 51
2.3 Application Interaction Techniques 51
2.3.1 Combining Elements 52
2.3.2 Informing the Users 53
2.3.2.1 Graphic Feedback 54
2.3.2.2 Messages 56
2.3.2.3 Help 59
2.3.2.4 The Help Window 62
3.0 Text Graphic User Interface 63
3.1 Presentation Elements of Text Interface 63
3.1.1 Window or Panel 64
3.1.1.1 Window Tide 65
3.1.1.2 Window Identifier 65
3.1.1.3 Window Area Separators 65
3.1.1.4 Work Area 65
3.1.1.5 Message Line 67
3.1.1.6 Command Area 67
Tabto of Content* • 2
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
3.1.1.7 Function Key Line 68
3.2 Window Title 68
3.3 Window Identifier 68
3.4 Window Area Separators 68
3.5 Work Area 69
3.5.1 Instructions 69
3.5.2 Headings 69
3.5.2.1 Column Headings 70
3.5.2.2 Group Headings 70
3.5.2.3 Field Prompts 70
3.5.3 Descriptive Text 71
3.5.4 Protected Text 71
3.5.5 Scrolling 71
3.5.6 Scrolling Actions 72
3.5.7 Cursor-Independent Scrolling 72
3.5.8 Cursor-Dependent Scrolling 73
3.5.9 Scrolling Indicators 74
3.5.10 Scrolling Arrows 74
3.5.11 Textual Scrolling Information 76
3.5.12 Textual Scrolling Location Information 76
3.6 Pop-Ups 77
3.6.1 Pop-Up Positioning 77
3.6.2 Pop-Up Layout 78
3.6.3 Pop-Up Content 78
3.6.4 Pop-Up Use 78
3.7 Menu bar 78
3.7.1 Menu bar Layout 79
3.7.2 Menu bar Content 79
3.7.3 Selection of Menu bar Options 80
3.7.4 Menu bar Pull-Down Layout 80
3.7.5 Menu bar Pull-Down Content 81
3.7.6 Menu bar Emphasis 81
3.7.7 Users' Interaction with Menu bar 82
3.8 Message Line 84
3.8.1 Types of Messages 84
3.8.2 Message Layout and Content 84
3.8.3 Message Pop-up 85
3.8.4 Message Removal 85
3.8.5 Audible Feedback 86
3.8.6 Guidelines for Creating Messages 86
3.9 Command Line 88
3.9.1 Command Line Layout 88
Table of Content* • 3
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
3.9.2 Command Line Interaction . 88
3.9.2.1 The Enter Action 88
3.9.2.2 The Command Action 88
3.9.2.3 The Prompt Action 89
3.9.2.4 The Retrieve Action 89
3.9.3 Applications having a Command Line and a Menu bar 89
3.10 Function Key Line 90
3.10.1 Function Key Line Layout 90
3.10.2 Support for Keyboards with 24 Function Keys 90
3.10.2.1 Function Key Line Content 90
3.10.3 Keyboards with 12 Function Keys 93
3.10.3.1 Function Key Line Content 93
3.10.3.2 SET 1 Function Key Line Definition 94
3.10.3.3 SET 2 Function Key Line Definition 94
3.10.4 Function Key Line Action Definitions 95
3.11 EPA and System Identifiers 100
4.0 Entry Model 101
4.1 The Text-Based Entry Model 102
4.2 Graphics Based Entry Model 104
EPA Function Key Assignments 107
Glossary Ill
Index of Terms 129
Table of Contents - 4
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Introduction
Planning for ftiture software and hardware needs is critical to management,
particularly in times of rapidly changing technology. Organizations have made
large investments in developing applications, choosing appropriate hardware and
training staff. A major challenge facing management today is the necessity to
incorporate the appropriate technology into the enterprise, while avoiding constant
disruption and keeping productivity at acceptable levels.
In order to address these concerns, major computer technology companies are
embracing goals for the future that commit to standards. Two areas that affect
management today are the standards being set for interoperability and portability.
Interoperability is the goal of having different computer platforms work together to
complete a task.
DEC made a major commitment to emphasize its VAX hardware and VMS
operating system several years ago, to the extent that its hardware is largely
interchangeable without extensive system modifications. The VAX architecture
uses the same instruction set (or subset of instructions for the Micro VAX),
memory management and Virtual Addressing, so that software can be created on
one processor and will execute on any other processor in the family.
IBM was faced with a more complicated problem of producing standards, due to
the wide range of hardware that has been developed over the years and their
commitment to support all current platforms while moving toward the goal of
interoperability. Their response was System Application Architecture (SAA). Using
the architecture rules of SAA, interoperability will be accomplished through the
use of, common user interface (GUI), common programming interface (CPI), and
common communications interface (CCI)
The UNIX leaders are still attempting to provide a single standard. The Open
Systems Foundation (IBM, DEC, Hewlett-Packard and Santa Cruz Operation) have
committed to developing a UNIX operating system based on IBM's ADC. SUN ind
AT&T joined together in 1987 to develop a UNIX that would include a graphic
user interface called Open Look.
The goal of portability addresses the ability to produce and use software that
operates on any (or at least most) computer platforms, and appears and acts the
same way for the user. This allows management to make hardware decisions
Introduction-!
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
without having to rewrite large application systems or retrain all the users. The
main objectives of portability are addressed in IBM's SAA:
• Provide a common user interface so that products may be developed or
purchased and the user will have expectations of how they will operate.
• Provide a common applications programming interface (API) so that the
application developer can write code, confident that it will always perform
the same way as long as their API and service routines are supported on
the hardware.
• Provide a common communications interface to enable the applications
developer to place processing (functional, SQL, database access) on the
proper platform, and allow system designers to change the location or
platform without altering the applications program.
This standards manual addresses the requirements of a common user interface and
provides guidelines to developers and programmers of applications for the
Environmental Protection Agency (EPA). The purpose of these guidelines is to
provide the basis for a common user interface and common user actions that will
produce the benefits attributable to these standards.
There are two primary user interface standards available to microcomputer end-
users. One is the Apple Corporation standard and is implemented in one form or
another on all of its products. The other standard is the portion of IBM's SAA that
deals with Common User Access (CUA). This standard is "open", which means
that its rules are published and it is available to be used by any and all. Most
Independent Software Vendors (ISV) have chosen to implement user interfaces that
follow the CUA Standards. Microsoft's Windows 3.0, IBM's Presentation Manager
and Open System Foundation's (OSF) MOTIF for X Windows have all chosen to
be CUA compliant
With the constant technology upgrade to cooperative processing, SQL servers and
multimedia applications, the user interface standards will continue to change and
evolve. The purpose of these guidelines is to provide specific guidance to
developers in using interface elements and controls, and to provide rationale to
develop new elements to take advantage of new technology. As with any standard,
developers are free to add extensions and embellish their presentations, as long as
they remain within the overall intent and structure of the CUA guidelines. The
EPA Common User Interface (GUI) Guidelines are based on IBM's CUA
standards and contains extensions and rules appropriate to EPA and its
environment.
Introduction-!!
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
1.0 Background
In the early years of data processing, the user interface was almost irrelevant. The
overriding concern was building computing systems that worked and could be run
by competent professionals. Hardware capabilities were constrained, and design
strategy called for getting the most out of scarce hardware resources. The users of
these systems were engineers, mathematicians, and accountants, who were used to
dealing with arcane symbols and abbreviations.
The emergence of user interfaces as a critical component of computer systems has
occurred for five reasons. First, advances in hardware devices have provided
technology for graphic displays, and manual input devices. These include the
mouse, pointer and pen. Early software and display terminals were capable of only
character displays. Also hardware costs have decreased in recent years. The
computing power that can be put on a desktop now rivals mainframe power of
fifteen years ago. Sophisticated displays are not only available, but mandatory for
personal computer workstations. As programmable workstations become the norm
instead of the exception, graphic presentations become required by more users.
Second, as Personal Computers (PCs) are put in front of more and more people
who are neither programmers or engineers, it is important to provide clear, easy to
understand interfaces. People have been exposed to easy to use interfaces, from
APPLE'S graphic user interface of the LISA and Macintosh, to automatic teller
machines, and expect to see them on their computers. They have also been
exposed to failures in this area, such as video cassette recorders and microwave
ovens. A software developer who cannot demonstrate all of the functionality of his
product to potential users without lengthy instructions or classes stands little
chance of having the system accepted and used.
Third, the software required to implement the user interface typically accounts for
at least forty percent, and often more, of the applications code in a commercial
software product (some experts argue that a window based, mouse driven, icon
oriented, graphic user interface may need 75 percent of the applications' code to
provide the user interface). Toolkits and reusable methodologies become critical
productivity aids in software development. The interface is not only important in
user acceptability, but also in accounting for development costs.
Chapter 1-1
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Fourth, user interfaces are important to systems developers, because standards are
being defined for them. These standards come from many sources, but diey are
converging on the same objectives. Some of the groups developing standards
include:
• IBM's Systems Application Architecture / Common User Access
• APPLE Corporation's Desktop and Finder
• Open Systems Foundation's (OSF) X Windows
• Open Look's X Windows
Fifth, the cost of learning a new software package is substantial. During early use
of a new package, users spend considerable time looking for guidance and
avoiding mistakes. Even those who take the time to learn a new application may
master only a few skills due to mis fear. An interface that promotes ease of
learning and provides a comfort level consistent with a forgiving interface is
important to software use and user productivity.
Microsoft and Zenith Data Systems sponsored a study performed by Temple,
Barker and Stone, Inc. This study was completed in the Spring of 1990, and
strongly supports the hypothesis that a graphic user interface provides benefits over
a character user interface. The results showed significant improvement in the
following seven areas by both experienced and novice users:
• Accomplish tasks faster
• Complete tasks more accurately
• Have higher productivity
• Experience lower frustration
• Experience lower fatigue
• Feel more at ease with exploration and self-teaching
• Learn more capabilities of the applications
Chapter 1-2
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
1.1 Principles of GUI
The first serious commercial application using human factors research to produce a
user interface design was the Xerox Corporation's 8010 STAR Information
System, introduced in April 1981. The STAR user interface rigorously adhered to a
small set of design principles. These principles made the system seem familiar and
friendly, simplified the human-machine interaction, unified nearly two dozen
functional areas of STAR, and allowed user experience in one area to apply to
another. Xerox devoted about 30 work years to design the STAR user interface.
During this process they learned the importance of formulating the fundamental
concepts (the user's conceptual model) before software is written, rather than
tacking on a user interface afterward.
As a pan of this project it was determined that there are some concepts that are
inherently difficult for people to deal with, and others that are easier. Experience
during the STAR design led to the following classification:
Easy
Concrete
Visible
Copying
Choosing
Recognizing
Editing
Interactive
Hard
Abstract
Invisible
Creating
Filling in
Generating
Programming
Batch
The characteristics on the left should be incorporated into the user's conceptual
model, and the ones on the right should be avoided as much as possible.
Microsoft's Windows, IBM's Presentation Manager, OSF Motif, Apple's Lisa and
Macintosh, DEC Windows and others, have adopted this kind of conceptual
consistency in a user interface.
The following main goals were pursued in designing the STAR user interface:
• Use a familiar conceptual model (metaphor) for the user
• Provide a user driven interface
*
• Be consistent in using directions, cues and actions
• Use modeless operations whenever possible
Chapter 1-3
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
• Allow seeing and pointing (transparent interface) rather than forcing a
user to remember and type input
• Use simplicity and forgiveness
• Provide positive feedback
• Define as many universal commands as possible
1.2 User Interface Guidelines
A working definition of user interface is a set of standardized elements and
interaction techniques between user and application, and application and user. In a
common user interface (GUI) all applications appear the same to the user and
follow the same conventions or rules (e.g., Fl and F8 have the same definition in
all applications).
Implied in this definition of interface is a conceptual model of how the users
perceive and understand these interactions. In order to be efficient and effective,
these interactions must be as clear and as intuitively understandable as possible.
Application Interaction with User
The application controls the device presentation language, which is the way the
application communicates with the user. To the user, the interface w the system.
The application controls how information is accessed, how computations are
performed, and how computed information is delivered in an understandable and
usable form to the user.
User Interaction with Application
Users must be able to understand what information the application is requesting at
various steps so they can respond appropriately. This response consists of
established actions, such as key strokes, function key selection, or mouse
movements. Avoid ambiguous responses or statements that do not make a user
response clear (e.g. Cannot Load Routinename - press any key to continue) may
not give the users enough information about what to do next. If they continue, will
their work be lost, or does this just slow processing down or make certain
functions unavailable?)
Chapter 1-4
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Conceptual Model
Based on their experiences with previous office tasks or computer applications, and
even other machines such as calculators or typewriters, users have expectations of
what a computer interface is, what it does, and how it works. Some expectations
come from the users' experiences with the interface itself. A good interface
provides users with the means to develop the expectations they should have for the
interface and applies these expectations consistently.
1.2.1 User Interface Criteria
Based on the research done at Xerox's Palo Alto Research Center (PARC), the
following main goals are provided to help system designers provide a friendly user
interface.
1.2.1.1 Familiar User's Conceptual Model (Metaphor)
A metaphor is a figure of speech used to suggest a resemblance. When a user is
confronted with metaphors that are familiar and real-world based, he can transfer
previous knowledge of his environment to the application interface. (Be careful
when choosing a metaphor to make sure it meets the expectations users have
because of their real-world experiences.) Often, an application design is based on a
single metaphor that corresponds to the processing of paper in the non-computer
world. One of the more common metaphors provided for the user is a desktop. The
desktop contains icons that represent items used in an office, such as file folders,
paper, trash cans, file and cabinets. Other common metaphors are calculators,
telephone directories and card files.
1.2.1.2 User-Driven Interface
If possible, application designers should design the application so that it allows
users to apply their real-world knowledge of the paper process to the application
interface. Good application design can then support the users' environment and
goals. As an important part of the application design, application developers should
perform a task analysis to learn what users want to do and how they want to do «.
Some industry experts recommend having interface experts on the design team, and
producing rapid prototyping of the user interface. Literally within hours after
serious technical discussions between users and designers, rough sketches of the
proposed user interface should be available for critique.
Chapter 1-5
-------
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
1.2.1.3 Consistency
Making the user interface consistent is one way to develop and reinforce the users'
conceptual model of applications. Applications should be consistent with their
hardware and software environments and throughout the applications themselves.
Consistency throughout an application is supported by:
• Common presentation: what is seen by the user
• Common interaction: how a user interacts with the
application screens
• Common process sequence: how a user communicates with
the computer
• Common actions: how similar actions are implemented in
the same way.
Common Presentation: Users become familiar with interface components when
the visual appearance of the components is consistent and, whenever possible,
when the location of the components is consistent. For example, the window title
is a user interface element that is consistent in both appearance and in location.
Entry fields, however, are consistent in appearance but not in location; they may
appear anywhere in the work area.
Common Interaction: After users can recognize interface components, they can
interact with them. When the application consistently supports interaction tech-
niques associated with each component, users become familiar and comfortable
with these techniques.
Common Process Sequence: EPA Common User Interface (GUI) Guidelines
support two process sequences that correspond to the two design approaches used
in application programs: object oriented and action oriented. When the application
consistently supports one process sequence, users become familiar with the way »
interact with the application. They also learn how the application responds. For
example, if the application consistently supports the object oriented sequence, men
know that they must first select an object (e.g., file). They also know that a
selected object is indicated, but that no action is taken until they request an action.
After users learn this way of-expecting the computer to respond, their conceptual
model would not be supported if they selected an object and the application
immediately performed an action.
Chapter 1-9
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Common Actions: EPA CUT Guidelines define actions that have specific
meanings. Common actions provide a language between users and the computer so
users can understand the meaning and result of actions. EPA GUI Guidelines
define common actions and tenninology to assist you in providing consistency. For
example, when users press the Fl key, they are telling the computer that they want
to get help for the specific area of the application they are working on.
1.2.1.4 Modeless Operation
Users are in a mode whenever they must cancel or complete what they are doing
before they can do something else or when the same action has different results in
different situations. By providing modeless operation, users are free to execute
other aspects of an application when they may need to retrieve information. Modes
force users to focus on the way an application works, instead of on the task they
want to complete.
It is not always possible or desirable to design a modeless application. An example
of a mode is a Warning message that needs to be acted on before the user can
safely proceed with the application. Whenever users are in a mode, the application
should make it obvious by providing good visual cues. The method for ending the
mode (e.g., Cancel or data entry) should be easy to identify from the situation.
1.2.1.5 Transparent Interface
The user interface should be as natural and intuitive as possible so users can
anticipate what to do next by applying their previous knowledge of performing
tasks without a computer. An application should reflect a real-world model of the
user activities and tasks necessary to reach desired objectives. One way to provide
an intuitive user interface is to use appropriate metaphors. A spreadsheet uses the
metaphor of a lined accounting pad. Those users who are familiar with this
metaphor easily accept the notion of putting a column of numbers on the
spreadsheet and adding and cross footing them. The software hides all the
complexity of the summing and recursive arithmetic inherent in spreadsheets from
the user.
1.2.1.6 Simplicity and Forgiveness
The interface should be highly visual so users can see, through the use of
pull-downs, pop-ups, or selection lists, how to proceed. Both the presentation of
interface components and the user interaction with the components should be
visual. Try to present information to the user, rather than make them recall or
guess what the system is requesting.
Chapter 1-7
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
User actions should be easily reversed. Users should be able to explore without
fear of causing an irreversible mistake. They should be able to back up or undo
their previous action. Actions that may cause the unexpected loss or modification
to users' data always require a confirmation and a positive response, not just
typing the Enter key (default must be to not change or delete data). Users feel
more comfortable with an application and are able to learn quicker and become
more productive when their mistakes do not cause serious or irreversible results.
1.2.1.7 Positive Feedback
Provide feedback for users whenever possible. Users should never perform an
action without receiving visual feedback, audible feedback, or both. For example,
color, emphasis, and other presentation techniques show users which choices they
can select, when a choice has been selected, and when a requested action has been
completed. Audible feedback is particularly useful for error or warning conditions
to make sure the user is aware of the condition and need for action.
1.2.1.8 Universal Commands
Consistency of similar actions is important in reinforcing the users' conceptual
model For example, a user may be executing applications mat are quite different,
but they both involve creating and editing objects such as files or reports. Both
applications must provide users with the ability to save and retrieve objects. EPA
GUI Guidelines defines common actions that system designers may apply to dif-
ferent kinds of objects. These actions are provided through the menu bar and the
function key area. All common actions, however, may not be applied to all types
of objects, so EPA GUI Guidelines provides direction for deciding when to use
them. Menu bar common actions are implemented through standard menu bar
pull-downs and dialog pop-ups.
Application actions may be assigned to function keys. These function keys serve «
accelerators. By pressing these keys, the associated action is executed immediately,
without typing commands or accessing the menu bar and pull-downs.
Typing commands in the command area may be used as a fast path for
experienced users. They might be able to issue an application command faster by
typing it than by selecting an object and men specifying the action (command
name) and its parameters through the menu bar, pull-downs, and associated
pop-ups.
Chapter 1-8
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
1.2.2 User Interactions
Interaction is the means through which users interact with the user interface
components. Interaction is fundamental to establishing and reinforcing the users'
conceptual model.
1.2.2.1 Process Sequence
The process sequence for a graphic or text based user interface is object oriented.
This means that objects are selected and a list of allowable actions is available that
will operate on the object An object is anything mat users can manipulate as a
single unit (e.g., file, paragraph, record, field, word or character). An action
describes any way that users can change, manipulate, create, or delete an object or
the properties of an object. When the application consistently supports an object
oriented process sequence, it reinforces the users' conceptual model of the user
interface.
The object oriented process sequence has some advantages over the action oriented
sequence. Some of the benefits of the object oriented process sequence are the
following:
• It provides a basis for users to explore the application through
context-sensitive actions. Users can first select an object and then
browse the actions of an application to see which ones apply to the
selected object. Users perceive that they are in control because they
can see which actions are valid prior to attempting to perform them.
• It allows users to perform a series of actions on a selected object
rather than to select repeatedly the object for each desired action.
For example, in a word processing application, users usually select
some text (an object) and then apply to it a number of styles
(actions), such as bold, italic, and underlined. Users find an
interface inconvenient and repetitive if they have to select an object
many times to request all the actions they want to perform on thx
object For example, some text editors require the user to select
Input mode or Edit mode. If Input mode was selected, then the user
cannot edit any of the text In order to make corrections, the user
must exit Input mode and enter Edit mode.
• It reduces the complexity of the user interface and simplifies its
overall architecture by reducing the levels of action hierarchies
needed for the application.
Chapter 1-9
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
1.2.2.2 Object and Action Selection
The distinction between objects and actions affects both the users' interaction with
the user interface components as well as the presentation of information. There is a
significant difference between the selection of an object and the selection of an
action.
Object Selection is the act of identifying objects. It is important that users should
always see a visual indication that selection occurred.
Selecting an object should never imply an action, affect the object, or commit
users to an action. De-selecting an object should be as simple as selecting the
object. Users should be able to cancel a wrong selection or change their minds
without penalty.
An object may be selected by typing a selection character into the choice entry
field immediately preceding it.
Action Selection when applied to an object should cause something to occur
immediately and should also provide a visual cue. For example, if users want to
save a document (perform the Save action on the object, a document), they move
the cursor to the menu bar choice File and press the Enter key to display the File
pull-down. Users select the Save choice and press the Enter key. The document is
saved immediately and a visual indication is given that the action occurred.
If users attempt to select an action before they select an object, the application pre-
sents a message that prompts users to select an object and then an action.
The difference between selecting objects and actions is that selecting an object
causes nothing to happen except visual confirmation of the selection, whereas
selecting an action causes the action to occur immediately and also provides visual
confirmation that the action occurred.
Applications may allow an object to remain selected even after an action has been
performed on it If users normally perform another action, or a series of actions, on
that object, then it should remain selected (e.g. Save operation allows object to
remain selected. Cut or Copy do not). If the object no longer exists in its original
form and location as a result of the action, the object is no longer shown as
selected.
Chapter 1-10
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
1.2.2.3 Selection Techniques
There arc two types of selection: explicit and implicit.
In explicit selection, users select a choice by typing a selection character (e.g., a
number of the choice) in the choice entry field for the desired choice.
In implicit selection, users simply move the cursor to the desired choice. The
choice is automatically selected and when the Enter key is pressed, the application
processes the window.
1.2.2.4 Selection Indicators and Emphasis
As users interact with an application, they need to know which choices arc
currently selected, which choices are not available for selection and the current
state of options, and which choices are associated with an error condition. EPA
GUI Guidelines identifies the following visual cues for users:
• Selection indicators and selected emphasis
• Unavailable emphasis
• Error emphasis
When users select a choice, the application should give some visual
acknowledgement that the choice is selected. For example this may be reversed
video, highlight, or blinking fields.
Unavailable emphasis is a visual cue that shows users that a choice is unavailable
because some condition of the application does not allow them to select it. The
application must let users know when a choice is unavailable for selection. This is
normally done by "graying" the unavailable choice.
Some functions of an application may be available for some users and not
authorized for others. Unauthorized selections should not be displayed for users
who cannot access them. If they must be displayed, they should be marked as
unavailable.
Error emphasis is a visual cue to users that they have incorrectly typed information
into an entry field. Error emphasis consists of a change in the appearance of the
incorrectly-typed data.
Chapter 1-11
-------
2183
c . , 4/30/93
expiration Date: 4/30/94
EPA Common User Interface Guidelines
1.3 Benefits of Common User Interface
Each application may be only one of many run by its users. Users may switch
back and forth between EPA National systems to spreadsheets to database
applications. To achieve consistency under these conditions, applications must look
and act alike. In some cases, the components of the applications should even be
identical.
Implementation of the EPA GUI Guidelines elements should be consistent across
all applications running on a terminal, but applications should take advantage of
the capabilities of the particular type of terminal being used.
Consistency provides a basis for building user expectations and familiarity. It
requires the user interface to act in the same way every time. This reinforces the
users' conceptual model and makes the application easier to use and quicker to
learn. An interface should be consistent physically, semantically, and syntactically.
Physical consistency refers to the hardware: the keyboard layout, the use of a
mouse, or the ability to use sound cues. It would be physically consistent for the
function keys to be in the same location on the keyboard, regardless of the system
being used. This may not always be possible, when mixing programmable and
non-programmable workstations, as well as different vendor models of the PC.
Semantic consistency refers to meaning of words and terms used in the interface.
The use of "exit", "escape" and "quit" are often confusing. Does "exit", "escape" or
"quit" move back one screen, or does it get you out of the entire function or
application? The meaning of program specific terms is also important in order to
reinforce a users expectations. Does geographic location represent a street address,
or longitude/latitude coordinates? In order for users to use information that they
retrieve, they must understand what they are going to retrieve.
Syntactic consistency refers to the sequence and order of appearance of elements
on the screen and the sequence of action requests (e.g., pull-down menus that
remain down when a mouse button or key is pressed) or to the fact that the tide
bar is always at the top of the window.
Consistency across systems is'a trade-off between the desire to be consistent
physically, syntactically, and semantically and the desire to take advantage of a
systems' optimum capabilities. A consistent interface benefits users and
applications designers and may save time and money.
Chapter 1-12
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Users benefit from consistency by taking less time to learn an application and,
when doing an application, less time to do their work. A consistent interface
reduces user frustrations and makes them feel more comfortable with the
application.
A consistent interface benefits applications designers by defining common building
blocks through standard interface elements and techniques. These building blocks
allow programmers to create and change applications more easily and quickly.
1.4 GUI Interface Models
User Interface Types
Graphic Interface
Graphic Interface
Entry User Interface
Text Interface
Figure 1.1 User Interface Models
Chapter 1-13
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
EPA's GUI Guidelines define two interface types, the graphic interface type and
the entry interface type. Figure 1.1 User Interface Models shows how the graphic
and entry user interfaces are related. The graphic presentation style of the graphic
user interface is characterized by:
• Object oriented design and code
• Use with programmable terminals
• Graphic elements and controls
• Menu bar
• Supports pointing devices
The text presentation style of the graphic user interface is a subset of the graphic
user interface, using only text characters and suitable for implementing on
nonprogrammable terminals or with processors or languages that do not support
graphic interfaces.
• Object oriented design and code
• May be used with programmable or non-programmable terminals
• Uses a subset of graphic elements and controls
• Menu bar
• May support a pointing device on programmable terminal
The entry user interface is used where selection of activities is limited, such as a
data entry model The entry user interface is characterized by:
• Action oriented design and code
• May be for use with non-programmable or programmable terminals
• Normally character based elements
• Hierarchical menu system
The graphic interface is preferred for all new applications, but it is often difficult
to retrofit object oriented design into traditional action oriented systems. When
modifications are made to existing systems, it is often better to use the entry type
Chapter 1*14
-------
2183
4/30/93
Expiration Data: 4/30/94
EPA Common User Interface Guidelines
user interface, in order to provide consistency within an application. The main
factor in determining which interface type to use depends on the application design
and code. If the application is object oriented (see sections 1.2.2.1 and 1.2.2.2)
then the graphic or text subset of the graphic interface may be used. If the
application design is action oriented (see section 1.2.2.2), then the entry interface
should be used.
1.4.1 Graphic Common User Interface
Graphic User Interface
The graphic user interface makes extensive use of the PCs ability to handle graphic
images, such as windows, menu bars, pull-downs, and parallel dialogs. It is used
primarily for object oriented applications and defines standard graphic cues, such
as spin burtons and check boxes.
Text User Interface
The text user interface is a subset of the graphic user interface. It is used on
nonprogrammable or programmable terminals. It makes use of as many of the
same features of the graphic interface, such as windows, pull-downs, and menu
bars, as possible. It is intended for object oriented decision intensive applications.
1.4.2 Entry Common User Interface
The entry user interface is intended for use in transaction or data entry intensive
applications. It may be used on non-programmable or programmable terminals. The
entry model doesn't require the flexibility and object orientation of a graphic
model. The entry model is suitable for use with action oriented applications.
Systems developed more than a few years ago, which includes many large
traditional systems, were normally designed as action oriented. They are
characterized by a set of actions (e.g. Update, Report, Edit, Browse, Add, Delete)
applied to a few specific objects. Most of these systems were designed around
hierarchical menu systems, where the user selected a file or subsystem and then
was allowed to select from a set of menus that manipulated the file (object).
Chapter 1-15
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Chapter 1-16
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
2.0 Graphic Common User Interface
This chapter defines the graphic based common user interface (GUI). The graphic
user interface makes extensive use of programmable terminals' abilities to handle
graphic images, such as -windows and menu bars. It is used primarily for object
oriented applications.
2.1 Basic Windows Concepts
Main Window
Parent Window 2
Parent Window 1
Child Window 1.1
Child Window 2.1
Child Window 2J2
Child Window 1.2
Child Window 1.1.1
Figure 2.1 Window Tree
The fundamental resource in a graphic user interface is a window. A window is a
rectangular section of screen. Each window has a border, and application programs
can combine two or more windows to create a flexible user environment. Windows
Chapter 2-17
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
are organized within an application in a hierarchy. The top window in an
application is the primary window, and all others are known as secondary or child
windows. Each window except the primary window has a parent window. Child
windows that share the same parent are siblings. Figure 2.1 is an example of a
window tree hierarchy.
Child windows have a specified order, known as the z-order. The topmost ordered
sibling obscures any portion of its siblings and is clipped to its parent Figure 2.2
shows the representation of the window hierarchy displayed. Windows 1.1.1 and
2.2 arc clipped to their parents and overlay their siblings. The window to which
input is directed is the focus window. The main window of the hierarchy
containing ihc focus window is the active window and is usually presented on top
of all the other windows.
The primary visual
components of the graphic
user environment are the
screen background, windows,
icons, and a free-moving
mouse pointer. These
components are identified in
Figure 23.
Within any window are
additional standard interface
components that provide a
consistent way to present
information to users. When
users arc familiar with an
application interface, they can
identify similar components
of this interface when using
new applications. Developers
may reuse these standard
components. This provides the
benefits of quicker learning
and reduced development
time.
Pwit \rnftdWflf 1
Wndow 1.2
1.1
Window 1.1.1
2.1
WWow U
Figure 2J Windows Tree Hierarchy
The conceptual model is based on the visual components of the user interface. In
windows, applications present objects for users to manipulate. Application icons
Chapter 2-18
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
represent applications that arc temporarily set aside for later use. A freemoving
pointer allows users to choose where their next interaction will occur.
A window is a visual component through which an application presents objects and
allowable actions for users to choose. There are two basic types of windows,
primary windows and secondary windows. Each window type is unique and is used
by an application for different reasons.
A primary window is a movable, sizable window in which objects and actions of
the application are presented to the user. In the primary window, objects are
presented in the work area and actions in the menu bar. The primary window is the
main focus of the users' work activity. Every application must have a primary
window. Figure 2.4 is an example of a primary window.
fn» EdH V1«w Options Usjp
Bdlt
. Primary
Window
«
Ktarv
Window
MOUM
Point0r
Background
The work area
is between the
top of the
screen (menu
bar) and
bottom of the
screen where
the users get
their work
accomplished'.
Sometimes this
area is referred
to as the
desktop
(Apple) or the
client area
(IBM
SAA/CUA) or
the workbench.
For some EPA National systems the work area may be customized, such as
customized forms fill-in screens. For some types of applications the work area imy
be presented completely blank (e.g. word processors).
An application actually supports two types of objects: the form, which is the
application object, and the user information, which is the user object. Like a user
object, an application object has sub-objects and properties. For example, in a
spreadsheet application, the rows and columns arc sub-objects of the application
object, the spreadsheet. The sub-objects of an application may have properties,
such as the height of columns and width of rows in a spreadsheet. Because such
Icon
Figure 23 Visual Components
Chaptar 2-19
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
ATM
Figure 2.4 Primary Window
characteristics as
height and width
are properties, the
users can modify
them just as they
can modify the
properties of user
objects.
A goal of an
application is to
provide the most
frequently used
actions of the
application directly
in the work area of
the primary
window. For example, word processor type applications may allow the user to
compose and edit a document without using the menu bar.
All other windows created or used by an application are associated with an
applications primary window. Actions that affect the primary window may also
affect its secondary windows. For example, when a user closes a primary window,
all the supporting windows associated with that primary window are also closed.
An information message to this effect should be generated and allow the user to
choose this action or cancel it, complying with the forgiving principle of user
interaction.
A secondary or child window is a movable, sizable window that is always
associated with a primary window. Secondary windows may be used for a
modeless, parallel dialogue with users, such as the dialogues for help. Help is an
activity that is parallel to the window with which it is associated. The help window
carries out a dialogue with users that is independent of the window from which
users requested help. Figure ^5 shows a secondary window.
Secondary windows, rather than dialogue boxes, should be used when the
information to be presented in the window may not fit and scrolling may be
required to view additional information. In this situation, users should be allowed
to change the size of the window so they can control the amount of the
information they view.
Chapter 2-20
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
EH« gdtt View Options Help
EPA Application
pie Edit Vtow Option* U«lp
Secondary
Window
Figure 23 Secondary Window
2.1.1 Interacting with a Window
A workstation may have input devices consisting of a keyboard and/or a mouse or
pointing device. The end user determines what window is to receive input, and the
position of the next input character is represented by a cursor, for keyboard, or a
pointer, for pointing devices. The selection of which window to direct input is
under user control. Input from the pointer or keyboard is given to the application
whose window lies underneath the cursor or pointer. The appropriate main window
of the application becomes the active window, and the application is responsible
for establishing the focus window.
2.1.2 Operating on a Window
The presentation interface (e.g. Windows 3.0 for DOS, Presentation Manager on
OS/2, etc.) provides facilities that allow a user to size, position or arrange window*
(e.g. cascade) on the screen.
These facilities are provided independently of the applications program. The
application must be aware of the activities to let die presentation interface take
appropriate action. If the size of a window changes, the application must be aware
Chapter 2-21
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
that it may contain more (larger) or less (smaller) data. The user may alter a
window by changing its size, or by moving the window. Allowable options are:
Maximize - Causes the window to become as large as the
application will allow, normally the entire screen.
Minimize - Causes the window to be made as small as the
application allows. Normally this results in the window becoming a
small icon representing the application.
5/zg - Changes the onscreen size of the window, either larger or
smaller. The application program can request to be notified when
the user changes size of a window. As a window gets smaller, the
contents become smaller. The application can reduce the contents of
a window in order to allow the user to still read or understand what
they are looking at.
Move - Changes the position, but not the size of the window. A
window cannot be moved outside its parent. If it is moved too close
to the edge, it will become clipped, and the portion outside of the
parent border is not visible to the user.
2.1.3 User Interface
A presentation manager provides for a set of functions that allow for a dialogue
between the end user and the application. These functions are encapsulated in the
controls and elements of the presentation interface. Combinations of windows
provides for a wide variety of user interface functions. There are three basic
categories of user action that provide input to an application. These are:
Data Entry - allows the user to provide information or direction to
the application.
Movement - allows the user to move the pointer.
Selection - allows the user to identify a point (usually the point of
the arrow shaped pointer) of interest to the application.
Chapter 2-22
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
2.1.4 Messages
The presentation interface and the applications packages must work together to
present the user with a seamless approach to task management. In order to provide
a truly interactive interface, the presentation manager must pass each message to
the application program. All messages do not have to be acted upon by the
application. Some messages may be only needed by the presentation manager (e.g.
display color changes)
There are circumstances where the presentation manager is the service requestor,
and times when the application is the service requestor. Normally the application
requests service from the presentation manager, but there are cases when the
presentation manager becomes the requestor. The presentation interface can
relocate a window, but does not retain the definition of the other windows that are
displayed. It must ask the appropriate applications to refresh their windows (repaint
themselves).
A request for service is held in a message that is passed to the service provider.
Messages contain the information as parameters related to the request for service.
A request for synchronous service is sent to the provider, and a request for
asynchronous service is posted to the queue created by the service provider.
This leads to different program logic than traditional sequential process looping
programs. In traditional architecture programs, an application progressed until it
was ready for input. Then it went into a wait state until the input (keystroke)
arrived. The traditional way for this to occur was for the application to relinquish
control to the operating system and place a value in one of the registers specifying
that the operating system would reactivate the application when the user had
entered a keystroke.
In an event driven (modeless) environment, provided as pan of the GUI, the user
may choose to click on Exit instead of entering the next character. If the program
had transferred control to the operating system, it wouldn't be ready to receive and
act on the mouse click action.
The application and presentation interface must work in partnership to exchange
messages, and the application becomes a collection of resources and routines that
the operating environment calls upon as required by the users actions.
Chapter 2-23
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
2.1.5 Presentation Manager
A graphic interface requires a great deal of code to be written in order to provide
the necessary input and output (windows, etc.) functions to the applications
programmer. In the interest of providing both portability and reusability, a graphic
presentation manager is used by the applications programmers. This presentation
manager provides at least some of the following functionality:
• A windowing system, providing elements and controls for use by the
programmer
• Support for user interaction by means of the keyboard or pointing device
• Graphics support for screen display
• Message handling from the presentation interface to the application
• Ability to save and restore images
• Support (drivers) for many different displays and printers
• Support for different fonts
The purpose of a presentation manager is to provide the functionality required by
the application program to supply input, output and control functions to the end
user. For example, Microsoft Windows 3.0 with its Windows Developers Kit, and
Dec X-Windows through its toolkit, and Style Manual provide all of the
functionality of a presentation manager.
In addition to the presentation manager, an application programmer can benefit by
using a dialogue manager. A dialogue is the interaction between the user and the
computer program through a single primary window and all of its associated
windows, pop-ups, dialogue boxes, and elements. A dialogue manager may provide
capabilities for verifying input data, provide range and validity checking, trans la«
data or use assignment lists to look up entered data. A dialogue manager may
display messages on error conditions, or other standard program conditions. A
dialogue manager can handle Help requests from the user. One example of a
dialogue manager is EASEL from EASEL Corporation.
Chapter 2-24
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
2.2 Presentation Elements of Graphic User Interface
Both primary and secondary windows are composed of standard components.
Several window components are used in all window types while others are specific
to a particular window type.
2.2.1 Basic Window Components
The fundamental window components are the title bar, window border, menu bar,
work area, elements and controls, and scroll bars.
2.2.1.1 Title Bar
The Title Bar identifies the window to the user and provides controls for closing or
resizing the window. It contains the system menu button, the window title and the
window control buttons.
2.2.1.2 Window Border
Windows may be sizable or non-sizable. Each type of window border is visually
distinctive. A sizable window border is a color boundary containing eight
segments. The segments provide users with a visual cue that they can change the
window size. Non-sizable window borders are not segmented. Non-sizable borders
may be used for dialogue boxes and menus.
2.2.1.3 Menu Bar
The menu bar is the area of a window that contains the actions of an application, h
is positioned directly below the title bar. An application that supports more than
one action must have a menu bar in its primary window. A menu bar may contain
multiple lines and use words as well as icons as directions to users.
Chapter 2-25
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
2.2.1.4
Work Area
The work area of a window is the pan of the window inside the border that is
below the menu bar. The work area is the focus of the users' attention. The work
area of the primary window is where you present to users the object that users
want to work on.
2.2.1.5
Window Elements and Controls
A control is an interface component that enables users to select choices and type
information. Controls, like other interface components, provide consistency in both
presentation and interaction. Each control has a unique appearance and gives users
a specific way to interact with it. This includes pushbuttons, radio buttons, check
boxes, lists boxes, spin buttons, and field and group identifiers.
2.2.1.6
Scroll Bars
Scroll bars provide users with a visual cue that more information is available and
that the unseen information can be manipulated into view using the mouse or
cursor arrow keys to scroll information. Scroll bars should be included in all
sizable windows.
2.2.2 Title Bar
Window
Trtia
The title bar has two
purposes: it identifies an
application or function to
users through the window
title, and it is a visual cue
to users that they may
move a window. Users may Figure 2.6 Title Bar
move a window by clicking
on the title bar and holding down on the mouse button while they relocate the
window.
System
Menu
Button
Window
Control
Buttons
The window title bar consists of three parts: the system menu button, the window
title, and the window control buttons. Figure 2.6 is an example of a window title
bar.
Chapter 2-26
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
2.2.2.1 System Menu Button
Users can use the system menu button to display a pull-down containing the
actions that users can perform on a window. The actions may be any of the
following: Restore, Move, Size, Minimize, Maximize, Close, and Switch to...., as
applicable.
2.2.2.2 Window Title
The window title of the primary window contains the application name and the file
name, if applicable. The file name represents the stored object users are modifying.
If users have not yet named a file, an application can display Untitled or may
supply a file name consistent with a naming convention that is meaningful to the
user.
2.2.2.3 Window Control Buttons
Window control buttons provide a fast way to use the mouse to select three of the
system menu actions: Minimize, Maximize, and Restore.
2.2.3 Window Border
The application provides the initial size of its windows, but window sizes may
vary depending on the need for users to work in them. The user should have the
ability to resize primary and most secondary windows. This is done by means of
the bonier that surrounds the window. A sizable window border is a color
boundary containing eight segments (two horizontal, two vertical, and four
comers). This segmentation provides a visual cue that windows are sizable.
A window may have a non-sizable window border. Each type of window border is
visually distinctive. Non-sizable window borders may be used for dialogue boxes
or messages. Non-sizable window borders are not segmented.
Figure 2.7 is an example of a sizable window border.
Chapter 2-27
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
EPA lAforcl Processing
-Edit..View . Options b«lp
Date: April 23, 1991
EPA Word Processing
File Edit View Options Help
DUE April 23. 1991
Ibc t-
CL. Mma
Afior stat
I fawc difloownd JBvcral BOW
flat ntfU. They could wnmJJae *• Acncy'i
U» wy the poWic ncciva
d several new
unittee- may .find
and simplify the
nuooD.
isk force of;
scientists and
Figure 2.7 Sizable Window Border
2.2.4 Menu Bar and Pull-Downs
Menu Bars and pull-downs are user interface components that are used to present
application actions to users. Menu Bar and pull-down choices can be commands,
or they can be properties that apply to an object in the work area (e.g., color
palettes or style selections).
List single word choices left to right in descending order of use
with Help being the choice on the farthest right Place the menu bar
choices, if applicable, in the following order
File
Edit
Any application-specific choices (e.g., View, Special or
Options')
Help.
Provide each menu bar and pull-down choice with a unique single-character
mnemonic that can be used to select the choice. This provides a fast interaction
technique for selecting choices from the keyboard. When users type a valid
mnemonic, the selection cursor moves to that choice, and it is automatically
selected or de-selected as appropriate. A mnemonic may be identified with a
Chapter 2-2t
-------
2183
_ , , 4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
special color or the character underscored to provide a visual cue to users that
mnemonic selection is available. In each window, a mnemonic must be unique
within the menu bar and within its associated pull-down.
If possible, assign the first letter of a choice as its mnemonic. Otherwise choose
another letter in the choice that seems reasonable for the context of your
application (e.g., Enter and Exit). If you must choose a letter or character not
contained in the choice, enclose the mnemonic in parentheses immediately
following the choice.
If a choice has an associated dialogue box or a secondary window,
place an ellipsis (...) or right pointing triangle, immediately
following the choice.
For frequently used pull-down choices, the application may provide
an accelerator key immediately following the choice. An
accelerator assignment may be one key or a combination of keys,
such as Ctrl + F5. (NOTE: Use a plus sign to indicate that users
must press two or more keys at the same rime.)
In a graphics environment bit maps and icons may be used in
pull-downs. For example, a drawing application may have a
pull-down for selecting graphic fill patterns.
2.2.4.1 Operation of Menu Bars and Pull-Downs
The menu bar is activated by direct selection of an action choice using the mouse
pointer or by pressing the Alt key from the keyboard.
Accelerator keys assigned for the active window are always active, whether or ooc
the pull-down is displayed (e.g. if F10 is the File Save accelerator key, then a fik
may be saved at any time by pressing F10).
The appearance of pull-downs may be modified to convey information to the wer
based on conditions in the application:
Choices that are currently unavailable may be displayed in reduced
contrast (gray). Selection of an unavailable choice results in a beep
and the continued display of the pull-down. Help should be
available even if the selection is unavailable (e.g., Edit choices
before any data has been entered).
Chapter 2-29
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
A check mark preceding pull-down choices indicates the current
status of the choices.
Users are more productive when they are presented with only a small number of
choices. A second level of choices may shown by using cascading pull-downs.
This is a vertical list of choices associated with a first-level choice.
The first-level choice acts as a group heading in the same way that the menu bar
choice acts as a group heading for its pull-down. A right-pointing triangle appears
at the right of the pull-down choice text as a visual cue that this choice has an
associated, hidden pull-down. This is similar to an ellipsis, which indicates a
dialogue box is associated
with the selection. Figure
2J& is an example of a
cascading pull-down
Qp«n...
P| lilt
Exit
fc|«lp
Figure 2A Cascading Pull Down
Standard Menu Bar Pull-Downs
EPA GUI Guidelines defines common actions and associated pull-downs for FUe,
Edit, and Help. EPA GUI Guidelines also provides guidance for View and
Options. The common actions usually apply to the object in the work area of a
window. This section provides guidelines on when to include these actions in the
application. If the application supports File and Edit, they should be the first two
choices in the menu bar. If application developers include Help in the application,
it is the last choice in the menu bar.
EPA GUI Guidelines defines a standard layout for the File, Edit, and Help
pull-downs. This layout includes the text for the pull-down choices. Standard
accelerators are also provided for some of the more frequently used functions.
Accelerators are function keys that invoke the associated action without ac
the menu bar and a pull-down. Accelerators may also be used for application
specific actions that are used frequently.
Following is a description of three standard pull-downs, File, Edit, and Help, md •
general description of the View and Options actions. Each description includes
general information and a figure showing the pull-down layout For File and Edk.
each figure is followed by a description of how the application must implement
each pull-down action.
Chapter 2-30
-------
2183
4/30/93
Expiration Data: 4/30/94
EPA Common User Interface Guidelines
The File pull-down enables users to manipulate stored objects, such as files, as a
whole. Every application that manipulates stored objects must provide the File
pull-down. Some actions in the File pull-down, such as New, Open, and Exit, have
the potential to lose unsaved changes. As pan of a forgiving user interface,
applications must be able to recognize this situation and display a message telling
users that their unsaved changes will be lost. The application should also ask users
if they want their changes saved. If so, the application should perform a save, as if
users had selected the Save action from the File pull-down.
File actions are organized by task: selecting actions, saving actions, and output
actions. System developers may add to this pull-down other actions that involve
manipulating an object Any activity that involves manipulation of an entire object
is a candidate for inclusion in the File Pull-Down. Some application specific
actions that may be included in the File pull-down are Copy, Move, and Delete. If
an action has several options, a pull down list may be used, or the option may be
given its own heading on the menu bar. This is reasonable if the option is accessed
frequently, e.g. Print.
Following are descriptions of the File pull-down actions:
New allows users to create a new file. The application should
ensure that a file with the same name does not already exist.
Open reads an existing file.
Save writes the existing file to a disk. When an object is untitled, as
it might be after requesting the New action, an application must
prompt users for the file name or supply a default name consistent
with the application conventions (e.g. DEFAULT.FIL).
Save as writes the existing file as a new file without changing the
original one. The application prompts users for a new file name,
using a dialogue pop-up. The application should display a warning
message that data is about to be lost if users select an existing fik
name as the new name.
Print allows a user to schedule and print a file on a user selected
device or to store as a disk file.
*
Exit ends a function or application and removes from the screen an
windows and pop-ups associated with that function Or application.
The Exit action should always appear as the last choice in the first
(left most) pull-down.
Chapter 2-31
-------
2183
4/30/93
Expiration Data: 4/30/94
EPA Common User Interface Guidelines
Edit Pull-Down
The Edit pull-down allows users to perform the types of actions that are similar to
those needed to reorganize paper documents in the real world.
In keeping with the user directed attribute, this real-world metaphor for paper
documents is transferred to the computer environment for electronic documents
through the actions available in the Edit pull-down. For example, users select a
paragraph they want to move and then select the Cut or Copy action in the Edit
pull-down. If Cut is selected the paragraph disappears from its location in the
document Users select a destination point in the document and select the Paste
action in the Edit pull-down. The paragraph is inserted at the new location.
The Edit pull-down contains common editing actions that apply to many types of
files. Any application that supports editing must provide these common editing
actions in the Edit pull-down.
System designers may add application-specific actions to the Edit pull-down, as
appropriate.
Following are descriptions of typical Edit pull-down actions:
Undo reverses the most recently executed user action. Because the
Undo action deals with hidden objects, it should be modified
dynamically to reflect exactly what is being undone (e.g. Undo last
change, or show what would be undone by using graphic
emphasis).
Cut copies the selection to the clipboard and removes it from the
object being edited. Depending on the type of object being edited,
the space occupied by die removed portion may be either retained
or compressed. For example, text applications usually compress the
space, whereas graphics drawing applications usually leave the
space blank.
Copy produces a duplicate of the selected portion of an object on
the clipboard without removing the selected portion from the object
that is being edited.
Paste copies the contents of the clipboard onto the object being
edited at the location selected. For text applications that support
word wrap, information to the right and below the selected location
is shifted and formatted. However, for certain applications, such as
Chapter 2-32
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
graphics drawing applications, it may be appropriate to overlay the
information. The last copy or cut should remain on the clipboard to
support multiple pasting.
MarklUnmark (optional) places or removes the emphasis from the
currently selected portion of the object. This is sometimes referred
to as the block command.
Delete removes the selected portion from the object without
copying it to the clipboard.
Help Pull-Down
The Help pull-down provides users with access to various kinds of help
information. Help should be context sensitive and provide information about a
specific item or field, an application window, or the help facility. All applications
that access online help information must provide the following options from the
Help pull-down.
Contextual information when help is accessed and the cursor is on a choice
or in an entry field in an application window.
Information about die application window, known as Extended help, when
the cursor is not on a choice or in an entry field.
Information about the help facility when help (Fl function key) is
requested from within a help window.
If a help tutorial facility is provided, then the Help pull-down may provide access
to it or at least information about how a user may access it outside of the
application.
View Pull-Down
The View pull-down allows users to select different ways to look at an object
without affecting the object itself. This pull-down contains actions that control such
viewing specifications as how much information is presented, the presentation
order, the format, and the scale.
Options Pull-Down
Provide an Options pull-down if users need a way to customize the object itself.
Like the View pull-down, the Options pull-down is specific to a particular
Chapter 2-33
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
application, so its contents cannot be standardized. For example, in a document
editor, Options may allow a document to be displayed in memo, letter or report
style.
2.2.5 Work Area
The work area is the
area in which users
perform most
application level tasks.
The work area is inside
the window borders and
may contain multiple
work areas or
secondary windows.
Figure 2.9 is an
example of the work
area of a window.
Pronram
Edft
Qptfona
ATM
Figure 23 Work Area
2.2.6 Window Elements and Controls
Standard window elements and controls are the following:
Field and Group Identifiers define and identify the purpose of a selection
or entry group or field.
Radio button allows a user to select one of a set of options that are
mutually exclusive. If a user selects a radio button and then chooses
another, the first one is automatically de-selected. They are defined as
partially filled in circles.
Check box allows a user to select one or more of a set of choices. These
choices are not mutually exclusive (e.g., text as bold, underscore or italic)
and the user may select as many as required.
Chapter 2-34
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
List box contains a list of choices that the user may select from. The list
may be scrollable (e.g., a list of files in a directory) and the user will
normally select one.
Value Set is similar to radio buttons; this allows a user implicitly to select
choices.
Spin Button allows a user to complete an entry field by scrolling through a
limited set of choices organized in a way that makes sense to the user (e.g.,
a list of state names in alphabetic order or days of the month).
Combination Box combines the attributes of an entry field and a list box.
This allows the user to select from a list or type the entry in, whichever is
more appropriate. An example is a list of files in a directory. The user may
type in the correct directory and file name rather than switching directories
and scrolling through the list of files.
Drop-Down Box is similar to a combination box and may be used if
presentation space is limited or when users will more often complete the
entry field.
Drop-Down List is similar to a drop-down box, but it does not have an
entry field. Drop-down lists have a default value filled in. An example of a
drop-down list is printer selection, where the printer must be defined to the
system prior to selection and the default printer is normally selected.
Dialogue Box is used by the application to obtain information from the user
before the application can continue to process. Dialogue boxes may be
modal or modeless. A Search or Find function is an example of a modeless
dialogue box.
Entry Field is a single or multiple line entry area provided by the
application to allow the user to type in information.
Pushbuttons display actions in those windows that do not contain a menu
ban dialogue boxes, message boxes, and some secondary windows.
Usually, these window types have a limited number of actions associated
with them, making a menu bar inefficient for users. Pushbuttons normally
execute their action immediately, instead of presenting other choices.
Logo Window displays information pertinent to the application such as
name, version number, and EPA logo, as appropriate.
Chapter 2-35
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Scroll Bars allow the user to move up/down or right/left to see additional
information that is hidden by the current window borders.
Open
*.TXT
File name :
Directory is C:\PLANNING
Rles
DEPT.7XT
EDUCTN.7Xr
FY93.TXT
GOALS.TXT
MEMO-BT.TXT
PUBLIC.TXT
Directories
PROJS
IB:]
C OK ) C Cancel ) C He|P )
Figure 2.10 Open Dialogue Box
2.2.6.1 Field and Group Identifiers
Field Identifier
A field identifier is an interface component that describes die purpose of a
r field. It is descriptive, static text for selection and entry fields. It
A field identifier is an interface component that describes die purpose of a
selection or entry field. It is descriptive, static text for selection and entry fields.
is normally located above or to die left of a field. Figure 2.10 is an example of
Open dialogue box with field prompts.
A field prompt should also be used for output information.
A field prompt mat is located above a field should be left-aligned
with die beginning of mat field.
A field prompt that is located to die left of a field should be
left-aligned with other field prompts.
an
Chapter 2-36
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
For entry fields, in addition to a field prompt, you may provide
users with other helpful information. For example, if users are to
type into an entry field a value that has to be within a certain range
of values, you could display the range next to the entry field, as
shown in Figure 2.10.
Column Heading
A column heading identifies an entry field or selection field that has items in a
column and of the same type, such as the items in a list box.
A column heading is located above the field it identifies. If information can be
scrolled vertically, place the column heading so that it does not scroll and the
heading remains visible. If information scrolls horizontally, the column heading
scrolls to remain above the appropriate area.
Group Heading
A group heading identifies a related set of entry fields or selection fields or both.
You may use them alone or with field prompts. Use a group heading to identify
the related fields and field prompts to further identify the individual fields.
If group headings are located in windows that scroll, the headings scroll with the
items they identify.
Group Box
A group box is a single-line rectangular frame with a title that groups related
choices.
A group box provides a visual cue to users by isolating and naming groups of
controls that work together. A group box may contain a single set or many sets of
choices. The title appears at the top left side of a group box.
2.2.6.2 Radio Button
A radio button is a two-pan control consisting of a circle and choice text. Radio
buttons are combined to show users a specific set of choices that are mutually
exclusive. Users can select only one radio button in each selection field. If users
select a different one, die previous button is no longer selected.
Chapter 2-37
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
A radio button Held contains at least two choices, one of which is normally
selected. When more than one object is selected in the work area of the primary
window, a situation can occur in which the current state of the selected objects
cannot be reflected by one radio button. For some of the objects selected, one
radio button applies. For others, another radio button applies. In that situation, all
radio buttons in the group should be off when the group is initially displayed.
When users select a radio button, its circle is r— Date Format
partially filled in to show users that the radio
button is selected. Figure 2.11 is an example
of a Radio Button selection.
®MDY OQMY OYMD
Figure 2.11 Radio Buttons
2.2.6.3 Check Box
A check box is a two-part control consisting of a square box and text describing
the choice. Check boxes can be used alone or grouped in related sets. Check boxes
are not mutually exclusive; when users select more than one check box, all other
check boxes remain unchanged. When users select a check box, its square box is
filled in with an X.
Similar to radio buttons, when more than one i T©Xt FOfTTISt —
object is selected in the work area of a primary
KBold
D Italic
D Underline
window, a situation can occur in which the
current state of a check box is neither completely
on or off. For some objects selected, the selection
is true; for others it is not. When this happens, the
square box is filled with gray. For example, users
can select a block of text and have some, but not
all, of the text in bold. A set of check boxes F'8ure 2-12 Check Box
displaying the current state of the properties of
that text would contain a Bold choice whose square box is filled with gray. This
gray color shows users that some of the selected text is bold but the rest is not.
Figure 2.12 is an example of a check box.
2.2.6.4 List Box
A list box is a rectangular box with scroll bars that contains a scrollable list of
choices from which users can select one choice. A list box may be used to show a
variable length list (e.g., files) or a long fixed length list mat does not normally ft
in the display area. Figure 2.13 shows a dialogue box for Open. It contains two
list boxes, Files and Directories.
Chapter 2-39
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
2.2.6.5
Open
File name :
Directory is C:\CLOTHING
Rles
COAT
CANE
JACKET
SHOES
SOCKS
Directories
FURNTURE
[A:]
1C]
( OK ) C Cancel ) ( Help )
Figure 2.13 Dialogue Box with List Boxes
Value Set
A value set is a special type of single selection field that is provided by an appli-
cation and allows users implicitly to select choices. As with radio buttons, value
sets support mnemonic selection when
the value set contains text. Figure 2.14
is an example of a value set
Choices may be either text or
graphics.
Allow users to select a value
set choice by mouse or
keyboard—with a mouse by
Fill Value Set
Figure 2.14 Value Set
clicking on a choice or with the keyboard by moving the cursor to a
choice.
The choice selected is identified by a dotted outline box.
Selected emphasis may also be supplemented by using color.
Chapter 2-39
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Choices that are currently unavailable are identified by reduced contrast
(gray).
Alabama
j_
i
Figure 2.15 Spin Button
2.2.6.6 Spin Button
A spin button is a special type of entry field that
is provided by the application to allow users to
complete an entry field by scrolling through a
finite set of choices. For example, you may use a
spin button to allow users to select a valid state
name from a list of states in a region, as shown in Figure 2.15.
A spin button should be used only when die valid list of choices is
in recognizable order.
Spin Buttons must contain a default choice.
They allow users to type directly into the entry field or to scroll a
list of choices with either the mouse or keyboard. The users scroll
through the list using the mouse to click on either of the arrows or
with the keyboard, using the appropriate arrow keys.
2.2.6.7
Combination Box
A combination box is a control that combines the capabilities of both an entry field
and a list box. Use a combination box when users can type information but when
your application can provide a list of possible choices to complete the entry field.
The list box appears beneath and to the right of an entry field. Figure 2.16 show*
a combination box.
The application should have space for only six to eight choices in
the list box.
The choices fii the list box should be in an order that is obvious to
users, considering the context of the entry field.
Chapter 2-40
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
2.2.6.8
2.2.6.9
State:
Drop-Down Box
A drop-down combination
box is a variation of the
combination box in which the
list box is hidden until users
request it. Users are given a
visual cue of a downward -
pointing arrow at the right
side of an entry field to
indicate a list box is available.
Use drop-down combination
boxes for either of two
situations. Use one when
presentation space is limited,
making a standard combination box undesirable; or use one when users will
complete an entry field more often by typing text than by choosing the entry field
text from a list
Figure 2.17 shows
an example of a
drop-down
combination box.
ARKANSAS
ALABAMA
ALASKA
ARIZONA
ARKANSAS
CALIFORNIA
COLORADO
Figure 2.16 Combination Box
State:
ARKANSAS
State:
ARKANSAS
CALIFORNIA
COLORADO
Figure 2.17 Drop-Down Combination Box
ALABAMA
ALASKA
ARIZONA
I
Drop-Down List
A drop-down list is
similar to a
drop-down
combination box, but it does not have an entry field for typing text. Instead of an
entry field, users see a single selection field with one choice displayed as the
default value. As for drop-down combination boxes, users have the same visual
cue that a list is hidden; they see a prompt box containing a downward-pointing
arrow at the right side of the selection field.
A drop-down list may be used in place of a list box when a choice is not changed
frequently and space is limited. For example, a drop-down list can be used when
users want to select a different printer. Assuming users do not change printers
often, they do not need to see a list of available printers every time die printer
selection field is displayed. Figure 2.18 is an example of a drop-down list
Chapter 2-41
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Printer
HP LASERJET III
Printer
LASERJET IIISI
DESKJET
LASERJET II
LASERJET III
LASERWRITER
PAINTJET
Figure 2.18 Drop Down List
2.2.6.10 Dialogue Box
A dialogue box is a movable window, fixed in size, in which the application can
request information required to complete an action. A dialogue box is associated
with a specific window. Figure 2.19 is an example of a file transfer dialogue box
within a window.
EPA Application
File Edit View Options Help
EPA Application
Transfer another file?
( Control ) (Canal ) ( H«lp )
Figure 2.19 File Transfer Dialogue Box
The size of the dialogue box is determined by the application and cannot be
changed by users. The size should be as small as possible to contain all
information without the need for scrolling. This should make it less likely that a
Chapter 2-42
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
dialogue box will cover pertinent information in the underlying window. After the
dialogue box is displayed, users can move it around the screen, if necessary, to see
any information in the underlying window that has been covered by the display of
the dialogue box.
A dialogue box may be modeless or modal. A modal dialogue box provides a
fill-in-the-blanks which users must complete before they can interact with any
other window associated with that application. For example, if users try to save a
file that has not been named, a dialogue box is displayed because the application
must have a file name before it can complete the action. A modeless dialogue box
allows parallel dialogue from which users may do something else before they
complete the dialogue. Users may switch between a modeless dialogue box and its
associated window.
Modeless dialogue boxes, rather than secondary windows, should be used when all
the information to be presented fits within the box and scrolling is not required.
List boxes and entry fields can scroll individually without forcing the entire
window to scroll
A Search request is an example of a modeless dialogue. Usually, when an
application searches for something, more than one match is possible and it is
necessary to check out several matches before the user finds the correct
information. A modeless dialogue allows users to find an object through a dialogue
box, switch to the primary window to modify the object that has been found, and
then return to the dialogue box to continue searching for the same or another
object. A modal dialogue would require the user to initiate the find dialogue each
time it was necessary to search for another match. A modeless dialogue allows
users to repeatedly perform an action without having to reinitiate the dialogue.
A modeless dialogue box remains displayed until users either request the Cancel
action in the dialogue box or select Close from the system menu pull-down.
A message box is a type of modal dialogue box that is used exclusively for
displaying messages to users. A user must Cancel or OK a message box before
continuing to process.
Preselected choices may be used when applicable to help users complete dialogues.
If used, these choices should, reflect the current state of options. Preselected
choices allow users to proceed immediately to the next field when this choice is
also the users' most requested choice.
Chapter 2-43
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
2.2.6.11 Entry Reids
An Entry field may be a single-line or a multiple-line field. A single-line entry
field is a two-part control consisting of descriptive text and a single line box into
which users type information. An application may decide to initially display an
entry field blank or with default text
Open
Rle name :
Directory is C:\PLANNING
Rles
DEPT.TXT
EPA.TXT
FY93.TXT
GOALS.TXT
MEMO-BT.TXT
SOILTEST.TXT
t
1
1
Directories
PROJS
( OK ) ( Cancel ) C Help )
Figure 2.20 Single Line Entry Field
Figure 2.20 is an example of a single-line entry field.
The length of an entry field should be equal to the average amount of text that win
be entered into the field. The application can provide scrolling so the user can see
text that exceeds the normal length.
A multiple-line entry field consists of a rectangular box into which users type
information that consists of iriore than one line. For example, users may need mon
than one line to input text for a comment or memorandum field to be appended to
a record.
Chapter 2-44
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Scroll bars arc provided so users can see the text that exceeds the size of the entry
field box. Applications may select the color of the window background and the
font and color of the text
Normally the Enter or Tab key should be used to accept input in an entry field. In
some cases an Auto-return, which causes the cursor to move to the next field after
the user has typed in the last character of a fixed-length field, may be used if
required. Auto-return can be useful for high-volume data-entry fields that are filled
completely with text In order to provide consistency, avoid using Auto-return
when you have a mixture of entry fields, some that must be completely filled and
some that can be partially filled.
In dialogue boxes, the Enter key is used to perform the default action; this action
usually submits the dialogue to the application. However, the Enter key may also
be needed to move the cursor to the next line. The application may have to support
both of these actions by enabling the Enter key to work contextually according to
the location of the cursor.
If the cursor is in a multiple-line entry field, pressing the Enter key
moves the cursor to the beginning of the next line. Any text that
was to the right of the cursor prior to pressing the Enter key is
repositioned on the next line.
If the cursor is not in a multiple-line entry field, the Enter key
performs the action defined in the window. For example, in a
dialogue box, pressing the Enter key will perform the default action
of the dialogue box.
Both single-line and multiple-line entry fields should support insert-and-replace
modes. Users toggle between the two modes using the Insert (Ins) key. The mode
should be obvious to the user by a change in the shape of the cursor (e.g., replace
mode is indicated by an underscore cursor and insert mode by a blinking block
cursor).
Both single-line and multiple-line entry fields provide users with the capability to
automatically delete selected text and insert new text at the starting point of the
selected text
When users type their first character, the Replace function automatically deletes the
previously selected text. The typed character and any additional typed characters
are inserted at the starting point of the selected text.
Chapter 2-45
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
lM«rJ« III on UTI
C Print
) C
H«lp
Figure 221 Pushbuttons
2.2.6.12 Pushbuttons
A pushbutton is a rounded-comer rectangle with text inside that shows users the
actions available in dialogue boxes, secondary windows, and message boxes.
Pushbuttons and menu bars provide users with access to actions. A window should
usually contain a menu bar or pushbuttons.
Figure 2J1 is an example of
a pushbutton.
To maintain layout
consistency for
pushbuttons, place the
pushbuttons horizon-
tally in the lower pan
of a window or
dialogue box. If this
position does not
adequately support
your window layout,
the pushbuttons may
be placed vertically at
the right side of the dialogue box.
Pushbuttons that are arranged horizontally should be the same height, and
pushbuttons arranged vertically should be the same width.
When you display several pushbuttons in the same dialogue box, identify
one of them as the default action by using a bold border. When users move
the selection cursor between pushbuttons, the bold border moves with the
cursor.
The bold border usually appears on the action that lets users respond
positively to the dialogue, for example, on the OK action. However, when
the dialogue box supports an action that would destroy or modify data,
such as Delete, the default should be Cancel. Users, therefore, have to
explicitly change the selection from Cancel in order to perform a
destructive action.
You should use an ellipsis (...) in pushbuttons when the action associated
with the pushbutton results in another dialogue box.
Do not leave any space between the pushbutton text and an ellipsis.
Chapter 2-46
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Standard Pushbuttons
To promote consistency across applications, the following common actions are
identified for pushbuttons.
Action — A pushbutton that immediately performs the action implied by its text.
An application should define the pushbutton text so it will be meaningful to users
(e.g., Exit).
OK — A generic pushbutton that causes the application to accept any changed
information in the window or dialogue box. When users select this pushbutton, the
window or dialogue box is closed.
Apply — A pushbutton that causes the application to accept any user changes in
dialogues that set properties. After users select this pushbutton, the dialogue box
should remain open and display the accepted changes for users. This allows users,
if they want, to change the properties again, without going through the selection
process that displays that dialogue box.
Reset - A pushbutton that cancels any user changes that have not been submitted
to the application. It also resets any changed fields to their initial values and
displays them for users. This allows users to make changes again without going
through the selection process that displays that dialogue box.
Cancel - A pushbutton that closes the dialogue box without performing user
changes not committed. The Cancel action does not affect previously committed
changes.
Help -- A pushbutton that displays, if available, contextual help for the item the
cursor is on. If contextual help is not available, it displays help for the entire
dialogue box, or at least a help index.
It is recommended that an application first position any application-specific
pushbuttons, including OK, Apply, and Reset, and follow them with Cancel and
Help.
Chapter 2-47
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
2.2.6.13 Logo Window
EPA applications should display a logo window the first rime users start the
application. The logo window is also accessible by selecting the About., choice in
the Help Menu pull-down. The logo window is a modal dialogue box that is
displayed within the primary window of the application.
The logo window should be large enough to contain the required information and
any optional information, but it should be smaller than the size of the work area of
the primary window.
For all EPA applications, the logo window must contain the following information
centered in the window:
EPA Organization name
Purpose of this system
Application name
Application version number
Application logo, if appropriate
Copyright statement, if appropriate.
As an option, your application may display relevant information about the applica-
tion, such as die required memory or hardware configuration.
In an ideal environment users would enter their userid and password one time. Tha
is difficult to achieve today. Each platform may have its own particular
requirements for userid, password, accounting information and/or access authority.
A convenient place to collect this information is at the beginning of an application,
in the logo window. If additional information is required in order to use an
application, place the entry fields in the logo screen, and use a separate logo screen
for the About., window.
Figure 122 is an example of a logo window for an EPA application.
The application may choose to display the logo for an indefinite time until users
select the OK pushbutton, or the logo may be removed automatically after an
application specified time period (e.g., 5 seconds).
Chapter 2-4*
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
The About... choice in the
Help menu pull-down of the
primary window of an
application allows users to
view the logo window of the
application.
Users select the OK
pushbutton in the dialogue
box to remove the About...
choice logo window.
2.2.7 Scroll Bars
Environmental Protection Agency
Word Processing 4.2
Press ony key to continue..
Figure %"*% Logo Window
Scroll bars allow users to see
information that is not visible
on the screen. If an
application often has
information for users that is too large to fit on the screen (e.g., multiple page
reports), applications need to provide users with the ability to scroll information. In
a windowing environment, scrolling capabilities are even more important because
several windows can appear on the screen simultaneously, limiting the space
available for the information in each window. Also, in a windowing environment,
users have the ability to change the size of windows, limiting the available
presentation space even more.
A window can have either a vertical or horizontal scroll bar or both. The vertical
scroll bar appears on the right side of a window. A vertical scroll bar should be the
height of the scrollable portion of the work area. The horizontal scroll bar appean
at the bottom of a window. A horizontal scroll bar should be at least half the widtfi
of the scrollable portion of the work area.
The unused space adjacent to a horizontal scroll bar may be used to present navi-
gational information, icons, or other relevant information. For example, in a report
display application, some of the unused space may be used to show the page
number of a document. Figure 2.23 is an example of vertical and horizontal scroll
bars.
A scroll bar consists of a scroll area with a slider box inside and an arrow in a
square box at each end.
Chapter 2-49
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
The slider box
represents the
position and size of
the visible informa-
tion in relation to
all the information
that is available.
For example, if the
slider box is
one-third of die
way down from the
top of the scroll
bar, the portion of
information that
users see is
one-third of die
way down from die
beginning of the displayed information.
Figure 233 Vertical and Horizontal Scrolling Bars
A slider box may also vary in size according to the amount of information visible
to users. For example, if an application starts out with an empty work area, the
slider box may fill die length of die scroll bar. If die total information available for
viewing is greater than what is visible in die work area, the slider box may reduce
in size in proportion to die total information that is visible.
The scroll bar arrows show users die direction in which scrolling is available. An
arrow is used to scroll a fixed amount of information, as defined by an apph'cation.
If users cannot scroll in a particular direction, die application reduces die contmt
(grays out) of die scroll bar arrow that represents die unavailable scrolling
direction. This provides a visual cue to users that there is no more information to
view in mat direction. The slider bar should also be against mat margin.
An application should use scroll bars in all sizable windows when die object
contained in die window will not be completely displayed as die window size
changes. Even if no information can be currently scrolled, inactive (grayed) scroll
bars should be displayed. If a new object is being created, die scroll bars serve •
a visual cue indicating diat the object is not limited to die size of die window.
An apph'cation should present scrollable information from top-to-bottom (vertical
scrolling) rather than left-to-right (horizontal scrolling) if diere is a choice. Some
applications, such as wide reports require both horizontal and vertical scrolling.
Chapter 2-50
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
2.2.7.1 Interaction
Users can scroll informadon using either the mouse or the keyboard.
Mouse
There are three types of scrolling available with a mouse: using the arrow, page,
and direct positioning of the slider bar.
Users scroll informadon incrementally by clicking on the scroll bar arrow at either
end of a scroll bar. The scrolling increment is set by the application. For text, the
scrolling increment is usually one line vertically or the average width of one
horizontal character.
A click above or below the slider box in the scroll area scrolls information a
logical page at a time in the appropriate direction. For vertical scroll bars, the
logical page is usually the height of the scrollable portion of the work area minus
one unit of information, such as one line of text. Similarly, for horizontal scrolling,
the logical page is usually the width of the scrollable portion of the work area
minus one unit of information, such as one column on a report. An application
should leave at least one unit of previous information visible as a reference point
for users.
Direct positioning allows users to scroll to a specific location in the information.
Users drag the slider box to the point in the scroll bar that is directly proportional
to where the desired information is in the list.
Keyboard
Users can scroll incrementally with the keyboard by using the arrow keys whik
the cursor is at a scrolling boundary. The scrolling increment for the keyboard
should be the same as for the mouse. Users can perform vertical page scrolling by
using the PgUp and PgDn keys and horizontal scrolling by using the Ctrl + PgUp
and Ctrl + PgDn keys.
2.3 Application Interaction Techniques
The application developer may wish to combine some of the individual elements
and controls described in the preceding sections to provide the easiest
Chapter 2-51
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
communication with the user. In addition to combining elements, positive user
feedback should be provided. User feedback may take the form of highlighted
items, messages, a contextual help system, and a tutorial system, if necessary.
2.3.1 Combining Elements
Controls may be used with each other in a way that is contextually appropriate and
allows an application to provide an interface that is easier for the user to
understand. Combining controls can help users to become more proficient when
they make selections or enter information. Controls should react in a way that
provides feedback to users and puts mem in control
Combining Entry Fields and List Boxes
It can help users if an application provides more than one way to complete a
dialogue. Figure 124 shows the Open dialogue box that contains one entry field
and two list boxes. Users can complete die Hie name entry field by typing a file
name into the entry field or by selecting a file name from the list box.
Controls May Affect Each Other
Controls in dialogue
boxes may affect each
other to provide
feedback to users and
provide better user
understanding.
iwyj Open
Dfrtcwy is OPLANNING
Ffltt
DEPT.TXT LL
EDUCTN.TXT
FY93.TXT M
GOALSJXT ii
MEMO1.1XT M
MEMO2.TXT f|
Directories
PROJS
(*)
[8:1
1C)
( OK ) C Cincd M Help ;
|
In Figure 124, the
second line in the work
area indicates that the
selected directory is
C^PLANNING. The
contents of that
directory are displayed
in the scrollable list
box under the heading
Files. If users change to another directory by double-clicking on a choice from me
list box under the heading Directories, the chosen directory appears in the field.
The multiple controls, affecting each orner, have provided this updated information
to users.
Figure 224 Open Dialogue Box
Chapter 2-52
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Also in Figure 2.24, the File name entry field displays a search string for the files
listed in die Files list box. If users want to open a file in the listed directory and
path and they know the name of the file, they may replace die search string with a
valid file name; they will immediately see the file they want. If users do not know
what file diey want to open, they can further qualify die search string or even
change the displayed directory. In that case, all affected entry fields and list boxes
will display die updated information if users double-click or select die OK push-
button. Therefore, the Files list box is sensitive to the entry field search string, as
well as die Directories list box.
Displaying information based on die current context provides users with immediate
feedback. It also offers users several ways to complete a task, such as locating a
file, and puts users in control of die dialogue.
Another way to provide context-sensitive feedback is to gray unavailable choices
within a dialogue based on die current context of die choices. An application can
help users decide which fields must be completed in a dialogue box by graying
fields until their completion is
required. For example, Figure
ids shows a Print dialogue
box with a set of two radio
buttons. The All radio button
is selected; die Partial is not.
Partial has two entry fields
associated with it, From and
To. These two entry fields are
grayed to show diey are
unavailable.
If a user selected die Partial
radio button in Figure 2.25,
he will see Figure 2.26. The
two previously grayed entry
fields, From and To, are no
LJMTJM III on LPT1
C Prim ) ( Satup... 3 C Caned ) C Halp )
Figure 235 Print Dialogue Box
longer grayed; die user can now request the starting and ending range for printing.
2.3.2 Informing the Users
This section describes the graphic and audible feedback mechanisms and the
messages that are used to support communication between users and die
application.
Chapter 2-53
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
2.3.2.1 Graphic Feedback
Graphic feedback is used
when users request that the
application perform an
operation, but the request
cannot be satisfied
immediately. When this
occurs, the application may be
unavailable for user input and
should inform the user that
this situation exists.
^g
Ft» MM*: IBlBSniEOH
fegM: OAI
®£«nW Fit
&w4A«*
r HUMS
L*MTJ«t in on LPT1
( Print ) ( Stop..
Rr
m
m
t
I
Wm
1
.)
int
1 1 To: IB 1
C Cane* ) C H* )
Figure 126 Printer Dialogue Box
Two standard methods tell
users that an application is unavailable: changing die mouse pointer to an
hourglass, and using a progress indicator. An application designer may create other
visual methods of feedback to fit best the specific situation.
Hourglass Pointer
The application may change the shape of the mouse pointer to an hourglass when
the computer is performing simple operations, such as opening or saving a file.
This shows users that the function they requested is in process. It also reminds
users that user requests cannot be accepted until the hourglass pointer changes
back to its previous shape. Figure 2J57 is an example of the hourglass pointer.
Progress Indicators
A progress indicator may be displayed to keep users informed of die current soon
of complex user requests. Actions such as downloading
files or copying several files may take a long time for the
computer to complete.
Figure 2J8 is an example of a progress indicator.
A progress indicator is a modal dialogue box. At the top
of the dialogue box, information tells users about any
exceptional conditions die computer detects during the
execution of die tasks or any other relevant progress
information. A rectangle below the text shows die
progress of the task toward completion. A sliding scale
Figure 2JH Hourgtan
Pointer
Chapter 2-54
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Printing
25 50 75
Elapsed Time: 0:45
C Stop }
Figure 2.28 Progress Indicator
with color fill moves along the
rectangle to indicate the progress of
the task. If possible, a scale marked in
application-defined increments to
signify relative completion may be
used below the rectangle. If it is not
possible for the application to assess
the progress toward completion, the
rectangle and scale may be omitted
from the dialogue box. An active timer
or slow blinking cursor below the
rectangle may be used to indicate elapsed time since the start of the task.
A Stop or Cancel pushbutton at the bottom of the window allows users to stop the
task. When the application stops a task in response to the Stop pushbutton, it must
ensure that the integrity of the system is maintained. The application must decide if
it is appropriate to complete the requested processing for the current task before
stopping or to restore the current object to its prior state. If the nature of the task
can cause objects to be destroyed or become unusable if the process is stopped
before completion, the Stop pushbutton should be shown in reduced contrast
(grayed) as a visual cue to users.
Audible feedback is a sound from die computer that either warns users of an error
condition or draws their attention to a certain situation or specific information.
Because users may elect to turn off the sound, the application should not generate
die sound unless the setting for it is turned on.
Audible feedback may be used for the following situations, as well as for others
that may be appropriate for an application:
When an application displays warning and action messages.
When users type a character that is not a valid mnemonic in
selection fields.
When users attempt to select an unavailable (grayed) choice.
When users type invalid data into an entry field (e.g., non-numeric
data into a numeric field).
Chapter 2-55
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
2.3.2.2 Messages
Messages are feedback that tell users that something has happened because of a
request they made. The application can use a message box or a dialogue box to
provide a message to users. A dialogue box can be used to provide more capability
than a message box. Messages should be modal with respect to the application.
Message type may fall into one of three categories: Information, Warning, Action
or Question.
A message box consists of an icon, text that concisely describes the conditions,
and one or more pushbuttons. Message boxes use the Application Name in their
window title.
Information Message
An information message tells users that a computer task is or has performed
normally. Figure 2.29 shows
an example of an information
message. The icon for
information messages is a
block lowercase i enclosed in
a circle and is used in all
information messages.
Descriptive text appears to the
right of the icon. Information
messages have an OK
pushbutton so users can
acknowledge the message.
When users select OK, the
message is removed.
EPA Application
tfle Edit View Qptions Help
EPA Application
File transfer complex*.
Figure 23.9 Information Message
A Help pushbutton is
optional No audible sound is required when an information message is displayed.
Warning Message
A warning message indicates that a potentially undesirable situation could occur.
Users need to respond to the message to continue. However, corrective action may
be required later to avoid an error situation. Figure 230 is an example of a
warning message. The icon is an exclamation point (/) enclosed in a circle and is
Chapter 2-56
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
unique for all warning messages. Descriptive text that allows the user to evaluate
the message appears at the right of the icon.
In any application that requires a user to explicitly save changes to an object, then
an Open, Close or Exit should generate a message that changes will be lost. A
warning message should be generated that provides the option to save the changes.
An example message is - (ObjectName) has changed. Save current changes? The
appropriate pushbuttons are Yes, No and Cancel. Cancel places the user back in
the application prior to the Open, Save or Exit action was requested.
Warning messages may contain the following pushbuttons:
OK (used with Cancel) — Users select OK to tell the application that they
received the message and want to continue. When users select this
pushbutton, the message is
removed.
Cancel — Users select
Cancel to remove the
message. When users select
Cancel, the application
does not take any action
except to remove the
message.
Yes (used with No) -
Users select Yes to give a
positive response to a
question.
EPA Application
pl« Edit yi*w Options
EPA Apiilic.ition
MEMO1.1XT7
Figure 2.30 Warning Message
No — Users select No to give a negative response to a question. A Cancel
pushbutton can be provided if Cancel provides an action that is different
than the action provided by No.
A Help pushbutton is optional. An audible beep should sound (if turned on) when
the application displays a warning message.
Chaptar 2-57
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Action Message
An action message tells users that an error or exception condition has occurred.
Users must perform an action to correct the situation.
Action messages are used in situations
from minor application-related
conditions that stop users from
continuing with the current dialogue to
serious system related conditions that
stop users from continuing to work
with any application in the system.
The text of the message should
indicate the severity of the error
condition and should suggest any
available action that will correct the
situation.
Edit
OtVTB Application
Option*
OIVIB Apiilic.ition
GSD t H» ^
Figure 2.31 Action Message
Figure Z31 is an example of an action message. The stop-sign icon is unique for
all action messages. Text that describes the condition that users must correct
appears at the right of the icon.
Action messages may contain the following pushbuttons:
Retry - The Retry action assumes that users have taken some action to
correct the error situation and is used for device error messages. Selecting
this pushbutton directs the application to attempt to complete the process
that caused the message.
Cancel - When users select Cancel, the system does not take any action
except to remove the message.
A Help pushbunon is optional. The application should provide an audible beep (if
turned on) when displaying an action message.
Question Message
A Question message indicates that the application needs further guidance before
performing an action, or a user has attempted to do something prior to selecting a
object. If a user attempts to save an empty file, or change the characteristics of
existing text before identifying the text, the application may generate a Question
message.
Chapter 2-58
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
gdtt
EPA Apiilic.itioi»
Option* H»4p
EPA Application
A Question message may be used to
determine if a parameter change is
permanent, or temporary, if the user
wants to continue, or if the user wants
to Cancel the request.
The text of the message should
indicate what actions may be taken by
the user to achieve the results that they
have requested. Questions can be
confusing to a user, so it is better to
provide a declarative statement to
describe the situation, and a question to clarify what the users options are.
Figure 232 Question Mark
Figure 232 is an example of a Question message. The question mark icon (?) is
used to indicate that the applicanon user must make a decision. Text that describes
the condition appears to the right of the icon.
Question messages may contain the following pushbuttons:
OK (used with Cancel) - Acknowledges the message or allows the
program to perform the action indicated.
Cancel ~ When Cancel is selected, the system doesn't take any action,
except to remove the message.
Yes (used with No) — Users select Yes to give a positive response to a
question.
No ~ Users select No to give a negative response to a question. A Cancel
pushbutton can be provided if Cancel provides an action that is different
than the action provided by No.
2.3.2.3 Help
Providing help, within an application, allows users to easily and quickly access
additional information about choices, fields, or how to proceed with the
application.
Chapter 2-59
-------
2183
4/30/93
Expiration Data: 4/30/94
EPA Common User Interface Guidelines
The purpose of help is to provide online assistance. Help information is not meant
to replace a tutorial system, but to supplement it. Tutorials teach new users how to
use an application; help information assists users in recalling how to use an
application.
There are several types of help to assist users in completing a specific action.
Contextual help is based on where the cursor is located in the window. There is
also extended help (general help about the application window), a listing of keys
and their actions, an index of help topics, and information about how to use help.
An application may also provide access to a tutorial and may reference phrase
help.
Users request help from an application by pressing the Fl key, selecting the Help
pushbutton, or choosing one of the help actions from the Help menu bar
pull-down. Requesting help displays a window mat contains die information users
requested.
After a help window is displayed, users can access additional help by accessing its
Help menu bar pull-down.
Users end help by choosing Close from the system menu bar of die help window.
A help window may be removed if users remove the application window to which
a help window is related.
Several types of help information should be provided for users. The application
determines the content of each type of help information. Following are some
general descriptions and guidelines:
Contextual help - provides specific information about die item on
which die selection cursor is positioned. Contextual help
information should describe the purpose of the item for which help
is requested and tell users how to interact widi that item. Contextual
help is accessed by moving die selection cursor to die item and
pressing the Fl key or selecting die Help pushbutton.
The application must assign the Fl function key so users can access
contextual help using the keyboard.
Chapter 2-«0
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Help for help - Provides information about how to use the help
facility. It identifies the levels of help and the other resources
available and whether a tutorial can be accessed from help or is
available elsewhere.
Extended help - Provides information about the contents of the
application window from which users requested help. Extended help
tells users about the tasks they can perform in the window from
which they requested Extended help.
Keys help - Provides information on the key assignments of the
application. This includes common key assignments as well as
application or task specific keys.
Help index - Provides an alphabetic list of all the help index entries
for the application.
Tutorial (optional) - provides access from the current window to a
tutorial, if one is available.
Reference phrase help - additional information about application
defined words or phrases within a help window. The reference
phrases are highlighted by displaying them in a different color.
To select a reference phrase with a mouse, users place the mouse pointer on the
phrase and click the select button. To select with the keyboard, users press the Tab
key to move the selection cursor to a reference phrase and select Enter.
To request help from the menu bar of the application, users select the Help menu
bar choice and select the choice they want from the Help pull-down. A window is
displayed containing the help information requested.
To promote consistency, application developers should provide the same help pull-
down for all applications. The pull-down recommended to access the help facility
is shown in Figure 2.33.
Each choice in an application
window Help pull-down is
followed by an ellipsis to tell
users a help window appears
when they select any Help
pull-down choice.
Eta EdK Vtaw Options
KMp
About Help...
Figure 2J3 Pull Down Help Facility
Chapter 2-61
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
2.3.2.4 The Help Window
The help window title contains the title of the application, followed by Help. For
example, if an application title is EPA APP, a help window for that application
has the title EPA APP - Help.
At initial display, a help window is placed where it is completely visible on the
screen and does not overlay any of the application window. Sometimes, however,
the help window cannot fit on the screen without covering the application window.
In that case, place the help window to overlay the application window in the
position that covers the least amount of information in the application window.
After displaying the help window, users may change the size and position of the
window.
Chapter 2-62
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
3.0 Text Graphic User Interface
This chapter defines the text subset of the graphic user interface. A text based user
interface may be required when enhancing older systems that are restricted to or
must interface with non-programmable terminals (e.g. 3270), or designing systems
that are based on character oriented languages, such as Basic, COBOL, Clipper or
FORTRAN. The techniques of a graphic interface may be used, in a character
environment, to support the common user interface requirements.
This chapter includes only the elements that are fundamental or recommended for
the text Cm as it may appear on a non-programmable terminal. If application
designers can make use of the features of a programmable workstation, or want to
extend the user interface described in this section (for example, using graphic
equivalents of interface elements, or if you want to support a mouse), implement
the extensions as similarly as possible to their descriptions in the graphic CUT. The
text GUI supports and requires an object oriented process sequence.
The text interface GUI is designed for ease of use rather than for ease of learning.
Users learn by exploring the system after some initial training. Once users have
learned a few basic things about the interface, such as how to move the cursor to a
choice and select it and how to get help, they should feel free to explore and
continue to learn about an application.
An interface designed for ease of learning requires that the application lead users
step by step through their activities and present information frequently to tell users
what to do next and how to do it. While new users may find this very helpful,
once they know how to use the applications, the continued presentation of tutorial
information may become an annoyance. An example of an interface oriented to
ease of use is a "walk up and use" application, such as a locator or bus scheduk in
a hotel lobby.
3.1 Presentation Elements of Text Interface
Presentation is the visual aspect of the interface; it is what users see on the screen.
The main visual components* of the user interface are the following:
The Primary Window, which occupies the entire viewing screen and
represents the users' view of the activities and selections currently
available.
Chapter 3-«3
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Secondary or child windows or panels, which are presented within the
Primary Window and pop-ups which contain information or data for users
to work with.
Pop-ups.
The cursor.
Some of the visual elements
that are common to most text
GUI applications are illustrated
in Figure 3.1. The space
between the window title
separator and the message area
is the work area. Section 2.1
Basic Windows Concepts,
contains a more detailed
discussion of window
organization.
3.1.1 Window or Panel
ISiemur Cm I
OT Tni*
CMNMM UM
F«cti» by I'M
Figure 3.1 Common Visual Elements
Windows are presented as
rectangular areas within the
Primary Window and as
pop-ups. The concept of
presenting a window in a
window is illustrated in Figure
32. Information and
application objects are
presented in the work area of a
window. Application actions
are presented in the menu bar
or function key area of a
window. Every window in the
primary window of a text
application has a menu bar, ^ M Secondary Window.
Windows in pop-ups do not 6
have menu bars. The window
in the primary window is the main focal point for the users' work activity.
Windows presented in pop-ups supplement the dialogue that is occurring in the
primary window.
M«n Itr
Pfwwr wu4«« 10
WM4M Tltto
U«l ••( ftf WMOT 1
••*> 1 10 VIMOT 1 Trt»
Window
(m«y
VlMOT I CMMMrt IM
VIMOT 1 FtKtWI t*r*
2 Work Area
b« icreltablt)
Kmtri WM«W CMMM IM
prawif WIMOT rixiKi ui»
Chapter 3-64
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Displayed in a window are standard interface components that provide a consistent
way to present information to users. When users become familiar with the
interface, they can quickly identify components of the interface and feel
comfortable when using new applications that support these components.
The window elements that each application must consistently support are the
window identifier, window title, window area separator, work area, message area,
command area, and function key area. Following is a definition of each of these
elements.
3.1.1.1 Window Title
In a primary window, the window tide is one line of protected text. The window
tide contains the application name and, optionally, the file or object name. Other
optional information may be included on this line. The title is centered, if possible.
Display of date and time is optional, but if used it should be located flush right, on
the same line as the title.
3.1.1.2 Window Identifier
The Window Identifier is an alphanumeric, character-string identifier. Each
application may optionally use window Identifiers. If they are used, they should be
used consistently throughout the application. Refer to the various EPA application
standards for naming conventions.
3.1.1.3 Window Area Separators
These are used to separate the various window areas for clarity. A blank line, solid
line, or dashed line may be used. Typically a solid or dashed line separates the
Menu Bar from the Window Title line and is used to define the limits of
pull-down areas and pop-ups. The message line, which is normally blank, may be
used as a separator for the command line.
3.1.1.4 Work Area
The work area is the space between the window title separator and the message
area. It is the users' workspace and the focus of their attention. If the logical
window is too large to be presented completely in the physical (screen) window,
then all or part of the work area is made scrollable.
Chapter 3-65
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Scrolling information
Scrolling information is a visual cue to users that more information
is available but is not currently visible and that the information can
be brought into view using the scrolling keys. Scrolling information
also tells users the direction in which the additional information is
available.
Selection fields and selection lists
Selection fields and selection lists are sets of related choices. They
may be either single-choice or multiple-choice. Selection fields are
not scrollable and contain a fixed set of choices. Selection lists
typically vary in content or number of choices.
Entry fields
Entry fields are spaces into which users type information.
Protected text
Protected text is information presented by the application that users
cannot modify. The date and time display (1/07/91 at 12:12) is an
example of protected text.
Headings and field prompts
Headings and field prompts identify entry fields, selection fields,
selection lists, protected text, or related groups of those elements.
The application should provide one of these types of identifiers for
each of these elements or each group of mem, unless there is only
one element or group in the window and the window title is
sufficient as an identifier.
Chapter 3-66
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
3.1.1.5 Message Line
The application must provide a message line and locate it immediately above the
command area. If there is no command area, locate the message line immediately
above the function key area. Messages located in the message area should be
removed when the window is processed.
There may be three types of messages:
Information
Warning
Action.
When the application needs to provide a means within the message for users to
respond to the message (for example, by providing a selection or entry field), or
when it is especially important to get the users' attention, the message may be
displayed in a message pop-up, or the message may be enhanced with visual or
audible cues.
3.1.1.6 Command Area
The application should provide a command interface if system designers want to
allow users to issue system commands without leaving the application, or to type
application commands into the command line. This is helpful for experienced users
who prefer to enter an entire command at once.
CICS applications should use a Command area.
Every valid command equates to a process that may be reached via menu choice.
If the application has a command interface, users issue commands through the
command area. A command line may be located in either of two places:
In the primary window immediately above the function key line
In a pop-up, if the application needs to maximize the available space in the
primary window, and if commands are expected to be used only
occasionally.
Chapter 3-67
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
If present, the command line should begin with the following field prompt:
Command =>
3.1.1.7 Function Key Line
The function key line appears at the bottom of the window to present common
actions and application-defined actions that users can request by pressing function
keys.
3.2 Window Title
The window title should show the program Identification and screen title. The
program Identifier is an eight character name of the application mat created this
screen. The Window title is centered in the window title line. If the window has an
menu bar, the window title appears on the next line below the menu bar separator
line; otherwise it appears on die top line.
A pop-up window title identifies the function of the pop-up window.
3.3 Window Identifier
The window identifier is die eight character name of the screen. Left justify die
window identifier on die same line as the window title. If used, die Window
Identifier must be used on all windows. The option of displaying or not displaying
may be given to die user through a function key or Menu Bar pull-down.
3.4 Window Area Separators
Use separators to define the boundaries of areas of a window wim different
information. They can be used:
Between die menu bar and die window title
Between die window title and die work area
Between different window areas that scroll
Chapter 3-68
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
A blank line, solid line, or dashed line may be used as a separator between
window areas.
3.5 Work Area
The Work Area is the part of the primary window between the window title
separator and the message line. It is the area between the top of the screen (menu
bar) and bottom of the screen where the users get their work accomplished. The
Work Area is usually the main focus of user interaction with the application. For
some EPA national and office automation systems the work area may be cus-
tomized, such as customized forms fill-in screens. For some types of applications
the work area may be presented completely blank (e.g. word processors).
3.5.1 Instructions
Instructions tell users how to interact with a window or application. Protected text
may be used elsewhere in the window to give users additional instructional
information. The top of the work area should be used for instructions whenever
possible.
User feedback during testing will help designers determine if they need to include
instructions. If the system is following a known process or metaphor, fewer
instructions may be required. A well designed and accessible Help system can also
alleviate the need for instructions.
3.5.2 Headings
Headings identify columns and groups of related items. Constants and labels
should be normal intensity. Figure 3 J is an example of group headings and field
prompts.
Chapter 3-69
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Flit Edit VMW Options Help
WIN01 EFA National System
Instruction Lint (protected taxt)
Groip Haadmg
FwM prompt
FieM prompt,
FwM prompt
F»M prompt
Entry FlaMa
Field Prompt _i_ 1. Choice 1 \
2. Ckoica 2 \ Selection Fields
3. Choice 3 /
4. Choice 4 /
Command >*>
F1«H«lp F3«Exlt F4*Prompt F9'Retrieve F10«Actwns F12«Cancal
Figure 33 Group Headings and Field Prompts
3.5.2.1 Column Headings
Column headings identify columns of entry fields, selection fields, selection lists,
action lists, and protected text when all the items in die column are the same type.
3.5.2.2 Group Headings
Group headings identify related groups of entry fields, selection fields, and pro-
tected text. They may be used concurrently with field prompts when group
headings identify a group of fields and field prompts identify the individual fields.
3.5.2.3 Field Prompts
Reid prompts identify selection fields, entry fields, and variable output
information. Data fields and special fields should be highlighted
Use field prompts concurrently with group headings when the group headings
identify groups of fields and the field prompts identify individual fields within a
group.
Field prompts are located to the left of the fields they identify. They are left-aligned.
Chapter 3-70
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
If the field prompts follow group headings, the field prompts should be indented
under the group headings. When group headings are not used, indent field prompts
under instructions.
Use leader dots (...) to connect field prompts and fields, so users can easily move
their eyes from one side of the screen to the other.
Field prompts for variable output information should also be followed by a string
of leader dots. Replace the last leader dot with a colon (:) to indicate that what
follows is protected text
3.5.3 Descriptive Text
Where it would be useful to users, additional descriptive information may be
included about the entry field, in addition to the field prompt that identifies the
field.
Descriptive text is placed after the end of the field. It should be brief, protected
text. It should provide information about which values can be typed into the entry
field. If the list is small, the actual values may be displayed as descriptive text,
separated by commas and blanks, for example:
Graph type .. ._
.(Scatter plot, Bar, Line, Pie).
A range of values also may be indicated as descriptive text For example:
Pages to print (1 - 999).
3.5.4 Protected Text
Protected text may only be viewed, not selected or changed. Protected text may be
text in a file, numeric data, help information, a message, or variable output
information.
3.5.5 Scrolling
Users can scroll an entire panel or areas of a panel using either cursor-independent
scrolling or cursor-dependent scrolling.
•
The following rules apply for both scrolling techniques:
Chapter 3-71
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
If a panel has more than one scrollable area as an application option, put a
separator between scrollable areas.
The menu bar and pull-downs from the menu bar are not scrollable. If
necessary use more than one horizontal line for die menu bar.
Each scrollable area should have scrolling arrows that indicate to users die
position of die information diey are viewing in relation to die boundaries of
die information. Designers may also place a visual indicator at die
boundaries of die information.
A panel area stops scrolling at die boundary of die information. When
users reach diis boundary, de-activate panel area scrolling in that direction.
Scrollable information does not wrap.
3.5.6 Scrolling Actions
The scrolling actions are:
Backward—displays information above die currendy visible information in
die panel area.
Forward—displays information below the currendy visible information in
die panel area.
Left—displays information to die left of die currendy visible information in
die panel area.
Right—displays information to die right of die currendy visible information
in me panel area.
There are specific function key assignments for these four scrolling actions.
3.5.7 Cursor-Independent Scrolling
Widi cursor-independent scrolling, or page scrolling, die information is scrolled n
fixed increments regardless of die position of the cursor when users request one of
die scrolling actions. As an application option, die cursor may be kept stationary
on the screen or in die information. If die cursor remains stationary in die
information and if the choice it was on scrolls out of view, it is an application
Chapter 3-72
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
option either to stop the cursor at the boundary of the panel area or to move the
cursor to the first visible choice or entry field in the panel area.
The increment, or amount, of information scrolled when users request one of the
scrolling actions varies with the size of the visible area that is scrollable. The
following may be used as guidelines for how far to move a scroll with page
scrolling:
The visible area minus one item (for forward and backward scrolling)
The visible area minus one column (for left and right scrolling).
Other scrolling increments may be used, such as the full, visible area or a part of
the visible area, for example, one-half or one-third of the visible area.
3.5.8 Cursor-Dependent Scrolling
With cursor-dependent scrolling, the initial position of the cursor determines the
extent of the scrolling when users request one of the scrolling actions:
Backward—reposition the information so that the item containing the cursor
is at the bottom of the scrollable area.
Forward-reposition the information so that the item containing the cursor
is at the top of the scrollable area.
Left--reposition the information so that the column containing the cursor is
at the farthest right column of the scrollable area.
Right—reposition the information so that the column containing the cursor
is at the farthest left column of the scrollable area.
When the cursor is at a vertical or horizontal boundary and users request scrolling.
cursor-independent (page) scrolling is performed.
The application determines what quantity constitutes an item or a column, based on
what is most appropriate for the environment in which scrolling is used.
Chapter 3-73
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Provide for cursor-dependent scrolling when users might want to position a
specific item at a vertical or horizontal boundary (for example, if users might want
to position a list of items so a specific item is at the top of the list).
3.5.9 Scrolling Indicators
Scrolling indicators tells users that more information exists outside the visible
panel area, the position of the visible information in relation to the total amount of
available information, and which direction to scroll the work area to display the
unseen information. Scrolling information may appear in three forms:
Scrolling arrows — Use arrows if available. If actual arrows are not available, use
greater than (>) or less man (<) to indicate right or left scrolling and plus (+) and
minus (-) to indicate down or up scrolling.
Textual scrolling information—may be used in combination with scrolling arrows.
3.5.10 Scrolling Arrows
Scrolling arrows indicate that additional information exists outside the visible panel
area and shows users which direction to scroll to see that information. Figure 3.4
is an example of scrolling usage.
Locate scrolling arrows on a line above the panel area to which they apply and
below the textual scrolling location information, if present Right-justify die
arrows. If actual arrows cannot be displayed by some terminals, die application
may use the following alternate characters for the scrolling arrows, in the following
format:
More: « - + »
« indicates there is information to the left of die visible area.
- indicates mere is information above me visible area.
+ indicates there is information below die visible area.
» indicates there is information to the right of me visible area.
Chapter 3-74
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
File Edit View Options Help
WIN01 EPA National System
Instruction Line (protected text)
Name *
Command =
F1=Help F3
Locator Name List
More: »
* Adans, John
* Brown, Susan
* Cook, Robert
* Davis, Amy
* Evans, Dale
* Franks, Nancy
* Greene, Howard
F1=Help F12=Cancel
::>
=Exlt F4=Prompt F9=Retrteve Flfl=Actlons F12=Cancel
Figure 3.4 Scrolling Example
Lay out scrolling arrows with one space between the colon (:) and the first arrow
position and one space between the arrows. For example:
More: »
If the panel can be scrolled in all four directions, backward, forward, left, and
right, reserve the entire space for scrolling arrows (the word More, the colon,
the four arrows or symbols), even if all the arrows or symbols are not currently
used because users cannot currently scroll in all four directions. Maintain the
of the unused arrows or symbols with blanks.
If users currently cannot scroll in any direction, do not display the More tag.
Users press the Backward key to scroll up, the Forward key to scroll down. The
Left and Right keys are used to view information that is to the left or right of the
information that is currently displayed.
Chapter 3-75
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
3.5.11 Textual Scrolling Information
Textual scrolling information may be used in combination with scrolling arrows.
Bottom is displayed below the scrollable area when users are viewing the end of
the information. More... is displayed below the scrollable area when users can
scroll forward.
Locate Bottom or More... on the right side of the line below the scrollable area,
using the following rules for determining which indicators to use:
If users can scroll forward, display More...
If users are viewing the end of the information, display Bottom on the right
side of the line below the scrollable area.
3.5.12 Textual Scrolling Location Information
Optionally designers may include textual scrolling location information along with
scrolling arrows for each panel area that scrolls. However, textual scrolling
location information is not used alone. For example:
Lines 1 to 20 of 40
or
Columns 1 to 5 of 15
If used, place textual scrolling location information right-justified-on a line above
the scrolling arrows.
Optionally, the application may allow users to type over the first value (xx) in
textual scrolling location information as a way to reposition the list of items
relative to the new starting point the users want This may be implemented by
placing the value for xx in an entry field (xx). Textual scrolling location
information with an entry field would look like the following:
Lines_5 to 18 of 254
If the value exceeds the range in either direction, reposition the list at the top or
bottom, in the proper direction.
Chapter 3-76
-------
Expiration Data:
21 04
4/30/93
4/30/94
EPA Common User Interface Guidelines
3.6 Pop-Ups
A pop-up is an area of the screen
dialog with the panel in the
primary window. A pop-up
may occupy a portion of the
screen or the entire screen.
Figure 3.5 is an example of a
pop-up with entry fields.
Pop-ups are associated with
underlying panels and appear
when the application wants to
extend die dialog in the
underlying panel. For example,
a pop-up may be used to
provide
A help message or an
explanatory message
A command line
enclosed by a border that expands on the users'
Fit* Edit Vitw Option H«lp
WIND! EM *
To: All EM Nttlo»l DlU
From: Bob Snutk Ttik t
Tit following tnhiiCM
NltMMI Oil* ProCOtf II
I. Nin* 1*4 iddrot
to 41 cHtrtcurt
t. Sonrct 4 (KM III
IS to IS chtruteri
3. N«w koto Ititirti
«. At I rtolt o! eki>
iom« rtoorl formiu
Command ">
FI.H«lp F3«Exit F4Hok> F12>C*Ktl
ktv* b**« iddod to ion* icr«OM
(•f to tko diu dKHoiarjr
ka«« boti ckingtd to nfloct tko
F9iB4trnv« Ft6*AetMM FUiCoetl
Figure 3 J Pop-up with Entry Fields
An entry field, selection field, or selection list
The application may have a series of overlapping pop-ups.
3.6.1 Pop-Up Positioning
A pop-up is associated with an underlying panel, a pull-down, or another pop-up.
A pop-up may extend beyond the boundary of a pull-down or another pop-up that
it is associated with.
When a pop-up is related to an item in the underlying window, pull-down, or other
pop-up, position the pop-up in a way that overlays the least amount of relevant
information.
If a pop-up is related to an underlying panel or another pop-up but not to a
specific item or window on it, use offset positioning to locate the pop-up.
Chapter 3-77
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Vertically offset the pop-up below the title of the underlying panel or pop-up so
die title is visible. Horizontally offset the pop-up to the right of die left boundary
of die underlying panel or pop-up.
3.6.2 Pop-Up Layout
Use a solid line border for pop-ups if line characters are available. If line
characters are not available, use hyphens or periods for horizontal lines, and capital
"F or colons for vertical lines.
3.6.3 Pop-Up Content
Pop-ups should contain a function key line. Pop-ups also may contain most types
of panel elements (entry fields, selection fields, selection lists, action lists,
protected text, a message window, or a command window), depending on die need
to extend die dialog from an underlying panel.
3.6.4 Pop-Up Use
When a pop-up is displayed, die pop-up becomes active and the cursor is
positioned in die pop-up. Users must finish interacting with die pop-up before
continuing widi die dialog in the underlying panel or in anodier pop-up, unless die
pop-up is a help panel.
A pop-up usually appears as die result of an action taken by users. A pop-up may
be removed by requesting die Cancel common action. Help should be available for
a pop-up.
The Enter action removes a pop-up unless the pop-up invokes anodier pop-up. In
diat case, when die last pop-up is completed, all generated pop-ups are removed.
If users move me cursor out of a pop-up using die arrow keys and press die Enter
key or a function key, die cursor is returned to die pop-up and no action is
processed.
Exit is not supported in pop-ups, except in help pop-ups.
3.7 Menu Bar
The menu bar is die element at die top of a window that consists of a list of
choices diat represent groups of related actions. Use of the menu bar is optional. A
Chapter 3-78
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
group of actions appears in a pull-down, located immediately below the menu bar,
when users request a choice.
The actions typically affect information displayed in the work window or in some
way control the users' dialogs with the application.
Function keys may be used by the application in place of an menu bar. Application
specific uses of the function keys must not conflict with those defined for common
dialog actions.
3.7.1 Menu Bar Layout
The menu bar stretches across the full width of a window, regardless of the
number of items in the menu bar. Choices are listed horizontally on one or more
lines.
3.7.2 Menu Bar Content
The menu bar contains choices in the form of single or multiple words.
A set of standard menu bar choices are File. Edit, and Help. Any of these standard
choices that are valid for the application should be provided in the menu bar.
Optionally View and Option may be included on the menu bar line.
If the standard choices are not adequate for the application, other menu bar choices
may be defined. Each menu bar choice must have an associated pull-down.
Selecting a choice on the menu bar should always result in a pull-down; it should
not perform the action directly.
The last (farthest right) choice in the menu bar should be Help.
Exit should always be the last choice in the first (farthest left) pull-down. If
standard menu bar choices are used, Exit will be the last action in the File
pull-down.
Each type of object should have a menu bar that supports die actions for that
object type. The application, however, may support multiple object types. For
example, a water application .may support both lake objects and river objects. In
that case, all panels for lake objects would have the same menu bar, containing
actions that apply to lakes, while all panels for river objects would have the same
menu bar, containing actions that apply to rivers.
Chapter 3-79
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
3.7.3 Selection of Menu Bar Options
The cursor should be positioned initially in the blank space immediately to the left
of the first choice. As users tab from one choice to another, the cursor is
positioned in the blank space immediately to the left of each choice.
3.7.4 Menu Bar Pull-Down Layout
Locate the menu bar pull-down directly below the bottom of the menu bar.
Position the pull-down choices so that the choice entry field is directly below the
first nonblank character of its menu bar choice.
If this alignment is not possible because the pull-down is wider than the space
allowed to display it, which might happen if the last choice in the menu bar is
close to the right edge of the screen, reposition the pull-down horizontally to make
sure it is fully visible.
Use a solid line border for a pull-down if solid line characters are available. If
solid lines are not available, use hyphens or periods for horizontal lines, and
capital T or colons for
vertical lines.
Figure 3.6 Menu Bar Pull
Down, is an example of the
Menu Bar with the File
pull-down activated.
Fik Edit Vww OottOM Help
Com it
t N«w
2 Opt"
3 Save
4 Sav* at
S Print -
6 Exit
and ->
EPA National System
Fl«H«lp F3>Exit F4«Prompt F9>Rtirltva F1Q>Aetlons Fl2>Canc«i
Figure 3.6 Menu Bar Pull Down
Chapter 3-W
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
3.7.5 Menu Bar Pull-Down Content
Both single-choice and multiple-choice selection fields may be used in pull-downs.
Pull-downs should not contain selection lists.
Number choices in single-choice selection fields.
Do not use instructions or a function key line in pull-downs.
Place an ellipsis (...) after each choice in a pull-down that results in a pop-up. For
example:
1. Open File—
The Cancel action should be supported in all pull-downs, even though pull-downs
do not have a function key window showing F12=Cancel.
System designers may assign function keys as accelerators to the choices in a
pull-down. Display the function keys to the right of the pull-down choices. Any
unreserved function keys Fl through F24 may be used. Function keys that are used
as accelerators do not have to be displayed in the function key window.
Assigned function keys are always active, whether or not the pull-down is
displayed. If a mnemonic key is assigned to a pull-down choice, display it in the
pull-down.
When users press a key that is assigned to a choice, the associated action occurs
even if users have not switched to the menu bar or displayed the pull-down con-
taining the choice. If any pop-ups are associated with the choice, the first pop-up
appears when users press the function key assigned to that choice.
In addition to defining standard menu bar choices, the EPA CUI Guidelines also
defines standard pull-down choices and accelerator keys for some of those standard
pull-down choices.
3.7.6 Menu Bar Emphasis
Selected emphasis, such as reverse video or hi-intensity is used in the menu bar to
provide visual feedback that an menu bar choice has been selected. A selected
menu bar choice remains displayed with selected emphasis while its pull-down is
visible.
Chapter 3-n
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
An menu bar choice is never displayed as unavailable, even when all of its
pull-down choices are unavailable. An menu bar choice must always be available
so that users can request Help on the unavailable pull-down choices.
3.7.7 Users' Interaction with Menu Bar
To use the menu bar, users first must move the cursor to the menu bar from
another window of the panel. This can be done by using the Move-to-action-bar
(Menu) function key request If the cursor is in the menu bar or a menu bar
pull-down, requesting Menu again returns the cursor to where it was located in the
panel before the previous Move to menu bar was requested.
The cursor may also be moved to the menu bar by pressing the arrow, Tab, or
New line keys. None of these keys causes a host interrupt, so the system does not
know where the cursor was positioned before the move to the menu bar. When the
action is completed and the cursor moves from the menu bar back to the panel
window, the cursor is positioned in a location determined by the application.
Moving the cursor to the menu bar with the Move-to-action-bar function key,
therefore, has the advantage of telling the system where the cursor was located
when users requested the switch.
Menu Bar choices are selected by placing the cursor in the space prior to the
action request.
Users press the arrow keys or the Tab key to move the cursor in the menu
bar. The arrow keys move the cursor one character at a time, and the Tab
key moves it from choice to choice.
Users move the cursor and select choices in a pull-down the same way they
do in other windows of the panel. When users press the Tab key, the cunor
moves from left-to-right, top-to-bottom through the menu bar choices or
through pull-down entry fields. While pull-downs are displayed, fields in
other panel windows are protected. Users cannot tab to the other panel
windows.
If users type over any character in an menu bar choice, the application ignores
what was typed and restores the text on the next host interrupt
#
If a pull-down is displayed, cursor movement with the Tab key is restricted to the
menu bar choices and pull-down entry fields.
Chapter 342
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
If the cursor is moved out of a pull-down using the arrow keys, the cursor is
returned to the pull-down when users press the Enter key.
Users switch out of the menu bar by:
Pressing the Menu (Move-to-menu-bar) key or the Cancel key.
Pressing the New line, Tab, or arrow keys. If users did not take an action
that caused a pull-down or a pop-up to appear, all fields are still active
when the cursor returns to the work window.
Users request that a pull-down appear by pressing the Enter key while the cursor is
positioned on a menu bar choice.
The pull-down is displayed with the cursor in the choice entry field that precedes
the first choice in the pull-down.
Users can request that another pull-down appear by pressing the Tab or arrow keys
to move the cursor to another menu bar choice and then pressing Enter.
If users request Cancel from a pull-down, the currently displayed pull-down disap-
pears immediately. If, however, the cursor movement keys are used to leave a
pull-down, the currently displayed pull-down is removed when users request
another menu bar choice. The newly selected pull-down then appears.
When users request Cancel from the first pop-up that results from a pull-down, the
cursor returns to its original position in the underlying panel if users switched to
the menu bar using the Move-to-menu-bar action key. If Move-to-menu-bar key
was not used, the cursor is positioned in a location determined by the application.
If a pop-up appears, the Tab key moves the cursor from field to field within the
pop-up; all other windows are protected.
Users can select choices from a pull-down in one of the following ways:
Typing the choice number
Typing the selection character in one or more choice entry fields in a
multiple-choice selection field.
Chapter 3-83
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
3.8 Message Line
Messages are feedback that tell users that something has happened because of a
request they made.
3.8.1 Types of Messages
EPA GUI Guidelines defines three types of messages:
Information
Warning
Action.
An information message tells users that a requested activity is being performed
normally or has been completed normally.
A warning message tells users that a potentially undesirable situation could occur.
Users do not need to correct the condition immediately.
An action message tells users that an exceptional condition has occurred. Users
must perform an action to correct the situation.
3.8.2 Message Layout and Content
Messages are generally displayed in two forms:
In a message line on the panel
As a pop-up.
Provide a message line on all panels. Locate it immediately above the command
line. If there is no command line, locate the message line immediately above the
function key line.
If the entire message will not fit in one line, truncate the message. Display the fufl
text when users request Help for the message. If the users' first Help request on a
message results in the display of the full message text, a second Help request
displays help for the message.
Chapter 3-84
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
The application may allow users to perform some actions, such as scrolling,
without removing the message. A help request should not cause the removal of a
warning or action message.
3.8.3 Message Pop-up
Display a message panel in a pop-up if the application needs to provide a means
within the message for users to respond to the message. For example, the
application may provide an entry field or a selection list. The application may also
display a pop-up message if it is especially important to get the users' attention.
Panels created for message pop-ups may contain any combination of protected text,
entry fields, selection fields, or selection lists. Arrange the elements in message
pop-ups as in other panels.
Figure 3.7 is an example of a
message pop-up with entry
fields.
Message pop-ups that contain
entry fields, selection fields, or
selection lists must have
Cancel in the function key line.
3.8.4 Message Removal
Follow these rules and
guidelines for the removal of
messages from the message
line:
Fife Edit View Oplioii M«lp
WIH01 EM Ntlnitl Syi tan
ScMct It* tppropitte itilit for t»n triMictioit
StttttS ... - 1- '• Prae..«
Commind m
Fl«H«lp F3-E
i. ConpfeUd
3. C(«c«K4
4. 0«XU4
Wiring Mtttif t
f\\» ki« b««i ipdtted. If ya« EXIT
•aw ipdit** will b« left. Oe you
wit » to:
< Stw 1*4 »xlt
2. Exit witkoit >•«»«
FttHtlp FttPrompl FS'Rttrnv* FtO«Aetwil FI2«Ct«c«l
Figure 3.7 Message Pop-up with Entry Fields
Remove an information or warning message when users take an action that the
application can detect, such as pressing the Enter key or a function key, or when
the message is no longer needed.
Remove an action message only when the application detects that users have
corrected the condition that caused the message to be displayed.
•
Remove a warning or action message that allows input to the message pop-up
when users request the Cancel action or supply any required input and press the
Enter key.
Chapter 3-85
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
If users try to continue the application without correcting the condition that caused
an action message to be displayed, re-display the message until the condition is
corrected. This is an exception to the modeless operation that is usually
recommended.
3.8.5 Audible Feedback
On terminals capable of making sounds, a sound should accompany warning and
action messages, unless the user has turned off the audible feedback.
3.8.6 Guidelines for Creating Messages
The usability of the applications depends to a large degree on how well users
understand and respond to its messages. Consider these guidelines for creating
usable messages:
Provide help for messages in pop-ups, as it is provided for in other panels.
If the application developers provide a System Manual with additional help
for messages, then include an alphanumeric identifier in the online message
to help users locate the explanatory information in the manual.
In messages that indicate an error, tell users what is wrong and how to fix
the problem.
Write messages and prompts in concise, complete sentences. Use short,
simple words and the active voice. Avoid jargon, abbreviations, and
acronyms.
Use the same terminology in all messages.
Emphasize any names defined by the system or supplied by users that
subsequently appear in message text. For example,
You have selected the "Lakes and Rivers Data" file.
Issue an information message to tell users mat an action has been
completed if. there is no other visible indication. For example,
Search complete. String "Sulphates" not found.
Chapter 3-«6
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Issue an information message to tell users that processing is
proceeding normally so they will not be concerned about a longer
than normal wait. For example,
Processing - Please wait.
When an action will take a long dme, issue an information message
to tell users that the action is partially complete. If possible, tell
them how much is still left to do. For example,
Processing 20% complete.
If necessary, tell users what action to take to complete the request
For example,
Type in your user ID and password and press Enter to
continue.
Avoid using Yes and No choices when asking users to confirm an
action. Users might misinterpret the message. Use short phrases that
describe the actions available. For example,
Choose one.
1. Save and exit
2. Exit without saving
is explicit. While
Do you want to exit without saving? (YIN)
l.Yes
2. No
requires users to read the message carefully to interpret its meaning.
Chapter 3-87
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
3.9 Command Line
If users want to process system commands without leaving an application, the EPA
GUI Guidelines recommend that the application provide a command line to allow
users to request those actions directly. Application actions also may be supported
through the command line, giving users an alternative to using the menu bar and
pull-downs.
3.9.1 Command Line Layout
A command line may be located in the primary window below the message line
and above the function key line, or it may be in a pop-up.
All command lines should contain a field prompt and an entry field. For example,
Command => (Line one of entry field is here)
(Optional second line is here)
3.9.2 Command Line Interaction
Users can interact with the command line using four common actions: Enter,
Command, Prompt, and Retrieve. Help should also be available for the command
line.
3.9.2.1 The Enter Action
The Enter action processes a command that has been typed into the command line
of a primary window or a pop-up.
After successfully processing a command, the application should clear the
Command window. If the Command window is located in a pop-up, the pop-up
remains displayed until users request Cancel.
3.9.2.2 The Command Action
The Command action allows' users to request a pop-up that contains a Command
window. The pop-up appears after users request the Command action or a
Command pull-down choice.
Chapter 3-88
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
3.9.2.3 The Prompt Action
As an application option, users may request the Prompt action for commands when
the cursor is in the command line.
The following rules apply for the Prompt action:
When users request Prompt for the command line and no command
has been entered, a prompt list pop-up for the command line is
displayed, containing a list of the available commands. Users can
search the list of commands using global search characters.
When users select a command from the prompt list pop-up and
press the Enter key, a pop-up is displayed to help users complete
that command.
The application should display a pop-up telling users when the
command is complete and that they can press the Enter key to
process the command. The Prompt should never process a
command immediately.
3.9.2.4 The Retrieve Action
Users request the Retrieve action to re-display the last command that was issued.
The previous command appears in the command line entry field. Users should be
able to change the command, add parameters to it, or press the Enter key to reissue
it.
3.9.3 Applications having a Command Line and a Menu Bar
If the application supports both an menu bar and a command line, make sure that
the two interface elements are not at odds with each another.
Make sure that functions available from both the menu bar and the command line
are consistent If the action in the pull-down is Exit, the command name for due
action also should be Exit. It would be confusing to call the same action Exit in
one place and Quit in the other. Do not use the same name for different function*.
Chapter 3-89
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
3.10 Function Key Line
The function key line is the bottom line of a window where available actions and
their key assignments are listed. Some of the actions that appear in the function
key line are common actions and have common meanings in all applications. Other
actions that appear in the function key line are unique to the application. Individual
applications determine the meanings of the application-specific actions.
Always define the contents of the function key line for each panel.
The rules in this chapter apply to applications that support keyboards with 12
function keys and to applications that support keyboards with 24 function keys. On
a keyboard that has 24 function keys, every common action specified by the EPA
GUI Guidelines can be assigned a unique function key. However, this is not
possible on a keyboard that has only 12 function keys. EPA GUI Guidelines has
defined two techniques for supporting the common actions.
3.10.1 Function Key Line Layout
Place the function key line at the bottom of the panel below the message line and
below the command line, if one exists.
The function key line stretches across the entire width of the panel. The actions are
listed horizontally and are presented in a text form, (e.g., Fl = Help).
3.10.2 Support for Keyboards with 24 Function Keys
Applications that support keyboards with 24 function keys have the ability to
display in the function key line all the common actions that could be active at one
time for a panel. EPA GUI Guidelines, therefore, recommend that users be given
the option of setting the function key line to be displayed or not. Whichever form
users choose will affect the function key line of every panel in the primary
window. The function key window in pop-ups is not affected.
3.10.2.1 Function Key Une Content
*
The following function key definitions are used by IBM's CUA definitions.
Appendix A contains the function key definition for some of the major EPA
Chapter 3-00
-------
2183
4/30/93
Expiration Oato: 4/30/94
EPA Common User Interface Guidelines
national systems. All common actions that might be valid on the current panel are
displayed in the function key line.
- ESC = Cancel
- Fl = Help
- F2 = Display keys
-- F3 = Exit
— F4 = Prompt
- F5= Refresh
-F6 =
— F7 = Backward
— F8 = Forward
- F9 = Retrieve/Command (F9 = Retrieve if the command line is
in the primary window; F9 = Command if the command line will
be provided in a pop-up.)
- F10 = Menu
-Fll =
- F12 = Cancel
-F13 =
-F14 =
-F15 =
- F16 = Mark
- F17 = Unmark
-F18 =
Chapter 3-91
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
- F19 = Left
- F20 = Right
-F21 =
-F22 =
- F23 = Undo
-F24 =
All pop-tips should support at least:
~ ESC = Cancel
- Fl = Help
- F12 = Cancel
All help panels, whether full-screen or pop-ups, should suppon as
many of the following actions as necessary:
- ESC = Cancel
- Fl = Help
— F2 = Extended help (except extended help panels)
- F3 = Exit
-F4 =
- F5 = Tutorial (if a tutorial is provided)
-F6 =
- F7 = Backward
— F8 = Forward
- F9 = Keys help (except Keys help panels)
Chapter 342
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
- FlO -
— Fl 1 = Help index (except Help index panels)
~ F12 = Cancel.
ESC, Fl, F3, and F12 are reserved by EPA CUI Guidelines and
cannot be used for application-defined actions.
Any function key other than ESC, Fl, F3, or F12 is conditional and may be used
for any application-defined action, if the application panel does not support the
EPA CUI Guidelines common action assigned to that key.
3.10.3 Keyboards with 12 Function Keys
To support the EPA CUI Guidelines - defined common actions on a keyboard that
has only 12 function keys, some of the function keys have been assigned two
common actions. Only 12 function keys can be supported by the application at one
time. These 12 are displayed in the function key line, and only the actions defined
by these keys are available. To access the remaining functions, users may press the
F2 key, which displays the new definitions for the function key line or the Shift
key + the appropriate function key (e.g., Shift+F4=Mark).
To avoid user confusion, function keys that have two meanings must not be dis-
played in pull-downs.
If the application supports more than one set of function keys, the function key
line must always be displayed to keep users informed of the currently active
actions.
Applications that support only the first set of common actions are not required to
support multiple sets of keys.
3.10.3.1 Function Key Line Content
Listed below are the two sets of common actions defined for function keys 1-12 in
application panels.
Chapter 3-93
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
3.10.3.2 SET 1 Function Key Line Definition
The following function key line common actions are required for all application
panels in the primary line if the function is supported on the panel:
ESC = Cancel
Fl = Help
F2 = Set 2
F3 = Exit
F4 = Prompt
F5 = Refresh
F6 =
F7 = Backward
F8 = Forward
F9 = Retrieve/Command (F9 = Retrieve if the command line is in
the primary window; F9= Command if the command line will be
provided in a pop-up)
F10 = Menu
F12 = Cancel
3.10.3.3 SET 2 Function Key Line Definition
The following function key line common actions are required for all application
panels in the primary line if the function is supported on the panel (differences
noted in bold):
Fl = Help
F2 = Set 1
Chapter 3-94
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
F3 = Exit
F4 = Mark
F5 = Unmark
F6 =
F7 = Left
F8 = Right
F9 = Retrieve/Command (F9 = Retrieve if the command line is in
the primary window; F9 = Command if the command line will be
provided in a pop-up)
F10 = Menu
F 11 = Undo
F12 = Cancel
Help and pop-up function key definidons for keyboards with 12 funaion keys are
the same as the definitions for keyboards with 24 function keys.
ESC, Fl, F3, and F12 are reserved and cannot be used for application-defined
actions, even if the application panel does not support the common actions
assigned to these keys.
Any function key other than Fl, F3, or F12 is conditional and may be used for any
application-defined action, if the application panel does not support the EPA CUI
Guidelines common action assigned to that key.
3.10.4 Function Key Line Action Definitions
Function key line common actions are actions that have common meaning in all
applications. Assign those actions to keys so users can request the actions by
pressing the appropriate keys.. Some of the actions also can be requested from an
menu bar pull-down or by a command that users type into the command line.
Chapter 3-95
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Following is a description of each of the common actions.
Backward and Forward
The Backward and Forward actions must be provided for all panels that contain
any window that can be scrolled vertically (up and down).
Cancel
Cancel allows users to back up in die dialogue one panel at a time or to back up
from a pull-down to the menu bar.
Repeated Cancel requests let users back out of an individual function or an entire
application panel-by-panel, until users reach the highest-level panel. At that point,
another Cancel request has the same effect as the Exit action.
// the application determines that significant information could be lost because of
the Cancel action, a confirmation message appears, prompting users to save or
discard information.
When users Cancel a panel, the information in the panel is either discarded or
retained, depending on how the application designers want to establish the default
panel values for the next display of the panel.
Command
The Command action allows users to request a pop-up mat contains a command
line. The pop-up appears when users press the F9 key.
Display Keys
When users request the Display keys action, the function key line is turned on or
off. The default is to display the function key line.
If the Display keys action is supported, it must be assigned to the F2 function key.
Display keys may not be used if any window in the application supports more than
one set of function keys.
Chapter 3-96
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Display Panel Identifiers
When users request the Display panel Identifiers action, the panel Identifiers arc
turned on or off. The recommended default is off.
Exit
Exit ends a function or application and removes from the screen all windows and
pop-ups associated with that function or application. Repeated Exit requests return
the dialogue to the highest level in the panel hierarchy.
Exit is not used in pop-ups, except for help pop-ups, because Exit applies to the
function or application as a whole, not just to the sequence of pop-ups. Users may
Cancel a pop-up.
If operator-entered data could be lost, the application must provide a warning and
an opportunity to return to the screen and finish the process.
Help
There are several help actions to assist users while they are using an application.
The help actions are the following:
Help (Fl): Should be context sensitive and provide information about a specific
item or field, an application panel, or the help facility, as follows:
Fl provides contextual help when the cursor is on a choice or in an entry
field in an application panel.
Fl provides information about the application panel, known as Extended
help, when the cursor is not on a choice or in an entry field.
Fl provides information about the help facility when Fl is requested from
a help panel.
Help is required in all application panels.
Extended help (F2): Provides information about the entire application panel from
which users requested help.
An Extended help panel is required for every application panel and all help panels,
except Extended help panels.
Chapter 3-07
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Keys help (F9): Provides a list of the application keys and their functions.
Help Index (Fll): Provides an index of the help information available for the
application.
Help index is recommended in all help panels, except Help index panels.
Help for help (Fl): Displays a description of how to use the help facility and
provides information about how to use the help facility. Help for help is displayed
when Fl is requested from any help panel.
Tutorial (F5): Provides access to a tutorial, if one exists. If a tutorial is provided,
F5 is required in all help panels.
Left and Right
The Left and Right actions must be provided for all panels that contain a window
that can be scrolled horizontally.
Mark and Unmark
The Mark action selects, or marks, the portion of text to be processed by a subse-
quent Cut, Copy, Paste, or Delete operation. If no text is currently selected, Mark
selects and emphasizes the character at the current cursor position in the work
window. If a character or portion of text is already selected, Mark selects and
emphasizes all character positions from the previously selected portion through the
current cursor position. The Unmark action removes the emphasis from the cur-
rently selected portion of text, de-selecting it.
Prompt
When users request the Prompt action, a pop-up appears with information to help
users complete an entry field.
Refresh
When users request the Refresh action, the content of the current panel is affected
in either or both of two ways. It may be restored to its original state, it may be
refreshed to reflect the current status, or both actions may occur.
For Example: Users request Refresh while working on a panel after changing some
default values.
Chapter 3-98
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
The content of the panel is restored to its initial condition. That is, the entry field
values are restored to their initial values and selection fields are restored to their
default choices.
Retrieve
The Retrieve action will re-display the last command issued. If the cursor is not in
the command line when Retrieve is requested, the cursor is moved to the command
line, even if there is no command to retrieve.
SET11 SET2
If the application supports more than one set of function keys, this action allows
users to access the next set of function key definitions.
Move-to-Menu-Bar
The Move-to-menu-bar action allows users to switch the cursor back and forth
between the menu bar and other panel windows.
Undo
The Undo action reverses the most recently executed user action. Because the
Undo action deals with hidden objects, the text to be undone should be displayed
to reflect exactly what is being undone.
Enter
When users are finished interacting with a panel that contains entry fields,
selection fields, a selection list, or an action list, the panel must be submitted to the
application with a specific action request, such as an action selected from a
pull-down or the Enter action. The Enter key is used by the operator to process the
entire panel. Users request Enter by pressing the Enter key. Only one key
functions as Enter, and that particular key must be identified for each keyboard.
The Tab, back-Tab and Arrow keys are used to navigate among entry fields in a
window.
If a process has multiple screens, the effect of Enter is to set to the next logical
screen. For example, a browse may have multiple screens: the user may press
Enter to proceed to the next screen or press F8=Forward.
Enter should always result in a visible response to the user.
Chapter 3-99
-------
Expiration Data:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
3.11 EPA and System Identifiers
EPA system logon identifiers should appear as the first screen when an application
is invoked. This is the text equivalent of the logo screen in the graphic interface.
The applicadon developer may choose to implement a character based logo, or just
include the following information:
• EPA Organization and/or system name
• Purpose of this application
• Application version number
• Application logo, if appropriate
• Copyright statement, if appropriate
Optionally, the application may display information about the system, such as
minimum requirements or required memory and hardware configuration.
Chapter 3-100
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
4.0 Entry Model
Although a graphic or text-based interface is preferred for all new applications,
there are some applications that may use the entry model of the common user
interface. Some examples of these are the following:
An application that needs to maintain control over its environment,
such as a \valk-up-and-use application. Walk-up-and-use
applications are designed for users who are constantly new, such as
those who use an information booth found in a library, airport, or
hotel lobby.
An application that needs to be action-oriented by design.
A new release of an action-oriented application that does not
involve major redesign. Components of these applications, such as
entry fields and selection fields, may be revised to conform to EPA
GUI Guidelines.
An application with only a limited number of actions that can be
performed on a primary object or file. A data-entry program may
meet this standard. This type of application may not need a menu
bar because only a limited number of menu items are available to
the user. Either the actions or the objects in this type of application
may be implicit.
The entry GUI supports an action oriented process sequence and may be a better
model for applications with only limited actions that are performed on a primary
object or file, a new release of an existing action oriented system that does not
require a major redesign, or where it is important for the application to control user
choices or actions.
The need for an Entry Model is to provide standards for applications that do not
need the features available in the graphic or text-based CUT. It also provides a
migration path for users to get to other CUI models.
Chaptar 4-101
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
4.1 The Text based Entry Model
In terms of presentation, the Entry Model includes most of the components of the
text GUI, with the exception of the menu bar. Other components, such as pop-up
windows, dialogs, and help windows are optional in an Entry Model.
Most Entry Models are
action-oriented instead
of object-oriented. This
process sequence makes
a significant difference
in the structure of an
application. It may
mean mat the users are
presented with a
hierarchical
menu-driven
application. It may
mean that users choose
actions first and then
objects, or that actions
and objects are
combined (e.g., 1.
Update EPA APP file).
|S«»«fHof
WM«w 10
Titto
MMMft LlM(l)
CMMMM Lit*
FiietMi K«y in*
Figure 4.1 Entry Model Screen
The primary differences between
the Entry Model and the Text
model are the following:
Entry Model applications
do not have a menu bar.
Entry Model applications
are not required to be
object-oriented.
Entry Model Screen.
urau
Mi - SMM Ud
Figure 4.2 Single Line Entry Field
Chapter 4-102
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
The entry model screen is similar to the text based GUI, except that it does not
require a Menu Bar. The Entry Model has a Title Area, Work Area, Message Line,
Command Line and Function Key Line. Figure 4.1 is an example of an Entry
Model.
Entry Model Example
The following screens show some examples of an Entry Model. The initial screen
is a main menu for an application. It provides users with a list that they can choose
from. This is an example of a choice selection field. Figure 4.2 is an example of a
main menu type of screen. The choices are numbered, and an underscore is
provided, so that users can type in the number of their choice. An option is to
provide the most frequent choice pre-selected so the user can make the default
choice by pressing Enter.
09:23:45
OS/31/90
FACILITY INFORMATION
Facility Nam*
Address
FACINFO
SCREEN 10: 1001
Tatanham F.v Numh-r
Facility Manager
Facility Administrator ,
Operations Plan
Systems Plan , ,
Administrate Pl»n
ACCEPT: Y/N/M: Y MORE DATA Y/N: N
VER 2.1 5/01/89
Figure 43 Data Entry Form
Figure 4.3 is an example of a data entry form. If the form contains more
information than fits in the work area, a scrolling indicator (More +) may be
Chapter 4-103
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
displayed in the top right hand comer. This data entry form consists of entry fields
and selection fields.
New Employee Information - Help
The I.D. f is a required field. If the employee does not have an I.D. #
type 000 in the field. This is a temporary I.D. #, and in 30 days you will
again be prompted for an employee I.D. #.
FUHelp F2«Ex Help F3«Exh F9«Keys Help F11-Cancel
Figure 4.4 Help Screen
If the user presses the Fl (Help) key while the cursor is in a particular field, a
screen of help information related to that field is shown. Help screens may be full
screen Or pop-up type displays. When the Help screen is displayed, the appropriate
function key definitions are shown in the function key line. Figure 4.4 is an
example of a help screen
4.2 Graphic Based Entry Model
A current application that is not object oriented may be converted to a
programmable terminal and use graphic elements in an entry-based model There
are products that facilitate this conversion. For a programmable terminal, the
primary visual components of the user interface are the screen background,
windows, icons, and a free-moving mouse pointer. Other elements, such as check
Chapter 4-104
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
boxes and radio buttons, may be used in a graphic environment. Some of the
differences between a graphic and text-oriented entry model are the following:
Size and location of the primary window may be controlled by the
user.
Users may use a mouse as well as the keyboard to communicate
with the application.
Entry fields may appear as boxes instead of underscores.
Pushbuttons may be used to replace the function key area.
Pushbuttons may be selected with the mouse. The function keys
must also be supported.
The graphic model may support mnemonics in place of numeric
selection where applicable.
Window Work Area
The primary window should be a movable, sizable window. The tide bar consists
of the system menu icon, window title, and window sizing icon. Figure 4.5 is an
example of a window area.
Single choice entry fields may be represented as radio buttons, instead of as an
entry field preceding the first choice and numbering the choices. In addition, each
choice may have a mnemonic that is underscored.
Multiple choice selection fields may contain check boxes. The selections are
preceded by check boxes and users may select or de-select them using a toggle
operation, such as the spacebar, or by clicking on the field. An AT in the check box
indicates a selected choice.
The command area and function key area are outside the window so they remain «
the bottom of the screen. The command area may be defined as a rectangle. The
function keys should be defined as pushbuttons and are selected either by using the
mouse or by depressing the function key.
Data entry fields may be shown as rectangles and should be scrollable unless they
are fixed in length. The text entry cursor is a thin vertical bar, instead of an
underscore. Cursor movement on a programmable terminal is restricted to valid
entry fields. For example, in a single selection field a down arrow will move the
cursor to the next radio button. The tab key will move the cursor to the next field.
Chapter 4-105
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Select one of the following. Then press Enter.
|®Dept. Employees |
U Managers
O Recent Contacts
O Vendors
Figure 4.5 Window Work Area
For example, if the cursor is on die Marital status field the arrow keys will move
between selections (married, single, divorced, widowed) and the tab key will move
to die next field (Home Address).
If users request the prompt function, die prompting information may be shown as a
pop-up window. If die list is variable in length, die window should provide
scrolling, even if die current list does not require it. A choice may be made from
die list by clicking on it or using die Enter key while the cursor is positioned at
die selection.
Scrolling indicators (More +) are replaced with scroll bars. Users may scroll die
work area using the Up/Down arrow keys, mouse clicking on the scrolling arrow,
or using die Page Up or Page Down keys.
Messages appear in pop-ups rather than in a message area. If possible, die message
pop-up should be positioned so diat it does not cover die area to which die
message refers. Users mav «"^s die Enter key or click on die OK pushbutton to
clear the message.
Help messages appear as pop-ups, similar to message boxes. They do not need to
replace die entire screen. The help window may contain an action bar to access
additional help functions.
Chapter 4-106
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
EPA Function Key Assignments
This Appendix contains definitions for die function key assignment under the
various applications systems at EPA, as well as the recommended use defined by
the EPA Common User Interface Guidelines.
If the keyboard has only 12 function keys, then only 12 function keys need be
supported by the application at one time. In order to access die other 12 keys, the
F2 (SET1/SET2) key is provided to allow the user to toggle between die first
defined set and die second defined set If die application supports more dian one
set of function keys, it is important to display the function keys in die Function
Key Area, so the user can tell which set is currently selected. If only one set of
keys is supported, then the user may use die Display Keys function to turn die
display of function keys on and off.
If a function is defined for a specific application (e.g. page back), then die function
key definition assigned to that activity should be used (i.e. F7). The Fl (Help), F3
(Exit) and F12 (Cancel) keys are shown in bold, and are reserved. They cannot be
used by application defined functions.
The F9 key may be used in one of two modes:
Retrieve - Used if die Command area is in die primary window, this
retrieves die last command typed by the user.
Command - Used if die command area is provided in a pop-up window.
The following definitions are included for the reserved keys:
Help - Used to access the help system. If context sensitive help is
available, then me help window will contain information about the field to
which die cursor is pointing.
Cancel - Allows users to backup one dialog window at a time, or to back
up from a pull down in die menu bar. Basically it means to back out of die
last request for services.
Appendix A -107
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Exit - Ends a function or application and removes all windows. Repeated
use of the Exit key returns the user to die highest window in die
application hierarchy. Exit should not be used in pop-ups, because it
applies to die function or application as a whole, not just to a pop-up
screen. Use Cancel for pop-ups.
Esc - The escape key functions similar to die Cancel key, and places die
user at the screen or option, where mey had been prior to invoking die Esc
key. It "backs out" of the current selection. An Escape key should not be
used to allow a user to exit an application, or to take an action where they
will loose data or files. Escape when used to exit from a mode dialogue
boxes, simply removes die box, and no action is taken (e.g. in a Exit
without saving, or Save and Exit mode box, die box is removed and die
user proceeds widi die application)
Appendix A -KM
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
EPASyetem
CUA Gui
-------
Expiration Date:
4 I OO
4/30/93
4/30/94
EPA Common User Interface Guidelines
SystamNama
CUA Guidattrm
CCS
Map
CCS Natural
ADPiCJCS
PCSAOE
OOSRaport
Wriitr
FWOS
CAROE
FACTS
AIRS
THIS
CARD
F13
H^p
H«p
Hrtp
LJ^^h
rwlp
F14
Appl
Otv
Updat
F1S
Pwv
Vtonu
Pmv
Mww
Prav
MMW
lUtonu
F10
Mark
M«n
Mww
hUm
MWHJ
out
F17
Unmarfc
ApplDw
F18
Appl
DM
F10
Scroll
Right
Pag*
Back
Pag*
back
CM
Option*
F20
ScroM
Laft
Paga
Forwd
Paga
Forwd
SooN
Down
F21
NATRT
Logon
F22
Attfl
F23
Undo
A«g
F24
Tarm
ID
TSO
Eat
Appendix A -110
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Glossary
active - describes the window or icon to which the next keystroke or command
will apply. If a window is active, its title bar changes color to differentiate visually
from other open windows. If an icon is active, the Control menu appears.
application icon - a graphic that appears only after you start an application and
then minimize it Application icons are the only icons that appear on the desktop,
outside window borders.
application shortcut key - a key combination that brings an application to the
foreground when running windows in 386 enhanced mode.
application window - a window that contains a running application. The name of
the application appears at the top of this window. An application window may
contain multiple document windows.
associate - to identify a filename extension as "belonging" to a certain application.
When you select a file with an extension that has been associated with an
application. That application is opened automatically.
background - the area behind the active window.
bitmap - an image stored as an array of bits.
boot - to start your computer, or to restart it, loading the disk operating system
(DOS).
branch - a segment of the File Manager Directory Tree representing a directory
and any subdirectories within it.
Glossary-111
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
built-in font • (also known as resident or hardware font) - font that is built into
the read-only memory (ROM) of a printer.
cascade - a way of arranging open windows on die desktop so that they overlap
each other with the tide bar of each window remaining visible.
cascading menu - a menu that opens from a command on another menu.
check box - a small square box that appears in a dialog box and that can be
selected or cleared. When the check box is selected, an X appears in the box. A
check box represents an opdon that you can set
choose - to use a mouse or key combinadons to pick an item that begins an action
in windows.
click - to press and release a mouse button quickly.
Clipboard - A temporary storage location used to transfer data between documents
and between applications.
close - to remove a document window or application window from the desktop.
You can choose to save or abandon the document in a document window before
you close the application.
collapse - to "hide" additional directory levels below a selected directory in File
Manager.
command - a word or phrase usually found in a menu dial you choose in order to
carry out an action.
command button - a button in a dialog box. It carries out or cancels die selected
action. Two common command buttons are labeled Cancel and OK.
GIossary-112
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
confirmation message - a message displayed by window when you have specified
a destructive action, asking if you are sure you want to proceed. For example,
windows displays a confirmation message when you tell it to delete a file.
Control menu - the menu appearing on every application that runs in a window
and on some non-window applications. Icons, some dialog boxes and windows
within an application workspace also have Control menus. For applications running
in a window and for icons and dialog boxes, Control menu commands move,
change the size of, and close windows. For non-windows applications, the Control-
menu commands transfer information and perform other miscellaneous functions.
Also known as System menu.
Control menu box - the icon that opens the Control menu for the window. It is
always at the left of the title bar.
copy - to put a copy of the selected text or item on the Clipboard so you can
transfer it to another location. Most windows applications have a Copy command
that performs this task.
current directory - the directory that is currently highlighted in the Directory Tree
or whose directory window is the active window.
cut - to move text from a document into a temporary storage area called the
Clipboard.
data file - any file created within an application: a word processing document, a
spreadsheet, a database file, a chart, and so forth.
default button - the command button in some dialog boxes selected as the mo*
logical or safest choice. This button has a bold border when the dialog box
appears, and pressing ENTER chooses the button.
Glossary-113
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
default printer - the printer that windows applications automatically use when you
choose the Print command. You can have only one default printer and the default
printer must also be an active printer.
desktop - the screen background for windows on which windows, icons, and
dialog boxes appear.
desktop pattern • a geometric pattern that appears across the desktop. You can
use Control Panel to design your own pattern or choose one from patterns provided
by windows.
destination directory - the directory to which you intend to copy or move one or
more files.
dialog box - a rectangular box that either requests or provides information. Many
dialog boxes present options to choose among before windows can carry out a
command. Some dialog boxes present warnings or explain why a command cant be
completed.
DIRECTION keys - the four arrow keys on your computer keyboard. Each arrow
key is named for die direction the key points: UP ARROW, DOWN ARROW,
LEFT ARROW, and RIGHT ARROW.
directory - a collection of files and subdirectories that are stored at the same
location on a disk. The name of the directory identifies its location. Pan of the
structure for organizing your files on a disk. See also subdirectory.
Directory Tree * a graphic display in Hie Manager of the directory structure of *
disk. The directories on the disk are shown as a branching structure that resembles
a tree. Directories are shown as branches off die top-level directory, known as the
root directory.
directory window A - File Manager window that lists the contents of a directory.
Each directory window shows all the files and other directories contained in die
directory.
Glossary'114
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
disk drive - a device used for storing and retrieving data on disks.
disk-drive icon - an icon in File Manager that represents a disk drive. Different
icons depict floppy disk drives, hard disk drives, network disk drives, RAM drives.
and CD-ROM drives.
document window - a window within an application window. A document
window contains a document you create or modify by using an application. There
can be more than one document window in an application window.
double-click - to rapidly press and release a mouse button twice without moving
the mouse. Double clicking carries out an action, such as opening an icon.
drag - to move an item on the screen by holding down the mouse button while
moving the mouse. For example, you can move a window to another location on
the screen by dragging its title bar.
drop-down list box - a single-line dialog box that opens to display a list of
choices.
exclusive application - an application that has sole use of the computers resources
while it is running in the foreground with windows in 386 enhanced mode. When
an exclusive application is running in a window, it gets most, but not all, of the
resources.
expand - to show currently hidden levels in the Directory Tree. With File
Manager. You can expand a single directory level, one branch of the tree, or all
branches at once.
expanded memory - memory in addition to conventional memory that is available
for applications. It is allocated in 16K blocks, windows will make use of expanded
memory only if the /R switch is used at start up. windows running in 386
enhanced mode simulates expanded memory for the applications that need it
windows running in standard mode or 386 enhanced mode allows applications to
Glossary-115
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
use expanded memory, but it does not use expanded memory itself in the
management of applications.
extend selection - to select more than one object. For example, you can select a
group of files to be moved or copied with File Manager.
extended memory - memory in addition to conventional memory that is not
readily accessible to MS-DOS or MS-DOS applications. Extended memory can not
be used on 8086788 computers, windows running in standard mode or 386
enhanced mode uses extended memory to manage and run applications.
extension - the period and three letters at the end of a filename. An extension
identifies the kind of information a file contains. For example, files created with
Calendar have the extension .CAL.
file - a document or application that has been given a name. All documents are
stored as files in windows.
file attribute - a characteristic of a file—for example, the read-only attribute—that
can be changed using File Maintenance
file format - the structure or arrangement of data stored in a file.
filename - the name of a file windows uses DOS filenaming conventions.
fixed-width font A font - in which all characters have uniform widths.
flow control - the processes and procedures used to regulate the rate at which data
is transferred from one device to another.
font - a graphic design applied to all numerals, symbols, and characters in the
alphabet. A font usually comes in different sizes and provides different styles, such
as bold, italic, and underlining for emphasizing text
Glossary-116
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
font cartridge - a piece of hardware that is plugged into a printer to supply one or
more fonts.
font family - a group designation that describes die general look of a font. For
example, the Roman font family contains fonts with serifs and variable character
widths, such as Tins Rmn.
font set - a group of fonts designed for use with a specific device resolution.
windows includes seven sets of fonts.
font size - See point size.
footer - text that appears at die bottom of every page of a document when it is
printed.
foreground - die area of the screen occupied by the active window.
format (1) - die appearance of text on die pages of a document. (2) To prepare a
disk so that it can hold information. Formatting a disk erases all information that
was previously on it.
full-screen application - any non-windows application that occupies die whole
screen rather than running in a window.
graphics resolution - the level of quality at which windows prints graphic. The
higher die resolution, the better die quality of the printed graphics (and die slower
the printing).
group - a collection of programs in Program Manager. Grouping your programs
makes diem easier to find when you want to start diem.
Glossary-117
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
group icon - the graphic that represents a Program Manager group that is
minimized. Double-clicking the group icon opens the group window.
group window - a window that displays the items in a group within Program
Manager. These items can be applications or data files associated with applications.
handshake - a flow-control or "go ahead." signal sent by a local computer to a
remote computer when working with a communications program such as Terminal.
XON/OFF is the standard software handshaking method, although it can't be used
with remote systems that use a hardware handshaking method.
header - text that appears at the top of every page of a document when it is
printed.
hidden file - a system file that cannot be viewed, such as your MS-DOS BIOS
file.
high memory area - the first 64K of extended memory. This area used by some
applications.
highlighted - indicates that an object or text is selected and will be affected by
your next action. Highlighted text appears in reverse video on monochrome
displays or in color on some color displays. Highlighted objects might change
color or be surrounded by a selection cursor.
icon - a graphic representation of various elements in windows, such as disk
drives, applications, and documents.
inactive window - any open window that you are not currently working in.
insertion point - the place where text will be inserted when you type. The
insertion point usually appears as a flashing vertical bar in an applications window
or in a dialog box. The text you type appears to the letter of the insertion point,
which is pushed to the right as you type.
Glossary-111
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
list box - within a dialog box, a box listing available choices—for example, the list
of all available files in a directory. If all the choices wont fit, the list box has a
vertical scroll bar.
macro - a series of actions recorded using the Recorder accessory. When you run
the macro, Recorder carries out all the recorded actions. Macros can be assigned to
special keys, called shortcut keys, or to longer descriptive names.
mark - to select text in a non-windows application.
Maximize button - the small box containing an UP ARROW at the right of the
tide bar. Mouse users can click the Maximize button to enlarge a window to its
maximum size. Other users can use the Maximize command on the Control menu.
memory-resident software - software that is loaded into memory and is available
for use even when another application is active. Also known as TSR software.
menu - a list of items, most of which are windows commands. Menu names
appear in the menu bar near the top of the window. You use a command on a
menu by selecting the menu name, then choosing the command.
menu bar - the horizontal bar containing the names of all the application menus. It
appears below the tide bar.
Minimize button - the small box containing a Down arrow at the right of the tide
bar. Mouse users can click the Minimize button to shrink a window to an icon.
Other users can use the Minimize command on the Control menu.
network - a group of computers connected by cables and using special software
that allows them to share equipment (such as printers) and exchange information.
Glossary-119
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
network disk drive - a disk drive that is available for public use on a network.
Network disk drives are often used to store data files for many people in a work
group.
non-windows application computer - programs that were not designed to run
within the windows environment. Non-windows applications do not necessarily
follow any of the windows user interface conventions. Although most non-
windows applications can run with windows, there may be limitations regarding
how many of windows' features they can take advantage of.
open - to display the contents of a file in a window or to enlarge an icon to a
window.
option - a choice in a dialog box. An option affects the way in which a command
is carried out. Dialog boxes have several kinds of options, including mutually
exclusive option buttons and non-exclusive check boxes.
option button - a small round button that appears in a dialog box and is used to
select an option. Within a group of related option buttons, you can select only one
button.
parallel interface - an interface between a computer and a printer in which the
computer sends multiple bits of information to the printer simultaneously. Parallel
and Centronics interfaces are the same type.
parallel port - a connection on a computer, usually LPTL where you plug in the
cable for a parallel printer, windows supports parallel ports LPT1 through LPT3.
parameter - information added to the command that starts an application. This
information determines how the application will run. For example, to start
Microsoft Word in character mode, you would type word /c at the DOS prompt.
The /c is the parameter. A parameter can be a filename or any type of information
up to 62 characters in length.
Glossary-120
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
paste - to transfer the contents of the Clipboard to an application. Many
applications have a Paste command that performs this task.
pathname - the directions to a directory or file within your system. For example,
C:\windows3\APPTSMUNE.CAL is the pathname of the JUNE.CAL file in the
APPTS subdirectory in the windowsS directory on drive C.
personal windows directory - the directory usually located on your hard disk, that
contains the windows files that were loaded to your system when you ran windows
Setup.
PIF (program information file) - a file that provides information that windows
needs to run a non-windows application. For example, you use a PIF to tell
windows to run a non-windows
pixels - the smallest graphic units on the screen. Also known as picture elements
(pels).
point - to move the pointer on the screen until it rests on the item you want to
select or choose.
point size - the height of a printed character. A point equals 1/2 of an inch.
pointer - the arrow-shaped cursor on the screen that indicates the position of the
mouse.
port - a connection on a computer where you plug in the cable that carries data to
another device.
print queue - a list of files that have been sent to a particular printer. The list
indicates the file currently printing and those waiting to be printed.
Glossary-121
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Printer Cartridge Metrics (PCM) file - a file that contains Printer Fonts Metrics
files for each font on a font cartridge.
printer driver - software that controls how your computer and printer interact. A
printer-driver file supplies windows with information such as the printing interface,
descriptions of fonts, special features, and so on.
Printer Font Metrics (PFM) file - A file that supplies a windows printer driver
with information about a font, such as family, point size, widths of individual
characters, and more.
program item icon - the graphic that represents an application that you can start
from Program Manager. A program item icon is contained in a group window.
proportional font - a font in which different characters have varying widths.
protected mode - the operating mode of a computer that is capable of addressing
extended memory directly.
protocol - a set of rules that define how computers communicate with each other.
RAM (random access memory) - the memory that is used to run applications and
perform other necessary tasks while the computer is on. When you turn the
computer off, all information in RAM is lost. See also virtual memory.
raster font - a font created as a graphic bitmap image. It is available only in a
fixed size-not scalable. A raster font is used mostly on the screen, but is also used
by some dot-matrix printers and built into some laser printers.
read-only file - a file that you can only open and read. You cannot edit a read-
only file and save it again.
Glossary-122
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
real mode - an operating mode that windows runs in to provide maximum
compatibility with versions of windows applications prior to 3.0. Real mode is the
only mode available to computers with less than 1 MB of extended memory.
Restore button - the small box containing a Down arrow and an Up arrow at the
right of the title bar. The Restore button appears after you have enlarged a window
to its full size. Mouse users can click the Restore button to return the window to
its previous size. Other users can use the Restore command on the Control menu.
root directory - the highest directory of a disk. The root directory is created when
you format the disk. From the root directory, you can create other directories.
scaled point size - a point size that approximates a specified point size for use on
the screen.
screen font - a raster font designed to duplicate a printer font on the screen. See
also raster font.
scroll - to move text or graphics up or down, or left or right, in order to see parts
of the file that cannot fit on the screen.
scroll bars - the bars at the bottom and right edge of a window whose contents are
not entirely visible. Each scroll bar contains a small box, called a scroll box, and
two scroll arrows to allow different types of scrolling.
scroll buffer - in Terminal, the buffer that holds typed or received information thx
does not fit on the screen.
select - to highlight an item by clicking it with the mouse or using key
combinations. Selecting does not initiate an action. After selecting an item, you
choose the action you want to affect the item. See also choose and highlighted.
Glossary-123
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
selection cursor - the marking device that shows where you are in a window,
menu, or dialog box. The selection cursor can appear as a highlight or as a dotted
rectangle around the text in a dialog box option.
serial interface - an interface between a computer and a printer in which the
computer sends single bits of information to die printer, one after the other. Serial,
asynchronous, and RS232 interfaces are all the same type.
serial port - a connection on a computer, usually COM1, where you plug in the
cable for a serial printer or another serial communications device, such as a
modem.
share - a partition of a network disk drive.
shortcut key - a key combination that carries out some action in windows. For
example, pressing ALT + ESC switches among loaded applications.
shrink - to reduce a window to an icon at the bottom of the desktop using the
Minimize button. The document or application remains open and can be the active
document or application.
soft font - a font that is downloaded to your printers memory from a disk provided
by the font manufacturer.
solid color - the color that appears on a display when all pixels are the same color.
On a monochrome display, there are only two solid colors: black and white.
source directory - the directory that contains the file or fiks you intend to copy or
move.
spool - to print a document or file in the background while working on something
else.
Glossary-124
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
standard mode - the normal operating mode for running windows. This mode
provides access to extended memory and also lets you switch among non-windows
applications.
standard setting - standard settings are settings shipped with windows. For
example, if you print a drawing or document from one of the windows accessories
without entering new margin settings, the accessory uses standard margin settings
to print.
subdirectory - a directory contained within another directory. All directories are
subdirectories of the root directory.
swap file - an area of your hard disk mat is set aside for exclusive use by
windows in 386 enhanced mode. This area is used only when your system tuns
low on memory.
switch - See parameter.
System menu - See Control menu.
system time - the time set by your computers internal clock.
terminal emulation - a setting specified with Terminal that causes your computer
to emulate a remote computer. Terminal emulation allows your computer to display
data it receives and to use features of the remote computer.
text box - a box within a dialog box where you type information needed to cany
out die chosen command. The text box may be blank when the dialog box appear*
or may contain text.
text file - a file containing only letters, digits and symbols. A text file usually
consists of characters coded from die ASCII character set.
Glossary-125
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
tile - a way of arranging open windows on the desktop so that no windows overlap
but all windows are visible. Each window takes up a portion of the screen.
title bar - the horizontal bar located at the top of a window and containing the title
of the window. On many windows, the title bar also contains the Control-menu
box and Maximize and Minimize buttons.
TSR software - see memory-resident software.
vector font • a series of dots connected by lines that can be scaled to different
sizes. Plotters typically use vector fonts. Also known as stroke font
virtual machine - an environment created by windows running in 386 enhanced
mode in which an application can run and behave as if it had an entire machine all
to itself, windows in 386 enhanced mode can have multiple applications running in
their own separate virtual machines at the same time.
virtual memory - a memory management system used by windows running in 386
enhanced mode, which allows windows to behave as if there were more memory
than is actually present in the system. Virtual memory equals the amount of free
RAM plus the amount of disk space allocated to a swap file that windows uses to
simulate additional RAM.
volume label - a name that identifies a disk. The volume label appears in the title
bar of the Directory Tree window.
wallpaper - picture or bitmapped pattern that appears as the windows desktop.
wildcard character - a character that represents another character. In filenames,
you can use the asterisk (*) as a wildcard character to indicate any character or
group of characters that might match that position in other filenames. For example,
*.EXE represents all files that end with the .EXE filename extension.
Glossary-126
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
window - a rectangular area on your screen in which you view an application or
document. See also application window and document window.
windows application - any application that was designed especially for windows
and will not run widiout windows. All windows applications follow the same
conventions for arrangement of menus, style of dialog boxes, use of the keyboard
and mouse, and so on.
word wrap - a feature that moves text from the end of a line to the beginning of a
new line as you type. With word wrap, you do not press ENTER at the end of
each line in a paragraph
workspace - the area of a window that displays the information contained in the
application or document you are working with.
Glossary-127
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Glossary-! 2«
-------
Expiration Date:
2183
4/30/93
4/30/94
EPA Common User Interface Guidelines
Index of Terms
Accelerator keys 29, 81
Active Window 18, 21, 29, 113, 115, 119
Application design 5, 14, 15
Application program 22-24
Arrow keys 26, 40, 51, 78, 82, 83, 99, 106, 116
Audible 8, 53, 55-58, 67, 86
Background 1, 18, 45, 104, 113, 116, 126
Beep 29, 57, 58
Cancel 7, 10, 20, 43, 46, 47, 55, 57-59, 78, 81, 83, 85, 88, 91-97, 109-111, 114
Card 5, 111, 112
Cascade 21, 114
Change ii. 8-11, 13, 20, 25, 32, 41, 45-47, 49, 52-54, 58, 59, 62, 89, 115, 120
Characters 14, 45, 74, 78, 80, 89, 118, 122, 124, 127, 128
Check box 34, 38, 105, 114
Choosing i, 3, 5, 41, 60, 121
Click 23, 40, 51, 53, 61, 106, 114, 117, 121, 125
Close 22, 27, 43, 57, 60, 80, 114, 115
Commands 4, 8, 28, 67, 88, 89, 115, 121
Common User i, ii, 2, 4, 6, 12, 15, 17, 63, 101, 109
Confirm 87, 111
Control . 9, 20, 21, 23-27, 33, 37, 38, 40, 44, 52, 53, 79, 101, 113, 115, 116, 118, 120, 121, 125,
127, 128
Copy 10, 31-33, 98, 115, 116, 126
Cursor 10, 11, 21, 26, 28, 33, 39, 45-47, 51, 55, 60, 61, 63, 64, 71-74, 78, 80, 82, 83, 89, 97-99.
104, 105, 106, 109, 120, 123, 125, 126
Cut 10, 32, 33, 98, 115
Data 1, 2, 7, 8, 11, 14, 15, 22, 24, 29, 31, 45, 46, 55, 64, 70, 71, 86, 97, 101, 103-105, 110.
114, 115, 117, 118, 120, 122, 123. 127
Default 8, 31, 35, 40, 41, 44-46, 96, 98, 103, 115, 116
Delete 8, 9, 15, 31, 33, 45, 46, 98, US
Desktop 1, 2, 5, 19, 113, 114, 116, 126, 128
Directories 5, 35, 38, 52, 53, 116, 125, 127
Directory 35, 52, 53, 113-117, 121, 123, 125-121
Disk Drive 117, 121, 126
Display . 1, 10, 23, 24, 27, 29, 31, 35, 37, 38, 43, 44, 46-49, 53, 62, 65, 66, 74-76, 80, 81, 84-W,
89-91, 96, 99, 100, 109, 111, 116, 117, 122, 126, 127
Document 10, 20, 32, 34, 49, 113-115, 117-120, 126, 127, 129
DOS 21, 113, 118, 120, 122
Index -129
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Dotted 39, 126
Double clicking 117
Drop-down 35, 41, 117
Edit 9, 15, 20, 28-30. 32, 79, 124
Error 8, 11, 24, 55, 56, 58, 86
Exit 9, 12, 23, 29, 31, 47, 57, 78, 79, 87, 89, 91, 92, 94-97, 109-112
Expand 117
File 6, 9, 10, 15, 27-31, 35, 42, 43, 52-54, 58, 65, 71, 79-81, 86, 101, 102, 113-118, 120, 122-128
File Manager 113, 114, 116-118
Find 9, 35, 43, 63, 119
Fonts 24, 119, 124, 128
Footer 119
Foreground 113, 117, 119
Format 33, 74, 118, 119, 125
Function keys 8, 12, 30, 68, 79, 81, 90, 93, 95, 96, 99, 105, 109
Graphics 24, 29, 32, 33, 39, 104, 119, 125
Group 26, 30, 34, 36-38, 66, 70, 69-71, 79, 118-122, 124, 128
Header 120
Help . . 5, 7, 20, 24, 28-30, 33, 43, 47-49, 52, 53, 56-63, 69, 71, 77-79, 82, 84-86, 88-95, 97, 98,
102, 104, 106, 107, 109, 111, 112
Hidden 30, 32, 36, 41, 99, 117, 120
IBM i, ii, 2, 3, 19, 90
Icon 1, 22, 56-59, 105, 113, 115, 117, 120-122, 124, 126
Image 113, 124
Inactive 50, 120
Include i, 1, 2, 30, 69, 76, 86, 100
Index 47, 60, 61, 93, 97, 98. 131
Interface i, ii, 1-7, 9, 10, 12-15, 17, 18, 21-26, 28, 31, 36, 52, 63, 65, 67, 89, 100, 101, 104,
109, 122, 124. 126
Keyboard 12, 21, 24, 28, 29, 39, 40, 51, 60, 61, 90, 93, 99, 105, 109, 116, 129
Label 12*
List . 9, 28, 30, 31, 35, 37-39, 38, 40-43, 51-53, 61, 71, 74, 76-78, 85, 89, 97, 99, 103, 106, 117.
121. 123
List box 35, 37, 38, 40, 41, 52, 53, 117. 121
Macro 121
Main ii, 3, 5, 14, 18, 19, 21, 63, 64, 69, 103, 111. 112
Mark 30, 33, 59, 91, 93, 95, 98, 112, 121
Maximize 22, 27, 67, 121. 12S
Menu Bar . 8, 10, 14, 19, 20, 25, 26, 28-31, 35, 46, 60, 61, 64, 65, 68, 69, 72, 78-83, 88, 89. 95,
96,99, 101,102, 103, 109, 111. 121
Menus 12, 15, 25, 115, 121. 129
Messages 23, 24, 27, 43, 52, 53, 55-59, 67, 84-86, 106
Minimize 22, 27, 113, 121, 126, 128
Index -130
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Mode 7, 9, 45, 110, 113, 117, 118, 122, 124, 125, 127, 128
Modes 7, 45, 109
Mouse 4, 12, 18, 21, 23, 26, 27, 29, 39, 40, 51. 54, 61, 63, 104-106, 114, 117, 121, 123, 125, 129
Mouse button 12, 26, 114, 117
Move ... 10-12, 22, 26, 27, 31, 32, 36, 43, 45, 46, 61, 63, 71, 73, 78, 82, 83, 99, 105, 106,
115-117, 123, 125, 126
MS-DOS 118, 120
Name 8, 27, 31, 35, 40, 43, 48, 52, 53, 56, 65, 68, 89, 100, 112, 113, 116, 118, 121, 128
New ii, 2, 14, 18, 31, 32, 45, 50, 60, 63, 65, 76, 82, 83, 93, 101, 127,129
Nonprogrammable 14, 15
Number 9,11, 30, 35, 48, 49, 66, 79, 81, 83, 100,101,103
Open i, ii, 2, 31, 36, 38,47, 52, 53, 57, 81,113, 114, 120, 122, 124, 126, 128
Option 31, 48, 57, 68, 72, 73, 79, 89, 90, 103, 110, 114.122.126
Pop-up 31, 67, 68, 77, 78, 81, 83-85, 88, 89, 91, 94-98, 102, 104, 106, 109,110
Presentation ii, 3, 4, 6-8, 10,13, 14, 21-26, 33, 35, 41, 49, 63,102
Presentation Manager ii, 3, 21-24
Print 31. 53, 71, 116, 123, 126, 127
Printer 35, 41, 54, 114-116, 119, 122-126
Program ii, 12, 21-24, 59, 68, 101, 119, 120, 123, 124
Protocol 124
Quit 12, 89, 111, 112
Read 22, 87, 114, 118, 124
Read-only 114, 118, 124
Record 9, 44
Save 8, 10, 12, 24, 29, 31, 43, 57, 58, 87, 96, 110, 111, 114, 124
Save as 31
Scroll 25, 26, 36-38, 40, 43, 45, 49-51, 68, 71, 73-76, 106, 111, 112,121, 125
Scroll bars 25, 26, 36, 38, 45, 49-51,106, 125
Search 35, 43, 53, 86, 89, 111
Select .. 6, 8-11, 15, 26-28, 31-35, 37-41, 43, 45, 47-49, 53, 55-59, 61, 63, 82, 83, 89, 105, 111,
113, 118, 121, 122, 123, 125
Set . i, 3. 4, 15, 19, 22, 34, 35, 37-40, 47, 51, 53, 66, 79, 93, 94, 96, 99, 109, 114, 119, 124, 127
Shortcut 113, 121, 126
Size 20-22, 25, 27, 42, 45, 48-50, 62, 73, 105, 115, 119, 121, 123-125
System . i, ii. 1, 3-5, 7, 8, 12, 14, 23-27, 31, 32, 35, 43, 48, 52, 55, 58-60, 63, 67, 69, 81, 82, 86,
88, 100, 101, 105, 109, 111-113, 115,120. 123, 127, 128
Table 1
Task i, 5,7, 23, 31. 53-56, 61.115. 123
Terminal • 12, 14, 63, 104, 105, 120,125, 127
Text 9, 14, 15, 30, 32, 34, 36-39, 41, 44-47, 51, 54, 56-59, 63-66, 69-71, 78, 82, 84-86, 90,
98-103, 105, 111, 115, 118-121, 125-127, 129
Time 2, 12, 13, 18, 29, 41, 43, 48, 51, 54, 55, 65, 66, 82, 87, 90, 93, 96, 109,127, 128
Tide 6, 12, 25-27, 37, 56, 62, 64-66, 68, 69, 77, 78, 103, 105, 113-115, 117, 121, 125, 128
lnd«x -131
-------
2183
4/30/93
Expiration Date: 4/30/94
EPA Common User Interface Guidelines
Title bar 12, 25, 26, 105, 113-115, 117, 121, 125, 128
Undo 8. 32, 92. 95, 99, 112
View 20, 26, 28, 30, 33, 49, 50, 63, 66, 72, 75, 79, 129
•Warning 7, 8, 31, 55-57, 67, 84-86, 97
Window .. 1, 6, 11, 12, 17-21, 20-28, 27, 29, 30, 33-36. 38, 42, 43, 45-49, 48-50, 55, 56, 60-69,
77-79, 81, 82, 83, 88, 90, 91, 94-96, 98, 99, 105, 106, 105-107. 109, 110,
113-117, 119-122, 124-126, 128, 129
Window Tide 6, 25-27, 56. 62. 64-66, 68, 69, 105
Windows ... ii, 2, 3, 15, 17-27, 31, 34, 35, 37, 43, 46, 49, 50, 64, 68, 82, 83, 97, 99, 102, 104,
110, 113-129
Won! 9, 19, 20, 28, 32, 69, 75, 114, 115, 122, 129
Workstation 21, 63
Index -132
SU.S. GOVERNMENT PRINTING OFFICE: 1993-515-003/87113
------- |