Graphical User Interface Standards

Table of Contents

PREFACE.................................................................................................................................................... 1
INTRODUCTION TO STANDARDS ..................................................................................................................... 1
PeopleSoft Application Components......................................................................................................... 2
Parts of the Window .................................................................................................................................. 2
Standard Controls ..................................................................................................................................... 4
User Interface Design Principles.............................................................................................................. 4
User-Centered Design .............................................................................................................................................4
The User is in Control ........................................................................................................................................4
Progressive Disclosure........................................................................................................................................5
Consistency ........................................................................................................................................................5
Aesthetics ...........................................................................................................................................................5
Feedback.............................................................................................................................................................6
Directness ...........................................................................................................................................................6
Forgiveness.........................................................................................................................................................6
Special Considerations .......................................................................................................................................6
Effective Visual Communication ............................................................................................................................6
Organization and Composition ...........................................................................................................................6
Using Color ........................................................................................................................................................7
Icon Design.........................................................................................................................................................7
Designing Graphics ............................................................................................................................................7
General Guidelines ................................................................................................................................... 7
Guideline 1. Follow the guidelines ....................................................................................................................7
FUNDAMENTAL GUIDELINES ............................................................................................................. 9
Guideline 2. Make fabulous pages ............................................................................................................ 9
Guideline 3. General organization of information.................................................................................... 9
Guideline 4. Sparsely populated pages .................................................................................................. 10
Guideline 5. Mostly populated pages..................................................................................................... 11
Guideline 6. Grouping related information in the same scroll level...................................................... 11
Guideline 7. Use the whole page width.................................................................................................. 11
TYPES OF PAGES ................................................................................................................................... 12
Guideline 8. Page functionality and layout............................................................................................ 12
Page Usage ............................................................................................................................................. 12
Data Access Method................................................................................................................................ 13
Layout Style............................................................................................................................................. 13
CONTROL PLACEMENT AND SPACING ......................................................................................... 14
Guideline 9. Page grid size .................................................................................................................... 14
Guideline 10. Standard line spacing (vertical spacing)......................................................................... 14
Guideline 11. Frame and group box spacing......................................................................................... 15
Guideline 12. Scroll bar spacing ........................................................................................................... 15
Guideline 13. Minimum horizontal spacing between labels and fields.................................................. 16
Guideline 14. Horizontal spacing between fields and related displays ................................................. 16
Guideline 15. Horizontal spacing between fields................................................................................... 16
Guideline 16. Multi-line labels............................................................................................................... 16
Guideline 17. Pushbutton placement and spacing ................................................................................. 17
Guideline 18. Placement of “scroll population” pushbuttons ............................................................... 18
Guideline 19. Placement of “scroll action” pushbuttons ...................................................................... 19
Guideline 19a. Placement of “application toolbar” pushbuttons. ........................................................ 21
DETAILED DESIGN CONSIDERATIONS .......................................................................................... 22
Guideline 20. Page title placement ........................................................................................................ 22
PeopleSoft Developer’s Reference Manual Version 2
ps_page_standards 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Table of Contents
Guideline 21. Date format...................................................................................................................... 22
Guideline 22. Keys ................................................................................................................................. 22
Guideline 23. Business Unit and SetID as Keys..................................................................................... 23
Guideline 24. EMPLID and EMPL_RCD as keys.................................................................................. 23
Guideline 25. Currency designation ...................................................................................................... 24
Guideline 26. Effective Dates................................................................................................................. 24
Guideline 27. Run control page for reports ........................................................................................... 25
Guideline 28. Run control page for COBOL processes ......................................................................... 26
Guideline 29. Crowded pages ................................................................................................................ 26
Guideline 30. Currency amount fields ................................................................................................... 27
Guideline 31. Scroll totals for multiple currency amounts .................................................................... 28
Guideline 32. Currency code vs. currency description .......................................................................... 28
Guideline 33. Effective date and effective status on a list page ............................................................. 29
Guideline 34. Display size of currency amount fields............................................................................ 29
Guideline 35. Field Tab Order............................................................................................................... 29
VISUAL GRAPHIC DESIGN ................................................................................................................. 31
Fonts & Colors........................................................................................................................................ 31
Guideline 40. Using color ...................................................................................................................... 31
Guideline 41. Standard fonts and colors................................................................................................ 31
Standard Colors ................................................................................................................................................31
Standard Color Values......................................................................................................................................31
Standard Fonts & Colors ..................................................................................................................................32
Special Styles ...................................................................................................................................................32
Page Controls ......................................................................................................................................... 33
Use of Controls ....................................................................................................................................... 33
Guideline 42. Page controller types and usage ................................................................................................33
Guideline 43. Use of Controls .........................................................................................................................35
Guideline 44. Dependent controls ...................................................................................................................35
Guideline 45. Default values for controls ........................................................................................................35
Guideline 45a. Display-only edit controls .......................................................................................................35
Command Pushbuttons ........................................................................................................................... 35
Guideline 46. When to use command pushbuttons vs. radio buttons/check boxes ..........................................35
Guideline 47. When to use command pushbuttons vs. toolbar buttons............................................................35
Guideline 48. Pushbutton size .........................................................................................................................36
Guideline 49. When to use image pushbuttons vs. text pushbuttons ...............................................................36
Guideline 50. Command button text................................................................................................................38
Check Boxes ............................................................................................................................................ 39
Guideline 51. When to use check boxes ..........................................................................................................39
Guideline 52. Labels for check boxes..............................................................................................................39
Guideline 53. When to use check boxes vs. radio buttons...............................................................................40
Guideline 54. Grouping check boxes...............................................................................................................40
Radio Buttons .......................................................................................................................................... 40
Guideline 55. When to use radio buttons.........................................................................................................40
Guideline 56. Provide a default selection ........................................................................................................40
Guideline 57. Grouping radio buttons .............................................................................................................41
Drop Down Lists ..................................................................................................................................... 41
Guideline 58. When to use drop down list vs. radio buttons ...........................................................................41
Guideline 59. Provide a default value for drop down lists...............................................................................41
Edit Fields ............................................................................................................................................... 42
Guideline 60. Display length of edit fields ......................................................................................................42
Guideline 61. Hide vs. Gray ............................................................................................................................42
Guideline 62. Using long edit boxes................................................................................................................42
Guideline 63. Label fields ...............................................................................................................................42
Guideline 64. Prompt button............................................................................................................................43
Guideline 83. Hidden fields.............................................................................................................................43
PeopleSoft Developer’s Reference Manual Version 2.0
ps_page_standards 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Table of Contents
Scrolls...................................................................................................................................................... 43
Guideline 65. Aligning scroll bars with frames or group boxes. .....................................................................43
Guideline 66. Column titles.............................................................................................................................44
Guideline 87. Initial scroll data .......................................................................................................................44
Guideline 67. Scroll totals ...............................................................................................................................44
Guideline 68. Separating occurrences in multi-line scrolls .............................................................................45
Guideline 69. Row selection method ...............................................................................................................47
Guideline 70. Row action method ...................................................................................................................47
Guideline 71. Scroll sort method .....................................................................................................................48
Guideline 72. Dynamic scroll columns............................................................................................................48
Guideline 73. Column title position.................................................................................................................49
Guideline 74. Column title underlines .............................................................................................................49
Guideline 75. Column titles for Description columns .....................................................................................50
Labels and Static Text ............................................................................................................................. 50
Guideline 76. Use terse text.............................................................................................................................50
Guideline 77. When to use punctuation...........................................................................................................50
Guideline 78. Text justification .......................................................................................................................50
Guideline 79. Label and edit boxes alignment.................................................................................................50
Guideline 80. Abbreviations............................................................................................................................51
Guideline 81. Text capitalization.....................................................................................................................51
Implementation Considerations .............................................................................................................. 51
Guideline 82. When to use RFT descriptions ..................................................................................................51
Guideline 84. Using work pages......................................................................................................................51
Guideline 85. Non-visible, informational labels..............................................................................................52
Guideline 86. When to use sub-pages..............................................................................................................52
User Navigation and Prompting ............................................................................................................. 52
Dialog Boxes ........................................................................................................................................... 52
Guideline 90. Dialog box types and usage.......................................................................................................52
Search Dialogs ......................................................................................................................................................53
Guideline 91. Search dialogs and search records.............................................................................................53
Message Dialogs ...................................................................................................................................................53
Guideline 92. When to use message dialogs....................................................................................................53
Guideline 93. Message text..............................................................................................................................53
Guideline 94. Message types and associated icons..........................................................................................53
Guideline 95. Provide help in error messages..................................................................................................53
Application Prompt Dialogs..................................................................................................................................54
Guideline 96. When to use application prompt dialogs ...................................................................................54
Guideline 97. Application prompt dialog titles................................................................................................54
Guideline 110. Dynamic Selection criteria wildcards .....................................................................................54
Menus ...................................................................................................................................................... 55
Menu Items ...........................................................................................................................................................55
Guideline 102. Menu item position .................................................................................................................55
Guideline 103. Menu item groups ...................................................................................................................55
Guideline 104. Verb-noun tense ......................................................................................................................55
Actions ..................................................................................................................................................................55
Guideline 105. Specify appropriate actions for a page group..........................................................................55
PeopleCode ............................................................................................................................................. 55
Guideline 111. When to use MessageBox() vs. MsgGet()...............................................................................55
Guideline 112. Assigning literal values to display fields.................................................................................56

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Preface

