User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm creating a troubleshooting website and part of it is decision-tree based.
I plan to show the path the user is on in a breadcrumb-like fashion. If a user selects different options then they go off down a small path before eventually arriving back at the main path.
When the user comes off the main path to go down a small path I want to be able to show that secondary breadcrumb while keeping the main breadcrumb visible too.
Has any one got any tips or references?
The whole point of a breadcrumb is that it shows a linear representation of the path you choose from a tree of options. If you start embedding sub-paths in your breadcrumbs, the user might get confused about where the next decision they are taking will be placed in the scheme of things. Not to mention I can't imagine a visually appealing design for embedded breadcrumbs.
Just because a few questions are closely related they shouldn't appear as different from the rest of the path... To the user, they're still questions.
So even if there is logical separation in the answers that are presented at the end of the sub-tree, there's no separation in the questions, and that's what the user should perceive. This means keeping everything in the main path.
If something really does require multiple steps to get to the next question, and these steps are clearly1 part of the same sub-process, then the best way to show this is with a breadcrumb/progressbar. Example below (although possibly not the most attractive one) about connectivity troubleshooting.
This indicates that there is a work in progress before any insight whatsoever can be gained from the information provided in that section. The steps should be short enough that the user doesn't need to refer to previous steps during that time, eliminating the need to click through them like other crumbs. Once the section is complete, the progress indicator disappears and a new breadcrumb appears.
1 This means clear to the user
