Wednesday, December 21, 2016

navigation - Combining breadcrumb and selected facets/filters into one


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.


breadcrumb + selected facets (shown as 'filters') of a hotel-detail page


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



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:
newegg faceted navigation
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?".



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...