Preface

Introduction to Standards
The purpose of the PeopleSoft application user interface standards is to define the look and feel of
PeopleSoft applications. That includes defining standards for the graphical user interface (GUI) as well as
application navigation.
In addition to standards specific to PeopleSoft applications, certain operating system (Windows) guidelines
are also discussed.
This guide includes:
• Introduction to user interface design
• Page, control, menu, and icon guidelines
• Standard messages
• Standard abbreviations for field labels
The standards outlined in this guide represent an ongoing design make over of the PeopleSoft graphical
user interface. As more functionality is added to PeopleTools, these standards will be updated.
Our aim is to follow current industry recognized standards whenever applicable. In some cases, we are not
able to follow these standards because of special features, or in some cases, limitations in PeopleTools. In
such cases, we have defined custom standards that follow the intent of the industry recognized standards as
much as possible.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 1 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Preface

PeopleSoft Application Components

A PeopleSoft application consists of a collection of separate and interconnected pages and components.
Pages are the primary user interface component of a PeopleSoft application. Components are used to
organize applications.
Within each application window are menus containing the pages used to enter and access database data.
Pages are also used to house actions you can perform, such as inserting or updating rows of data on a SQL
table. These pages are directly linked to one or more tables in your application database.

Parts of the Window

The following diagram shows a typical page containing a title bar, menu bar, pulldown menus, toolbar ,
application page area, and status bar.

Title bar

Menu bar

Tool bar

Pull-down menu

Application
panel area

Menu Tabs

Status bar

Parts of an Application Window

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 2 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Preface

WEB Browser Menu

Bar

Navigation Bar

Menu Tabs

Row Action
Buttons

Application
panel area

Status bar

Parts of an Application Page

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 3 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Preface

Standard Controls
The following diagram shows a page highlighting the standard controls used in PeopleSoft applications.

Image

Frame Bar

Group Box

Search Button

Drop
Down List

Command Push
Buttons

Standard Controls

User Interface Design Principles

This section summarizes the basic principles of the interface design for PeopleSoft applications. It also
includes techniques and methodologies employed in an effective human-computer interface design process.

User-Centered Design

The User is in Control

One of the most important principles of user interface design is a user should always feel in control of the
software, rather than feeling controlled by the software. This principle has several implications, such as:
• Make software applications as interactive, responsive, and as modeless as possible. When you do
use modes, they should be obvious, visible, the result of choice, and easy to cancel.
PeopleSoft Developer’s Reference Manual Version 2.0
ps_page_standards Page 4 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Preface

• Users initiate actions, not the computer or the software. A user plays an active, rather than
reactive role. Task automation and constraints can still exist, but they should be implemented in a way
that makes a user to feel they are in control. There is nothing more frustrating than software that tries
to control the user. Except maybe software that doesn’t work.
• A user should be able to customize aspects of the interface. This means that software should
reflect user settings for different properties of the environment such as color, fonts, or other options.

Progressive Disclosure
Trying to maximize your application’s functionality while still maintaining its simplicity can compromise
application design. You must aim to achieve a balance between these objectives to achieve an effective
user interface. Business applications, by nature, must present a large amount of information. To do so
without overwhelming end-users, you can use a method called Progressive Disclosure; organizing
information so that it is only shown at the appropriate time. Hiding some information from users reduces
the amount of information they have to process, which simplifies the interface. A basic example is clicking
a drop-down menu displaying its choices. Or, the use of dialog boxes to reduce the number of menu
options. You can use a number of features in interface design to organize and present large amounts of
information.
Be careful not to use special, nonstandard techniques for revealing information or to try to force users
down a path. This can make the interface frustrating or cumbersome.

Consistency
By adhering to user interface design standards outlined in this guide, your users will gain the benefit of
acquired knowledge that they can then transfer to new applications or tasks. They can learn new things
more quickly, and focus more on the business processes because they do not need to spend time trying to
learning some new way to accomplish the same task. That is, consistency makes applications familiar and
predictable.
Consistency is important through all aspects of the interface, including names of commands, visual
presentation of information, and operational behavior. Designing consistent applications requires several
considerations:
• Product consistency. Present common functions using a consistent set of commands and interfaces.
Use the same commands to execute functions that seem similar to the user.
• Operating environment consistency. By maintaining a high level of consistency between the
interaction and interface conventions provided by Windows, your software will benefit from the user’s
ability to apply interaction skills the user has already learned.
• Using metaphors. If a particular behavior is more characteristic of a different object than the one
proposed, the user may have difficulty learning to associate that behavior with an object. For example,
an incinerator communicates a different model than a wastebasket for the recoverability of objects
placed in it.

Aesthetics
Visual design is an important part of an application’s interface. Visual elements provide important cues to
the interaction behavior of particular objects. At the same time, remember that every visual element that
appears on the screen potentially competes for attention. Provide a pleasant environment that clearly
contributes to the user’s understanding of the information presented. This guide aims to provide guidelines
for visual layout of your PeopleSoft applications.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 5 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Preface
Feedback
Provide immediate feedback for user actions and behaviors. Use visual (and sometimes audio) cues that
confirm that the software is responding to input. Whenever possible, provide the user with information
regarding the state of a process and how to cancel that process if that is an option. Nothing is more
disconcerting than a screen that appears to be doing nothing. User’s will typically only tolerate no more
than a few seconds of an unresponsive interface.

Directness
Design your software so that you users can easily and directly manipulate the information they see. You
user’s should readily see the visual cause-and-effect relationship between the actions they take and the
objects on the screen.
Provide users with a direct and intuitive interface to accomplish a task. Use familiar metaphors so that the
user can transfer knowledge and experience by predicting behavior and spend their time concentrating on
the tasks. However, you don’t need to limit a computer-based implementation to its “real world”
counterpart. The objective of using metaphor in the interface is to provide a cognitive bridge; the metaphor
is not an end in itself.
In addition, metaphors help transfer the user’s recognition, rather than recollection. People generally
remember the meaning associated with a familiar object rather than the name of a particular command.

Forgiveness
Users like to explore applications. They often learn via trial and error. A good interface allows users to
experiment while warning them about potential situations where they may damage the system or data.
Even better make actions reversible or recoverable.
Even within the best designed interface, users make mistakes. These mistakes can be both physical
(accidentally pointing to the wrong command or data) and mental (making a wrong decision about which
command or data to select). An effective design accommodates the kinds of potential user errors and
makes it easy for the user to recover.

Special Considerations
To develop for the widest audience, consider international users and users with disabilities. Including
these users as part of your planning and design cycle is the best way to ensure that you can accommodate
them.

Effective Visual Communication

What we see influences how we feel and what we understand. Visual information communicates very
powerfully. We organize what we read and how we think about information by grouping it spatially. We
read text by scanning the shapes of groups of letters. In addition, visuals include emotional cues that
motivate, direct, or distract. We tend to describe graphic information with adjectives like “slick,” “boring,”
“cool,” “conservative,” or “fabulous.”

Organization and Composition

Effective visual design serves a greater purpose than decoration; it is an important tool for communication.
How you organize information on the screen can make the difference between a design that communicates
a message and one that leaves users puzzled or overwhelmed.
We read a screen in the same way we read other forms of information. In western countries, this means
left to right, top to bottom. The eye is always attracted to the colored elements before black and white, to
isolated elements before elements in a group, and to graphics before text.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 6 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Preface
All visual elements influence one another. Effective design depends completely on context. In a graphical
user interface, a graphic element and its function are completely interrelated. A graphical interface needs
to function intuitively: it needs to look the way it works and work the way it looks.

Using Color
Color is a very important aesthetic property in the visual interface. Because color has attractive qualities,
use it to identify things in the interface to which you want to draw a user’s attention; for example, the
current selection or an input error. Color has an associative aspect as well: we often assume there is a
relationship between items of the same color. Color also carries with it emotional or psychological
qualities. For example, colors are often categorized as being cool or warm.
When used indiscriminately, color can have a very negative or distracting effect. It can affect not only a
user’s reaction to your software but productivity as well, by making it difficult to focus on a task.

