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.
They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed. Use a loading spinner whenever the wait time is anticipated to be longer than three seconds.
When to use
- To give visual feedback on user's action, when it's made.
- To keep users in the loop and giving up on the journey.
- To show progress on user action.
- Spinner: Animates when it's loading.
- Description: Optional text, which adds feedback to the loading state and let user's know what's happening.
- Be shown to the user as least as possible.
- Give time estimation.
- Explain why the user needs to wait.
- Make the waiting process less frustrating.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.