ORACLE CORPORATION

PeopleSoft Other Fluid Page Element Standards

Fluid User Experience November 2015

2

PeopleSoft Other Fluid Page Element Standards

Copyright © 2015 , Oracle and/or its affiliates. All rights reserved.

This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited.

The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing.

If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government, then the following notice is applicable:

U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are "commercial computer software" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs. No other rights are granted to the U.S. Government.

This software or hardware is developed for general use in a variety of information management applications. It is not developed or intended for use in any inherently dangerous applications, including applications that may create a risk of personal injury. If you use this software or hardware in dangerous applications, then you shall be responsible to take all appropriate fail-safe, backup, redundancy, and other measures to ensure its safe use. Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software or hardware in dangerous applications.

Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.

Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used under license and are trademarks or registered trademarks of SPARC International, Inc. AMD, Opteron, the AMD logo, and the AMD Opteron logo are trademarks or registered trademarks of Advanced Micro Devices. UNIX is a registered trademark of The Open Group.

This software or hardware and documentation may provide access to or information about content, products, and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to third-party content, products, and services unless otherwise set forth in an applicable agreement between you and Oracle. Oracle Corporation and its affiliates will not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party content, products, or services, except as set forth in an applicable agreement between you and Oracle.

Documentation Accessibility

For information about Oracle's commitment to accessibility, visit the Oracle Accessibility Program website at http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc.

Access to Oracle Support

Oracle customers that have purchased support have access to electronic support through My Oracle Support. For information, visit http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info or visit http://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs if you are hearing impaired.

Disclaimer

The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into

any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing

decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion

of Oracle.

3

Other Fluid Page Element Standards __________________________________ 1

Overview ______________________________________________________ 4 Button Bar/Grouped Bar _________________________________________________ 4

Button Bar __________________________________________________________ 4 Grouped Bar _________________________________________________________ 4

Slider Switches and Check Boxes __________________________________________ 5 Slider Switch_________________________________________________________ 5 Traditional Check Box __________________________________________________ 6

Date Picker ___________________________________________________________ 7 Native Date Picker ____________________________________________________ 7 PeopleTools Date Picker ________________________________________________ 8

Date Refresh __________________________________________________________ 9 Automatic Refresh ____________________________________________________ 9 Manual Refresh _______________________________________________________ 9

File Attachment _______________________________________________________ 10 Legends _____________________________________________________________ 12 Page Tabs ___________________________________________________________ 12

Responsive Design ___________________________________________________ 13 Range/Actual and Target/Actual __________________________________________ 14

Range/Actual _______________________________________________________ 14 Target/Actual _______________________________________________________ 14

Related Display _______________________________________________________ 15 Related Display Field Placement _________________________________________ 15

Related Unit Style _____________________________________________________ 16 Standalone Link (Tap Out) ______________________________________________ 16 Subtitles ____________________________________________________________ 18

4

Overview The Fluid application development guidelines and standards documentation is divided by major content area. This documentation addresses the constructs and widgets that do not fall into one of the major content areas and are not covered in any one of those other standards.

Button Bar/Grouped Bar You can use radio buttons to create two different constructs in addition to the traditional radio button group:

• Button Bar appears anywhere in the content area of a page.

• Grouped Bar appears directly below the banner at the top of the page or structure it is controlling; it is fixed and does not scroll away.

Both of these constructs use a group of radio buttons styled as a set of mutually exclusive buttons connected in a bar format. Only one button is selected at a time, and the selected button is highlighted in green.

Button Bar

Use the button bar to display or manipulate logically grouped sets of data on a page. In the following example, the button bar categorizes and enables the user to switch between views of related sets of employee data: Summary, Performance, Compensation, Leave Balances, and Analytics.

Figure 1: Example button bar

The button bar is best used when you have a static set of options that will not change and will display well in the small form factor. When selecting the button bar, consider how it will look in the small form factor: if the number of categories would cause horizontal scrolling, consider using another construct, such as the accordion or a drop-down list.

Another option for the small form factor is to change the text on the buttons to images. The images can be stylistically placed on the radio buttons and must meet accessibility requirements.

Grouped Bar

The grouped bar appears directly below the banner or above the structure it controls. Use a grouped bar when the button selections apply to the page as a whole and not just to one element of a page and when it is expected that the buttons will be used frequently. Do not use a grouped bar if you have a large number of categories that will not fit on the small form factor without scrolling.

