Combining breadcrumb and selected facets/filters into one

Question

Given a site with faceted-search, etc. I want to display the facets a user has selected, not only as part of the faceted-navigation controls (left vertical) but also at the top of the page.

Showing selected facets at the top as well, is imho a good way to let the user know in 1 quick glance which selection (of in my case hotels) is shown (with option to delete the selected facets and thus broaden the result-set)

Along this reasoning, showing 'selected facets' (almost) becomes part of general navigation, i.e: it shows where you are on the site (which filters supplied, etc.)

From this standpoint, wouldn't it make sense to combine showing 'active facets' along with the 'breadcrumb' for a unified view of where a user is on a site?

I'm asking because it makes sense to me, but I haven't seen this done before (or I haven't looked good enough that's entirely possible as well)

For instance:

• Search > Hotels > filters: 12 feb - 14 feb, 2 persons
• Explore > Activities > filters: Romantic
• Search > Hotels > Hotel detail: > filters: 12 feb - 14 feb

I attached a small image of what 1 of my designs looks like at the moment.

Does this work well, is the breadcrumb and the selected facets part of the same 'mental model' of where a user is on the site?

Answer 1

Yes, it's possible to integrate filters with breadcrumbs to create a more robust product browsing experience. Such a system is called faceted navigation (your filters are facets). There's one catch to it: you must give your users the option to edit/remove any of them without changing the rest.

Faceted navigation mimicking breadcrumbs is easy to implement in e-commerce sites where the taxonomy and options are static. However, in your situation (hotel availability), there might be some technical difficulties since the database query is more complex and will require more time to be completed. So you may want not to use it for that particular section of the site while using it in others (e.g. activity search).

My favorite example of highly-flexible faceted navigation is NewEgg:

Notice how each facet (not high-level category) has an (x) link for removing it.

For more examples and more advanced navigation patterns, see "Categories, Facets—and Browsable Facets?".

Answer 2

The breadcrumb shows location on the website and the filters are used to show mode. Placing the two in the same area of the UI may suggest they are, in fact, the same thing, which could be confusing.

One complexity arising from your solution is that the two components are usually designed to operate independently from one another. For instance, I can navigate to another hotel (location) but keep my filter settings (mode). Your proposal might be confusing, as it suggests the filters are a low level breadcrumb item. If I visit a different hotel, some part of the breadcrumb will change - but it won't be the right-most element, which users are used to seeing change.

Overall your idea sounds a little complicated and I'm not sure what problem it solves. To find out whether your audience can comprehend it, though, your best bet is to create a mockup and try it out yourself with some users.