Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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)

enter image description here

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

enter image description here

or

enter image description here

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.

share|improve this question
    
Whats your landing page i.e what page do your users land on when they get to your site –  Mervin Johnsingh Jan 27 '12 at 19:22
    
login page.. there will eventually be a short little info blurb on it. but for now.. login page -> dashboard –  rlemon Jan 27 '12 at 19:23
    
As an aside, although breadcrumbs may lead to your homepage, the homepage itself should not have breadcrumbs. See ux.stackexchange.com/questions/24608/… . –  Brian Oct 5 '12 at 19:04

4 Answers 4

up vote 9 down vote accepted

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:

enter image description here

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.

share|improve this answer
    
Thanks! That is exactly the type of reassurance I needed to move past this - I was not for or against either way of life. Just needed someone to make the call for me (with a logical argument). As for the unrelated question regarding active pages... It just looked redundant to me to show >> Inventory when Inventory is already displayed as active.. but I can see your point here, it may look odd to me but the more I look at the more I notice other sites/apps function the same. –  rlemon Jan 27 '12 at 19:34
1  
I think you are confusing breadcrumb trail with hierarchical links. A breadcrumb trail will track exactly where you have been, so the example shown by @rlemon is valid. What you are describing in your answer is hierarchical links, which yes, will follow the directory structure. Think of Hansel and Gretel when you think of breadcrumbs, they need to retrace their steps, so it is in fact a history! –  DigiKev Jan 27 '12 at 19:47
1  
@DigiKev breadcrumbs aren't necessarily hierarchical but that is the default use case, it's very rare (for good reason) to show non-hierarchical bread crumbs. They're supposed to follow your IA, not replace the Back button. –  Ben Brocka Jan 27 '12 at 19:50
1  
@DigiKev: I've never seen breadcrumbs online that would trace the navigational path. They always display hierarchical relationship to the homepage, unless they're faceted (think NewEgg) where you can remove some of them from the middle as a way of changing results filter. –  dnbrv Jan 27 '12 at 20:07
1  
@DigiKev I totally see your point; however at this point your are arguing semantics. :P breadcrumbs in the literal sense is a 'history' of what path I have taken to end up on this page. This type of tracking has very few use-cases in Web 2.0 (it has some, and is very useful to them). So +1 for calling it out correctly. -1 for kicking a dead horse. –  rlemon Jan 27 '12 at 20:32

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
share|improve this answer
    
+1, That is a very sensible approach. I made the mistake of asking the boss what he prefers and he said 'show the top level pages in breadcrumbs' –  rlemon Jan 27 '12 at 20:34
2  
Only asks Bosses what their business requirements are. Their UX preferences rarely mesh with the needs of the customer. ;) –  DA01 Jan 27 '12 at 20:38
    
internal application, boss is a customer. :P –  rlemon Jan 27 '12 at 20:39
    
ah, well, that should be a fun challenge ;) –  DA01 Jan 27 '12 at 20:44
    
Well. That's what i would recomend. I would add that you can make a megadropdown menu on dashboard link so you let users move with one less click –  jrosell Jan 30 '12 at 7:14

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.

share|improve this answer
    
At first my assumption was to build a hierarchical link system (under the pretence of 'breadcrumbs'), however now that I'm considering the wins/loses of the other approach. The only case I can see (and i'll likely just hack around it) is there will be a section where browser history (GET request) will need to be tracked for a maximum of three pages. (user clicks on A, sets some request vars, clicks on B -> C-> back to A (I want to remember the vars) - if I were to implement what you are talking about here would be the only place i would need it. –  rlemon Jan 27 '12 at 20:38
    
I agree that 'breadcrumbs' aren't the right name, but whether we like it or not, it is the accepted term for hierarchical navigation. –  DA01 Jan 27 '12 at 20:39

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)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.