peoplesoft fluid navigation standards - · pdf filefluid navigation standards disclaimer the...

37
PeopleSoft Fluid Navigation Standards Fluid User Experience ORACLE WHITE PAPER | OCTOBER 2015

Upload: phamdan

Post on 15-Mar-2018

215 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

PeopleSoft Fluid Navigation Standards Fluid User Experience O R A C L E W H I T E P A P E R | O C T O B E R 2 0 1 5

Page 2: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

FLUID NAVIGATION STANDARDS

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.

Page 3: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

FLUID NAVIGATION STANDARDS

Table of Contents

Disclaimer 1

Overview 1

Homepages 1

Add To Drop-Down Menu 2

Interaction Hub Environment 4

Notifications 4

Actions 7

Alerts 8

Actions List 9

NavBar 10

Tiles 10

Second Level Content 11

Recent Places 12

My Favorites 12

Navigator 12

Search Results 13

Application Start Pages 16

Fluid and Classic Coexistence 17

Example Flow: Benefits Summary 18

Example Flow: Benefits Enrollment 19

Example Flow: Life Events 20

Small Form Factor 21

Page 4: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

FLUID NAVIGATION STANDARDS

Non-Small Form Factor 22

Application Homepages 23

Single Component with Page Tabs and Page Subtabs 25

Activity Guides 26

Navigation Collections 27

NavBar Tile Navigation Collection 28

Optimized Application Start Page 28

Non-Optimized Application Start Page 29

Related Actions 30

Pivot Grids 31

Comparison of Design Patterns 31

Page 5: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

1 | FLUID NAVIGATION STANDARDS

Overview

The philosophy of Fluid navigation focuses on:

» Multiple paths for users to access functionality. » Users’ ability to choose the path that is most effective for them. » Use of Related Actions to make navigation work across all paths.

The Classic PIA navigation uses a locator link (“breadcrumb”) menu with a deep hierarchy. Fluid

navigation uses homepages and tiles as the starting points for navigating to both Fluid and Classic PIA

pages. Further categorization and navigation to Fluid and Classic transactions is achieved through the

use of Fluid Application Start pages and Fluid Application Homepages.

» Create new homepages. » Add tiles to homepages via the Tile Repository. » Add a component tile to any homepage from within the component. » Add tiles to the NavBar. » Reorder tiles in the NavBar. » Add favorite components to My Favorites in the NavBar.

Homepages Homepages are the starting point for Fluid navigation. Users can have several homepages and one default homepage that appears after they log in.

Homepages are role based and will have titles that reflect various roles, such as:

» Manager » Employee » Administrator » Cash Manager » Procurement Officer

The following examples show the navigation launch points on the Employee Self Service Homepage for small and medium form factors:

Page 6: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

2 | FLUID NAVIGATION STANDARDS

Homepage Tile Homepage swipe

Homepagedrop-down

menuNotifications Actions List

Figure 1: Examples of drop-down list and swipe on Homepage for small and medium form factors

PeopleSoft recommends that:

» Individual users not have more than five delivered homepages. » A homepage not have more than 9 tiles for a given user.

Add To Drop-Down Menu

End users can add any component they are currently viewing to any one of their homepages. PeopleSoft recommends that each Fluid or Classic component contain a unique image for the component in order to improve usability by making it easier for users to identify individual components that were added to their homepages.

The following example shows the tile that is added to the Fluid Homepage when the Create Job Opening component is added:

Page 7: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

3 | FLUID NAVIGATION STANDARDS

Figure 2: Example of new tile added to the Fluid Homepage when Create Job Opening component is added

The tile that is placed on the Fluid Homepage will have the default image shown below if no image is specified in the content reference for that component:

Figure 3: Example of default image for new tile

PeopleSoft recommends that all components have a unique image defined for Fluid.

Page 8: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

4 | FLUID NAVIGATION STANDARDS

Interaction Hub Environment

In an Interaction Hub environment, databases across pillars that contain homepages with the same name will automatically have the tiles merged into a single homepage of that name. For example, a single homepage with a title of Employee Self Service will be created in a Interaction Hub environment when FSCM and HCM databases both have homepages named Employee Self Service. The system will display all of the tiles from the FSCM Employee Self Service Homepage and all of the tiles from the HCM Employee Self Service Homepage in a single homepage named Employee Self Service in the Interaction Hub environment.

