Anatomy
The pattern includes the following elements:
- Number/Status Icon: Represents the step's sequential order.
- Step Summary: A short summary of a completed step.
- Short Step Description: A brief summary of the step's objective.
- Long Step Title: Provides a detailed inquiry into the purpose or goal of the step, we recommend a question.
- Content: Additional information or resources pertinent to the step.
- Button or Button Group: Allows interaction with the step, typically to mark completion or advance to the next step.
Steps
The Progressive Disclosure pattern offers three states: Active, Done/Completed, and ToDo/Pending. Each step is assigned a numerical identifier, arranged in descending order. Completed steps are marked with the check_circle icon.
Please note that users are unable to skip steps, for example they cannot jump from step 1 to step 4. Users must adhere to the sequential order of steps, although they have the option to move backwards to redo steps.
To Do / Pending – a step not yet completed
Active – the current step
Done/Completed – completed step
Content
The Progressive Disclosure pattern can be filled with either text or form elements, though each step necessitates a title and a button [or button group]. Additionally, other text forms such as lists or links, as well as downloads and other visual elements can be displayed.
Example: Welcome Screen
Example: Form, Download
Example: Summary