Locator Element: Step by Step Train

General Description

The "Locator Element: Step by Step Train" indicates the location of the current page within a linear process. The Train can be either interactive or non-interactive, depending on the number of steps in the process, and other application requirements. A linear process may be imbedded in an application with other task flows, or it may be the only flow of the application.

• General Principles
• Train Branching, Drill Down, and Skipping Steps
• Train Interaction
• Extended Train
• Train Within Train
• Visual Principles of the Train

Guideline Attributes

Interaction and Usage Specifications

General Principles

• The train is used only with Step by Step (3+) page templates, and as an option when displaying the properties of an object.
• Each train "stop" (circles on the train line) represents a page or step in a step-by-step process. Steps should be kept concise, and contain the necessary information that needs to be completed before moving the user to the next step in the process.
• The train is contextual to the entire page, and cannot be used for a section of content within a page.
• The train is present throughout a series of pages, while the content changes on each page.
• The Separator Line must be placed below the train to separate the train from the rest of the page content.
• The train should not include confirmation as a step in the process. Confirmation is a messaging page derived from a messaging template that appears after the process has been completed (changes have been applied to the database or submitted to workflow). For details of common steps in a step by step process, see Step by Step Page Flows, Step by Step (3+) Page Templates, and Locator Element: Next/Previous - Next/Back guidelines.
• The user may cancel out of the linear flow at any time. When the action/navigation button Cancel is selected, the page is redrawn to the initiation point of the linear process. This initiation location is the page before the 1st step of the linear process. In cases where the entire application is a linear process, then Cancel returns the user to the first page. See Save Model for Step by Step Process in the Save Model guideline for details.
• Breadcrumbs should not be used on the same page as the train.
• Avoid using quick links and other navigational elements in train processes. If pages accumulate too much detail, consider reorganizing the content across multiple steps.
• Do NOT use subtabs or Side Navigation in any step of a step by step process.

Generic Train with Separator Line

Example of Simple Train - HR Employment Event Module

Subtrain (Train Within Train Subprocess ) Indicators

Train Branching, Drill Down, and Skipping Steps

• The train is recommended to be used strictly for linear tasks.
• The train does not indicate any branching, and only shows the main steps in the linear process.
• However, if required, a step by step process can drill down to an 'inner' subprocess which can be one, two, or three+ levels (or pages). When done with the subprocess, the user should be returned to the launch point in the original main process.
• When the subprocess is a 1 step task, retain the main process parent train with all the elements disabled except the active parent train stop.
• When the subprocess is a 2 step task, follow the 2 Step Process Templates. These pages do not include any elements of the main process parent train.
• When the subprocess is a 3+ step task, follow the Step by Step (3[+] Steps) Templates. These templates do not include the main train, but do have iconic decoration elements to the right and left of the subprocess train stops to indicate process within 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 pages do not include any elements of the parent train.
• User choices can cause one or more subsequent steps in a process to be skipped. In this case, the train stop(s) for skipped steps are retained, but are shown as disabled.
• Since some additional revisions to the above templates are required for process within process scenarios (e.g., button terminology), please refer to the Branching, Drilling down, and Skipping Steps section of the Step by Step (3+) Templates guideline. Refer to the same guideline for flow examples of process within process scenarios and more details on branching in Step by Step processes.

Generic Train with Disabled Stops on a Drill-Down Page

Generic Train with Skipped Steps Disabled

Train Interaction

• Trains may be either interactive or non-interactive. Interactive trains allow users to jump one or more steps back, but only one step forward from the current page.
• Developers make a train interactive by specifying link targets. Recommendations for train interactivity depend largely on the number of steps in the train, and the complexity of data dependencies:
  • Four or less steps: Train interaction is NOT recommended.
  • Five or six steps: Train interaction is optional.
  • More than six steps: Train interaction is recommended, unless precluded by data dependencies.
  • More than 10 steps: Train interaction is HIGHLY recommended, unless precluded by data dependencies.
• Interactive trains provide a secondary/alternate navigation method. In usability studies, users most often click the Next and Back buttons on the page.
• Interactive trains should always be implemented in conjunction with the updateable Next/Back locator element.
• Applications should implement train interactivity consistently throughout a step by step process. If the train provides interaction on the first page, it should continue to provide links on subsequent pages.
• If feasible, implement train interactivity consistently throughout an application. (This may not be possible due to data dependencies in some processes).
• 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 not allow jumps of more than one step. See the Step by Step (3+) Template guideline for details on data dependencies.
• Visited links in the train are persistent throughout a session, unless removed due to data dependencies. If the user exits the step by step process, and then re-launches it, the new session starts with default link settings.

Generic Train with Interaction Links

Extended Trains

• Trains can display a maximum of six steps on a single page. Trains with more than six steps (extended trains) break up the steps into two or more sets.
  • Extended trains are typically interactive, providing links for all valid steps (visited steps and the next step), and appending the label "More" after the sixth step.
  • When the user advances to step 6, the train changes to include the link "Previous", the visited fifth step, and the active sixth step. The next step (step 7 -- if it exists) includes a link. Any remaining steps are disabled until the user reaches the preceding step. See the illustrations below for details on the behavior of extended trains.
  • If excessive data dependencies cause an extended train to be non-interactive, all train stop names become labels.