The ordering of the tiles on the merged homepage is based on the sequence number provided in the Content Reference for each tile across databases.

Guidelines and recommendations for a homepage in a Interaction Hub environment:

» Frequently used transactions across database pillars will have higher sequence numbers than less frequently used transactions.

» When a new transaction is added to a homepage that is shared across pillars, the sequence numbers of all tiles across pillars should be evaluated, and the new tile should be given an appropriate sequence number so that it will appear in logical order when in a Interaction Hub Environment.

» To avoid confusion in a Interaction Hub Environment, tiles in different databases that are merged should not repeat the same title in two different tiles.

Notifications The Notifications framework provided by PeopleTools will display a badge with a count on the flag icon in the banner to notify users of any new Actions or Alerts. The following example shows a count of three Notifications:

Figure 4: Example of banner showing three Notifications in a badge overlaying the flag icon

Tapping the flag icon opens a modal window that displays Actions and Alerts:

Page 9: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

5 | FLUID NAVIGATION STANDARDS

Figure 5: Example of Notifications modal window showing Actions and Alerts when user clicks the flag icon

Actions and Alerts that have not been viewed yet will have a blue circle next to them:

Figure 6: Example of unviewed Actions in Notifications modal window

Page 10: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

6 | FLUID NAVIGATION STANDARDS

Tap an individual Action or Alert to transfer to the transaction. Alternatively, tap the View All link to see a detailed list of the transactions:

Figure 7: Example of View All link in Notifications modal window

After tapping the View All link, the View All Notifications window opens:

Figure 8: Example of the View All Notifications window

Once the user has viewed the Actions and Alerts, the blue circle will no longer appear next to them, and the system will recalculate the count for the Notifications flag:

Page 11: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

7 | FLUID NAVIGATION STANDARDS

Figure 9: Example of already viewed Actions and Alerts

The Notifications framework may be used to provide users with easy navigation to transactions that need their attention.

The two types of Notifications are:

» Actions: Allow transfer to a transaction where some action may be performed. » Alerts: An informational message that may be deleted by the user. A transfer to the transaction may also be

performed, but this is optional.

Actions

Actions are Notifications that enable users to navigate directly to transactions that need their attention. The following example shows a list of Actions that are awaiting an Approval action:

Page 12: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

8 | FLUID NAVIGATION STANDARDS

Figure 10: Example of Actions requiring an Approval action

Alerts

Alerts enable users to navigate to a transaction where a status or some other information may have changed, thus enabling users to see details of the change. The following example shows a count of 9 Alerts indicating that request for approval was granted. In this scenario, since the alert is informational, the user has the option of tapping the X icon to dismiss the alert because no action is required:

Figure 11: Example of informational Alerts that require no action

Page 13: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

9 | FLUID NAVIGATION STANDARDS

Guidelines and recommendations for Notifications:

» Use an Action type notification when a time-sensitive action must be taken. This type of notification is similar to workflow and can be used to notify a user that a transaction is awaiting input.

» Use an Alert when it is important to communicate to the user that the status or some other transaction change was made. Allow transfer to the transaction if it makes sense for the functionality.

Actions List

The Actions List contains system-level actions as well as context actions:

» Context Action: An action that is specific to the current component. Context Actions may enable the user to navigate to component-specific pages.

» System Action: An action that is at the system level and is not related to a component.

The following example from Company Directory shows three context actions and five system actions:

Figure 12: Example of expanded Actions List showing three context actions (outlined) and five system actions

Note: Context Actions are always listed first, followed by System Actions.

Guidelines and recommendations for Context Actions:

» Navigation from the Actions List should be used for non-primary actions. » Primary navigation should be placed in the main content area or in the left panel for component or page tab

navigation. » When a page is accessed less frequently, the Actions List may be used for navigation so that the main content

area can be used for primary tasks. » In general, the total number of Context Actions displayed for a component should not exceed six.

Page 14: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

10 | FLUID NAVIGATION STANDARDS

» Do not use the Actions List as a set of Quick Links.