Icon Design
Use icons throughout the interface to represent objects. Because icons represent your software’s objects, it
is important to not only supply effective icons, but to design them to effectively communicate their
purpose. Whenever possible, design your software to use existing icons that represent the action. Don’t
needlessly create icons when a common icon is available.
User recognition and recollection are two important factors to consider in icon design. Recognition means
that the icon is identifiable by users and easily associated with a particular object. Support user recognition
by using effective metaphors. Use real-world objects to represent abstract ideas so that users can draw
from previous learning and experiences. To facilitate recollection, design your icons to be simple and
distinct.
Applying the icon consistently also helps build recollection; therefore design your small (16- by 16-pixel)
icons to be as similar as possible to their larger (32- by 32-pixel) counterparts. It is generally best to try to
preserve general shape and any distinctive detail.

Designing Graphics
When designing pictorial representation of objects, whether they are icons or graphical buttons, begin by
defining the icon’s purpose as well as its use. You can then discuss other possible ideas, concentrating on
real-world metaphors. It is often difficult to design icons that define operations or processes⎯activities
that rely on verbs. Consider using nouns instead. For example, scissors can represent the idea of Cut.
Use an illustrative, rather than a symbolic style. Illustrative icons tend to communicate metaphorical
concepts more effectively than abstract symbols. However, in designing an icon based on a real-world
object, use only the appropriate amount of detail than is really necessary for user recognition and recall.
Where possible and appropriate, use perspective and dimensionality (lighting and shadow) to better
communicate the real-world representation.
Consistency is also important in icon design. As with other interface elements, design your icons assuming
a light source from the upper left. In addition, make certain the scale (size) and orientation of your icons is
consistent with the other objects to which it is related and fits well within the working environment.

General Guidelines

Guideline 1. Follow the guidelines

It’s sometimes difficult to strike an acceptable balance between adhering to standards and maintaining
innovation, enthusiasm, and productivity. PeopleSoft has already set high industry standards in product
innovation, ethical business practices, and customer service; work to do the same in user interface design
standards. For these guidelines to be effective, each of us has a responsibility to:
• Follow them. We believe they are reasonable.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 7 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Preface

• Challenge them. They are neither perfect nor finished. As we gain experience using them, they’ll be
updated.
Apply common sense and good business judgment. These guidelines address “normal” design
circumstances. In instances where “normal” isn’t normal, be creative.
With that in mind, PeopleSoft applications should follow the stated guidelines in this guide. Submit
guideline change suggestions to the PeopleSoft Standards Group or your team leaders. Members of the
Standards Groups Consist of:

Scott Johnson OIT Configuration Management (Group Leader)

Wendy Showalter Brick Medical Center
Kathy Braidic PeopleSoft Financials
Michael Boyle PeopleSoft HR
Crystal Monzalvo PeopleSoft HR
Lou Zuniga Applications Infrastructure

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 8 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Fundamental Guidelines

Fundamental Guidelines

Guideline 2. Make fabulous pages

The goal of these guidelines is to promote consistent, balanced, and visually appealing—in a word,
fabulous—pages. What makes a fabulous page? There are certain obvious attributes that are quantifiable,
such as logical organization, presenting the right level of detail, and grouping information to show
associations and relationships. However, there are also more subjective qualities, such as balance,
symmetry, visual clarity, and ease of use, that are equally important. We have attempted to define
standards that address all of these considerations, while realizing that a human designer is the best judge of
what works in a particular situation. Therefore, we have built in a little fuzziness. As a designer, you must
use your best judgment to interpret how the standards apply to the particular needs of your page. If you
need to squeeze things a bit here, add a little extra space there, or stuff an extra field into the key to make a
page truly fabulous, then, by all means, go for it.
If you finish designing a page and you’ve followed all the guidelines, but it still doesn’t feel fabulous, here
are some suggestions:
• Look at the examples throughout this guide to get ideas about techniques that work. Perhaps you can
apply or at least adapt these techniques to your page.
• Focus on alignment, spacing, and balance. Visual lines of sight, groupings, and axes of symmetry are
pleasing to the eye. You can strengthen these visual elements by aligning fields in columns or leaving
extra white space around groups of related fields to set them apart or enhance an axis of symmetry.
• Don’t be too hard on yourself. Some pages are so boring, there is no way to make them fabulous.

Guideline 3. General organization of information

Organize information from top left to bottom right in a page. Include most important information at top.
Use frames or group boxes to group related fields and indicate the hierarchy of information on a page. Use
the following guidelines for grouping information.
• Keys – Group all keys at the top of a page in the area above the first scroll level(including Business Unit
and SetID).
• Level 0 – Place Level 0 data in one or more frame/group boxes. (Group boxes are used if more than one
grouping is used, or if the group box label is necessary to differentiate them.)
• Level 1-3 – Use the ‘Building Block’ approach for nesting frames/group boxes and scrolls. Data items in
each subsequent level should be enclosed by a frame/group box. Note that the frame/group box of one
level rests on the top of the frame/group box of the level beneath it like a series of building blocks.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 9 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Fundamental Guidelines
ddd
Keys

Level 0 data

Level 1 data

Level 2 data

Roman Column page layout

Guideline 4. Sparsely populated pages

If a page is not filled from top to bottom, use a frame or group box around the data, with left and right sides
indented 2 grid units from the page borders and the bottom border just below the lowest field on the page.

ddd
Keys

Field 1:
Field 2:

Sparsely populated page

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 1 0 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Fundamental Guidelines

Guideline 5. Mostly populated pages

If the fields on a page extend to within a few lines of the bottom, spread out the fields by 1-2 grid units to
fill the entire page, and put the bottom frame border 2 grid units from the bottom border of the page.

ddd
Keys

Field 1:

Field 2:

Field 3:

Field 4:

Field 5:

Field 6:

Field 7:

Field 8:

Mostly populated page

Guideline 6. Grouping related information in the same scroll level

Use frames or group boxes to group related fields that are in the same scroll level. If there are too many
frames/group boxes and the page looks cluttered, vary the spacing (vertical and horizontal) as an
alternative method of grouping.

Guideline 7. Use the whole page width

When space is limited, do not limit field placement to a single column; arrange page fields and controls to
use the whole page width.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 1 1 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Types of Pages

Types of Pages

Guideline 8. Page functionality and layout

Page layout should be dictated by functionality. Before designing a page, analyze the functional
requirements using the criteria listed below. Model your page layout after the examples below that have
similar functionality.

Page Usage
Standard (maintenance and inquiry)—used for input, maintenance, and inquiry of table data and
transactions. The intended audience for this type of page is a regular or infrequent user who values
descriptive labels, related displays, and other context information.

Example of standard maintenance page

Express data entry—used to expedite data entry. The intended audience for this type of page is an
experienced data entry clerk who values speed and ease of data entry. Express data entry pages often have
a much denser display of information that requires special guidelines for layout and spacing.
Process management—used to initiate and manage batch, report, or on-line processes. The intended
audience for this type of page is an operator who regularly runs such processes and who values easy access
to all the commands, status information, and related data necessary to complete the processes with
maximum efficiency.
PeopleSoft Developer’s Reference Manual Version 2.0
ps_page_standards Page 1 2 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Types of Pages

Data Access Method

Standard search dialog—used to access a record by a primary or alternate key. In conjunction with
search list processing (select from list, next in list, previous in list, and so on), the search dialog provides a
good method to access a set of records (and their child records) using static search criteria. The Build
Query and Use Query search dialog options make the definition of this search criteria accessible to the
user. A search dialog can also be used as a method of security to secure rows of data.
Dynamic selection criteria—used to access a set of records using dynamic criteria that are specified on
the page itself. Typically, the user enters the selection criteria and presses a “Fetch” or “search” button on
the page to display the records that meet the criteria in a scroll. This type of data access is useful for
inquiries or updates where the user must dynamically determine the record or set of records upon which to
operate. It is also useful as a beginning point for drilldown. In general, it enables users to stay on a page
and retrieve multiple sets of data.

No search record—used for navigation or process management where the page is essentially a “command
console” with pushbuttons and context information, but no real data.

Layout Style

Detail Page—contains information about one row of data at a time (no scrolls).

List Page—contains a scroll bar with multiple rows of data from the same table or view. Generally, each
row in the scroll is represented as a single line on the page, like in a listbox or spreadsheet. The data can
be edited directly in the scroll, or a row can be “selected” to cause drilldown to a detail page or some other
action.

List/Detail Combo Page—contains a list area at the top of the page, but the user can select a row of data
from the list to be displayed and manipulated in more detail at the bottom of the page.

Multi-Scroll Page—contains multiple scroll levels and a combination of detail and list page attributes.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 1 3 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Control Placement and Spacing

Control Placement and Spacing

Guideline 9. Page grid size

Use the standard grid for placement and sizing of controls whenever possible. The standard page grid is 4
pixels by 4 pixels. The space between two grid points is called a grid unit or GU. Therefore, one GU
equals four pixels.

Guideline 10. Standard line spacing (vertical spacing)

Line spacing between fields and controls should be visually consistent on a page, particularly within a
given group box or frame. The recommended line spacing depends on the type of control and the amount
of available space on the page. No page should exceed two 800 X 600 screens in length. Use grid units
(GU) to create a consistent space.

2 GU between frames
and panel borders

2 GU spacing in
key frame

2 GU spacing
between frames

4 GU indent inside
frame or group box

2 GU between
edit boxes

Line Spacing

Use the following guidelines:

„ Display-Only fields—Two GU between fields; Two GU between field and frame.

„ Edit Fields and Drop-down List boxes—Two GU between fields when there is sufficient space on the

page; minimum of one GU between fields on a crowded page; use the same spacing between edit field and
frame as used between fields.
„ Radio Buttons and Check Boxes—One GU between radio buttons and check boxes; Two GU between

radio buttons/check boxes and the enclosing group box.

Note that these vertical spacing guidelines are somewhat flexible. You can use anywhere from one to four
GU of vertical spacing if your page requires it to look balanced and visually appealing.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 1 4 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Control Placement and Spacing

The two GU spacing between edit boxes is meant to accommodate multi-line translated label text. If you
reduce this space, you will not be appreciated by our international friends.

Guideline 11. Frame and group box spacing

The standard vertical and horizontal spacing between frames/group boxes is two GU. This spacing also
should be used for nested frames/group boxes and between frames/group boxes and page borders.
Fields inside group boxes or frames should be horizontally indented three GU.

Guideline 12. Frame spacing

The standard vertical and horizontal spacing frames are two GU. This spacing also should be used for the
separation between group boxes and page borders.

Frame spacing

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 1 5 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Control Placement and Spacing

Guideline 13. Minimum horizontal spacing between labels and fields

Left-align labels and, for translations to other languages, leave at least 20% of the label length in extra
space between the longest label and field. If this amount of space “looks bad,” you can leave less space,
down to a minimum of one GU—however, this will not make you popular with our international
translators and developers.

An additional
20% space is
automatically
included for
field labels.

Label Space

Guideline 14. Horizontal spacing between fields and related displays

Where space allows, leave two grid units between a field and its related display. For the case of a edit field
with prompt, leave two grid units between the prompt button and the related display. If there are related
displays on two or more consecutive lines, left align them, but do not move a related display too far from
its control field or the relationship between the two may be difficult to see.

Guideline 15. Horizontal spacing between fields

Where space allows, leave four grid units between fields horizontally. Leave more horizontal space
between fields if it allows you to align fields in columns.

Guideline 16. Multi-line labels

Avoid using multi-line labels, except for column titles in a scroll. (Multi-line labels are used for
international translations.)
PeopleSoft Developer’s Reference Manual Version 2.0
ps_page_standards Page 1 6 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Control Placement and Spacing

Guideline 17. Pushbutton placement and spacing

If a pushbutton has a direct affect on any other control in the window, place the pushbutton near the related
control. When there are a number of pushbuttons on a page, try to arrange them in one of two ways: 1)
stacked along the right side of the page, or 2) in a horizontal line. (See the discussion of Scrolls for more
information on placement of pushbuttons in scrolls.)

Text Pushbutton vertical spacing

Text Pushbutton horizontal spacing

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 1 7 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Control Placement and Spacing

Guideline 18. Placement of “scroll population” pushbuttons

In general, pushbuttons that populate a scroll region using ScrollSelect logic should be placed above the
scroll. Pushbuttons that affect row selection or default row values should also be placed above the scroll.
Examples of this kind of pushbutton include “Fetch”, “Search”, “Select All”, and “Unselect All”.

Place pushbuttons that populate a scroll region above the scroll

As a secondary alternative, scroll population pushbuttons may be placed to the left of the scroll region they
affect, in a separate frame or group box.

Alternatively, scroll population pushbuttons can be placed to the left of the scroll

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 1 8 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Control Placement and Spacing

Guideline 19. Placement of “scroll action” pushbuttons

In general, pushbuttons that perform an action on selected rows in a list scroll should be centered below the
scroll in a separate frame or group box. Examples of this kind of pushbutton include “Delete”, “Detail”,
and “Print”.

Place pushbuttons that perform row actions centered below the scroll

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 1 9 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Control Placement and Spacing
As a secondary alternative, scroll action pushbuttons may be placed to the right of the scroll region they
operate on, in a separate frame or group box.

Alternatively, scroll action pushbuttons can be placed to the right of the scroll

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 2 0 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Control Placement and Spacing

Guideline 19a. Placement of “application toolbar” pushbuttons.

If your page contains four or more small icon pushbuttons, you can arrange them as an “application
toolbar” at the top of the page (or directly above the page area they control).

Application toolbar

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 2 1 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Detailed Design Considerations

Detailed Design Considerations

Guideline 20. Page title placement

Page titles should not appear on the page. They are displayed in the status bar.

Guideline 21. Date format

Where space allows, use a date format that includes the two-digit century. For example, ‘1995’ rather than
‘95’.

Guideline 22. Keys

Keys should appear in the same order as the search record. Keys should use the standard style
conventions: bold labels and normal display values. If there are exactly two keys, and the first key is
Business Unit or SetID, arrange the keys horizontally on one line. If there are more than two keys or
related displays are desired, left justify the keys in a column. If one or more of the keys has a description
field (DESCR, DESCRSHORT, and so on), the description field should also be included in the key frame,
whether it is editable or display-only. If it fits, place the description field to the right of the key field it
describes. Otherwise put it on the line below the key field it describes.
If the page has a small number of non-key fields at Level 0, you can include the fields in the key frame to
eliminate the visual clutter of an extra frame. Critical non-key fields, such as status’s or Unit of Measure,
can also be placed in the key frame to highlight their importance and increase their visibility.
In general, use four GU horizontal spacing between fields in the key frame. However, if the keys come
close to filling the whole width of the frame, you can spread them out across the entire width to create a
more balanced look. You can also add extra spacing to visually separate key fields from alternate key
fields or critical non-key fields in the key frame.

Implementation Tip. Use sub-pages for common key frame groupings.

Key frame

As with all spacing guidelines, this guideline should be applied where available page real estate allows.
Bear in mind that the closer we adhere to this standard, the easier it will be to translate pages to other
languages.

Note that the line-wrapping issue is most critical when RFT Long description labels are used. If RFT Short
labels are used, if you allow enough space for 10-character labels, line-wrapping will not occur.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 2 2 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Detailed Design Considerations

Vertical stacking of keys

A description field in the key frame should not have a label if it is positioned next to the key it describes.
If you have an edit box in the key frame, leave one GU of vertical space between the edit box and the
key frame; this means two GU of vertical space between the display-only fields and the key frame.

Description edit box in key frame

Guideline 23. Business Unit and SetID as Keys

Do not display a description for Business Unit or SetID when they appear as keys. Always use the RFT
Short labels: “Unit” and “SetID”.

Guideline 24. EMPLID and EMPL_RCD as keys

If key is EMPLID use layout one below. If keys are EMPLID, EMPL_RCD use layout Two. ‘Name’ field
has no label and is three GU from left edge. EMPL_RCD is three GU from right edge. ID is 17 GUs to
the right of ‘Name’ display.

17 GU

Indent 3 GU Name

Layout One – EMPLID as key

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 2 3 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Detailed Design Considerations

17 GU

Indent 3 GU Name Indent 3 GU

Layout 2 – EMPLID and EMPL_RCD as keys

Guideline 25. Currency designation

Use the PeopleTools currency control formatting feature to control the currency symbol displayed before
currency amounts and the scale factor and precision of those amounts.

Guideline 26. Effective Dates

Enterable form is Effective Date edit box followed by drop-down listbox for Effective Status. Display-
only form is Effective Date followed by text of “Active” or “Inactive.”
In a page group with multiple pages controlled by the same Effective Date, use the enterable form on the
first page and the display only form on subsequent pages.

Effective Date - Primary Page

Effective Date - Subsequent Pages

Implementation Tip. Avoid using static text for the EFF_STATUS “Status” label. Rather, in the Page
Designer’s Field Use dialog, turn on the Show Label option for invisible, display-only EFF_STATUS
field. The label of the XLATSHORTNAME related display field should be turned off.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 2 4 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Detailed Design Considerations

Guideline 27. Run control page for reports

Use the standard run control page format shown below for submitting reports via SQR or Crystal Reports.
Note that the user initiates processes by choosing “Run” or “Run with Defaults” from the toolbar or Edit
menu.

Keyframe Includes
Run Control ID

Report Parameters
are Listed in Level 0
Group Box

Run control page for reports

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 2 5 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Detailed Design Considerations

Guideline 28. Run control page for COBOL processes

Use the standard run control page format shown below for submitting COBOL processes. Note that the
user initiates processes by choosing “Run”.

Run control page for COBOL processes

Guideline 29. Crowded pages

