FluidNavigationStandards

Embed Size (px)

Citation preview

  • 8/18/2019 FluidNavigationStandards

    1/37

     

    PeopleSoft Fluid Navigation StandardsFluid 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

  • 8/18/2019 FluidNavigationStandards

    2/37

  • 8/18/2019 FluidNavigationStandards

    3/37

     

    FLUID NAVIGATION STANDARDS

    Table of Contents

    Disclaimer 1 

    Overview 1 

    Homepages 1 

     Add To Drop-Down Menu 2 

    Interaction Hub Environment 3 

    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 

  • 8/18/2019 FluidNavigationStandards

    4/37

     

    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 

  • 8/18/2019 FluidNavigationStandards

    5/37

     

    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:

  • 8/18/2019 FluidNavigationStandards

    6/37

     

    2 | FLUID NAVIGATION STANDARDS

    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:

  • 8/18/2019 FluidNavigationStandards

    7/37

     

    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.

    Interaction Hub Environment

  • 8/18/2019 FluidNavigationStandards

    8/37

     

    4 | FLUID NAVIGATION STANDARDS

    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 databasesboth 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:

  • 8/18/2019 FluidNavigationStandards

    9/37

     

    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

  • 8/18/2019 FluidNavigationStandards

    10/37

     

    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:

  • 8/18/2019 FluidNavigationStandards

    11/37

     

    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 beperformed, 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:

  • 8/18/2019 FluidNavigationStandards

    12/37

     

    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

  • 8/18/2019 FluidNavigationStandards

    13/37

     

    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.

  • 8/18/2019 FluidNavigationStandards

    14/37

     

    10 | FLUID NAVIGATION STANDARDS

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

    NavBarThe 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 Level

    Content

    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.

  • 8/18/2019 FluidNavigationStandards

    15/37

     

    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

  • 8/18/2019 FluidNavigationStandards

    16/37

     

    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 contextthey 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

  • 8/18/2019 FluidNavigationStandards

    17/37

     

    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.

  • 8/18/2019 FluidNavigationStandards

    18/37

     

    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:

  • 8/18/2019 FluidNavigationStandards

    19/37

     

    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:

  • 8/18/2019 FluidNavigationStandards

    20/37

     

    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

  • 8/18/2019 FluidNavigationStandards

    21/37

     

    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

  • 8/18/2019 FluidNavigationStandards

    22/37

     

    18 | FLUID NAVIGATION STANDARDS

    Figure 24: Example of three navigational flows

    Example Flow: Benefits Summary

    Left Panel ItemBenefits Summary

    Fluid ComponentBenefits Summary

  • 8/18/2019 FluidNavigationStandards

    23/37

     

    19 | FLUID NAVIGATION STANDARDS

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

    Example Flow: Benefits Enrollment

    Left Panel ItemBenefits Enrollment

    Classic ComponentBenefits Enrollment

  • 8/18/2019 FluidNavigationStandards

    24/37

     

    20 | FLUID NAVIGATION STANDARDS

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

    Example Flow: Life Events

    Left Panel ItemLife Events

    Fluid ComponentLife Events

    Classic ComponentSelected Event

  • 8/18/2019 FluidNavigationStandards

    25/37

     

    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

  • 8/18/2019 FluidNavigationStandards

    26/37

     

    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:

  • 8/18/2019 FluidNavigationStandards

    27/37

     

    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.

  • 8/18/2019 FluidNavigationStandards

    28/37

     

    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 ahomepage tile:

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

  • 8/18/2019 FluidNavigationStandards

    29/37

     

    25 | FLUID NAVIGATION STANDARDS

    Guidelines and recommendations for Application Homepages:

    » Provide live data in the t iles 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:

  • 8/18/2019 FluidNavigationStandards

    30/37

     

    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.

  • 8/18/2019 FluidNavigationStandards

    31/37

     

    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

     Acti vi ty Guide Type Guideli nes f or 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 panelcontents 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.

  • 8/18/2019 FluidNavigationStandards

    32/37

     

    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:

  • 8/18/2019 FluidNavigationStandards

    33/37

  • 8/18/2019 FluidNavigationStandards

    34/37

     

    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:

  • 8/18/2019 FluidNavigationStandards

    35/37

     

    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, thenplace 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 Appli cation Start

    Page

     Appl ication

    Homepage

     Act ivit y Guide

    Minimum

    PeopleToolsRelease

    8.54 8.54 8.55 8.55

    DescriptionPage 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.

    NavigationLogin > 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

    ImplementationGroup 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.

  • 8/18/2019 FluidNavigationStandards

    36/37

     

    32 | FLUID NAVIGATION STANDARDS

    similar components to

    improve the experience of

    navigating quickly from

    component to component.

    UsageUse 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.

  • 8/18/2019 FluidNavigationStandards

    37/37

     

    Oracle Corporati on, World Headquarters Worldwi de Inquiri es

    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 thecontents hereof are subject to change without notice. This document is not warranted to be error-free, nor subject to any otherwarranties or conditions, whether expressed orally or implied in law, including implied warranties and conditions of merchantability orfitness for a particular purpose. We specifically disclaim any liability with respect to this document, and no contractual obligations areformed either directly or indirectly by this document. This document may not be reproduced or transmitted in any form or by anymeans, 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 andare trademarks or registered trademarks of SPARC International, Inc. AMD, Opteron, the AMD logo, and the AMD Opteron logo aretrademarks or registered trademarks of Advanced Micro Devices. UNIX is a registered trademark of The Open Group. 0615

    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