Breadcrumbs and selected page

Question

I have a unique situation (if there is another post here outlining it please link to me so I can remove mine). I have a menubar at the top of my page with six links in it. Each link will take you to a new area within the webapp, and each new area will have a magnitude of sub pages to it. So My first thought was breadcrumbs, here is where my first snag comes into play:

I initially had each area link back to the users 'dashboard' (home page), but that was odd looking because the links to the dashboard sit on the same level as the rest of the links...

Here is a image to help you understand (this is what the user will see upon logging into the system)

From here if the user clicks 'Inventory' should they see

or

and furthermore: Do I need to keep the menu item 'selected' for the active page? or do the breadcrumbs take care of the identification.

I often get really hung up on the little things like this: so if anyone can offer their 2 cents that would be much appreciated.

Answer 1

The last mockup (Dashboard >> Inventory) is not an appropriate use of breadcrumbs; it would appear that I am in the Inventory subsection of the Dashboard section.

Think of breadcrumbs in terms ofa file directory like this:

Each breadcrumb is a subsection of the previous one, it's not a history it is a directory structure. Breadcrumbs should start at the top level directory of the current page. The browser's Back button will take care of the "back" functionality you're emulating.

Your second question seems unrelated, but showing which tab is "active" is logical and is standard practice on most platforms with an established Human Interface Guidelines document, including both Android and iOS.

Answer 2

Recently, I read a good article on UIE.com about breadcrumbs and they listed four different valid uses of breadcrumbs:

• Location Breadcrumbs show the user where they are within the site's hierarchy.
• Path Breadcrumbs show the user the path they took to get to the content.
• Attribute Breadcrumbs show the user the attributes they've chosen while conducting a faceted search.
• Application Breadcrumbs show the user the progress they've made in an application.

But as said in answers already, Path (historical) Breadcrumbs are rather odd nowadays. I guess because your browser history does this job, too.

To your examples: Third one could be a Path Breadcrumb, but wouldn`t it feel strange if you click back to Dashboard having a trail like Dashboard > Inventory > Dashboard? Best is to stick to Location Breadcrumbs in your case (First two examples)

Answer 3

The term breadcrumbs comes from a fairy tale, where a trail of breadcrumbs is left to trace the path taken.

On web sites, however, this is RARELY how they work. 10 years ago people experimented with that model, but these days, nearly universally, the term 'breadcrumb' now refers to the path back up the site map to the home page.

I don't like that term for that reason, but it's now the standards, so be it. (I had always preferred the term "topic path navigation").

So, that said, none of your examples make sense.

I'd say your main nav bar is the top level pages. They are self explanatory. The breadcrumbs below would then start at the secondary level pages.

So if you clicked on Inventory, then a page under inventory, then a page under that, it'd look like this:

Dashboard    [Inventory]   Other link
>> level 1 page >> current page

CURRENT PAGE TITLE

Answer 4

If you are looking to add a breadcrumb trail to your interface, then what you have posted with your images is correct, you will see exactly where you were last, and where you are now. Think of Hansel and Gretel when you think of breadcrumbs, they need to retrace their steps from exactly where they have been.

It is actually a very difficult thing to implement as you will need to have some logic that can track exactly the last page and add this to the breadcrumb. Most sites in fact use hierarchical links, which is what Ben Brocka has described in his answer, but called it the wrong name.

Think carefully about the application. Do you need to track exactly where someone has been so they can retrace their steps, or do you need to just show what hierarchy they are currently in? If it is the latter, which is usually the case, implement hierarchical links.

For an example of how breadcrumbs should operate, take a look at the NHS health explorer and click one of the spokes that comes off the centre, and keep continuing to do so until you have a bunch of history in the bar above. This shows you where you have been, not a hierarchy.