If a page is too crowded to follow all the layout and spacing standards, consider putting the data on two
pages. Too much data squeezed together on a page reduces usability and increases eye strain.
However, if the functionality requires implementation as a single page, here are some techniques to
conserve space.
• Put level 0 fields into the key frame, rather than putting them in a separate level 0 frame or group box.
• Reduce the vertical spacing between frames from two to one GU.
Exception: the spacing around the key frame should always be two GU. Reduce the vertical space at the
bottom of the page from two to one GU.
PeopleSoft Developer’s Reference Manual Version 2.0
ps_page_standards Page 2 6 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Detailed Design Considerations

• Reduce the horizontal space between frame or group box and scroll bar from two to one GU.
• Replace groups of radio buttons with drop-down lists.
• Group label text together for multiple fields, separated by a slash. Do not put a slash character (or any
other character) between the edit boxes.

Correct. No slash between edit fields

Wrong. Slash between edit fields is unnecessary

• Reduce the amount of extra label space left for international translations.
• Put long field labels above the fields, rather than to the left of them.
• Turn off the prompt button that appears to the right of edit boxes that have prompt tables.
• Change the display length of fields to be smaller than the actual field length.
• If there is no space for a frame, use a horizontal line to separate regions of the page.

Guideline 30. Currency amount fields

The enterable form is the amount field followed immediately by the currency code field, with no space
separating the fields and no label on the currency code field.

Currency amount field -- enterable form

The display-only form is similar to the enterable form: the amount field followed immediately by the
currency code field, with no space separating the fields. In a columnar scroll, the column title of the
amount field should be right justified with the right edge of the currency code field. The amount field and
currency code field should use “Auto” justification. This will result in the amount field being right-
justified and the currency code field being left-justified.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 2 7 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Detailed Design Considerations

Currency amount field -- display-only form in a columnar scroll

Guideline 31. Scroll totals for multiple currency amounts

If a scroll contains amounts in multiple currencies, the message “*** Multiple Currencies ***” should be
displayed in the totals area instead of summing the amounts. The message should be right-justified with
the right edge of the currency code field.

Guideline 32. Currency code vs. currency description

As a general rule, use currency code instead of currency short description or long description on
transaction -oriented pages and where currency amount fields appear in a scroll.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 2 8 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Detailed Design Considerations

Guideline 33. Effective date and effective status on a list page

Effective Status should be displayed as a drop-down listbox when used in a List Page layout style, as
shown below. This form of Effective Date/Effective Status should only be used when each row in the
scroll is represented as a single line on the page.

Effective Date and Effective Status on a List Page

Guideline 34. Display size of currency amount fields

There are no specific guidelines for display size of currency amount fields. The general guideline is to
consider the size requirements of other currencies besides US Dollars. The field should be large enough to
support an amount about 2000 times the size of the US Dollar amount in order to handle most major
currencies.
For example, if the maximum expected value of a field is USD 10.00, the amount in Italian Lira would be
16,390 at current exchange rates.

Currency amount field in US dollars and Italian Lira

Guideline 35. Field Tab Order

In general, field tab order should flow from top left to bottom right on a page. The flow should reflect the
way the eye naturally scans information. Specific guidelines are as follows.
„ On a page with multiple scroll levels, the tab order should follow the scroll level order, from Level 0 to

Level 1, and so on.

„ Non-columnar page: within a frame or group box, the tab order should go from left to right on each line

from top to bottom.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 2 9 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Detailed Design Considerations

ddd
Key: Key Value

Field 1: Field 2: Field 3:

Field 4: Field 5:
Field 6:

„ Columnar page: within a frame or group box, the tab order should go from the top to the bottom of the

first column, then from the top to the bottom of the second column, and so on.

ddd
Key: Key Value

Field 1: Field 4:

Field 2: Field 5:

Field 3:

Field 6:

Field 7:

Field 8:

„ Fields that share the same label should follow consecutively in the tab order from left to right. See the

example of Expense Amount and Currency below.

„ On a page with scrolls, if there are Level 0 pushbuttons located at the bottom of the page (below the

scrolls), they should be placed at the beginning of the Level 0 tab order. The SetCursorPos function
should be used in RowInit PeopleCode set the initial cursor position to the top left field on the page.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 3 0 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Visual Graphic Design

Fonts & Colors

Guideline 40. Using color

Use color only to draw the user’s attention to something or to increase real world consistency. If there is
no reason to use color, use gray or black and white.

Guideline 41. Standard fonts and colors

Use standard PeopleSoft fonts and colors for all page fields and controls. If you choose “Use System
Default” for all fields and pages, the standard fonts and colors will be chosen automatically.

Standard Colors

Normal Error Overflow

Foreground StdFG ErrFG OvrFG
Background StdBG ErrBG OvrBG

Standard Color Values

Code Description
StdFG Window Text Color (Control Page)
StdBG Window Background Color (Control Page)
ErrFG White
ErrBG Bright Red
OvrFG White
OvrBG Bright Green
PnlBG Button Face Color (Control Page)

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 3 1 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design
Standard Fonts & Colors

Object Font Foreground Color Background Color

Page N/A N/A Button Face Color
(Control Page)
Edit box MS Sans Serif 8 Bold StdFG StdBG
Edit box with MS Sans Serif 8 Bold StdFG StdBG
prompt
Drop-down listbox MS Sans Serif 8 Bold StdFG StdBG
Check box MS Sans Serif 8 Bold StdFG StdBG
Static text MS Sans Serif 8 StdFG Button Face Color
Normal (Control Page)
Label MS Sans Serif 8 Bold StdFG Button Face Color
(Control Page)
Display-only field MS Sans Serif 8 StdFG Button Face Color
Normal (Control Page)
Pushbutton MS Sans Serif 8 Bold Button Text Color Button Face Color
(Control Page) (Control Page)
3D Highlights N/A Button Highlight Button Face Color
(Control Page) (Control Page)
3-D Shadows N/A Button Shadow Button Face Color
(Control Page) (Control Page)

Special Styles

Style Font Foreground Color Background Color

Dynamic Column MS Sans Serif 8 Bold StdFG PnlBG
Dynamic Label MS Sans Serif 8 Bold StdFG PnlBG

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 3 2 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design
The “Dynamic Column” style should be applied to drop-down list boxes used as dynamic scroll column
titles.

Dynamic scroll columns

The “Dynamic Label” style should be applied to display-only fields that are used as labels.

Page Controls
This chapter discusses how to apply GUI design standards to the various PeopleTools controls, such as edit
boxes, drop down lists, pushbuttons, and scroll bars in your pages. You’ll learn when to use certain
controls and when not to use certain controls. You’ll learn proper placement for these controls on your
page.

Use of Controls

Guideline 42. Page controller types and usage

Use the following controls to perform actions:
• Menu
• Toolbar button
• Command pushbutton
Use the following controls to set or select values:
• Edit box
• Edit box with prompt button
• Drop down list
• Check box
• Radio button
• Command Pushbutton
• Image
• Scroll bar

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 3 3 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design
Use the following controls to organize or clarify information on the screen and provide feedback to the
user:
• Display-only edit box
• Group box or frame
• Static text
• Static image

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 3 4 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design
Guideline 43. Use of Controls
Use the following table to determine the appropriate number of values based on the control type:

Control Number of Controls on Page Type of Controls

Pushbutton Max. of 6 per page Static action
Check box Max. of 10 per group Static set/select value
Radio button Max. of 6 per group box (after Static set/select value
6, use an edit box, drop down
list or edit box with prompt)
Drop down list Up to 20, display 1 selection at a Static set/select single value
(Translates only) time
Edit box with prompt Up to Windows limit in F4 Dynamic set/select single value;
button prompt, display 1 selection at a add value to list; use whenever
time in standard format F4 functionality is available

Guideline 44. Dependent controls

Gray dependent controls until they are available; they should be placed beneath or to the right of the
control they are dependent on. See the discussion of Hide vs. Gray under Edit Fields for more information
on dependent controls.

Guideline 45. Default values for controls

Provide default values for all controls when applicable. Note, many data entry fields may not have a
default value.

Guideline 45a. Display-only edit controls

Avoid using display-only check boxes, radio buttons, and drop down lists. Edit controls such as these
suggest to the user that they can change a value. If these controls are display-only, the user cannot change
the value. Use display-only edit fields instead.

Command Pushbuttons

Guideline 46. When to use command pushbuttons vs. radio buttons/check boxes
Before command pushbuttons were available in PeopleTools, radio buttons and check boxes were
sometimes used to initiate actions or processes. The new standard is to use command pushbuttons to
perform actions or initiate processes.
Use radio buttons or check boxes to set or select a value. Note that setting or selecting a value may result
in some “display actions,” such as enabling/disabling or hiding/showing other fields. Radio buttons and
check boxes should never be used to directly initiate a process, database update, or navigation action.

Guideline 47. When to use command pushbuttons vs. toolbar buttons

Use command pushbuttons to perform page-specific actions.
Use toolbar buttons to perform navigation or standard actions, such as “save”, “process”, “next in list”, and
so on.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 3 5 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design
Guideline 48. Pushbutton size
Pushbuttons in a list scroll page should use images instead of text and be “Small Image” size, which
accommodates standard 16 by 16 pixel images. The standard size for large image pushbuttons is “Large
Image” size, which accommodates standard 32 by 32 pixel images.
The standard size for text pushbuttons is 72 pixels wide by 24 pixels high. If the text is too long to fit in 72
pixels, the pushbutton can be made custom size and stretched wider. However, pushbuttons in a group
should all be the same size—as wide as necessary to accommodate the longest button text.

Standard pushbutton sizes

Guideline 49. When to use image pushbuttons vs. text pushbuttons

Use image pushbuttons sparingly, and only if the image is a common, recognizable metaphor (such as
print, fetch, or drilldown) or enhances the clarity and understanding of the action. Avoid mixing text and
image pushbuttons on the same page. Use standard PeopleSoft icons for all image pushbuttons.
The following table contains the current text and images for toolbar and command buttons.

General Application Functions Type Sizes 16x15 32x32

Approve Toolbar button 16x15

Command button 32x32
Calculate Toolbar button 16x15
Command button 32x32
Cancel Toolbar button 16x15
Command button 32x32
Copy Toolbar button 16x15
Command button 32x32
Create Toolbar button 16x15
Command button 32x32
Create All Toolbar button 16x15
Command button 32x32
Cut Toolbar button 16x15
Command button 32x32
Delete Row Toolbar button 16x15
Command button 32x32
Detail Toolbar button 16x15
Command button 32x32
PeopleSoft Developer’s Reference Manual Version 2.0
ps_page_standards Page 3 6 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

General Application Functions Type Sizes 16x15 32x32

Dial Toolbar button 16x15

Command button 32x32
Fetch Toolbar button 16x15
Command button 32x32
First Unworked Item in Work List Toolbar button 16x15
Command button 32x32
Hang Up Toolbar button 16x15
Command button 32x32
Hold Toolbar button 16x15
Command button 32x32
Insert Image Toolbar button 16x15
Command button 32x32
Insert Row Toolbar button 16x15
Command button 32x32
List Toolbar button 16x15
Command button 32x32
New Toolbar button 16x15
Command button 32x32
Next in List Toolbar button 16x15
Command button 32x32
Next Step Toolbar button 16x15
Command button 32x32
Open Toolbar button 16x15
Command button 32x32
Paste Toolbar button 16x15
Command button 32x32
Phone Log Toolbar button 16x15
Command button 32x32
Post Toolbar button 16x15
Command button 32x32
Previous in List Toolbar button 16x15
Command button 32x32
Print Toolbar button 16x15
Command button 32x32
Fetch (Refresh) Toolbar button 16x15
Command button 32x32
Run Toolbar button 16x15
Command button 32x32
Run with Defaults Toolbar button 16x15
Command button 32x32

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 3 7 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

General Application Functions Type Sizes 16x15 32x32

Save Toolbar button 16x15

Command button 32x32
Search Toolbar button 16x15
Command button 32x32
Send Mail Toolbar button 16x15
Command button 32x32
Unpost Toolbar button 16x15
Command button 32x32
Work List Toolbar button 16x15
Command button 32x32
Next Page Toolbar button 16x15
Command button 32x32
Previous Page Toolbar button 16x15
Command button 32x32
Next Page in Group Toolbar button 16x15
Command button 32x32
Previous Page in Group Toolbar button 16x15
Command button 32x32

Guideline 50. Command button text

If at all possible, use 10 or fewer characters for command button text.
As far as text labels go, here are the recommendations:
• Use the names shown in Guideline 49 for functions that have an icon. For example:
„ Clear instead of Erase
„ Search instead of Find
„ Run instead of Process
• Use Go To xxxx or View xxxx or Edit xxxx instead of Transfer for TransferPage buttons. Transfer is a
word that has many different meanings (bin-to-bin transfers, asset transfers, and so on).
• If a pushbutton requires additional information to complete the action, use an ellipses (...) as part of the
label text. Or, if a pushbutton requires a longer description, consider putting the pushbutton in a group
box, with the majority of the descriptive text in the group box title and terse text on the pushbutton itself.

Pushbuttons in a group box to handle long descriptions

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 3 8 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Check Boxes

Guideline 51. When to use check boxes

Use check boxes for option switches and other on/off data. Multiple related check boxes should be in a
group box.

Check Boxes

Guideline 52. Labels for check boxes

Put labels on the right without a question mark.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 3 9 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design
Guideline 53. When to use check boxes vs. radio buttons
If a field has a Yes/No Edit, use a check box. If a field has two values, but the values are not explicitly
Yes/No or On/Off, use a radio button (or a drop down list).
Field Values Type of Control to Use
Effective Status Active Radio buttons
Inactive
Post Status Posted Radio buttons
Unposted
General Ledger Installed Yes Check box
No
Confirm Check Numbers Yes Check box
No

Guideline 54. Grouping check boxes

Group related check boxes in a group box. Try to group check boxes vertically if space permits. If you
choose to group check boxes horizontally, allow extra space to accommodate translations to other
languages.
Size the width of the group box to the width of the longest check box text. Allow approximately 20% extra
space to accommodate translations to other languages. Make group boxes larger than the actual data if you
can enhance the balance or symmetry of the page.

Radio Buttons

Guideline 55. When to use radio buttons

Use radio buttons for single selection from a short, static list.

Radio Buttons

Guideline 56. Provide a default selection

Provide a default selection for a list of radio buttons. If “none” is an option, and other buttons are grayed,
then “none” should be selected. Only when all the buttons are grayed and “none” is not an option can you
have a list of radio buttons with no value selected.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 4 0 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Radio button required value

Guideline 57. Grouping radio buttons

Group related radio buttons in a group box. Size the width of the group box to the width of the longest
radio button text. Allow approximately 20% extra space to accommodate translations to other languages.
Try to group radio buttons vertically if space permits. If you choose to group radio buttons horizontally,
allow extra space to accommodate translations to other languages.

Drop Down Lists

Guideline 58. When to use drop down list vs. radio buttons
Use drop down lists for single selection of a static set of translate values when page real estate is limited or
when there are more than four to six choices.

Drop down list

Guideline 59. Provide a default value for drop down lists

Similar to radio buttons, provide a default value for drop down lists. Unless a drop down list is grayed, it
should always have a value.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 4 1 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Edit Fields

Guideline 60. Display length of edit fields

Use Average length unless a custom length is absolutely required. Bear in mind that using custom length
means that any Data Designer field length changes will not be automatically updated on the page.

Important Average length fields can potentially truncate the display of data if the characters are wider
than average. For example, uppercase Ws are wider than average, so a field value with many uppercase
Ws will likely be truncated on display.

Guideline 61. Hide vs. Gray

Adhere to the following items to determine when to gray or hide edit fields:
• Gray the text of temporarily unavailable options. Do not hide temporarily unavailable options.
“Temporarily unavailable” means that the control to make the option available is in the page group and
accessible to the user.
• Hide the text of dependent options where the user cannot control or clearly identify the dependency. In
this case, graying the text would be confusing because the user would see the disabled text but have no
idea how to enable it.
• Hide the text of options the user will never be able to access, such as options dependent on installation
configuration. For example, if Asset Management is not installed, the asset information fields on
Purchasing pages should be hidden.
• Hide the text of options if you want to reuse the page space for other options.
• Do not use graying or hiding to lead a user through a path in the application except when a control is
grayed until the control it depends upon is selected. For example, spouse birth date and marriage date are
not relevant unless ‘married’ marital status has been selected.

Guideline 62. Using long edit boxes

Use a long edit box for data entry that is too long to display in a single line text box.

Guideline 63. Label fields

All fields must have a label unless the label is absolutely obvious.
Exceptions include:
1. Related displays for descriptions.
2. Name within the HRMS system.
3. Certain other descriptions. In general, it should be really, really, unbelievably, unmistakably obvious
what is being displayed if a label is not provided.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 4 2 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design
Guideline 64. Prompt button
By default, the Application Processor displays a prompt button to the right of edit fields that have a prompt
table. Pressing the button has the same result as pressing the F4 key. The prompt button should only be
turned off in the following exception cases:
• Express pages designed for experienced users.
• List scrolls consisting of many edit boxes in a row that can be prompted.

Guideline 83. Hidden fields

If you don’t have enough hidden work fields to justify a work page, use the following guidelines for
positioning them on the page:
• Position near related visible field if space permits.
• Do not stack them on top of each other.
• Use a custom display length to shrink them down if space is tight.
• Do not place on top of frames, group boxes, or other visible objects.
• Use a text label that begins with “Hidden” to facilitate field ordering.

Scrolls

Guideline 65. Aligning scroll bars with frames or group boxes.

The group box should not touch the scroll bar; separate by 2 grid units. Align the scroll bar top and bottom
with the frame or group box top and bottom. Only group the information controlled by the scroll. If there
is not enough space for a group box label, use a frame. In a multi-scroll page, align the right side of the
lower level scroll bar with the outside of the preceding group or frame. The top of the scroll bar indicates
the limit of the fields to scroll and is aligned with the frame/group box for its level. Scroll bars are aligned
at the bottom.
The action button should be placed to the left side of the scroll.

Layout of a columnar scroll

When aligning scroll bars with a group box that is above the scroll bar, align scroll bars so that their right
edge sticks out to the right slightly (1 pixel) beyond the right edge of the frames and group boxes.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 4 3 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Guideline 66. Column titles

In a columnar scroll, put the label on top of each column. Left justify text labels. Right justify labels for
number and right, or decimal align numbers. When a scroll contains two columnar rows of data per
occurrence, use a slash (“/”) in the column title. When a scroll contains more than two columnar rows of
data per occurrence, place labels next to each field. Titles should be inside the frame. They should be 1
grid unit below the frame line and 1 grid unit above the first row of edit boxes.

Guideline 87. Initial scroll data

If the page has a Fetch button (which implies that the user can define or change the information that is
presented in the scroll), the page group should use INSTALLATION as the search record, and the user
causes the scroll to be populated by pushing the Fetch button.
If the page does not have a fetch button, the ScrollSelect should automatically happen during RowInit. In
essence, the user has no idea that the page uses ScrollSelect, and would expect it to behave like a normal
page.

Guideline 67. Scroll totals

The placement of scroll totals depends on the main focus of the page.
• Put the totals above the scroll if the emphasis of the page is on summary information, and the detail lines
are merely supporting information.
• Put the totals below the scroll if the detail lines are the main focus of the page, and the totals are meant to
support or confirm the detail.
• When in doubt, put totals below the scroll.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 4 4 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Scroll totals below detail lines

Guideline 68. Separating occurrences in multi-line scrolls

Use the following guidelines:
• If each occurrence has 2 or less rows, try to distinguish the occurrences with spacing and indentation
alone.
• If each occurrence has more than 2 rows or is difficult to distinguish with spacing and indentation alone,
use a "separator line" (a collapsed frame) between occurrences.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 4 5 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Multi-line scroll occurrence with separator

Multi-line scroll occurrence without separator

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 4 6 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Implementation Tip Use a “collapsed frame” to make the separator line between scroll occurrences. The
collapsed frame should be part of the scroll occurrence and should be placed above the first occurrence
fields. If the scroll has column titles, put the collapsed frame between the column titles and the fields. If
the scroll does not have column titles, overlay the collapsed frame on top of the top edge of the frame that
surrounds the scroll region.

Guideline 69. Row selection method

Use a check box on the left side of the scroll to indicate row selection. Row selection in a scroll is
analogous to item selection in a listbox: the functionality can be designed for single selection or multi-
selection.
The label above a row selection check box should be “Sel”.

Guideline 70. Row action method

Use a command pushbutton in the scroll to perform an action on a row. If multiple actions can be
performed on a row, use a row selection check box to indicate the row to be acted on, and two or more
command pushbuttons below the scroll to indicate the actions.
Alternatively, buttons can be in an “application toolbar” at the top of the page.
If the scroll is a “list scroll” with a single row per scroll, use a “Small Size” image pushbutton on the left
side of the scroll.
Examples of row actions: drilldown, print, post, reconcile, and so on.

Multiple row actions in a list scroll

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 4 7 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Single row action in a list scroll

Guideline 71. Scroll sort method

For typical situations, use a drop down list with sort options and a pushbutton to invoke the sort. Do not
invoke the sort when the user tabs off a field. The exception is a data entry page where keystrokes are to
be minimized.

Scroll sort method

Guideline 72. Dynamic scroll columns

Dynamic scroll columns allow the user to specify what data appears in a scroll column and how the data is
sorted. Because they are difficult to maintain, dynamic scroll columns should be used only in situations
where there are too many columns of data to display at once, and the user needs the ability to choose which
columns are displayed.
Dynamic scroll column titles should be represented as drop down lists. The user determines which column
to display by choosing one of the values in the drop-down.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 4 8 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Dynamic scroll columns

Guideline 73. Column title position

Column titles for display-only fields must be adjusted slightly in the Page Designer in order to appear
properly aligned in the Application Processor. The column title should be indented 1 GU to the right of the
display-only field. This adjustment is necessary because the data in a display-only field is offset from the
left edge of the field in order to be left-aligned with the data in an edit box.

Indent column titles of display-only fields to achieve left-alignment in Application Processor

Guideline 74. Column title underlines

Use “collapsed frames” as underlines beneath column titles in the following cases:
„ List scrolls with one or more display-only columns

„ List scrolls where you want to group multiple fields under a single column title

If a page meets any of the criteria described above, use the column title underline on all the columns in the
scroll, including editable columns, such as edit boxes, drop down lists, check boxes, and so on.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 4 9 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design
Guideline 75. Column titles for Description columns
As a general rule, try to group description columns with the fields they describe under a single column title.
In other words, avoid having column titles that say “Description”, “Short Descr”, and so on.

Correct -- Shared column title Wrong -- Separate Description column title

Labels and Static Text

Guideline 76. Use terse text

Use terse text for labels, menus, and all controls.

Guideline 77. When to use punctuation

Use a colon after a text label preceding a data entry field. Do not use a colon after a text label for a group
box or title bar or column titles.
Use a colon after a text label for a data entry field even if the text label is displayed above the field instead
of to the left of the field.

Label above an edit box

Column headings in scrolls should not have colons. Only use colons for individual field labels, whether
the label is in the standard position to the left of the field or positioned above the field.

Guideline 78. Text justification

Left justify static text prompts and data entry fields.

Guideline 79. Label and edit boxes alignment

Align labels and edit boxes in columns. All labels should be left aligned with other labels, and edit boxes
left aligned with other edit boxes. Only the left-most column of fields on the page must be left aligned.
In cases where there is no space to put a field label to the left of an edit box, you can put the label above
the field, left justified with the left edge of the edit box. This technique is useful for Long Edit fields. See
also Guideline 60.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 5 0 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Label above a long edit field

Guideline 80. Abbreviations

Avoid abbreviations in labels where possible. If an abbreviation is unavoidable, consult the appendix on
standard field label abbreviations.
Avoid using periods in field label abbreviations. The only exception is where the meaning of the
abbreviated word is ambiguous without the period.

Guideline 81. Text capitalization

Capitalize the first letter of each word, except prepositions, conjunctions, and articles that are not the first
word in the text. For example:
Insert Object
Paste Link
Use Smart Cut and Paste
Depreciate When in Service

Implementation Considerations

Guideline 82. When to use RFT descriptions

As a general rule, use a text label for a group box if it is unlikely the label will be reused many times. If
the group box label is a common one—such as Report Request Parameters—associate a RECORD.FIELD
with the group box and use the RFT short or RFT long description.
If you use a text label, make sure to blank out the Record name in the Change Record dialog.
If you want to use a RFT short or long label, and a valid record.field is not available, add a field to a work
record with the suffix _GB. If the page you are working on does not have an associated work record, add
the work field to the xx_PAGES_WRK record for the product (where xx is the identifier for the product).

WARNING Be careful when associating a record.field with group boxes in a scroll. If the group box is
defined at a different scroll level than the data in the scroll, but the group box is associated with the same
record as a field in the scroll, you may cause Page Buffer parameter errors.

Guideline 84. Using work pages

When a page requires the use of many hidden fields, place these fields on a work page for the page group
instead of hiding the fields within a corner of the page. What constitutes many? As a rule of thumb, if you
have more than five hidden work fields or a hidden scroll, use a work page. Work page names should have
the suffix _WRK. In the Menu Designer, work page menu items should have names that begin with the
prefix “Work.”
There are cases where it is impossible or impractical to use work pages for hidden fields:
• Related display fields.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 5 1 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

• Work record fields that are associated with a scroll. For example, a level 1 scroll area for the table
COST has ADJUST_WRK field hidden. You cannot separate the Work fields from the related database
fields (such as COST and ADJUST_WRK).

Guideline 85. Non-visible, informational labels

By default, the Page Designer assigns a label of “Frame” to all frames and “Scroll Bar” to all scroll bars.
These labels are never seen by the user. They appear only in the Change Label dialog and the Field Order
dialog.
Informational labels are useful when setting and reviewing field order, because they allow you to
distinguish one frame or scroll bar from another. The guideline is to use informational labels in cases
where field order is important. Specifically, this means the following:
• Use an informational label for all scroll bars. A level 1 scroll bar should be labeled “Level 1” or
something application-oriented, like “Journal Header.”
• Use an informational label for scroll level 1-3 frames. The field order guideline for most frames is to
put them at the top of the field order at level 0. For these level 0 frames, field order is irrelevant and
descriptive labels are unnecessary.

However, some frames must be ordered at level 1-3 because they are repeated as part of scroll occurrences
(for example, occurrence separators). Since field order is important for these frames, an informational
label is helpful. Use a label like Level 1 Separator, Bank Account Underline or something descriptive
like that.

Guideline 86. When to use sub-pages

Use sub-pages extensively. Use sub-pages not only for key frames, but also for any common groups of
fields. For example, SetID and As Of Date as report request criteria, or the standard address fields
(Address1, Address2, and so on).
Use the _SBP suffix for sub-page names. The rest of the name should be descriptive text. For example,
the Run Control key frame sub-page could be named PRCSRUNCNTL_SBP. If there is more than one
sub-page that goes together in a set, the suffixes should be SBP1, SBP2, and so on.

User Navigation and Prompting

This chapter discusses how to design dialog boxes and menus so they use common navigation and user
prompting techniques. This chapter is under construction.

Dialog Boxes

Guideline 90. Dialog box types and usage

Some application commands require additional information from the user before they can be completed.
For example, if the user selects File Open, the application needs the name of the file and where it is stored.
If the user does not or cannot supply the information when issuing the command, the application can
request the information by displaying a special window called a dialog box. A dialog box contains controls
that collect the user’s information and choices.
PeopleTools supports several types of “application modal” dialog boxes. Application Modal means that
the user must respond to the dialog box before continuing work in the current application window, but can
switch to and work in other applications without responding. The types of application modal dialog boxes
are as follows:
• Search dialog
• Message dialog

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 5 2 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

• Edit prompt (F4) dialog

• Application prompt dialog

Search Dialogs

Guideline 91. Search dialogs and search records

Search dialogs are used to select a data row or set of data rows to work with in a page group. Search
dialogs pop-up when the user navigates to a page via a menu item or toolbar button if the page has a search
record associated with it. The search dialog contains one field for each primary key and alternate key
defined on the search record.
Use search records whenever possible to define the data access for a page group.

Message Dialogs

Guideline 92. When to use message dialogs

Use message dialogs to display error, warning, and informational messages to the user.

Guideline 93. Message text

Adhere to PeopleSoft Style Guide for proper grammar, voice, and style when writing messages. Messages
text should be an affirmative statement.

Guideline 94. Message types and associated icons

Icon Severity Description

Message Provides information about the results of commands.
Offers no user choices; user acknowledges message by
clicking OK button.
Message Alerts user to a situation that requires user decision
before proceeding. The message is always phrased as
a question; user responds to message by clicking OK or
Cancel button (or Yes/No).
Warning Alerts user to a potential error condition or situation that
requires user decision before proceeding, such as an
impending action with a potentially destructive,
irreversible consequence. The message can be a
question; user responds to message by clicking OK or
Cancel button (or Yes/No).
Error Informs user of an application-related problem that must
be corrected before data can be saved; user
acknowledges message by clicking OK button.

Guideline 95. Provide help in error messages

Provide an explanation or help button with suggestions about how to correct an error if valid.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 5 3 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Application Prompt Dialogs

Guideline 96. When to use application prompt dialogs

Use application prompt dialogs to obtain additional information that is necessary to perform a user-initiated
action. Application prompt dialogs should be invoked when the user presses a command pushbutton.
Typically, the command pushbutton should have a terse text description of the action, followed by “...”
For example, if you have a “Copy from Template” function, you can implement it as a pushbutton and an
application prompt dialog. Pressing the “Copy from Template...” pushbutton on the page would cause a
prompt dialog to appear where the user could specify the name of the template to use. This approach
follows the “Progressive Disclosure” concept of good user interface design. The template field is not
relevant to the main data on the page. Thus, it is shown to the user only when it is needed to perform the
Copy action.

Guideline 97. Application prompt dialog titles

The title of an application prompt dialog should correspond to the text on the pushbutton that was used to
invoke it, minus the “...”

Guideline 110. Dynamic Selection criteria wildcards

This wildcard standard only applies to strings; it does not refer to dates or numeric fields. This standard is
only implemented in specific dynamic selection criteria page fields. The key points of this standard are as
follows:
• In general, we assume an exact match is desired unless the user enters a wildcard character. The
exception to this rule is descriptive text fields, in which case, we interpret the selection criteria to mean
“find this string anywhere in the field.”
• If the user leaves a field empty in their selection criteria, it is interpreted as meaning “exclude this field
from the where clause.”
• The SQL wildcards (%, _) as well as the DOS/UNIX wildcards (*, ?) are both accepted .
• As a shorthand format, if the first character is an exclamation point (!) it is interpreted as “negate the
operator on this criteria.”
• As a shorthand format, tilde (~) is interpreted as “equal to blank.”
Wildcard Characters
Character Meaning
% Match one or more characters
* Match one or more characters
_ Match any single character
? Match any single character
! If first character, negate the operator (NOT EQUAL, NOT LIKE)
~ Equal to blank

For example:
User enters Resulting SQL
ABC WHERE FIELD = 'ABC'
AB% WHERE FIELD LIKE 'AB%'
AB* WHERE FIELD LIKE 'AB*'

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 5 4 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

!ABC WHERE FIELD <> 'ABC'

!AB% WHERE FIELD NOT LIKE 'AB%'
~ WHERE FIELD = ' '
!~ WHERE FIELD <> ' '
(blank) Field not included in Where clause

Menus

Menu Items

Guideline 102. Menu item position

Position menu items by their logical order in a process. If there is no logical order, position them
alphabetically..

Guideline 103. Menu item groups

Groups of related menu items should be separated by a solid line (separator).

Guideline 104. Verb-noun tense

Use action-object verb tense (verb-noun) where possible in menu items. For example:
“Select Payments” as opposed to “Payment Selection”

Actions

Guideline 105. Specify appropriate actions for a page group

Do not specify all the action types (Add, Update/Display, Update/Display All, Correction) unless they are
appropriate for the type of pages in the page group.
Use only “Update/Display” for inquiry pages.
Use “Add” and “Update/Display” for non-effective dated pages.

PeopleCode

Guideline 111. When to use MessageBox() vs. MsgGet()

In summary, the approach is to use MessageBox() only when flexibility of message severity is desirable or
when a custom message box -- one with a custom icon, custom pushbuttons, or return code -- is required.
In other cases, the MsgGet() function should be used with Error(), Warning(), or WinMessage().
Message Function to use Severity Description
Type
Mandatory error(MsgGet) Message Allowing the user to save this data would cause
error database or application corruption.
Flexible error MessageBox Error / The customer can decide whether this edit is an
Warning error or warning without corrupting the database.

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 5 5 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design

Warning MessageBox Error / The customer can decide whether this edit is an
Warning error or warning without corrupting the database.
Mandatory WinMessage(MsgG Message The message is in a PeopleCode program type
informational et) that does not allow Errors or Warnings.
Flexible MessageBox any The customer can decide the severity of this
informational message without causing an Application
Processor error.
Custom MessageBox any The message requires custom icons,
pushbuttons, or return code handling not
supported by error, warning, and WinMessage.

Message Catalogs
In support of the approach outlined above, flexible messages and static messages should be defined in
separate message catalogs. The reason for this is to make it clear the severity of which messages can be
customized and which cannot.
The severity in the message catalog is ignored when Error(), Warning(), or WinMessage() are used because
the function itself determines severity. This will be the case for static messages.
The severity of all messages in static message catalogs should be set to M (message) in order to 1)
eliminate any impression that the severity affects message behavior, and 2) allow static messages to be
reused in situations where the severity is not necessarily the same.
Icon Standards
Icon Severity Description
Message Provides information about the results of commands. Offers no user
choices; user acknowledges message by clicking OK button.
Message Alerts user to a situation that requires user decision before proceeding.
The message is always phrased as a question; user responds to message
by clicking OK or Cancel button (or Yes/No).
Warning Alerts user to a potential error condition or situation that requires user
decision before proceeding, such as an impending action with a
potentially destructive, irreversible consequence. The message can be
a question; user responds to message by clicking OK or Cancel button
(or Yes/No).
Error Informs user of an application-related problem that must be corrected
before data can be saved; user acknowledges message by clicking OK
button.
Fatal Error Informs user of critical PeopleTools-related problem that requires the
user cancel the current transaction. This type of error message is
initiated by the Application Processor in the event of a SQL error or
PeopleCode syntax error.

Guideline 112. Assigning literal values to display fields

Never assign literal values to display fields in PeopleCode. Use MsgGetText() to retrieve text from the
message catalog.
Right
if my_code = "D" then
my_status = MsgGetText(9000, 21, "Record deleted");
end-if;
Wrong
if my_code = "D" then
my_status = "Record deleted";

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 5 6 11/9/2004 9:16:00 AM
 Graphical User Interface Standards
Visual Graphic Design
end-if;

PeopleSoft Developer’s Reference Manual Version 2.0

ps_page_standards Page 5 7 11/9/2004 9:16:00 AM