NavBar The NavBar contains the following elements:

» Tiles » Second Level Content » Recent Places » My Favorites » Navigator

Each of these elements is shown in the following example and described in the sections that follow.

NavBar

Navigator

My Favorites

Recent Places

Second LevelContent

Related Actions

NavBar Tile

Figure 13: Example showing NavBar elements

Tiles

The two types of behavior for tiles on the NavBar when tapped are:

» Transfer the user to a component. » Open Second Level Content.

Page 15: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

11 | FLUID NAVIGATION STANDARDS

A set of NavBar tiles is delivered out of the box. The system always displays the Recent Places, My Favorites, and Navigator PeopleTools tiles.

Guidelines and recommendations for NavBar tiles:

» The first three tiles that appear should appear at the top of the NavBar in the following order: » Recent Places » My Favorites » Navigator

» Tiles selected to be in the NavBar should be the most frequently used functionality. » As delivered, no more than five tiles should be placed in the NavBar for a given user; all first-level tiles should be

visible to the user. » In a Interaction Hub environment, the system will display all NavBar tiles selected across pillars, and the ordering

will follow the sequence number defined for the tile in the content reference. When adding a new tile to the NavBar, work across pillars to determine what the sequence number of that tile will be when merged with all tiles from all pillars.

Second Level Content

Second Level Content in the NavBar enables users to:

» Transfer to another page. » Open a modal window.

Second Level Content may enable users to navigate to transactions. In the My Team example that follows, users have two options for navigating from the Second Level Content:

» Navigate to a transaction via the Related Content icon. » Navigate to My Team via the Go to My Team button.

Figure 14: Example of two options for navigating from Second Level Content, the Related Content icon or the Go to My Team button

Page 16: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

12 | FLUID NAVIGATION STANDARDS

Second Level Content may also enable users to perform actions without navigating away from the current context. In the following Project Team example, the Notify Resource action opens a modal window where an email can be sent to a member of the project team. When the modal window is dismissed, the user remains in the same context they were in before launching the modal window to send an email:

Figure 15: Example of modal window that enables users to perform an action without leaving initial context

Guidelines and recommendations for NavBar Second Level Content:

» Second Level Content may be informational only and does not need to provide navigation to another location. » Tapping Second Level Content may enable the user to navigate to another transaction. When the Second Level

Content allows navigation to another transaction, use a chevron to indicate that the row is tappable. » Second Level Content may contain Related Actions that provide navigation to a transaction. » To avoid mis-tapping, do not provide a Related Action hotspot on top of a tappable row. » Do not have a hotspot on top of a tappable row because hotspots on tappable rows may cause mis-tapping and

accessibility issues.

Recent Places

The Recent Places tile in the NavBar stores a list of recently visited components. Users can easily navigate back to components from this list.

My Favorites

The My Favorites tile in the NavBar stores a list of components the user has marked as Favorites. This tile enables the user to choose frequently visited components and add them to a list for easy access.

Navigator

Page 17: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

13 | FLUID NAVIGATION STANDARDS

The Navigator provides navigation access to all components that are registered in the Portal Registry as Content References and are marked as visible in the PeopleTools Portal Structure and Content. The following example shows the top level when the Navigator NavBar tile is selected in a Interaction Hub environment:

Figure 16: Example of top level when Navigator NavBar tile is selected in Interaction Hub environment

Guidelines and recommendations for NavBar Navigator:

» The Navigator is not intended to be the primary method of Fluid navigation. » The primary method for Fluid navigation is via Homepages, the NavBar, Application Start pages, and Application

Homepages. The Navigator supports legacy PeopleSoft hierarchical navigation to Classic components.

Search Results Global Search uses the SES and PeopleTools Global Search framework. Global Search is accessed differently based on the size of the device or window:

» Access is from the Actions List when the window width becomes small enough that the search operation is moved into the Actions List.

» Access is from the magnifying glass icon in the banner when the window width is large enough to accommodate the Search icon.

Page 18: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

14 | FLUID NAVIGATION STANDARDS

Example of a Global Search from the banner:

Figure 18: Example of accessing Global Search from the banner

Example of a Global Search from the Actions List:

Figure 19: Example of accessing Global Search from the Actions List

The system displays the search results in a two-panel layout on form factors other than the small form factor:

Page 19: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

15 | FLUID NAVIGATION STANDARDS

Figure 20: Example of Global Search results in non-small form factor device

Global Search results may display Related Actions when the component-level related action was configured in Related Content Services:

Page 20: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

16 | FLUID NAVIGATION STANDARDS

Figure 21: Example of Global Search results with Related Actions

General guidelines and recommendations for Global Search Results:

» Include Related Actions in the search results when the user may navigate to a number of different transactions from the search results.

» Enable users to access components using free text search without having to provide required key fields such as SetID, Business Unit, and so on.

» Provide users with keyword search capability that spawns an entire suite of functionality instead of a particular component.

» Show search results only as a List view; Grid view and other views are not supported.

Application Start Pages Use an Application Start page to reduce the navigation burden. The Fluid navigation paradigm moves away from the deep locator link (“breadcrumb”) hierarchy used in Classic PIA that may require a user to click many times to navigate the Classic menu hierarchy. Instead, components are grouped into an Application Start page, where a user can easily navigate among the different components. Application Start pages are typically accessed via the homepage and are only one click away. This ease of access provides the user with two-click access to navigate to the components they need to open.

Application Start pages are also used to reduce the total number of tiles on a homepage. Refer to the Homepages topic for guidelines on limiting the number of tiles on a homepage. Grouping components into an Application Start

Page 21: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

17 | FLUID NAVIGATION STANDARDS

page allows developers to reduce the total number of tiles that would be required if they mapped a single tile to every Fluid component.

Fluid and Classic Coexistence

With PeopleTools 8.55, PeopleSoft will deliver a single Fluid homepage with one overall branding theme that will be the same whether the user is in a Classic PIA component or a Fluid component:

Figure 23: Progression to single Fluid Homepage with one overall branding theme

Navigation between Fluid and Classic components will no longer be separate. Every user will land on a Fluid Homepage that may contain tiles that transfer the user to a Fluid or a Classic component. Similarly, an Application Start page may contain both Classic components and Fluid components in the left panel.

The following navigational flows may be used based on functional requirements:

1. Left Panel item directly opens a Fluid component.

2. Left Panel item directly opens a Classic component.

3. Left Panel item directly opens a Fluid component, which in turn opens a Classic component.

The following Application Start page contains an example of each of the three navigational flows shown previously:

Left Panel Item Fluid Component

Left Panel Item Classic Component

Left Panel Item Fluid Component Classic Component

Page 22: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

18 | FLUID NAVIGATION STANDARDS

Figure 24: Example of three navigational flows

Example Flow: Benefits Summary

Left Panel Item Benefits Summary

Fluid Component Benefits Summary

Page 23: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

19 | FLUID NAVIGATION STANDARDS

Figure 25: Example of Left Panel item directly opens a Fluid component

Example Flow: Benefits Enrollment

Left Panel Item Benefits Enrollment

Classic Component Benefits Enrollment

Page 24: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

20 | FLUID NAVIGATION STANDARDS

Figure 26: Example of Left Panel item directly opens a Classic component

Example Flow: Life Events

Left Panel Item Life Events

Fluid Component Life Events

Classic Component Selected Event

Page 25: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

21 | FLUID NAVIGATION STANDARDS

Figure 27: Example of Left Panel item directly opens a Fluid component, which in turn opens a Classic component

Small Form Factor

On the small form factor, instead of a two panel layout, a component is used to display the left panel content that is shown in non-small form factors.

Figure 28: Example on a small form factor

1

2

Page 26: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

22 | FLUID NAVIGATION STANDARDS

On the small form factor:

» No component is selected when the page is opened. » A list view with icon construct is used to display each component in the list. » The back button in the upper left of the selected component returns the user to the list of components on the

Application Start page.

This example shows the navigation flow using the small form factor:

Figure 29: Example of navigation flow using the small form factor

Non-Small Form Factor

For non-small factors, an Application Start page uses a two-panel layout with a list of related components in the left panel and the selected component displayed in the content area. The selected component changes to green.

In non-small form factors:

» The first component in the list is selected when the page is opened. » A list of components appears in the left panel, and the selected component appears in the content area. » The back button in the upper left of the selected component returns the user to the previous page, typically a Fluid

homepage.

The following example shows an Application Start page on a tablet:

Page 27: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

23 | FLUID NAVIGATION STANDARDS

Figure 30: Example of Application Start page on a tablet device

Guidelines and recommendations for Application Start pages:

» Group functionally similar components in an Application Start page. » Provide each component with a unique image so that when it is added to a homepage, that unique image will

appear on the homepage tile and it should match the image that appears next to that component in the Application Start page.

» Ensure that the page contains no more than eight to ten components. » Ensure that the first component in the list will be selected and loaded when the start page is first opened for tablet

and larger form factors. » Ensure that no items will be selected on the small form factor when it is first opened. » Ensure that the Application Start page will handle user security. » Order the components based on the level of usage. Administrators and end users will not have the ability to

reorder the components. » In general, make the left panel fixed and not collapsible for medium and larger form factors. The left panel may be

set to collapsible when the entire right content area needs to be displayed to accommodate a large amount of information. For example, Org Chart Viewer requires a large amount of horizontal space.

Application Homepages An Application Homepage provides navigation launch points to components, similar to an Application Start page. However, an Application Homepage contains tiles rather than a list of links, as is seen in the Application Start page.

Page 28: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

24 | FLUID NAVIGATION STANDARDS

The tiles in the Application Homepage contain charts and other live data. Use an Application Homepage when you want to convey high-level summary information to users that will allow them to determine whether they want to open the component.

These examples show a side-by-side comparison of an Application Start page and an Application Homepage:

Figure 31: Example of Application Start page on left and Application Homepage on right

In both cases, functionally similar components are grouped. In the Application Start page, however, navigation between components is done by selecting a component in the left panel of the page, which contains only an icon and a label. In the Application Homepage, navigation between components is done by returning to the Application Homepage and selecting a component. The Application Homepage contains tiles with live data that provides additional information to the user. The following example shows navigation to the Application Homepage from a homepage tile:

Figure 32: Example of navigating from a homepage tile to an Application Homepage

Page 29: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

25 | FLUID NAVIGATION STANDARDS

Guidelines and recommendations for Application Homepages:

» Provide live data in the tiles showing a high-level summary of information that is important to the user. » As with an Application Start page, the Application Homepage should group functionally similar components. » Do not add unnecessary hierarchy to the navigation that requires users to tap through multiple tiles to reach their

destination. When intermediary tiles are used, they should add value for the user. » Do not use a homepage tile to transfer to another homepage. This action will confuse the user, and they will not

know how to get back to the homepage from which they started. Instead, use the Application Homepage that will be available in PeopleTools Release 8.55.

Single Component with Page Tabs and Page Subtabs Use page tabs when a large amount of information must be displayed to the user. Rather than placing all of the fields on a single page and allowing it to scroll, break up the information into logical groupings and place on separate pages. Use page tabs to navigate among the separate groups of information.

Horizontal page tabs in Fluid are not recommended because they do not display well in the space provided in the small form factor, and the overflow of tabs becomes an issue as browser window width is reduced. Tabs displayed vertically in the left panel provide a responsive design that renders well on all form factors.

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

Figure 33: Example of Classic PIA tab layout, which consumes a large amount of horizontal space

In Fluid, two design patterns are available in a two-panel layout for navigating various sections of a component:

» Page with tabs » Page with tabs and subtabs

The following example shows how page tabs and page subtabs can be placed in the left panel, where the tabs can scroll vertically:

Page 30: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

26 | FLUID NAVIGATION STANDARDS

Figure 34: Example of page tabs and subtabs in left panel, where they can scroll vertically

Note: Page subtabs may only be one level deep, as shown in Figure 34.

Guidelines and recommendations for a component with page tabs and subpage tabs:

» Do not display a long list of navigation links horizontally across the page because it will result in horizontal scrolling in smaller windows and in a portrait orientation in smaller form factors. Consider using page tabs and subtabs instead.

» Display page tabs and page subtabs in the left panel of a two-panel layout, as shown in the previous figure. Do not display page tabs horizontally across a page.

