General guidelines
Use a stepper when the user needs to be guided through multiple steps (form, setup, configuration, …).
It is a good practice to divide the workflow to reduce the cognitive load and give a global overview to a novice user.
Best practices
- Highlight the current page number must be always highlighted: users should always know where they currently are and where they can go.
- Always use a legend indicating the number of entries (e.g. “Showing 1-30 of 3,500 entries”)
- Prefer a see more button to a pagination when you have several lists of items (for exampleon a dashboard).
- Articles and linear contents should never be broken up into multiple screens.
- Do not use pagination for less than 25 items.
- On mobile, don’t use overflow pagination.
- Specify to the development team if the stepper steps are interactive or not. For example, can the users go back directly to step 2 if they are in step 4 ?
Behaviours
Steppers are composed of 3 states of steps, with different styles:
- Completed: already visited.
- Current step: currently displayed.
- Uncompleted: not visited yet.
Mobile usage
In some more simple cases (on mobile, for onboardings, tutorials…) prefer a more discrete option - without the label or using simple progress indicators.
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.