User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm currently working on a responsive faceted search. The user should be able to refine its search by region but also by country (within a region).
I'm wondering what is the best way to handle this second layer of filters. My first idea is to use a tree layout and make each region expandable/collapsible to show all countries in a specific region.
Is there a better way to do that?
I would say your solution of providing a second level of filters based upon the primary filter would work best as it allows the user to establish the primary hierarchy (which is the country name) and the relational mapping which is the region name allowing him to drill down from a higher level to a lower level as needed.
How you would do that would depend on whether you are planning to allow multiple sub filters at that level. If you are planning to just allow filtering by say one region, then links would work best else checkboxes would work fine.
To quote this article from UX Matters :
There are two basic ways of selecting values for filters: drill-down and parallel selection. Ignoring the various modalities of the many derivative mechanisms for these primary modes of selection, the two basic ways of specifying a value for a filter essentially boil down to two choices: links and check boxes.
A link is the simplest mode of filter selection. By clicking a link, a customer can either select a single value for a specific filter or drill down a level in a taxonomy, like a category or department hierarchy. Amazon.com, shown in Figure 1, provides one of the best examples of a search results user interface that uses links to indicate filter value selections. Links usually indicate a straightforward equals condition—for example, I want to narrow my search results to Department = Books—as they do on Amazon.
The use case there is where you are looking to help the user exclude other branches in the taxonomy entirely. This is good for very deep sites.
However if you are looking allowing multiple sub filters, This is also done pretty well by Volkswagon which provides faceted search to filter down based upon Models by providing multiple checkboxes
How about dynamic tabs? The tabs and data change depending on the accordion channel being addressed.
You're showing check boxes in the primary filter list, does this mean your users can select multiple countries at the same time? This makes a big difference on how you display the secondary filters.
If only one country can be selected then a drill down method could be employed.
If multiple countries can be selected you will need a way for the user to submit their selection (as there's no way of knowing when they've finished). Again a drill-down, but the list contents could be dynamically created based on the first filter.