» By default, display the contents of the first tab in the list in the left panel in the right side content area. Select the primary information as the first tab.

Activity Guides The Activity Guide Framework will be updated in PeopleTools Release 8.55. An Activity Guide standard is scheduled to be written but does not currently exist.

The Activity Guide provides a user friendly framework for guiding a user through a set of related tasks either sequentially or non-sequentially. The user navigates through a set of steps created by the Activity Guide Designer. In general, once a user is in the Activity Guide, they should not have actions that would allow them to navigate away from the Activity Guide before it is complete or before they purposefully exit it.

Page 31: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

27 | FLUID NAVIGATION STANDARDS

The options for navigating to an Activity Guide are via:

» Homepage tiles » Application Homepage tiles » Application Start pages » WorkCenters » Related Actions » Component page links » NavBar tiles

USING OPTIMIZED AND NON-OPTIMIZED ACTIVITY GUIDES

Activity Guide Type Guidelines for Use

Optimized Activity Guide Use when the Activity Guide does not contain any steps that display a left panel or application header. An optimized Activity Guide:

» Is designed to be optimized for the Activity guide framework. » Supports both sequential and nonsequential processes. » Discourages user from transferring away from the process. » Does not use the left panel. » Does not use custom applications header. » Could be a Single Unit of Work design. » Evaluates Applications Save button placement as part of the

optimization process. » Uses the modified PeopleTools banner in Guided mode:

» New navigation functionality: Exit, Next, Previous » Actions List contains Home » Optional functionality: Notification

Not available in Guided mode: Search, NavBar

Non-optimized Activity Guide Use when you have an Activity Guide step that contains a page with a left panel or application header.

When a step contains a page with a left panel, the left panel contents of the page will appear, and the list of Activity Guide steps will move to a drop down list in the banner.

A non-optimized Activity Guide:

» Supports both sequential and nonsequential processes. » Discourages user from transferring away from the process. » Uses the modified PeopleTools banner in Guided mode:

» New navigation functionality: Exit, Next, Previous » Actions List contains Home » Optional functionality: Notification

Not available in Guided mode: Search, NavBar

Guidelines and recommendations for Activity Guides:

» Do not navigate to an Activity Guide from a modal window. » Do not use Activity Guides in the content area of a two-panel layout.

Navigation Collections In PeopleTools Release 8.55, you can use Navigation Collections to:

» Create NavBar tiles that open the list of links from the Navigation Collection in the Second Level Content area of the NavBar.

Page 32: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

28 | FLUID NAVIGATION STANDARDS

» Render an Application Start page with the links from the Navigation Collection in the left panel of an Activity Guide. The Navigation Collection is used in conjunction with a Content Reference, and the Activity Guide is used to render the page. It does not require any setup in the Activity Guide Framework.

NavBar Tile Navigation Collection

A NavBar tile opens Navigation Collection links in the Second Level Content area:

Figure 35: Example of Navigation Collection links opened in the Second Level Content area from a NavBar tile

Optimized Application Start Page

The Application Start page shown here is optimized. The left panel contains a list of links defined by a Navigation Collection, and none of the links opens a Fluid page with a left panel or application header:

Page 33: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

29 | FLUID NAVIGATION STANDARDS

Figure 36: Example of optimized Application Start page

Non-Optimized Application Start Page

The Application Start page shown here is non-optimized. The links from the Navigation Collection are contained in the banner drop-down menu.

Page 34: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

30 | FLUID NAVIGATION STANDARDS

Figure 37: Example of non-optimized Application Start page

GUIDELINES FOR USING NAVBAR TILES AND APPLICATION START PAGES

Type Guidelines for Use

NavBar tiles » Use when a group of links is needed for quick navigation. » Navigation Collections allow an unlimited number of grouping

levels for the transaction links; limit the number of levels in the Navigation Collection to four or less.

» Provide meaningful Navigation Collection names and folder names for the groups of links.

Application Start pages » Use when you want to navigate between components, from the left panel, or from the banner drop-down menu.

» Ensure that Navigation Collections are no more than two levels deep.

