Breadcrumbs for the sake of Users

Posted on January 02, 2001

in IA/Usability

by Javier Velasco (mantruc)

Rated 3.88 (Ratings: 8) (Add your rating)

Want more?

More articles in IA/Usability
More articles by mantruc

Javier Velasco

Member info | Full bio

User since: December 13, 1998

Last login: December 15, 2008

Articles written: 16

We've already seen an amazing display of coding skills over the Breadcrumb trail system, now I'd like to share some thoughts about the reasons for using it.

That feeling of security...

Submitted by paulnattress on January 12, 2001 - 06:56.

I can't help feeling that a user on a website will feel much better about exploring the website if they are confident that they know where they are. Getting lost in in a site is far too easy - you follow a thread of information through the navigation system and then suddenly, you are given the option to go wandering into the unknown. Do you a) wander and hope that you'll get back to what you were reading? b) wander and resign to the fact that you're never going to find that page you were on five minutes ago (you know the one - the page with the info you really wanted and promised you'd go back and read it more thoroughly). c) stay where you are - that feels safe - you can stick with the info you want - nothing's going to tempt you out of the feeling of "knowing where you are". What happens to the above scenario when you add in the factor of a breadcrumb trail? The user knows where they are and has seen that the trail behind them is being mapped out. They will wander, they will explore. They can see where they've been and know how to get back there. Result? All those extra pages of info you've designed are being read by people who are "impulse reading". And that's what we want. Paul Nattress Information Architect Sage.com

Paul, I love that feeling of security, too.

Submitted by dack on January 18, 2001 - 15:43.

I find myself using breadcrumbs all the time (on sites that have em, of course) for moving in the "particular to general" direction. The only problem in designing for them is the flak I usually get from developers. They don't like them, especially on intranets, for instance, where there will be lots of content creators and no single authority on the site's structure. It can get pretty messy pretty fast, to the point where the breadcrumbs are no longer useful. Dack

just to point out...

Submitted by ericd on January 18, 2001 - 16:14.

In response to your article, in my opinion..."telling me where I am within the site" and "telling me exactly the path I've followed to get there" are two very different things. There are two types of Breadcrumbs. The first is an "index" type which basically just tells the user where they are in the current sitemap. It gives the user the location of that page, a point of reference in the overall heirachy of the architecture of that particular site. Very useful in traveling from "particular to general". Calling this a breadcrumb is misleading. The second type is a true Breadcrumb which traces your exact non-linear path of travel. This is basically the same as the back button or a history list. ericD.

some examples

Submitted by paulnattress on January 19, 2001 - 02:45.

