Faceted Navigation: Integrated Faceted Breadcrumbs (IFB), by Greg Nudelman

In preparation for my workshop on faceted navigation at the IA Konferenz 2010 in Cologne this past weekend, I’ve been thinking about faceted navigation quite a bit recently. In particular, I’ve been considering ways to explain and teach the subject effectively. )One not-so-trivial side effect of teaching is that the instructor can learn just as much as the students.*)

Looking at loads of examples and implementations of faceted navigation gets your creative juices flowing. In particular, I kept thinking how I would have done my last project that involved faceted navigation different or better. Hindsight is always 20/20.

Breadcrumbs as a navigation mechanism have taken on new life recently. That’s what I observed in two previous posts here and here. I speculated:

So maybe breadcrumbs aren’t just quite dead yet. It really depends on how they are implemented. Perhaps we’ll see even more innovative uses of the mechanism in the future.

I’ve been toying around with how to make breadcrumbs effective main navigation mechanisms–just with sketches on projects and on my own. The basic idea is to have rich, dynamic options available from each of the  nodes of the breadcrumbs. (This isn’t new, I know (see references below), but there are very few real-world examples of it). So merging rich breadcrumb trails with faceted navigation would also seem to make sense, in my opinion.

Greg Nudelman not only beat me to the punchline to integrate dynamic breadcrumbs with faceted navigation, it looks like he’s also tested them.  Good work! Check out the full report in an article on Boxes and Arrows entitled Faceted Finding with Super-Powered Breadcrumbs. He calls the approach Intergrated Faceted Breadcrumbs or IFB. Greg writes:

I believe Integrated Finding [sic] Breadcrumb design is more intuitive and resourceful than other faceted breadcrumb solutions due to the following key design recommendations made based on several years of designing and researching finding interfaces:

    1. Combine hierarchical Location & Attribute breadcrumbs
    1. Use Change instead of Set-Remove-Set
    1. Automatically retain relevant query information
    1. Label breadcrumb aspects
    1. Make it clear how to start a new search
    1. Allow direct keyword manipulation.

There are a series of images in the article to illustrate each of his points. To some degree, Greg’s solution reminds me of the Newssift results interface–only the IFB is better. (Newssift is now shut done and I don’t have have a screenshot handy).

In the interest of continuing this line of thought, here is some (hopefully) constructive criticism of the IFB approach.

  1. Longer labels – The horizontal arrangement of breadcrumb trails potentially limits scalability for longer labels. All of the examples Greg shows are fairly short. The question is, what do you do with a really long value, such as a publication title with 100 or more characters? One suggestion would be truncation with a onHover display of the full value.
  2. Including a search field in the breadcrumb – I’m not sure if this is necessary or even desired. It might encourage more searching, which could lead to zero results quickly. It also assumes a simple all-in-one search engine. But if you have an advanced search or search with lots of fields, it would be harder to include this. Sure, the IFB solution is few online ecommerce situations where search is generally just a single input field, so it could work. But I’d suggest putting that just above breadcrumb itself to give more room and clarity to the IFB. Of course, I could be proven wrong. Also, the keyword search in the IFB seems to always be at the end, contradicting the breadcrumb as a “path” trail. An alternative might be to convert the user-entered keyword to a value and represent it as you do the other nodes of the IFB. Accessing the dynamic menu for that keyword would then provide the option to edit it, and you could possibly include search suggestions at this point as well.
  3. The relationship to the filters on the left isn’t yet clear – In the screenshot of the IFB for Walmart, there are filters on the left of the screen that should be updated to reflect their correct state. Which brings up the question, how do you represent the filters once a value has been selected, particularly if multiple selections are possible? Flamenco keeps the facet header on the left (but they only allow for single selection per facet at any one time). That could work here too. But maybe all you need is the breadcrumb, even from the beginning. Tru, this would take away the “path-ness” of the trail, but you could represent the facets horizontally as a breadcrumb trail with a value of “All <facet name>” as the default value for the start. In the end you’d only have the IFB and no list of filters on the left. But there are problems with that approach too.
  4. Name for “super-powered” breadcrumb – We should come up with a name for enhanced breadcrumb. These have been called “selection list navigation bars ” [1] and “look-ahead breadcrumbs” [2] by others (the former of which I don’t like at all). The problem with “look-ahead” is that in the IFB you may be looking back. But perhaps it works. Other options might be “enhanced navigation breadcrumb trail” or “rich breadcrumb navigation” or “dynamic navigation breadcrumb.” Thoughts?

