Overview

The Stage-Step Indicator represents the current execution status of a process by a user. It shows the steps that have been executed, the current step where he can acts and the steps remaining to complete it.

The Stage-Step Indicator allows to navigate between executable steps and previously executed ones.

When to use

Use a Stage-Step indicator, a wizard, or a process flow if you want to display steps, their name and navigate to them. Otherwise use a progress indicator.

Use specifically the Stage-Step indicator when you have more than 7 steps or when you have several steps regrouped in several stages. Otherwise prefers the Wizard or the process flow.

Do not use this indicator in design time to manage steps (Create, Update, Delete) and configure the underlying process.

Anatomy

Steps

Steps displayed in Stage-Step indicator are the manual steps of the process that are supposed to be executed by the user. Automatic steps and steps done by other actors not displayed except if they block the execution of the next user's step. (See Temporary steps).

The execution of a step can be mandatory or optional.

Stage

A stage is a sequence of two or more executable steps ended by a completion step.

The Stage-Step indicator is a sequence of one of several stages.

A stage is considered as completed if all mandatory steps are completed.

A completion step is displayed at the end of each stage to give a feedback information on the successful execution of the current stage before starting the next stage. If, by design, you don’t want this step, that means that you don’t want to separate in distinct stages.

The Stage-Step indicator also displays the current step by a selected nested button. There is one and only one current step. It usually determines the main content of the page to execute that step.

Temporary Step

Temporary steps can appear after an executable step when an external task is waiting to be executed or its execution cannot bring to the next user’s step.

Interaction and behavior

Active/Inactive

An active step is step that can be selected to be executed, re-executed or to see the result of its past execution.

A stage is active if it contains at least one active step.

One or several stages can be active at a time, depending on their availability to be executed in parallel. All stages in parallel are displayed one after the other.

All steps of a completed stage are active.

The last completed step and all the previous steps of the last done step of the stage are active.

After the last done step of a stage, all the next optional steps and the next mandatory steps after the last done step of the stage are active. Then, the rest of the steps of the stage are inactive.

The stage after the last active stage is inactive, except of all the previous stages are complete.

The completion step of a stage is active only when the stage is completed (all mandatory steps are done.)

The last started step

The last started step is the step that becomes current step when the user navigate to start or resume the process

stage.

The last started step in initialised to the first step of the first stage.

The last started step of each active stage is defined by the application. We recommend that the last started step of a stage is the last step in which the user has started to interact in. When there is temporary step that blocks the process execution, the last started step is this step. To simplify the behaviour, the last started step can be also calculated as the next executable step after the last executed step of a stage.

The last started step of the Stage-Step indicator is the last step of the last current stage that is the stage where the user has navigate in.

The completion of an executable step is provided by the system.

If the next step is a step done by another actor that cannot be executed immediately, then a "pause' step is temporary displayed after that step.

If there is a validation step by another actor (manual or automatic) that invalidate the previous step or the process execution has a non-expected error, then the stage is in error, and an 'error" step is temporary displayed after that step to display the error and provide recommendation to correct. If the correction consist to go back to the previous step, the suer can select the previous step in addition to an explicit way that navigate back to this previous step where to error message will be also provided.

In all the other cases the next step becomes the current step.

Deep linking

Each step has its own URL to provide these functionalities:

As this Stage-Step indicator allows to navigate in a process execution than can last days or months, the user will be able to bookmark the current step to retrieve it later. For example the user may want to reference one of the past optional step into his todo list.
As the user can execute several steps in parallel, the user will be able to open each step in distinct browser window.

There is also a URL, without any mention of the step that correspond of the process execution itself. It is used to navigate to the last started step of the process to start or resume its execution.

The URL of all temporary steps are the URL of the process execution. There is no specific URL for them.

Expansion: Expanded, Compacted & Collapsed displays

Note: The current stage is the stage of the current step.

For desktop

The current stage is expanded,
All other started and not completed stages are compacted.
The previous and the next stage are compacted.
All other stages are collapsed.

There is no Call to Action to expand or collapse manually the stages. The expansion is only driven by the selected step.

Don't make the confusion between the collapse of stage and the shrink due to the responsiveness of the expanded stage.

For Mobile

There is only the compacted and collapsed stages:

The current stage is Compacted
the other stages are collapsed.

Selection of steps

The nested buttons and labels of active steps are selectable.

Stages titles, inactive steps and progression bars are not selectable.

navigates to the step in a new browser tab.

Multi-selection of steps are not possible: The and simply selects. (Ctrl and Shift modifiers are ignored)

Selection of the current step keeps the step selected (and reload the content?)

on a step simply selects it like a single click.

Scroll

If, despite responsiveness behaviour, the whole component cannot be sometimes fit in its container, the progress indicator can be scrolled horizontally. This can frequentl

On mobile, a menu appears on the selection of enabled collapsed stages or enabled steps of compacted stages.

On desktop, a menu appears on enabled compacted stages only. enabled steps of compacted stages and expanded stages are directly selectable.

The menu contains all

On desktop, the context menu contains the Call to Action "Open in a new Tab" that opens, thanks to the deep linking, the step in another browser tab.

Responsiveness

Stage Label

Stage labels are not displayed on mobile formats.

Stage label are not displayed if there is only one stage.

Stage label cannot be larger than the stage.

Step Label

Step labels are not displayed on mobile formats.

Step labels are not displayed on collapsed stages.

In the expanded stage, label and nested button are left aligned for the first step, right aligned for the last step, and centered for the other steps.

The spaces between step labels are equally distributed, with a minimal distance of 16px between them.

If all labels cannot completely fit in the width allocated for the stage, some texts will be truncated (a maximum with to all texts will be given) and some steps will have their label hidden.

Leave Feedback

We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.

Leave Feedback