119

A breadcrumb is a hierarchical link, not a historic link. It shows the user the hierarchical position in the site, not a trail of where they've come from. For example, the user could have landed on that page from a direct Google search, or from a link in the website footer. So a browser back button on clicking the breadcrumb 'Search' item would be pretty ...


43

Breadcrumbs are the wrong concept for your use case Your problem, as you have found out: There are multiple valid routes from the currently selected item Shakespeare to its category Writer. Breadcrumbs, however, are at their best when there is only one route. What to do? Use tags on the items. Following your example, Shakespeare would be tagged with ...


42

TL;DR: Top, or both. Nielsen notes that consistency breeds familiarity, so you should comply with conventions to meet user expectations: This consistency means that people know a breadcrumb trail when they see one, and immediately know how to use it. Consistency breeds familiarity and predictability, which breed usability. This again means that you must ...


34

It's not a good idea to break the convention of a single breadcrumb path. Because of how breadcrumbs are generally designed it's fair to assume that people expect them to make it possible to: see where they are see how they got there navigate back in the path Multiple breadcrumb paths would probably make this very difficult if not impossible. If you ...


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


13

Some names could be... Progress Bar (although it can be confusing in certain contexts, in my opinion) Multi-Step Indicator Step Progress Bar Segmented Progress Bar Step by Step Progress Bar Progress Meter Progress Tracker Progress Indicator Checkout Navigation Form Navigation Step Navigation Navigation vs. Indication If the steps are clickable links I ...


13

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


12

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


12

A page has one breadcrumb. After all, it's located in only one location within the site. Showing three breadcrumbs at once seems a bit odd. It looks to me like you're a bit confused about the function of sitemaps. Sitemaps (and by extension, breadcrumbs) are an overview showing the structure of your website. You visualize where the pages are nested. The way ...


11

Providing that the links in your breadcrumbs are appropriately styled (i.e. they look and behave like links and look like the other links in your site) and have appropriately meaningful anchor text, then you shouldn't need to include the "You are here". Other conventions are that the separators are either right angle brackets > or slashes / and the ...


9

I would argue that breadcrumbs used on a mobile site could in fact provide better usability, and share a multi-purpose. One of the things mostly seen today with responsive (mobile) sites is collapsing navigation that turns into a drawer/hamburger icon up top, once that navigation is hidden the only way to give a visual aid to the user of what page they are ...


9

You have a few options. I like the responsive "where am i?" breadcrumbs as demonstrated here. This option has the full breadcrumb trail in large windows and shrinks to only show custom text (such as "Where am I?") in narrow windows and on mobile devices. Example: Full screen: Home > Section 1 > Section Title That is Longer Becomes: Where Am I? &...


8

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


8

Some ideas: Logo / Brand name Remove "Menu" and make the breadcrumb smaller, so it doesn't suggest some relation with "File"


8

What do breadcrumbs do? Show how the user navigated to a particular page Show the hierarchy of a page NNGroup says: For polyhierarchical sites, breadcrumbs should show a single pathway in the site’s polyhierarchy. If a page has multiple different parents, identify a canonical path to it in the site hierarchy and show that path in the breadcrumb trail....


7

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


7

We had a similar problem at the project I am currently working on. We decided that the breadcrumbs should represent the static hierarchy of pages - rather than the user's history. When representing the history of visited pages, the path would soon get confusingly complex, because search features, cross-links, etc. can generate a lot of redundancy. On the ...


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

Should there be underlines for the breadcrumbs to make them look like links? They must respect overall site design. If all your navigation links are underlined (including your main navigation menu) then make them underlined. Just be consistent, exceptions must be justified. Arrow(>) or forward slash(/)? ( To make it look like a trail the user followed or ...


6

Location Based Breadcrumb: this shows the trail of current file location from the main directory. Like documents folder on your system. Attribute-Based Breadcrumb: this shows the trail of attributes of which your items fall into. i.e., like if your item is Pendrive, it falls into data storage attribute which is an attribute under computer peripherals, ...


6

I agree with you. The forward slash (/) does give a fair chance to novice users to think about it. Which why it would be best to replace the forward slash with an arrow or a backward slash \ . The backward slash would even indicate that you can go a step backward using that breadcrumb navigation. Arrow Backward Slash


5

The short answer is it depends. On a basic website with a handful of pages, breadcrumbs are certainly unnecessary. But on larger sites (especially reference and documentation sites), breadcrumbs are extremely useful for navigation and orientation—one might even say they're downright necessary. The hard part is determining whether your site is large enough to ...


5

Breadcrumbs are good for storing information. It will make easier to remember the path of the information, not only navigate around them. It enables you to cluster the information.If you have not much information, you do not need breadcrumbs but you ll need it when you are dealing with complexity. Breadcrumbs tells a lot about how the information ...


5

Lose the breadcrumbs ... ... and you are fine : download bmml source – Wireframes created with Balsamiq Mockups As @DA01 said: Given the left menu is a tree menu, is there really a need for breadcrumbs? A tree menu is, essentially, vertical breadcrumbs


5

TL;DR Main menu leads the user, while breadcrumbs are following him. They relate like a GPS navigator and a GPS tracker. Main navigation supports and helps to form user's mental model of what is on the site. It has constant structure and is presented on the same place, with the same information. It's very reliable and consistent mean for navigational tasks. ...


5

Simply rename the breadcrumb and (ideally) the title of the page from General to General Settings Same goes for the rest: Privacy Settings, Notification Settings, Content Settings Currently, the user sees the word General as the page title which is vague and confusing even with side menu open. The users shouldn't have to depend on the side-menu to realize ...


5

Yea, I second Rob's recommendation, above. The breadcrumbs are an ancillary navigation tool and a guidepost for visitors dropping into the site hierarchy from search. So, they should accurately reflect the user's position in the hierarchy and show the whole hierarchy. Most often the breadcrumbs will mimic the folder structure of the site, or an idealized ...


4

It is called a Progress Bar or Progress Meter. You can find slightly different implementation of a progress bar on UI Patterns.com


4

There is definitely usability benefit in creating user-friendly URL's that are descriptive of the page. It is also beneficial for a search engine and will aid the performance of your pages in organic search if they are rewritten like school.edu/admissions/apply-today/ to use your example. Breadcrumb trails are also beneficial for users to show the hierarchy ...


4

First of all you can choose from more UI options to show and navigate through hierarchies. Additionally to breadcrumbs and tree view there are e.g.: menus and submenus navigation (traditional and ring menus) nested labels (allowing more hierarchies) column navigation (like in OSX Navigator) path navigation (like in Windows explorer) I believe in UX you ...


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