Steps Page Guidelines

Steps Pages use the Steps component to separate a complex workflow into multiple individual steps. This can help make a process more transparent to the user, easier to comprehend, and easier to navigate.

When to Use Steps?

There are cases when it's best to give our users a multi-step workflow to complete a task. These workflows are usually long, complex, and might involve different UIs. For example, the Email Creation workflow contains a settings form page, the content editor page, the Deliverability Advisor, and a scheduling form page. Displaying the Email Creation workflow in a single page could be overwhelming, so it made sense to separate the workflow into multiple steps.

1. Steps should be linear, so the user can proceed through the workflow one step at a time.
2. The number of Steps and the name of Steps shouldn't change during a workflow.
3. Steps can influence the content of later steps.

Saving

Depending on the product, there might be a "Save" feature in the workflow. This means a user can start a workflow, save it after making some progress, and then return to it later, or let another user continue it.
When there's no save feature, the user has to complete the workflow to use its output.

For the save feature, we recommend displaying a dedicated Save button in the Page Title toolbar for each step, so the user can save modifications on demand.
For steps with form layouts, we recommend including a "Save and Next Step" button at the bottom of the form to guide the user.

When the user tries to navigate away from a step or a workflow without saving, we should always display a confirmation dialog, to avoid accidental data loss.

Overview Step

For longer, complex tasks, consider starting the workflow with an Overview Step. This can function as a breakdown of the workflow and help the user see what needs to be done, and prepare accordingly.

This steps can also show which steps are completed, and which steps contain errors.

Finalization Step

Before the user finalizes and completes the workflow, we recommend displaying them one last look at all the important data and settings.

Optimally, the data here should be validated, and if there’s an error, we should display it, and not let the user finish the workflow until errors are fixed.

Workflow Completed Page

After the user has completed the workflow, we recommend taking them to a page where we tell them that the workflow is completed, what are the results of the workflow (e.g. "Account Created. The account now can be logged into."), other information that might be relevant to the user at the moment (e.g. “Username: johndoe, Organisation name: ACME Corp”), and ways to continue from this step (e.g. "Go to Login" button, "Back to Home" button).

Success Notification vs. Page

On smaller, simpler workflows, it might make more sense to just show a simple feedback notification instead of taking the user to an entirely new screen.
The notification should be displayed after the user is redirected when the workflow is done, e.g. back on the Overview screen.

When it comes to bigger, multi-step workflows, we recommend displaying a workflow completed screen after the last step.
When it comes to simpler, single-screen workflows, where the user “gets in and gets out”, displaying a feedback notification is enough.