This example shows a button bar that allows the user to switch between different views of data on the page:

5

Figure 2: Example grouped bar that enables users to switch among views on page

Slider Switches and Check Boxes Two constructs are available for check boxes:

• Slider switch

• Traditional check box

Slider Switch

Use a slider switch to select one of two values. The affirmative value in a slider switch has a green background:

Figure 3: Affirmative values in slider switches appear in green

Disabled switches have a gray background and should only be used when the user can do something to activate the switch.

Figure 4: Grayed-out (disabled) slider switches

6

Another option for displaying disabled switches is to display text instead of the disabled switch.

The following example shows three slider switches; only one value is shaded green for the affirmative (Yes) selection:

Figure 5: Example slider switches

Guidelines for Using Slider Switches

Use a slider switch when:

• Changes become effective immediately after users make a selection using the slider.

• Two values are available, such as on/off or yes/no.

• A value for a setting will be selected, and the setting value has two mutually exclusive choices.

Guidelines for Slider Switch Labels

• Replace the on and off labels when more specific labels are available for the setting.

• Use short (3 to 4 character) labels that represent opposites; the opposites should be obvious to the user.

• Consider translations when selecting labels for the switch. The text will grow in size by as much as 30 percent plus two characters when translated. Check boxes can be one of four sizes, and if the text exceeds the size of the check box, then it will truncate. The text should not truncate. Use a check box instead of a slider for long labels. Avoid using long labels such as the following:

Figure 6: Example of label that is too long for slider

Traditional Check Box

Check box labels should appear to the right of the check box:

Figure 7: Locate check box labels to the right of the check box

7

Another option for displaying disabled check boxes is to display text rather than the disabled check box. Only use text if labels appear to the left of the check box.

Guidelines for Using Check Boxes

Use a check box when:

• The user has to perform extra steps for changes to be effective. For example, if the user must click a Submit or Next button to apply changes, then use a check box.

• You have two mutually exclusive values that require long labels (use a single check box).

• The user can select multiple items.

Figure 8: Example of check boxes

Date Picker The date picker offers two options:

• Native date picker

• PeopleTools date picker

The native date picker is the preferred date picker for use in Fluid designs.

When selecting time pickers and datetime pickers, be consistent in the selection of the picker type, Native or PeopleTools. Users should have a consistent experience when they are selecting a date field and a datetime field on the same page.

Native Date Picker

The native date picker is preferred for the following reasons:

• It is accessible, while the PeopleTools date picker is not accessible.

• Users are familiar with their device’s date picker.

• The native date picker is similar to the native datetime picker.

8

• The PeopleTools team does not plan to enhance the PeopleTools date picker.

The following example shows the native date picker on an iPhone:

Figure 9: Example of date picker native to iPhone

PeopleTools Date Picker

Use the PeopleTools date picker when the use case requires that a full calendar be displayed. Many native date pickers do not display a date in the context of the calendar. If users need to be able to see a date (for example, the date of the first Sunday in a month), then use the PeopleTools date picker.

If you use the PeopleTools date picker, you must document that it is not accessible.

Figure 10: Example of PeopleTools data picker

9

Date Refresh You can refresh From and Through dates by:

• Automatically updating data upon exiting either the From or the Through date.

• Providing a Refresh button.

Automatic Refresh

Users enter values in the From or Through date fields, and the data on the page is updated immediately upon exiting either date field, for example:

Figure 11: Example of automatic refresh

Manual Refresh

Users enter values in the From and To date fields. No action is taken on exiting either of the date fields. The page data is updated only after the user selects the Refresh button, for example:

Figure 12: Example of manual refresh

10

Use a manual refresh when the page data should not be refreshed until the user decides to do so. Also use the manual refresh when large amounts of data are expected to be retrieved.

File Attachment PeopleTools provides the File Attachment construct, which should be used by Applications when attaching single or multiple files. When the PeopleTools File Attachment construct is implemented, it will look and behave as follows.

1. A file selection modal window appears:

2. The user clicks the Choose File button to select a file, the file name appears in a grid below the Choose file button and the Upload button appears to the left of the Clear button:

3. If multiple file attachments are allowed, the selected files will be added to the grid.

When Upload is selected, a progress bar will appear at the bottom of the window indicating that the upload is in progress:

11

4. When the upload is complete. The system displays the Done button in the upper right of the modal window banner:

This example shows the upload process for an employee photo file:

12

Figure 13: Example upload process for an employee photo file

Legends Legends in fluid are not recommended because they add clutter to the page. If several icons must be shown, consider implementing one of the following alternatives to avoid using a legend:

• Provide a label with the icon if space permits.

• Use text instead of an icon, for example, use yes/no text instead of an image to indicate yes or no.

Required fields do not have a legend. Refer to the Fluid Required Field Standards for more information.

Page Tabs Horizontal page tabs in fluid are not recommended because they do not display well in the space provided on the small form factor. PeopleTools 8.55 provides a fluid option that will render the tabs in the left panel. Tabs displayed vertically in the left panel provide a responsive design that renders well on all form factors.

This example shows the traditional horizontal display of tabs found in Classic PIA. This representation of tabs consumes a large amount of horizontal space:

13

Instead of using horizontal page tabs, a two-panel layout should be used where the left panel contains each of the page tabs. In the following example, the page tabs All, All Open/In Progress, and Complete/Closed appear in the left panel for the My Requests page:

Figure 14: Example of page tabs displayed vertically in the left panel

When a page contains tabs with subtabs, a two-panel layout is no longer optional, it is required. The following example shows a page with tabs and subtabs displayed in the left panel:

Figure 15: Example of tabs and subtabs displayed vertically in the left panel

Responsive Design

When page tabs are needed, a two-panel layout provides a responsive design for both small form factors and larger form factors. Refer to the Fluid Panel Layout Standards for more information about the two-panel layout.

14

Range/Actual and Target/Actual These two widgets show where specific values lie within a range and compared to a target value.

Range/Actual

This widget shows a horizontal bar and, with custom styling, shows where a specific value lies within a range. The range has a start point, an end point, and it may have a midpoint:

This example shows the range/actual widget used to show a salary range with an actual salary:

Figure 16: Example of salary range with an actual salary

Target/Actual

The target/actual widget shows where a specific data value lies in comparison with a target value. The target is shown as a colored area starting from zero and ending at the target value; the actual data value is shown as a vertical bar:

The following example shows the target/actual widget used to show an employee’s target proficiency for a competency as compared to their actual proficiency:

15

Figure 17: Example of target proficiency compared to actual proficiency

Related Display Use the Related Display style when the data value of a display-only field is controlled by the value selected in a related control field.

Related Display Field Placement

For a small form factor, place the Related Display field below the control field. Before the control field is populated, the empty space for the Related Display field should be hidden.

For medium and larger form factors, place the Related Display field to the right of the control field.

This example shows the Related Display field below the control field on the small form factor:

Figure 18: Example of Related Display field in small form factor device

16

The following example shows the Related Display fields to the right of the control fields in medium and larger form factors:

Figure 19: Example of Related Display fields to the right of control fields in medium and larger form factors

It is recommended that the codes in Related Display fields be shown only when they are meaningful to the user. In most situations, it is sufficient to display the description only.

Related Unit Style Use the Related Unit style when a unit of measure is associated with a field. In the following example, Hours is a related unit that is associated with the Duration field:

Figure 20: Example of Related Unit style

Always locate the related unit to the right of the field.

Standalone Link (Tap Out) You use a standalone link, also known as a tap out, when progressive disclosure is needed on a page. For information or data entry that is secondary to the main task, a standalone link can be used to open a modal window where the nonprimary information or data entry is located. Moving nonprimary data from the main page provides a less cluttered user interface.

The following example shows two tap outs, one on top of the other: View Balances and View Requests.

17

Figure 21: Example of standalone links (taps outs) to Balances and to View Requests in small form factor

On medium and larger form factors, the maximum width of the standalone link is 400 pixels. The following example shows the 400-pixel wide standalone link in Approvals:

18

Figure 22: Example of 400-pixel wide standalone link

On medium and larger form factors, size the standalone link so that it aligns properly with the widgets around it.

Subtitles Use subtitles to provide headings for hierarchical information. In the following example, subtitles display Job Title, Location, and Salary under the Promotion Changes heading:

Figure 23: Example of subtitles in small-form factor

19

Subtitles are used here so the tangerine color of the group box label (Promotion Changes) is not repeated.