Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.
Use progress indicators to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.
When to use
- When you want to display a large process broken down into smaller steps.
- When you want to display the entire journey which the user is into.
- Completed step: Indicates a completed step of the journey.
- Active step: Indicates the current step the user is on.
- Future step: Indicates what steps lie ahed in the journey.
- Step Label: Optionally add a progress step label to provide context on what each step is about.
- Display the steps in order from left to right (or) top to bottom. Indicate to the user that they are performing a multistep process, and show the direction of movement. Allow the user to return to a previous step to review their data submission.
- Keeping the user informed of where they currently are within the process or task at hand will give them a sense of control. Clear labels should accompany the progress indicator to indicate what the user will accomplish within each step. Keep labels between one to two words
- Use validation to confirm that a previous step has been completed. If the user cannot proceed onto another step without first completing a task, use an Inline Notification to inform them.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.