Stepper and onboarding stepper
Last updated
Was this helpful?
Last updated
Was this helpful?
Stepper is designed to help users create any complex item within Mirakl in a simple way.
Stepper should be used:
For standard, sequenced experiences
For complex item creation
Stepper should not be used:
Do not confuse users with mixed topics within a single step; keep one idea per screen.
Users need to understand why we're asking for specific information and how we will use that information. Add context and guidance to make the user feel confident.
Keep labels short and consistent (nouns for all steps, actions for all steps).
Each step is clickable.
Savebar actions are standardized.
A third Save as draft action can be created depending on project needs, but it is not an off-the-shelf feature.
To exit the stepper, the user can click the “Back to” link + will get a "prompt before you leave" modal.
When the user clicks the Primary button on the last step of the Stepper, the Async button gets a Loading status.
Errors are managed automatically by Roma.
Users know there are errors as the progress steps relevant steps change color.
If there are errors within one step of the stepper, the user is automatically redirected to the relevant step.
If there are errors within several steps of the stepper, the user is redirected to the first step where there’s an error. The user can then navigate between the steps to solve their errors.
The onboarding stepper is dedicated to onboarding experiences for new users. Its simple design helps users provide key information quickly and seamlessly.
Within Mirakl, the onboarding stepper should be used:
When a user is setting up an account for the first time
When a user is setting up an organization for the first time
When a seller is creating a store
The onboarding stepper shouldn’t be used:
Do not use a datatable within the onboarding layout.
Do not confuse users with mixed topics within a single step; keep one idea per screen.
When asking Mirakl users for information, keep the number of steps to an amount users are able to take in (4 or 5).
Users need to understand why we're asking for specific information and how we will use that information. Add context and guidance to make the user feel confident.
The onboarding stepper is made of:
On one side, an illustration picked from the Mirakl library that must be relevant to the overall theme of the form
On the other side, a form with:
A logo (optional + can be changed at each step of the form)
A title
A progress bar
Form fields
Save/Cancel button group
The onboarding stepper has 2 save modes:
in memory (when the last step is approved)
in the database (save at the end of each step)
Errors are managed automatically by Roma.
If there are errors within one step of the stepper, the user is automatically redirected to the relevant step.
If there are errors within several steps of the stepper, the user is redirected to the first step where there’s an error.
For onboarding experiences. Use the instead.
Never add an illustration to a stepper. Use the instead.
Users must fill in their form quickly to secure their arrival on Mirakl. Use standard form components such as , options, , etc.
Learn more about how works for the progress steps.
One with Back + Continue actions
An appears with all the errors from the current step. When the errors are fixed, the user must save the step. If they don’t and click on the progress steps component, they will get a "prompt before you leave" modal.
For standard, sequenced experiences. Use instead.
Users must fill in their form quickly to secure their arrival on Mirakl. Use standard form components such as , options, , etc.
You may add an at the end of your onboarding stepper.