Related Actions Related Actions are key to providing seamless, quick navigation between components without requiring the user to perform a large number of clicks, taps, and page refreshes when moving from one component to another. Rather than requiring the user to back out of a component to the homepage and then move forward again to open a new component, Related Actions enable the user to move directly between components.

Guidelines and recommendations for Related Actions:

Page 35: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

31 | FLUID NAVIGATION STANDARDS

» When designing new Fluid pages, evaluate each page to see if it makes sense to place Related Actions on the page to help the user in navigating through their various business processes.

» If it is possible to assist the user by reducing navigation click counts through the use of Related Actions, then place the appropriate Related Actions on the page.

» Do not provide excessive unrelated Related Actions on a page. Navigating through a deep menu hierarchy in the Related Actions structure would require numerous clicks, which would be burdensome to the user and should be avoided.

Pivot Grids You may use Pivot Grids to guide the user to specific components and transactions based on aggregated business data. Users may drill into more and more detailed aggregated data within the Pivot Grid, which leads to a list of links for navigating to specific transactions of interest. Pivot Grids and Charts may be used to provide summary level data to users with the ability to change a particular view of the data easily and, ultimately, to allow users to navigate to specific transactions where they may take an action based on their data analysis.

Comparison of Design Patterns The following table provides a guide to the appropriate use of each of the different design patterns in this document. Use this guide to help you determine the best navigation approach for your functionality.

DESIGN PATTERNS

Homepage Application Start Page

Application Homepage

Activity Guide

Minimum PeopleTools Release

8.54 8.54 8.55 8.55

Description Page containing tiles that appear following login.

Page displaying a list of related components in the left panel with the selected component in the right panel.

Page containing functionally similar tiles with live data.

Page displaying a list of steps in the left panel with the selected step in the right panel or a page displaying a simple horizontal train stop.

Navigation Login > Homepage Homepage > Tile > Application Start page

Homepage > Tile > Application Homepage

Homepage > Tile > Activity Guide

Homepage > Tile > Application Start Page > Activity Guide

Homepage > Tile > Component > Activity Guide

Implementation Group functionally similar tiles on a Role Based Homepage. Allows groupings of tiles based on the user’s role, for example, Manager, Employee, Administrator.

Group functionally similar components in a page with a two-panel layout. The list of components contains an icon, a title, and an optional count. Allows groupings of

Group functionally similar live tiles on a page. Similar to an Application Start page but uses live data on tiles to convey high-level information to users.

Use the PeopleTools Release 8.55 Activity Guide Framework to create Activity Guides.

Page 36: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

32 | FLUID NAVIGATION STANDARDS

similar components to improve the experience of navigating quickly from component to component.

Usage Use no more than 5 homepages per user and no more than 9 tiles per homepage.

Use this construct to avoid having a large number of tiles on a homepage or a large number of homepages. Use when no summary-level metric data is available to be displayed for each component. If you have summary-level data to display for each component, consider using the Application Homepage.

Use this construct to avoid having a large number of tiles on a homepage or a large number of homepages. Use when you have summary-level data to display in tiles and you do not want to open any component by default.

Use this framework when it will improve the user’s experience to be guided through a set of steps to complete an activity.

Page 37: PeopleSoft Fluid Navigation Standards - · PDF fileFLUID NAVIGATION STANDARDS Disclaimer The following is intended to outline our general product direction. It is intended for information

Oracle Corporation, World Headquarters Worldwide Inquiries 500 Oracle Parkway Phone: +1.650.506.7000 Redwood Shores, CA 94065, USA Fax: +1.650.506.7200

Copyright © 2015, Oracle and/or its affiliates. All rights reserved. This document is provided for information purposes only, and the contents hereof are subject to change without notice. This document is not warranted to be error-free, nor subject to any other warranties or conditions, whether expressed orally or implied in law, including implied warranties and conditions of merchantability or fitness for a particular purpose. We specifically disclaim any liability with respect to this document, and no contractual obligations are formed either directly or indirectly by this document. This document may not be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without our prior written permission. 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. 0615 White Paper Title October 2015 Author: [OPTIONAL] Contributing Authors: [OPTIONAL]

C O N N E C T W I T H U S

blogs.oracle.com/oracle

facebook.com/oracle

twitter.com/oracle

oracle.com