Faceted Navigation: Bring Back the Dead Ends (post by Pete Bell)

Pete Bell, from Endeca, makes an interesting observation about greying out non-relevant options when filtering with facets instead of hiding them. See his post “Search Facets: Bring Back the Dead Ends.” His example comes from the B&H Photo website, and it shows what Pete calls “grey ends” (as opposed to dead ends). He writes:

Gray ends are an exemplar of Edward Tufte’s advice to “always show comparisons adjacent in space rather than over time.” That is, if you want people to understand the difference between a “before” and “after” screen, when you redraw the screen, you’re asking them to rely on their memory to make the comparison. It’s always a risk to rely on memory, but it’s an even bigger risk here because we know people on the “before” screen were just focusing on the facet in which they made their explicit selection, rendering the others cognitively invisible. With gray ends, nothing has disappeared, so they get to compare the two states adjacent in space, no memory required. Tufte’s advice here is a classic for faceted UX work in general.

Grey ends make most sense with multi-select facets. The disadvantage is added complexity in the UI. Grey ends and multi-select facets aren’t appropriate for every situation, so I’d advise to use them with caution. Still, as Pete shows in his example, they can be a powerful addition to the faceted navigation experience.

I spotted grey ends a short while back on LinkedIn. This is also an example of multi-select facets, and it seems to work well. See the options in the Relationship facet on the left side of the image, below. After selecting a value from another facet, options in the Relationship facet turn grey.

Grey ends on LinkedIn

Figure 1: Grey ends on LinkedIn (click to enlarge)

Finally, I also found Pete’s opening to his blog post interesting:

“There’s still so much room for innovation on faceted search user experiences.”

We’ve really just started to understand the intricacies of faceted navigation, I believe. Sure, Flamenco and other examples have made great strides. But there’s still lots more that can be done, particularly in real-world situations. Greg Nudelman’s example of Integrated Faceted Breadcrumbs I previously pointed to is just one example of the type incremental innovation that can take place in faceted navigation UIs.

About Jim Kalbach

Head of Customer Success at MURAL

2 comments

  1. Most of the time gray ends are a good thing. The problem is the real estate involved. B&H does gray ends, but they took a very blunt approach of setting an explicit height on every facet control. If it exceeds this, it scrolls.

    That’s a problem. You’re hiding stuff. Since they also do not use AJAX, you’re going to lose the position of the scrolled DIV on the page. There’s no way to fix that.

    Endless, on the other hand, repeats the values under the control to avoid this problem. Oddly enough, they inject the value at the bottom of the list, then they “resort” it when the AJAX request completes. Not sure why they bothered on that. There is enough of a visual cue without that feedback IMO.

    The problem with ideas like Nudelman’s dynamic breadcrumbs is that it creates massive duplicate content if you try to persist it anywhere but the session.

    J&R is trying to do this. It’s very buggy, but they’re on it.

    http://www.jr.com/brand/sony/

    Click on any facet filter. Then click a product. It has your state. Then go to the URL bar, and hit enter — or even refresh. It’s gone. Obviously people are trying to solve this problem and attempting all sorts of hacks. This is a hack, but it kind of works.

  2. My experience after reading above essay is that it is necessary for gaining knowledge.

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: