2 Step Process/2 Page Object Template

General Description

• a "do"/transactional step and a review step
• a "do"/transactional step and another "do"/transactional step

Guideline Attributes

Interaction and Usage Specifications

General Principles

• 2 Step Object Template is used when either:
  • a 1 page object template is too long or dense and should be broken into 2 pages
  • an object contains 2 distinct properties or groups of information and/or there are dependencies between the 2 properties
  • an object is complex and/or contains sensitive data where reviewing the data (the second page in the process) is necessary.
• For page title verbiage in the 2 Page Object Template, see Page Titles and Breadcrumbs: 2 Page Object Template.

Common Components in a 2 Step Process Page Template

• Branding
• Global Buttons
• Tab/Navigation
  The tab/navigation components remains active at the point at which the 2 step process is initiated within the application. Some applications are only 2 step processes. In these cases, commonly the tab/navigation component is configured to a "no tabs" state.
• Page Headers/Subheader/Subsubheaders and Lines
• Content Layout Templates
• Action/Navigation Buttons - Page level action/navigation buttons have a consistent configuration for 2 step processes. See examples below.
• Page Footer

Page Level Action/Navigation Button Configuration for 2 Step Process Templates
The page level action/navigation buttons on a 2 step process have a common configuration depending on whether or not the 1 step template is displayed or the 2nd step template is displayed. Below explains the configuration, as well as a picture example. The button labels change slightly depending on whether or not the 2 step process involves review as a the second step.

NOTE: Page level buttons are repeated at the top fo the page as well. See Action/Navigation buttons for details.

• First Step (with Second Step as a Review Page): Action/Navigation Button Configuration of a 2 Step Process
  • A "Return to 'X'" link may be used if applicable to the context of the application. This takes the user back to the initiation point of the 2 step process. If the initiation point is not known (possibly the process was started from another server on the internet, and not within the intranet) then this may not appear.
  • Cancel - This button cancels the 2 step process and all work that has been done, and takes the user back to the initiation point of the process (not the first step.)
  • Review - This button takes the user to the review step in the 2 step process.
• First Step (with Second Step as another transactional/form page): Action/Navigation Button Configuration of a 2 Step Process
  • A "Return to 'X'" link may be used if applicable to the context of the application. This takes the user back to the initiation point of the 2 step process. If the initiation point is not known (possibly the process was started from another server on the internet, and not within the intranet) then this may not appear.
  • Cancel - This button cancels the 2 step process and all work that has been done, and takes the user back to the initiation point of the process (not the first step.)
  • Continue - This button takes the user to the next step in the process.
• Second Step: Action/Navigation Button Configuration of a 2 Step Process
  • Cancel - This button cancels the 2 step process and all work that has been done, and takes the user back to the initiation point of the process (not the first step.)
  • Back - This takes the user back to the first step in the 2 step process. This may or may not be the last viewed page, depending on whether or not the user last selected a sub page from the second step (a button on the second step page that took them to another page, and then returned them to the second step) or a global button flow from the second step (user selected a global button to a global section then returned to the step.)
  • Submit or Finish - A "Submit" or "Finish" button is used in place of the "Continue" button at the second step in a 2 step process. A "Submit" button submits the data to workflow and a "Finish" button directly applies the changes to the database without workflow. (See Language in UI guideline for verbiage details.) When this button is selected, it may take the user to a confirmation messaging page if a confirmation is needed. Otherwise, once the button is selected, the page in which the transaction was inititated is drawn. Many times, the object that was created or updated, say, is now displayed, reaffirming the user their transaction is complete.

Typical 2 Step Process Flows
Refer to the Step by Step Flow guideline for schematics of how all the page templates flow together for this type of linear process.

Visual Specifications

2 Step Process - First Step "Do"/Transactional Step
Below is a generic schematic of a transaction step template within a 2 step process flow. The content area, number or sections and details vary given the specific application needs. The essential components used in a 2 step process is a common action/navigation button configuration at the bottom of the page.

2 Step Process - Typical 2nd Step/"Do" Transactional Step
The schematic example below shows a second page within a 2 step process flow. This may be another transactional step where the user enters more information, and it is the last step to complete the task at hand. At this step, the user either selects "Submit" or "Finish" to complete the process.(The button terminology is determinant on whether or not the data is submitted into workflow, or submitted directly to the database.) A review step may or may not be necessary given the users frequency of use of the application, or the complexity of changes that were made earlier in the 2 step flow.

2 Step Process - Typical 2nd Step/Review Step
The schematic example below shows a review page within a 2 step process flow. A review page typically only contains view only information relating to the previous step where data changes have been made. At this step, the user either selects "Submit" or "Finish" to complete the procss.(The button terminology is determinant on whether or not the data is submitted into workflow, or submitted directly to the database.) A review step may or may not be necessary given the users frequency of use of the application, or the complexity of changes that were made earlier in the 2 step flow.

Confirmation Page Template
A confirmation template may be shown after a 2 step process is complete. The message is confirmation to the user that the changes made in the process have been commited to the database or submitted to workflow for approval. It is important to analyse the frequency of use of the application, and users experience level to decide whether or not a confirmation template is necessary to show following a 2 step flow.

For detailed schematic of a confirmation messaging template see the Confirmation (or Messaging) Template guideline.

Open/Closed Issues

Open Issues

none



Closed Issues

none