Step by Step (3[+] Steps) Page Template (Wizard)
Last Updated 08-Apr-2004
General Description
The step by step page template is the principal template used in a typical step by step flow with 3 or more steps. A step by step flow is the Web-based equivalent of a wizard.
Guideline Contents
NOTE: There are different templates for
2 Step Process/2 Page Object Template and 1 Page Object Template pages. See these guidelines for details.
Guideline Attributes
Spec Version # - 3.1
Spec Contributors - Betsy Beier, Aylin Uysal, Tutti Taychakhoonavudh, Mervyn Dennehy, Lisa Serface, Ivy Leung, Ritchard Shadian, Craig Louis
UI Models - All Models
Example Products - HR modules, Expenses, EM Thin Client
Related Guidelines -
1 Page Object Template,
2 Step Process/2 Page Object Template,
Checklist Templates,
Intra-Application Navigation,
Introduction to BLAF Page Flows,
Introduction to BLAF Page Templates,
Locator Element: Step by Step Train,
Locator Element: Record and Page Navigation,
Messaging Templates,
Overview Page Template,
Step by Step Page Flows
The steps in a step by step flow can make use of the following templates:
- Launch page for the step by step flow (any one of the following templates):
- Transaction Steps
- Review Step (optional)
- Confirmation (or Messaging) Template
- This template may be used after completion of the step by step process.
Refer to the Step by Step Page Flows guideline for schematics of how all the page templates flow together for this type of linear process. The flow guideline also outlines the differences between a 1 step, 2 step, and 3(+) step flow.
Typical initiation points that launch a step by step process are:
- Object List Page Template - A template that lists many objects may be the initiation point of a step by step process. This template can be seen in different forms; with search and results features, with select and act features, or just a list of objects viewed in a table. The step by step process is typically launched by an action/nav button, a functional icon associated with a table.
- Object Page Template - This template shows details for a specific object. Details may appear as a set of fields, or in a table, and in a wide variety of template options. The step by step process is typically launched by an action/nav button or a functional icon associated with a table, or on the page.
- Checklist Template - This template is intended to address cases in which a user needs to complete a task/process that contains many diverse steps. Such a diverse set of process tasks may make the user unable to complete all the tasks within a single session.
- Overview Page Template - This template may provide an introduction to the process, or a summary of current settings. The step by step process is typically launched by an action/nav button.
- Home Page Template - There may be a link, button, or icon on the home page (usually summary of content of the application) that takes the user directly to the step by step process within the application.
- Oracle Application Portal - An application that is only a step by step process can be launched from a portlet within the portal. Portlets may also contain links to specific step by step processes within an application.
- Another Step by Step Template - When a Step by Step task offers subordinate (Sub) tasks, another Step by Step template can be launched from a main Step by Step template. Please refer to the Process Within Process section of the Intra-Application Navigation Guideline for details.
- The total number of steps and step names within a process should never change, but steps may be skipped if necessary.
- During a step by step process, if the application has a tab/navigation hierarchy, the tabs and navigation do not disappear, but remain on the page. If sensitive data is being updated during the step by step process, a Warning message should appear if the user selects one of the tab/navigation sections during the process. See the Save Model guideline for details.
- Page titles for each type of step-by-step page should be concatenated following the syntaxes described in the Language: Page Titles and Breadcrumbs guideline.
- The Checklist Template may be used as an alternate transaction page for multi-step complex updates. The Checklist would be employed as a re-entrant wizard after the user has already created an object with the Step by Step (3[+] Steps) page template.
- The Step By Step template method is appropriate when the designer wants to supply particular user hand-holding during object creation. Following that, after the user is already familiar with the object details, updating would take place through the Checklist. The user would not be led again through the step by step flow, but instead they would have random access to each step, through the Checklist interface.
- Another benefit of using the Checklist for subsequent object updating is that it allows the user to monitor dependencies when changing the data in one of the steps. The Checklist clearly shows dependency violations, exposing errors in previous steps caused by changes in later steps.
- Instruction Text (preferred) or an Information Message should be placed on the Checklist page in order to prevent user confusion upon seeing the Checklist instead of the Step by Step 3+ template when entering the update flow. The message should explain that they can use the Checklist to directly access and update each step of the previously created object process.
- Suggested Instruction Text: "Use this Checklist to directly access and update any part of [object name]."
- For example, the user has already clicked the Create Object button on an object list template page, and has completed the creation process through the step by step flow. Later, if the user clicks the row level Update icon for the object on the object list, the Checklist (as re-entrant wizard) is presented to facilitate updating, with direct access to steps in the Step by Step flow. Instruction Text or an Information Message explains what the user can do with the Checklist.
- This method should be used only if designers are confident that users in the application audience would be sufficiently familiar with the Step by Step created object to make the Checklist Template practical for subsequent object updates.
A step by step process may or may not include a review step as the last step:
- Include a review step when working with critical data, or with long processes that feature an extended train. For long processes, the Review page may be a summary rather than a complete list of all settings.
- In processes of six or less steps, consider omitting the review step if data is not critical, or if application users frequently work with the process and have a relatively high skill level.
A confirmation template is shown after the step by step process is complete, and does not include the train component. The message gives the user confirmation that the changes made in the step by step process have been committed to the database or submitted to workflow for approval.
A confirmation page can be as simple as a message box, or may also include a detailed summary of the transaction with the option of a printable page. In general, consider providing transaction details in the confirmation page when:
- The process generates a confirmation number.
- Users may need to print or save a record of the transaction.
Confirmation pages contain a navigation button to enable users to dismiss the page, and may contain action/navigation buttons, such as "Printable Page". The text for the navigation button depends on context:
- Where possible, the navigation button text should indicate the target area of the application. For example, the button may read "Select Another Account", or "Continue Shopping".
- If users need to choose among two or more alternative targets, additional choices may be provided with separate navigation buttons, or with a "Return to XXX" link.
- If a target page cannot be readily identified, or has a very long name, the button text should be "OK".
See the Messaging Templates Guideline for more information on presenting confirmation messages.
- Tab/Navigation or No Tabs
- If a step by step process is just a task within a tabbed application (application that uses the tab/navigation structure) this hierarchy is persistent and does not disappear once the step by step process is launched.
- If the step by step flow is the entire application, a "No Tabs" configuration may be used. In this case the step name becomes the page title. The placement of the step by step process name depends on context:
- If the name of the step by step process is the same as the name of the application module (in the upper left above the blue bar), then leave the blue bar blank.
- If the name of the step by step process is different from the name of the application module, the process name should appear in the blue horizontal bar.
- Locator Element: Train
- The train component is used at the top of each page for the steps of process. It is also used on a drill down page off the train (only one level deep.) It is not used on a launch page or a confirmation page.
- Trains may include links for navigation to previous steps and the next step, or may only include labels to identify the steps.
- If the train includes links, then the Back/Next Locator (see below) always includes a choice list.
Note: In a subprocess, the choice list should only list the steps from the subprocess and not the steps from the main process.
- Extended trains (with more than six steps) also include Previous and More links or labels to aid in navigation to prior and later groups of steps.
- When the user jumps back more than one step and makes a change, data dependencies may invalidate choices already made in subsequent steps. See the section below for details.
- See the Locator Element: Train guideline
for details on train behavior through the step by step process.
- Page Headers/Subheader/Subsubheaders and Lines
- Locator Element: Back/Next Buttons (for 3+ steps)
- The Back/Next Locator appears on each page that features the train. It consists of Back and Next Action/Nav buttons and text or a choice list that identify the current page.
- The Back/Next Locator choice list allow users to jump more than one step backwards in the process. In a subprocess, the choice list contains only the subprocess steps, not those of the main process.
- If the Back/Next Locator includes a choice list, then the train also includes links for navigation.
- When the user jumps back more than one step and makes a change, data dependencies may invalidate choices already made in subsequent steps. See below for details.
- The images below show examples of two types of Back/Next button configurations
in a step by step process. For a detailed description of these configurations
and their options, see the Locator Element: Record and Page Navigation guideline.
- Example of Next and Back Navigation Buttons with Read Only Step Indicator
- Example of Next and Back Navigation Buttons with Updateable Step Indicator
When the user jumps back more than one step and makes a change, data dependencies may invalidate choices already made in subsequent steps. If processes have such data dependencies, developers must either handle the dependency with a combination of Warnings and Tips, or must only allow jumps of one step at a time.
To handle the dependency:
- Whenever the user jumps backwards, display an inline Warning message saying that, "If you make changes in this step, you may need to redo your work in the following steps." It is also recommended to place an inline Tip below each component that can cause a data dependency. The Tip can read, "Affects data in following steps."
- If the user then advances to the next step, remove all forward navigation options beyond the step invalidated by the data dependency.
- If the user makes changes and tries to return to any subsequent page other than the next page, display a Warning page with options to go back or continue forward. See the table below for details on navigation options with dependencies in different locations.
- See the Step by Step Page Flows guideline
for an example flow.
When all mandatory steps have been completed, the Finish, Apply, or Submit button may appear on the page (See Note, below). If selected on an intermediate step page, before the last step, the flow goes back to the main process or initiating page. See also Review and Confirmation Steps
Note: "Apply [Subprocess]" is the correct button label for subprocess completion. "Finish" is used for completing a main process. "Submit" is used to send changes/updates to Oracle Workflow for approval.
Warning pages provide different messages and Action/Navigation buttons depending on the location of the data dependency in relation to the current page. The Warning message must explain the results of each choice. The following table shows the permutations:
| Location of Dependency |
Action/Nav Buttons in Warning Page |
Result of Choice |
Notes |
| Next step |
"Go Back to Step {X}" |
User reviews changes in Step {X}; all prior navigation options remain available |
Step {X} is the step where change influenced a dependency in a later step. |
| "Continue at Step {X+1}" |
User confirms changes in Step {X}, and continues to Next step; forward navigation is then limited to Step {X+2} |
User can only advance one step at a time, so any additional dependencies in later steps are handled. |
| Single step subsequent to Next step |
"Go Back to Step {X}" |
User reviews changes in Step {X}; all prior navigation options remain available |
|
| "Go to Step {X+n}" |
User confirms changes in Step {X}, and continues to subsequent step with dependency; forward navigation is then limited to Step {X+n+1} |
| Multiple steps subsequent to Next step |
"Go Back to Step {X}" |
User reviews changes in Step {X}; all prior navigation options remain available |
|
| "Continue at Step {X+1}" |
User confirms changes in Step {X}, and continues to Next step; forward navigation is then limited to Step {X+2} |
| "Go to Step {X+n}" |
User confirms changes in Step {X}, and continues to subsequent step with dependency; forward navigation is then limited to Step {X+n+1} |
Step by Step Templates are recommended only for linear tasks. Typically, the train does not indicate any internal branching, and only shows the main steps in the linear process. However, from a step by step template, a user may drill down to an inner "subprocess", which can be one, two, or three+ levels (or pages). (A single page subprocess may include simple or multiple section templates, including Sidenav and Subtab.) This is essentially an expansion of the main process, rather than a branching. When the user is done with the subprocess, they should be returned to the original main process.
Do not continue Breadcrumbs on drill down pages. Navigations within equal hierarchal levels, such as tab to tab, do not inherit breadcrumb ordination. Equal level navigation elements retain their hierarchical position, whatever it may be.
When the subprocess is a 1-step task, retain the main train, with train "stops" disabled except the active main train stop.
- Title/Header: The page title or first header on the child page should clearly indicate that the user has moved one page off the train. For instance, the header uses the following syntax: [Step Name]: [SubStep Name].
- Read-Only: If the drill down page is read-only, a "Return to [Main Process Step Name]" link may be used for the user to return to the originating process.
- Editable: If the drill down page contains editable data, the page level action/navigation buttons "Apply" and "Cancel" allow the user to navigate back to the main process.
When the subprocess is a 2-step task, follow the 2 Step Process Templates. These templates do not include any elements of the main train.
- Title/Header: The page title or first header on the page should indicate the subprocess name only. For instance, [SubProcess Name].
- Read-Only: If the drill down page is read-only, a "Return to [Main Process Step Name]" link may be used for the user to return to the main process.
- Editable: If the drill down page contains editable data, the page level action/navigation buttons "Apply: [SubProcess Name]" and "Cancel: [SubProcess Name]" allow the user to navigate back to the main process.
When the subprocess is a 3+ step linear task using the train, follow the Step by Step (3[+] Steps) Templates. These templates do not include the main train, do have iconic decoration elements to the right and left of the subprocess train stops to indicate process within process. See the Locator Element: Step by Step Train guideline for further details.
- Title/Header: The page title or first header on the page should indicate the subprocess name only. For instance, [SubProcess Name].
- Read-Only: If the drill down page is read-only, a "Return to [Main Process Step Name]" link may be used for the user to return to the main process.
- Editable: If the drill down page contains editable data, the standard train page level buttons should be used (e.g., "Next", "Back", etc.). On the last step of the subprocess train, or on any step at which users can exit the subprocess, the page level action/navigation buttons "Apply: [SubProcess Name]" and "Cancel: [SubProcess Name]" allow the user to navigate back to the main process.
When the subprocess is a non-linear, multi-sectioned/paged task (i.e., drilling from a train into page with Side Navigation or SubTabs), follow the Object Template with Side Navigation or the Object Template with SubTabs. These templates do not include any elements of the main train.
- Title/Header: The page title or first header on the page should indicate the subprocess name only. For instance, "[SubProcess Name]: [Side Nav or SubTab section Name]".
- Read-Only: If the drill down page is read-only, a "Return to [Main Process Step Name]" link may be used for the user to return to the main process.
- Editable: If the drill down page contains editable data, the page level action/navigation buttons "Apply: [SubProcess Name]" and "Cancel: [SubProcess Name]" allow the user to navigate back to the main process.
If a process requires branches of more than one page and the Process within Process approach does not fit your scenario, use one of the following work-around methods:
- Insert required options in the launch page (or page preceding the process), and then launch a separate train for each option.
- Skip a single step in the process if it is made irrelevant by choices in a prior step. In this case, Tip text must be associated with fields that cause the change in the Step by Step flow. The train stop(s) for skipped steps are retained, but are shown as disabled. See Visual Specifications, below, for an example.
- Consider using the Checklist Template. This template is intended to address cases in which a user needs to complete a task/process that contains many diverse steps. Such a diverse set of process tasks may make the user unable to complete all the tasks within a single session.
See the Step by Step Page Flows guideline for example flows with detail pages.
Visual Indications of Subprocess
See the following guidelines for detailed image examples of alternate launch pages used in step by step flows:
Note: The Checklist Template may also be used as an alternate re-entrant wizard for accessing already created objects/properties.
See Checklist Template as Re-entrant Wizard, in this guideline.
Links to the Step by Step template visual examples in this section:
Section Contents
Below are generic versions of a transaction step template within a step by step flow of 3 or more steps. The content area, number or sections and details vary given the specific application needs. The essential components used in a step by step template is the train and the next/back buttons at the bottom of the page.
Step by Step Template within a No Tab Application
Note: When the process name appears in the blue bar, use the step name as the page title.
Step by Step Template within a Tabbed Application
Step by Step Template with an Extended Train
Step by Step Template for Process Within Process (Train Within Train)
Step by Step Template for Process Within Process (Train to Subtab)
The example below shows a review page within a step by step template. A review page typically only contains view-only information relating to the previous steps where changes have been made.
At this step, the user may select "Finish" to complete a main process, "Apply [Subprocess]" to conclude a subprocess, or "Submit" to submit the information for Oracle Workflow approval. To recap, at this step, the user may:
- In a Main Process: Select "Finish" to return to the initiating page.
- In a Subprocess: Select "Apply [Subprocess]" to return to the main process.
- In an Oracle Workflow process: Select "Submit" to send the information to Workflow for approval, and return to the main process or initiating page.
Note: Submit, Finish, or Apply may be used on any main or subprocess step page when no further mandatory steps are pending in the process. Selecting one of these exit choices yields the review page, when a review page is included in the flow. Exiting a subprocess early does not finish the main process; the flow returns to the main process.
A Review Step
A Confirmation Page
A Confirmation Step with Message Box and Transaction Details
For details on confirmation templates, see the Messaging Templates guideline.
For details on printable pages, see the Preview and Printable Page Flows guideline.
If an action or selection on a page affects whether or not the next step is shown, a tip must be associated with the field or fields that effect the subsequent flow. In the example below, a radio button choice determines determine whether the user skips the following step or not.
Choice Leading to a Skipped Step
Sometimes it is necessary for a user to view or update detailed information from a specific step in the flow. This is a drill down page template. Below is an example of this template, when a step by step process is within a tabbed application.
Example of Drill Down from a Step by Step Flow
Open Issues
26-Jan-2003 - Further testing may be required to validate the "Apply: [SubProcess Name]" and "Cancel: [SubProcess Name]" Act/Nav labeling approach for subprocess templates. In particular, the 1-page subprocess needs to be evaluated for this.
Closed Issues
none