• The extended train has no size restrictions. Nevertheless, long processes can be cumbersome and confusing to users. If the linear process is more than 10 steps, it is recommended to reevaluate the task flow and determine whether some steps can be combined effectively in a shorter train.
• If an extended train stretches beyond 10 steps, it is highly recommended to make the train interactive and provide an updateable locator. Otherwise users will be forced to page back and forward one step at a time whenever they need to review choices made in previous steps.
• When an extended train is interactive, users may navigate using either the train or the Next/Back Page Locator Element.
• Users may step forward with:
• Train: The link on the next train step label to the next page
• Page Locator: The "Next" button
• Page Locator: The Next step in the choice list
• Train: The "More" link (only available when the user has jumped back to the previous set of visited steps)
• Users may step back with:
• Train: A link on a train step label to any visited page
• Page Locator: The "Back" button
• Page Locator: A prior step in the choice list
• Train: The "Previous" link (only available in the second or greater set(s) of steps)
• The following sequence of text and images shows how the extended train changes as users move forward and back through an 11-step process.

Example of 11-Step Process

A. Advance through the train to step 4 -- step 5 features a link, but step 6 does not.
B. Advance to step 5. Step 6 now has a link.
C. Advance to step 6. The train now shows a "Previous" link, and steps 5 through 10, with active step 6 as the second "stop".
D. Advance to step 7. The train continues to show steps 5 through 10, but moves the active step to the third stop.
E. Advance to step 8. Step 9 now has a link.
F. Advance to step 9. Step 10 now has a link.
G. Advance to step 10. The train now shows steps 9 through 11, with active step 10 as the second "stop".
H. If the user returns to step 9, the train displays steps 5 through 10, with active step 9 as the second last "stop". All other stops have visited links, and "More" also has an active link to enable a jump forward to the third set (which still contains an unvisited step).
I. If the user clicks Previous while stop 9 is active, the train jumps back to show steps 1 through 6, with step 5 now active. All other stops have visited links, and "More" also has a visited link to enable a jump forward to the second set (containing stops which have all been visited).

Note: In an extended train, "More" only becomes a link when jumping back. The link only shows as visited when every step in the subsequent set has already been visited.

Train Within Train

Some linear tasks require linear "subprocess" steps. For example, when entering content of a business card into a contact list, the user is required to create a new customer (the main process) and a contact for that customer (subprocess). In these cases, a train within a train should be used to indicate the subprocess.

When using a train within a train:

Subtrain (Train Within Train Subprocess ) Indicators

Refer to these BLAF Guidelines for more information on process within process:

• Intra-Application Navigation
• Step by Step Page Flows
• Step by Step (3+) Templates

Visual Specifications

Visual Principles of the Train

• Visited Step(s)
  • font size = 9pt CSS
  • font color = medium beige; #cccc99
  • font style = regular
  • font alignment = center aligned underneath circle
• Active Step
  • font size = 9pt CSS
  • font color = dark blue; #336699
  • font style = bold
  • font alignment = center aligned underneath circle
• Next Step(s)
  • font size = 9pt CSS
  • font color = dark blue; #336699
  • font style = regular
  • font alignment = center aligned underneath circle
• Next Step (with link in interactive train -- only for one step ahead of active step)
  • font size = 9pt CSS
  • font color = dark blue; #336699
  • font style = regular
  • font alignment = center aligned underneath circle
• Previous Steps (with link in interactive train)
  • font size = 9pt CSS
  • font color = brown; #996633
  • font style = regular
  • font alignment = center aligned underneath circle
• Disabled Step(s)
  • font size = 9pt CSS
  • font color = gray; #999999
  • font style = regular
  • font alignment = center aligned underneath circle
• Visited Line
  • size = 2 pixels high
  • font color = medium beige; #cccc99
  • alignment = center aligned with middle of circle
• Next Line
  • size = 2 pixels high
  • font color = dark blue; #336699
  • alignment = center aligned with middle of circle
• Disabled Line
  • size = 2 pixels high
  • font color = gray; #999999
  • alignment = center aligned with middle of circle
• Alignment of Train (and Separator Line) on Page
  • Train is center aligned within the content area of the page.
  • The separator line is left aligned with the page title header. It spans the entire width of the content area.
• Circles Representing Steps
  • Visited Step
    
    
  • Active Step
    
    
  • Next Step
    
    
  • Disabled Step
    
    
• Subprocess (Train Within Train) Indicators
  
  
• For exact vertical spacing above and below the train, see Content Layout: Spacing Above and Below Various Components.

Placement of Train Compared with other Components
The train is placed in a specific vertical location on the page as compared with other components. See Component Order guideline for complete list of the vertical order of the components.

Example of Train within a Step by Step Page Template
For page template examples using the train component, see Step by Step (3+) Page Templates.

Open/Closed Issues

Open Issues

Closed Issues

12-Feb-2002 - Added interactive links and extended train.
26-Jan-2003 - Added Train Within Train section and related edits.