Here are some examples of breadcrumbs (I've also emailed these to yourself Eric - as requested.)

www.useit.com - Jakob Neilsons website about usability.
www.simply.co.uk - very easy to navigate through different computer components (very handy when you're building a system and need to match a processor with a motherboard for example).
www.builduk.co.uk - not fully complete yet but those sections which have content also have breadcrumb trails.
www.microsoft.com - a huge site but uses breadcrumbs so you can see where you've been.

I'd be interested to hear whether you think these are "index" type breadcrumbs or "true" breadcrumbs.

From what I understand about "index" types do these always point to the subcategories which you are in (e.g. Main page > Category 1 > Subcategory > Page regardless of the route you took to get there?)

Paul Nattress
Information Architect
Sage.com

Submitted by ericd on January 19, 2001 - 13:17.

Paul, Thanks for the references. Those are definitely examples of the "index" types. useit.com Sites such as useit.com would have no use for anything more than a simple index type trail since it is vertically shallow. There are no trails deeper than 2-3 levels without jumping to a different website. There are some cross-linking (a link to a page within a different vertical), and you will notice that when you click on a cross-link, your old index trail is erased and you are given a new one which shows the new vertical heirarchy. microsoft.com This is a very large site with lots of mini-sites. It is easy to get disoriented, especially with the inconsistent navigation. Both types of trail features would be useful here, but I surfed this site and didn't find any sort of breadcrumb trail at all. Since users do not always enter sites from the home page, index trails are very valuable. I wanted to clarify the differences between the two types in this in this discussion because there were some comments (and some general misunderstanding) which suggested that these so-called breadcrumbs as they commonly function actually map out the 'trail behind them', or that 'they can see where they have been'. The term "breadcrumbs" misleadingly suggests this as well. I have not seen a true breadcrumb trail feature on any HTML website as of yet. Most of the time, such a feature is already built into applications. An example is the 'history' tab in IE5, or the Location bar on the real player. ericD.

Submitted by paulnattress on January 22, 2001 - 02:55.

I see what you mean Eric. Most breadcrumb trails show you the route the web designer wanted you to choose rather than the route which you, the user have taken. I think I saw somewhere on Evolt the instructions for writing an ASP breadcrumb trail that followed the user's path and wrote the trails "on the fly". I haven't seen this implemented yet but I would be very keen to see an example if anyone knows of one.

The best "plain html" solution I've come up with can be found on www.oneofus.co.uk. OK, so I used a bit of javascript for the "go back" button but in this implementation you can see where you are in the navigation structure and can step back through the route you've just taken. It works exactly the same as the browser back button which leads to the question - should we be duplicating browser functions within the website? If the answer is yes does this point to users simply not knowing how to use their browser to the full? How can we, as web designers take this into account when designing usable websites?

Paul Nattress
Information Architect
Sage.com

Submitted by ericd on January 22, 2001 - 11:34.

Paul, From a usability point of view, very excellent job on the trail in that example (www.oneofus.co.uk). You asked if we should we be duplicating browser functions? My answer would depend on the context. Designers should consider the whole experience and provide all tools and functions. If the type of interaction expected in a particular website requires the user to frequently use the 'back' function, then yes, we should build-in all the tools and functions that the user will need within the site itself. I believe in designing an experience of the 'website', not of the 'website-within-a-browser'. And i think that this is the way most users would expect and approach it as well. We shouldn't require the user to rely on the browser 'back button' but replicating this function needs to be executed really well. Useful features need to be useable. If the execution of it is less useable than the browser's button, then it might as well not be done.

Breadcrumbs as location aid, not back button

Submitted by aardvark on January 22, 2001 - 13:33.

The ASP version of this is on evolt as Breadcrumbs for Those Using ASP. I'm the author of that one, so I should explain what I was trying to achieve when I wrote the functions.

A back button does its task well. Anything on the page that claims to be a 'back' button, but in fact does not function exactly as the browser 'back 'button functions, is problematic. Nielsen suggests this, and my own testing has shown that it's true. Given that, I would never attempt to make a widget on a web page that does what the 'back' button does, that would be silly if you can't guarantee its function under every circumstance.

Instead, a bread crumb trail should give a user an indication of where he/she is within the site structure, within the hierarchy of the content. This gives the user immediate clues to his/her depth within the site, as well as location. It also offers a way to show a user if he/she has switched sections, levels, area, etc. Yahoo! is a good example of this. When I drill down into a category, I like to be able to click my way up the tree. That breadcrumb serves that purpose wonderfully. If it functioned as a 'back' list, I think I'd ignore it, my browser already does that, and I don't like playing with widgest that may not work.

appropriateness

Submitted by ericd on January 25, 2001 - 15:59.

An light example of my point regarding replicating browser functions in a site is Amazon.com. The type of interaction in this site requires the user to dig and backtrack quite often - dig to get specific info, backtrack to find the path you were in before you started digging. Certain features even dig you in deeper when you don't necessarily want to.

For example, Amazon.com assumes that I only want to buy one thing from the list of search results or the specific category list page that i have selected or generated. It takes me to my VIEW CART page right away whenever i add something to my cart. Taking me to the VIEW CART page only serves as a confirmation that my action was executed. This can easily be accomplished in other ways.

Within the VIEW CART page, they provide you with a very cool "continue shopping" button which takes me 'back' to the proper search list or category list from which i came from (two clicks back). Before I discovered this button, I used to frequently use the browser 'back' button (clicking twice).

They created a better 'back' button. This does several things for the experience.

It eliminated the disconnection. I did not have to leave the site, go to the browser, and back to the site again.

Backtracking using the browser 'back' button also suggests to me that I am reversing what I just did in the site. I felt as if I was undoing the 'add to shopping cart' action I just did. By checking the contents of the VIEW CART page later, I learned this didn't happen.

It also creates a streamlined puchase process path. All the functions I need are built into the site. I still wish that I wasn't pushed into the VIEW CART page right away, but they make it up with this button. It pushes the user to do more shopping rather than to 'checkout'.

A simple index trail or the so called 'breadcrumb' could serve the same function for Amazon.

nice difference: index v/s breadcrumb

Submitted by mantruc on January 26, 2001 - 07:31.

Eric: I feel very clarified by the way you have explained the difference between index and breadcrumb trails, I was aware thet we were talking about two different kinds of trails but i didn't know how to label the difference,thanks for enriching the article by pointing that out.

About the replication of browser functions within the page, I'm with eric, I believe that the web architect should consider the context, including the browser with it's navigation functions because the user relies on it.

I believe the user experience on the web depends on inmersion, we as users enter a website as a navigable space, multi-dimensional and multi-path, the broswer's back button could be considered our safety rope.

back button

Submitted by paulnattress on January 30, 2001 - 07:12.

I agree with you there Eric. My back button always stays in the same place on my browser, always works and never changes into a psychedelic animated monstrosity. I use it on every site I visit where its function never changes.

Even Netscapes browser button does exactly the same. Whatever version I'm using.

So, I know where it is, what it does, I use it every day and I'm happy.

Only trouble is, I have to move my mouse a couple of more inches up the screen to get to it and I'm lazy...

I never use the history feature of IE - I use a T1 connection at work and can afford to mis-click many times before going back to that page which I spotted that interesting feature on. At home though, I want to know what each and every click will do for me (breadcumbs? yes please!). I live in the UK and pay for my Internet time by the minute. 1 penny (1.6 cents) a minute... if your back button has taken me back to a page which I didn't want to go back to then that's cost me 0.1 of a penny . Is it value for money?

Hmm, I'm still undecided as to whether built in back buttons are worthwhile... I think I'll have to go back and do what we all do (or should be doing) - ask the user. Do they want a back button built into your page? Ultimately, it's their choice. Their next click on the back button could take them away from your site.

Paul Nattress

more on breadcrumbs

Submitted by godito on March 30, 2001 - 12:13.

I know I'm really late to comment on this article, but I do have my two cents. Breadcrumbs in the digital forest are, indeed, a great help, but they can also be misleading. Let's not forget that Hansel's idea wasn't all that great after all. We have to remember that some birds in the forest ate those breadcrumbs, and the only purpose they served was to help Hansel and Gretel's family realize that the kids were lost. But that's all children's literature. So what's the deal in the real "dark forest"? Like Paul said, visitors rarely use the helpful "history" feature. And most of them never visit the site map, so how can we help them find their way? We have several tools. First of all, page title labeling. In it you can write the path followed by the users if the site is not so deep (and, for usability reasons, it shouldn't be), also, we can have a map-like menu on the side of the page, showing all the steps.

I also have some comments on the Back button. We shouldn't build a back button on the page, the user, ultimately, will thank you. Let's say, for example, that you are on page A, then you hit a link to page B, an article that has a related link on page C. Now, let's say the visitor clicks on a built-in button to go back to B, and, finding nothing else interesting, wants to go back to page A. Except this time, he hits the browser's back button. What will happen is that the user will find himself in page C again. Not what he wanted, and now, he's lost. Bad usability.

One final note, breadcrumbs are an idea, but let's not forget there might be some better, unexplored options. Back to fairy tales and legends, I'm going back to Greek Mythology and talk about good old Theseus, who went into the famous and deadly labyrinth of Minos, killed the Minotaur and lead his party to freedom using a thread, a piece of string. Is there a tool we can build into a site, to serve as Theseus' thread? Not today, maybe, but we should think about it. We can learn a lot from mythology and history. Perhaps we don't need to re-invent the wheel...

Interesting comments

Submitted by paulnattress on April 2, 2001 - 02:23.

Page title labelling is quite a good way of laying out the trail for pages but I'm not sure if many people would notice the connection. Also, if page titles are to be optimised for search engines and bookmarks this may cause problems when trying to cover the breadcrumbs. (I'll be writing an article on page titles soon and I'll include something about using page titles for breadcrumbs).

I've just checked one of my sites which uses a JavaScript back button and it doesn't behave like the example you gave. Have a look at www.oneofus.co.uk. If you go from page A to page B to page C and use the JavaScript back button to go back to page B then clicking the browsers back button takes you back to page A. This works in IE5 - there's a chance it may not function this way in other browsers (it will be worth checking out).

I really like the idea of having a map like menu - if you can find a good example of one please post it (If I find one myself I'll do the same.)

I agree that the answer lies somewhere, maybe in mythology... Or maybe Theseus's thread really does come from history - your browsers history function...

So, if our browsers already have this wheel, should we try to make our sites 4 wheel drive? (Sorry about the metaphors, I get carried away sometimes.)

Breadcrumbs in the tag

Submitted by Hamlet on May 18, 2001 - 14:01.

Paul: I'm in basic agreement with you on this one. Putting breadcrumbs in the Page Title is just what my boss wants me to do and I think it's a bad idea. Having the browser title display: Homepage > Subpage > Detail Page.html would probably cause problems for search engines and spidering/indexing algorithms-- especially the special character (entity) part of it. I want my pages to be indexed by a sensible phrase that a human being is likely to type into a search box or that a spider could digest. I am lobbying for keeping the "breadcrumbs" within the tags but seniority will probably win out unless I can come up with excellent 'proof' that scattering breadcrumbs in the title tags isn't a practical alternative. Some thots against it. a.) It's not clickable. b.) It's unconventional. [who will see or notice it]. c.) Nobody that I know of searches by a cryptic "psudo-path" statement. d.) Indexing results would look silly and be pretty non-descriptive to a human reader (assuming that a spider/indexer would index it ver batum in the first place). If you know anything positive about it, let me (and my boss) know. Anxiously awaiting your answer....

Breadcrumbs in the TITLE tag

Submitted by Hamlet on May 18, 2001 - 14:11.

In the above message, I used angle brackets around the word "Title" and around "Body" not knowing the list processor would remove html tags from the. So....: the title should have been as this one is and in the body of the text, I lobbied "keeping the breadcrumbs within the BODY tags but..." My paragraph breaks were also obliterated. Sorry for the confusion.

Submitted by ericd on May 18, 2001 - 14:48.

I agree with you that something such as an Index Trail would be crippled in a Title Tag. But also, I think your Index Trail should be more meaningful than what you wrote above, not cryptic to a human reader. Users rely on this as well. If your boss made you do it, it could still have the advantages of a typical title tag.

Title tag as a way to find the window

Submitted by aardvark on May 18, 2001 - 18:34.

Generally, I use the title bar in a browser window, generated by the <title> tag, to help find my windows. When I have a dozen open windows and they are all in my taskbar, those first few letters are very important.

On a similar note, how many search engines use some sort of trim() function to chop the page title at x characters? If you do that, all the pages on the site will have the exact same name when displayed in search results. This might not be what you want.

Breadcrumbs in the TITLE tag? Surely not...

Submitted by paulnattress on May 21, 2001 - 00:54.

Here's a case for not putting breadcrumbs in the TITLE tag...

Imagine that you have a category from your home page which is called "shoes". Now, imagine that there are several categories below "shoes" called "sneakers", "slippers" and "work boots". The page titles (used as breadcrumbs) for these would look like this:

Home > Shoes > Sneakers

Home > Shoes > Slippers

Home > Shoes > Work boots

Pretty repetitive. Now, imagine that you're looking through your favourites, or viewing a list of results from search engines. You may find that your page titles are truncated and now read as:

Home > Shoes > S...

Home > Shoes > W...

You can see the problems.

(p.s. Page titles as short as these examples won't actually be truncated but if you apply this to longer titles you'll see my point.)

Why not "reverse index trail"

Submitted by mantruc on May 22, 2001 - 09:33.

i don't see the problem in using

Sneakers > Shoes > Home
Slippers > Shoes > Home
Work boots > Shoes > Home

this solves the problem above, making the title useful for windows, search, history list and bookmars, it's explained in the page title article.

Submitted by ericd on May 22, 2001 - 09:50.

I think reversing the trail would solve some issues but it creates confusion that it breaks several standards. Most users read from left to right, and if they didn't, by now they have learned that most of the web reads from left to right. An index trail is by now a standard way of communicating hierarchy for web pages. I am all for breaking the standard if a better way can be designed, but I dont think this suggestion does that. Then again, this is not really an index trail widget in that it doesnt function as such, but the problem is it would be read as such.

There is already a right solution, and that is to not use an Index trail for a page title. What Hamlet has not told us is the motive of his boss to suggest such a thing. Any such design requirement should be justified by some use cases or some user needs. I would require this of my own boss or any group I work with because in my reality, I design for the user, not for my boss or client. Once the user requirements are clearer, I think it would be easier to find a solution.

So the question is - why?

Breadcrumbs or Titles?

Submitted by mantruc on May 22, 2001 - 10:28.

eric: i wrote another article about labeling page titles, where i suggest reverse index trail as a valid way of labling titles for information rich sites, it's not the only way of labling titles, but it can be very useful.

all the whys are explained there, and it's not someting i got to by myself.

Submitted by ericd on May 22, 2001 - 10:57.

mantruc, I just read the article. Its all great. But those are still page titles, and not reversed Index Trails.

Example
Breadcrumbs for the sake of Users : evolt.org, IA/Usability

Index Trails are not usually limited to three levels as the example above shows. An Index Trail can considerably get deeper in a lot of sites.
Index Trails usually communicate a "trail" and use symbols such as the "greater than" in between each level as a separator and to suggest a direction of the trail. The direction is a strong standard of left to right
The example above more closely follows what use to be an Index Trail that is then 'middle-truncated' ( leaving the root and the final leaf which are generally the most important when a Trail is truncated) and dropped the directional symbols. In my opinion, what you have left is a great page title system and not an Index Trail. So I think we agree in its usefulness.

However, I would disagree with your last example. Work boots > Shoes > Home Imagine this in 10 levels.

Agreed, it's not a rule of thumb

Submitted by mantruc on May 25, 2001 - 07:21.

sure... if you're using 10 levels of info the title will never end and then this method does not make sense, it would be better to find wharever solution is best, the most important thing though is to keep titles descriptive.

Home or Site name for index breadcrumbs?

Submitted by mcombs on October 2, 2002 - 12:31.

Should the first level of a site be referred to as Home or by the site name when you're constructing a breadcrumb trail?

On Jacob's site, he uses "useit.com > usability > 10 bad ideas"

On most sites, I see "home > usability > flash or trash?"

I don't think selecting one method over the other is going to result in a significant difference in site usability, but discussions here and on sites like this lead to ad-hoc standards, and consistency is good. So I thought I'd see what the group thought.

Location, path and attribute

Submitted by mcombs on May 13, 2003 - 12:32.

There are three types of breadcrumbs: location, path, and attribute. You can read definitions and see examples of each at Keith Instone's website. He put together a couple of presentations on the subject and they're a useful and quick read.

Does anyone know of some researched sites on best practices for breadcrumbs? Keith's presentation asks more questions than it answers.

clarification

Submitted by paulnattress on April 27, 2004 - 01:24.

I've received a couple of emails recently from people asking how I created the breadcrumbs on www.oneofus.co.uk using JavaScript. I don't think I was very clear when I explained how I'd created the breadcrumbs.

The breadcrumbs are created manually in Dreamweaver and are not dynamically generated by JavaScript - sorry if I had suggested they were! This manual solution is ok for a small site like mine as I only have around 50 pages and everything is controlled by Dreamweaver templates (around 7 in total). New pages are not added very often so a manual process is not a pain.

For those who want to create a breadcrumb trail using JavaScript I can point you in the right direction. A colleague of mine has suggested using JavaScript to split the url into a string. This can then be used to create the trail. As you can tell from this explanation, I'm not a JavaScript person, but if you are, then hopefully you can add a note here to give an idea of how it is done!

On a related note, I read a study recently on Usability News that found "the overall usage of the breadcrumb in site navigation to be low." Furthermore "Breadcrumb users were not found to be more efficient than users who did not use the breadcrumb." This is despite the fact that "Eighty-nine percent of the participants reported seeing a breadcrumb path on the sites".

Are we all creating breadcrumbs that are being ignored?

Breadcrumbs for SEO

Submitted by paulnattress on May 17, 2004 - 08:09.

I was just checking some search terms for my website and found that Google is picking up the keywords in the breadcrumb trails.

It's my belief that Google and other search engines like internal links that accurately describe the content page. A breadcrumb trail on every page will ensure that you have relevant, well-worded links across your site.

I can't say that it will definitely help with search engine optimisation but it seems to be helping my site.

Human Factors article

Submitted by aardvark on October 19, 2004 - 15:49.

Human Factors International has posted an interesting article to their site: Do you hear what I hear? ... or why it may not matter that users still ignore breadcrumbs. Basically, breadcrumb trails may not be used as much because designers don't draw enough attention to them. I am greatly over-simplifying, but you can read it yourself.

It is worth noting that you might now want to take it all at face value. They once misread conclusions in one of my articles for one of their reports, and the error is still on their site (see March 2001 article where they think that I say users open more windows when they have larger monitors). But it's an old article anyway, they're allowed.

Start of page header

Other Fine Evolt.org Sites

Navigation Starts

Submit

Article Categories

Highest rated articles

Recent comments

Main Page Content