Progress indicator

Overview

Use progress indicator to help user to keep track of their progression. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.

States

1. Default state
   State visible on the next steps.
2. Active state
   State visible when a step is active.
3. Complete state
   State visible when the step is complete.

Anatomy

Progress indicator can display up to 7 steps. If the process contains less that 7 steps, they will occupy the whole width of their container. If more than 7 steps, the indicator will truncate a portion of the steps, depending on the user's progression.

1. Step title
   Indicate the name of the step. Use clear and concise labels to facilitate user's understanding (e.g.: delivery method, document upload)
2. Progression bar
   Provides an additional hint about the progression, depending on its location.
3. Progress step
   Displays the step number and status.
4. Tooltip
   Shows the name of a given step on hover (or tap on mobile), it gives some context about passed and future steps.
   More infos about the tooltip
5. Truncation indicator
   When the tasks takes more than 7 steps, the steps are truncated to keep a reasonnable amount of steps displayed on the screen.

Behaviour

Less than 7 steps

Steps will spread horizontally to take up the full width of the container.

More than 7 steps

Depending on the progression of the user, truncation can happen at the beginnning, the end or both ends of the progress indicator.

• When the user is at the first 5 steps of the process, the truncation happens at the end of the component.

  

• When the user is in the middle of the process not close enough to display the 5 first ones, not far enough to display the 5 last ones. The truncation happens on both ends.

  

• When the user have already performed enough steps to display the last 5 ones. The truncation happens at the beginning of the progress indicator

  

Best practises

1. Logical progression
   Display the steps in order from left to right. Indicate to the user that they are performing a multistep process, and show the direction of movement. Allow the user to return to the previous step to review their data submission via a previous at the end of the current screen

   

2. Indicate the current step
   Keeping the user informed of where they currently are within the process or task at hand will give them a sense of control. This helps the user to know where they are in relation to where they have been, and what sections are to follow. Clear labels should accompany the progress indicator to indicate what the user will accomplish within each step. Keep labels between one to two words.

3. The endowment progress effect
   Improve tasks completion rate by starting at step 2 with a step one already completed.

   

4. Validation
   Use validation to confirm that a previous step has been completed. If the user cannot proceed onto another step without first completing a task, display a disabled button at the end of the task.

   

Related elements

Progress indicator vs. Timeline

Progress indicator offers an indicative information about the progression of the user within a multi step task. Whereas timeline is more adapted to offer the user an interactive set of elements to indicate a chronology of events. (e.g. tickets follow up, informative content about processes, etc.)

More infos about the timeline