Steps bar

Overview

Use the steps bar to guide the user through a linear process with clearly defined steps, to make it visually apparent and foreseeable.

Steps principles

The steps bar answers these questions:

• Where am I in the process right now?
• How long is the process I am in right now?
• What steps are yet to be done in order to finish this process?

Best practices

Steps bar should:

• Present during the entire process.
• Clearly indicate the current position of the user in the flow.
• [To implement] Clearly indicate what steps are already done, and what.
• [To implement] Clearly indicate steps that are not available.
• [To implement] End with a closing page that formally ends the process and summarizes what has been done in the process.
• [To implement] Contain a clear call to action to finish the process.

Try to avoid:

• Having only a single step — don't use a steps bar in this case.
• Creating more than 5 steps in a single process — try simplifying the process.
• Giving a step a long name — should be 2 words at most.

Structure

• Previous step button
• List of steps
  • Step number
  • Step name
• Next step button / Finish button