I quite admire Greg’s thoughts on the IFB and am jealous of his work. It’s quite inventive, and that he did testing (for apparently no project) shows real initiative.

BTW, Jason Hobbs just gave a talk at the IA Konferenz 2010 above the relationship of theory and discipline to practice. He urges us to follow the path of practice-led research. The IFB is a good example of this (I think).

References

[1] Bowler, D., Ng, W., and Schwartz, P. (2001). “Navigation bars for hierarchical websites.” University of Maryland, Student HCI Online Research. http://otal.umd.edu/SHORE2001/navBar/index.html.

[2] Ahmed, I. and Blustein, J. (2005?). Influence of Spatial Ability in Navigation: Using look-ahead breadcrumbs on The Web. Int. J. Web Based Communities.

Also see this excellent resource on breadcrumbs in general: http://www.ils.unc.edu/~aery/inls181/final/index.html

* Arnold Schönberg begins his book on composition: “Dieses Buch habe ich von meinen Studenten gelernt” or “I learned this book from my students.”

About Jim Kalbach

Head of Customer Success at MURAL

9 comments

  1. Interesting stuff, but is it really anything new?
    I’m of course thinking about FaceTag (www.facetag.org) and your own analysis in the Designing navigation book. Not trying to downplay Greg’s article, there’s some good points there, but ‘new’? Haven’t we seen this before?

    • James Kalbach

      Andrea,

      Well, the elements aren’t new: facets, breadcrumbs, dynamic menus. Check. But both the specific combination and application of those elements is what’s new here.

      FaceTag doesn’t do IFB, so I’m a little confused about that reference. And I don’t talk aboiut IFB in my book. It’s not about faceted navigation in a general sense, but a specific way to handle the display of selected filters as well as a way to access more option. Plus, Greg is strongly considering how search fits in that mix, which isn’t well integrated in most instances of faceted navigation.

      The devil is in the detail on this one, Andrea. You kinda sound like a cynical business stakeholder with your comment. Surely you realize the challenges and complexity of the UI issues involved in faceted navigation. Or do you think we’ve solved them all and there’s no point in dwelling on things? Been there, done that?

  2. Pingback: Guided Navigation & Faceted Search - Schweizer Beispiele | E-Business Blog von Walter Schärer

  3. Well, first of all I definitely need to straighten out my skills at being quick but to the point, as if came out sounding cynical and stakeholder-ish, something is wrong.
    As that was not my intent, apologies if I appeared dismissive. I wasn’t.

    What I really am is interested in understanding if we are moving forward or in circles and again it seems sometimes we do both. You quote Jason Hobbs’ talk on PLR above briefly, and that is really a big part of this conversation: I see the good points in Greg’s thing, and I’m not questioning him or his article.

    What I was trying to do was really to comment on the larger picture: PLR means having professional practice fuel research. This in turn means getting practice acknowledge research. It means moving forward. This is not what I see, generally speaking.

    Then, specifically, what I meant by mentioning FaceTag or your book (and I could have mentioned Christian Crumlish’) was simply to refer something that I know rather well (and FT indeed was into detailing the interface for faceted tasks and merging browsing and tagging, the papers are out there).

    It was not meant as “been there, done that”, but simply as the hook on a discussion that I think (and that’s me) we should be having: isn’t it time to up the ante a little? We have painted and (re)painted the fence ad nauseam, and we can do that blindfolded on a monocycle: Shouldn’t we move on to painting something else?

    Thanks for replying.

    • One correction: when I say that FT was about “merging browsing and tagging”, I actually meant (but my hands were quicker than my brain) “browsing and searching”. Which, of course, makes a little more sense.

    • James Kalbach

      We’ve only put a first coat of paint on the fence. It needs a second coat. And we need to fill in the cracks and make repairs. When it comes to faceted navigation, we don’t have a stable, accepted model that works in a variety of situations for a variety of users.

      Greg’s work ups the ante by leaps and bounds in my opinion. It’s definite movement forward.

      We’ll just have to agree to disagree, Andrea.

  4. Pingback: Faceted Navigation: Bring Back the Dead Ends (post by Pete Bell) « Experiencing Information

  5. Pingback: Websites mit Guided Navigation / Faceted Search | eBusiness Blog von Walter Schärer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: