Tag Info

Hot answers tagged

30

Your problem isn't how to mark the link. The problem is that the link appears to be something other than you intended. A breadcrumb trail shows you how you got where you are, and ideally providing links back to where you've been. It is not a navigation element to show you new places that you can go to. Looking at that screen, I would assume that the ...


28

It can work well, but I wouldn't recommend the method that you are proposing. You can use breadcrumbs as a form of progress bar, which not only solves your navigation issue, but shows what still has to happen better than a pure progress bar. It is also common practice on some of the most used websites, so your users are likely to already be used to it. ...


26

Microsoft does this in Windows Explorer! I noticed this on my Windows 7 work computer just a few weeks ago, and I can't stress enough just how handy it is (in certain situations) The key here is that they made it exceedingly functional but it also stays out of the way until the user discovers it.


23

The problem I see here is that you're using a styling which is originally and frequently used to signify a link that will take you somewhere else, where instead what happens is that a drop down of options appears. I would use a ▼ marker at the end of the label to indicate a drop-down menu behaviour. That's a unicode character 'black down-pointing triangle' ...


20

Breadcrumbs Rock! And I think you have a personal bias against them rather then making a clear observation about their use. I notice none of the big players (StackExchange, Facebook, Google, YouTube) use breadcrumbs. StackExchange uses tags. Those are like breadcrumbs, but it's an associated way rather then structural. Facebook uses AJAX inplace ...


16

If you're on mobile and you feel you need traditional style breadcrumbs to navigate then something probably went wrong with designing your site for mobile use - ie it's too complex (too deeply nested) for the type of usage and environment that mobile provides. Jared Spool wrote on ixda in response to a similar question Can't speak specifically to ...


12

The use of the progress bar pattern is helpful if a user would benefit from knowing where they are in a multi-step process. As you noted, it should not be styled to look like links if it is not clickable. Here's an example from the Yahoo Design Pattern Library:


11

2007 article from NN/g Breadcrumb Navigation Increasingly Useful Summary: One line of text shows a page's location in the site hierarchy. User testing shows many benefits and no downsides to breadcrumbs for secondary navigation. Consistency is a key principle for UX design. If you implement breadcrumb for some pages and not for others, you are breaking ...


10

I believe that unless you have a compelling reason (I haven't yet come across one) not to include "Home" in your chain, that you should just leave it in. It's a small unobtrusive affordance which allows users who have already been navigating mainly with your breadcrumbs to continue to do so back to home. They needn't go any further (like up to your logo or ...


9

A breadcrumb has two goals: show where you are and take you up (back), one or more levels. The current page in the breadcrumb is usually not a link and therefore displayed differently. On a house page, you should have (the current page is bold, the others are links): PersonName \ Assets \ House The asset list page has: PersonName \ Assets The ...


9

That's a great question - I have a post I've been working on for a while where the intro is: The Brothers Grimm's Hansel and Gretel is a story of a brother and sister who are sent into the forest to look for food. The children leave breadcrumbs on the ground as a means of trying to create a trail to follow home. Ironically, the breadcrumbs ...


9

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 ...


8

I would say that it depends on the site. You could categorise mobile websites into two categories: A bespoke mobile website / app that is a stripped-down version of the full site only offering the most appropriate content for mobile users A responsive website, or a desktop site rendered in a separate mobile 'template'. With the first type of site then ...


7

I don't see a huge problem with this, although the danger is that the second line is misinterpreted - e.g. as a 'sublisting' as opposed to a continuation of the breadcrumbs. You might want to emphasise the continuation with a leading separator, and a negative text-indent might also help (so the second line is then indented). I would suggest that, if your ...


7

Putting the breadcrumbs above everything else on the page creates a false visual hierarchy. I suggest you read Steve Krug's Don't Make Me Think for a more detailed explanation (chapter 6 discussed navigation and breadcrumbs). To summarize it very briefly, each section on the page has a header, usually containing titles, but can also contain actions, ...


7

I don't know an agreed upon name for it. It certainly is a derivative of the breadcrumb pattern. I would call it a recently viewed feature or recent history. But I don't think its common enough that it merits a jargonny name. IMHO. It's a handy feature...if I were applying it, I wouldn't cause potential confusion by applying a breadcrumb pattern. (UNLESS, ...


6

Yes, it's possible to integrate filters with breadcrumbs to create a more robust product browsing experience. Such a system is called faceted navigation (your filters are facets). There's one catch to it: you must give your users the option to edit/remove any of them without changing the rest. Faceted navigation mimicking breadcrumbs is easy to implement in ...


6

I think the best place to put breadcrumbs is in the trash. They don't really provide that much value to a site. If you insist on having them, then after the site navigation is the best place to put them. Putting them at the very top of the site is a VERY bad idea to me. It's going to hurt your SEO and accessibility for sure, and it is also likely to hurt ...


6

If you are using the progress bar to move forward and backward, you are essentially implying that the user is 'undoing' his progress or is able to jump forward (?) in progress. Separate your concerns and use the progress bar to show progress and use a navigation to navigate. Do not jumble the things. If the user needs to think twice whether his action will ...


6

If you're talking about mobile apps, the top left is the standard position for both iOS and Android (technically it's the up button on Android, but that's close enough). If you're talking about a website, there is no standard placement for a back button, as there is a keyboard back button, and so most sites don't bother with a back button. That said, I ...


5

Well, if you need to start from a specific place and you can go in different directions, then you just have navigation, it doesn't have much to do with breadcrumbs. Normally breadcrumbs imply that the user has reached the current page through a series of nodes that he actually did take. So you can display those nodes, and the fact that there are other ...


5

In the last mockup you are using a sort of popup menu to display a hierarchy. I think this is very confusing since the best way to show a hierarchy is a tree view... which you already have. A question: what happens when you click "Layer Name 3" in the tree? Does it show a list with links Feature 1, Feaure 2, Feature 3,...? If yes, then here is my ...


5

I would avoid using direct drop-down boxes as you have in the example, because it will prevent users from understanding its purpose as a breadcrumb trail. Instead, follow Microsoft's example with their file navigation; highlight on hover to indicate clickability (perhaps changing the > symbol on hover to a v symbol to indicate a drop-down). By displaying a ...


5

I have seen two websites, using sort of this breadcrumb pattern. And for me it feels quite effective. Aparently, if you have a huge structure like the Guardian has. One is exactely the behaviour as windows explorer has - lonely planet and guardian uses a different approach, which I like for its clean design. The latter has its submenu items (or listbox ...


5

I think it depends on how you have organized your site's data structure. If your site presents information that is hierarchical in nature then breadcrumbs can help navigate 'up' a level to similar data from a leaf node. of course, it's possible to organize some data into a hierarchical manner even if it isn't necessary. Nowadays though, sites are trying ...


5

Among developers and designers, English terms are widely understood and often used as such or as adapted to different languages. Widely, but not universally. To end users, the first problem is that the very concept is not as familiar as many designers think; and even if the concept is known, it might be known under some other name. But normally, such a ...


5

The back button in apps depends largely on which platform you're developing for. Here's a few use cases. Android apps Android phones typically have a soft key for the back button. The function is to go to the previous page. This is referred to as temporal navigation. According to the Android design principles, arrow in the action bar is to go one level ...


4

If you're using the breadcrumb approach I would expect the choice you offer in the popup to be available when I click the parent breadcrumb. It's also not clear that the ancestors are clickable in any way. I would suggest using some sort of button instead of the label you currently use; or at least turn it into a button on-hover. Some users might get that ...


4

Take the normal URL, http://ui.stackexchange.com/questions/3287/how-should-a-breadcrumb-behave As you can tell it's very cryptic: What's the domain? Is it http://stackexchange.com or http://ui.stackexchange.com/ or maybe http://ui.stackexchange.com/questions/ Truthfully it could be any of those. Writing "Home" in the URL isn't exactly useful or saying ...


4

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 ...



Only top voted, non community-wiki answers of a minimum length are eligible