Progress Indicators
Also known as Steppers, they are a navigation tool
and visual reference to list progress for a task completion. It is the base
of the Wizard component.
Use Case
- When an linear process can be easily sliced into steps that the user needs to follow for its completion.
Section 1
Section 2
Section 3
Section 4
Section 1
Section 2
Section 3
Section 4
Section 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum,
ipsa est. Odio, dolore quam, asperiores aperiam magni praesentium
iste necessitatibus reiciendis ad eaque.
Section 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum,
ipsa est. Odio, dolore quam, asperiores aperiam magni praesentium
iste necessitatibus reiciendis ad eaque.
Section 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum,
ipsa est. Odio, dolore quam, asperiores aperiam magni praesentium
iste necessitatibus reiciendis ad eaque.
Section 4
It is complete!
HTML
Do's & Dont's
Limit steps to provide better guidance
Progress indicators are able to show a maximum of 8 steps (including
the Completion marker). We have limited this as the purpose of the
component is to give the users smaller and concrete steps that are
easy-to-follow instead of more complex flows. Providing a longer
list of steps will contradict its goal.
Support it with other navigational
components
The Progress Indicator can be very similar in layout to other
indicators as Pagination and Breadcrumbs. However is quite important
to consider that their behavior is completely different and their
purposes too: the Progress indicator is not a navigational tool and
should be only used for small linear flows.
Please, refer to each one's use cases in order to better understand and select the proper scenarios for each component.
It is important to support its purposes with other standard components as navigation buttons (Back/Next) and Headers to differentiate the "slices" of the flow.
Please, refer to each one's use cases in order to better understand and select the proper scenarios for each component.
It is important to support its purposes with other standard components as navigation buttons (Back/Next) and Headers to differentiate the "slices" of the flow.
Keep labels short and interaction
consistent
Naming the steps of the progress indicator may be hard as the space
is reduced and a simple step may cover different pieces of
information. However it is very important to make it short and
concise, not only due to space constrains but mainly because of
clarity purposes.
Also consider that only steps already taken by the user become interactive; users are only able to click/tap directly on the following steps.
Also consider that only steps already taken by the user become interactive; users are only able to click/tap directly on the following steps.
Alternative and Related components
