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.
Progress bars shows users a way to estimate how long they have to wait for a process to complete. They are usually transient and disappear when a process is complete. There are two types of progress bars based on the type of duration: a. Determinate, for a process with defined duration, such as a file conversion. b. Indeterminate, for unquantifiable tasks, such as loading.
When to use
- For a long process or journey that can take a considerable or unknown amount of time
- To visually show the process overview and constant feedback about where the user is in the journey or how much time it can take for the journey to be complete.
- Label: The process or journey the progress bar refers to.
- Progress bar: Consists of the background field (refers to the total length of the process) and the indicator (refers to how much the process or journey is complete.)
- Caption: Optionally adds helper text for additional information to be shown, such as file size in case of a file upload.
- When possible, show percentage and amount of progress completed. This helps users estimate how long the task will take to complete.
- If it’s helpful, display a description that provides additional context for the task.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.