Step Indicator
The Step Indicator guides users through a number of steps across multiple screens in order to complete the task.
Standard Step Indicator
The standard indicator displays a label for each step on larger screen sizes and scales to a more condensed version on XS/Small screen sizes.
When to Use
- This is the most common step indicator and should be used in most instances.
When Not to Use
- Do not use as a form of pagination.
- On smaller screen sizes, it may be preferred to use a Standard Indicator with Dropdown (as this provides the user with more insight into subsequent steps in a process).
Variations
- Standard Indicator (shown above)
- Standard Indicator with Dropdown
- Condensed Indicator
- Dropdown Indicator
Usage
Number of Steps
Keep the number of steps at a minimum (target 3 to 6 steps). For larger processes, consider breaking up into separate process flows. If a small number of steps is not possible, consider using the Standard Indicator with Dropdown or the Dropdown Indicator (as these allow for a large number of steps to be indicated within smaller screen sizes).
Visual Display
- The step indicator should appear at the top of the screen, below the main navigation.
- The step width flexes with the size of the container. There is a minimum width of 100px, and a maximum width of 160px. No step in this format should exceed this 160px even when a container far exceeds the total width of the step indicator.
- Replace the “Step X” label with the corresponding name of the step and keep labels extremely succinct.
Header Option
In the event that a step indicator requires a heading (separate from the Page Title), the following may be used:
Variations
Standard Indicator with Dropdown
This version displays the standard step indicator on wider screen resolutions, transitions to a condensed variation on medium screen sizes and transitions to a dropdown variation on the smallest screen sizes.
When to Use
- Use when there are a large number of steps and it is important to see the name of the steps on smaller screen sizes.
When Not to Use
- For processes with fewer steps, the standard step indicator is preferred.
Condensed Indicator
The condensed step indicator is similar to the standard step indicator with the exception of not including the label beneath each individual step. The label may appear above the step indicator, as an optional element
- Smaller scale
- Does not display a label below; instead the label displays on tap/hover
- Can wrap to more than one line, based on available space
- May display a label name (current step only) above the indicator (optional)
When to Use
- Use when there is limited horizontal space or when a smaller scale is preferred (on mobile applications, for example).
- When communicating the number of steps is important AND when it is not critical to communicate the name of each step.
When Not to Use
- When it is important for the user to know the name of each subsequent step.
Additional Guidelines
- On desktop, A tooltip should display on hover or tap to label each step.
- Try to limit the number of steps to six or fewer.
Dropdown Indicator
When to Use
- Use on smaller screen sizes when communicating the name of each step and/or the ability to navigate between steps is important to users.
When Not to Use
- Not recommended for larger screen resolutions.
- Not recommended for short process flows.
Additional Guidelines
- Use a disabled state for steps that the user is not able to access.
- When the user selects a step in the dropdown, the specified step should load and the indicator should display the new step.
Usage
There are 3 parameters in this component: type, header and subtitle.
typerepresents different variation of Step Indicator including Standard Indicator, Standard Indicator with Dropdown, Condensed Indicator and Dropdown Indicator.- Default
typeis Standard Indicator. headerrepresents the component whether have a heading (separate from the Page Title).subtitlerepresents the component whether have an extra label above the indicator.
Parameters can be set via HTML attribute or JavaScript. Add data-type, data-header or data-subtitle as attribute of component HTML node or using var stepInstance = new Spark.StepIndicator(el, {type:'condensed', header:true, subtitle:true});
to finish component configuration.
Notice: Configuartion via JavaScript has higher prority than configuartion via HTML attribute.
There are 4 methods provided for user to manipulate component: setStepState(), update(), bindStepClickCallback() and removeStepClickCallback().
setStepState()is for set certain state for certain step. There are 4 states:completed,current,disabledandincomplete. Notice that if you set a node tocurrent, it will removecurrentstate from other steps.update()is for manually update style of component. User can directly change value of configuartion liketype,headerandsubtitle, and after thatupdate()should be called to update style in the page.bindStepClickCallback()is for user to bind custom callback function on step click event.removeStepClickCallback()is for user to remove custom callback function on step click event.
Standard Indicator
This is default type of Step Indicator. You don’t need to set any parameters.
Standard Indicator with Dropdown
You can set data-type='standard-dropdown', or directly set parameter type='standard-dropdown' to set this variation.
Large Indicator
You can set data-type='large', or directly set parameter type='large' to set this variation.
This variation is not recommended directly using in product. It will remain “large” style and will wrap if there is not enough space.
It can be used in setting custom breakpoint by configuring type and update().
Condensed Indicator
You can set data-type='condensed', or directly set parameter type='condensed' to set this variation.
Dropdown Indicator
You can set data-type='dropdown', or directly set parameter type='dropdown' to set this variation.