13

I want to implement breadcrumbs on a website, now I'm struggling on how to best implement them.

Users can search for products but can also navigate to a product category to find a product. On a product page the user can click on a product category to find similar products. So the users has different paths to reach a specific product / page.

I think I have two options to implement breadcrumbs

Option 1: Add every visited page to the breadcrumb. For example: Home > Search Results > product 1 > Category 2 > product 2 Disadvantage: breadcrum can become very long

Option 2: Specify for every page a specific fixed breadcrumb for example: Home > category 1 > product 1 Issue: what to do with products that are in multiple categories?

What are you opinions? Is there option 3 that I have overlooked?

Improve this question

3 Answers 3

Reset to default
9

Although they are called "breadcrumbs" as in the fairy tale, the purpose of breadcrumbs is not to replace the browser history. So Option 1 is not an option.

They are rather an instrument to show the user how he found the product and above all how he can find other products that are logically placed "beside" the found product.

So it's basically Option 2.

If you have products that are in multiple categories, you have three options:

  • Show all possible paths to the product.
  • Show the path the user came to the product. (This requires that you use the primary key of your product-to-category table instead of product IDs.) It implies, that the user will get hardly helpful "Search > Product" breadcrumbs when searching.
  • Specify a "main category" for each product that determines the breadcrumbs shown (and is used in other places, for example when there is a shopping cart and the user clicks a product in the cart view.)
Improve this answer
2
  • Ok let's dump option 1 but do you think that it's a good idea to show in the breadcrumb how a user came to the product even if it was trough a search. For exampe: Home>Search Results>product_1, Home>category_1>product_1 or Home>category_2>product_1
    – vdrmrt
    Nov 8, 2010 at 20:51
  • From the three possibilities I gave, I have no favorite. It depends on the application. Showing how the user came to the product is probably your only option if you don't have "main categories" and you only want one path in the breadcrumbs.
    – AndreKR
    Nov 9, 2010 at 0:28
1

Breadcrumbs are supposed to be representative of your site layout, not how the user is accessing your site, which pretty much rules out option #1. I'd not like to see this on Amazon:

Home>Products>Home>PS3 Games>Call of Duty>PS3 Games>Funky Boxer Shorts->Add To Cart

Whilst indicative of my browsing history and random clicking, it's not representative of the site :)

I assume you have a database-backend, as you mention product categories. If you have parent categories then you have a structure right there that you can use. Assuming you have a front page, we can just call that "Home" on the breadcrumb trail. Then, assuming in your database you have things arranged like this:

table_productCategories
    _pkCategoryID
    _categoryName
    _fkParentCategoryID

Allowing you to have a tree of product categories:

Software
    Windows
        Apps
        Games
        Crash-To-Desktop
    Linux
        Servers
        3-Games
Hardware
    Laptops
    PCs
    Missile-Launchers

...then whenever you hit the product page, you don't need to worry about if the product is in more than one category, the user navigated there and using a db query we can build a breadcrumb of:

Home > Software > Windows > Games > Aunt Dolly and the Scared Sheep

Additionally, you're going to have pages that aren't products. "About Us" "Contact Us", etceteras. In a CMS the content of these pages are in the database and categorised too.

table_contentCategories
    _pkCategoryID
    _categoryName
    _fkParentCategoryID

... you get the idea. This means all your pages with Content rather than products can also be breadcrumbed:

Home > About > Finding Us in a web of backstreets
Improve this answer
2
  • Your first statement is really narrow. Some people use location-based breadcrumbs to indicate your location in a site, but others use path-based breadcrumbs to indicate how a user got to where he is in the site. I would say that the latter is more true to to the "breadcrumb" concept. The content of your site is a big factor in determining which is better.
    – John Bledsoe
    Nov 8, 2010 at 13:35
  • Agreed, perhaps it does come across that way. I was mainly referring to the "Add current page to breadcrumb" suggestion which would produce the output I gave an example of.
    – Moo-Juice
    Nov 8, 2010 at 13:45
0

I have to disagree with the characterization of breadcrumbs in most of the answers because there is a difference (in my understanding) between categories or taxonomy (the nested hierarchy of categories that lead from most general to most specific e.g. Product Category > Product Sub Category > Product > Model or cars > sedans > chevy > impala > x5000 ) and the path through a website (I'm not talking about browser history, but a context-sensitive path).

If you were to search for four-door sedans and found a list of candidates then drilled down into one or more of those, it would be more important for you to ascend back to the list returned by the search result than to ascend the categories for whatever product you chose. (So, the example above might be "home > search > chevy impala x5000" rather than "cars > sedans > chevy > impala > x5000"

Using breadcrumbs to be a marker of where you've been is similar to choice 1 except you don't indefinitely add crumbs to the end because breadcrumbs are meant to be picked up to trace your path backward (and when you pickup a breadcrumb, all of the cumbs after that are removed because you've chosen a particular point in the path and will navigate from there.

If "breadcrumbs" are a category tree as some here have suggested, why do we call them "breadcrumbs"? My understanding of breadcrumbs is that they are path specific not model specific.

Improve this answer
1
  • Depends who you ask. (They actually list one more model there.) At this point, the term basically just stands for the general "x > y > z" visual widget, with a second decision being made by the implementer as to which actual methodology they're using.
    – Su'
    Mar 5, 2012 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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