Introduction
Faceted search offers tremendous potential for transforming the search experience. It provides a flexible framework by which users can satisfy a wide variety of information needs, ranging from simple fact retrieval to complex exploratory search and discovery scenarios. But there is one design aspect of faceted search that is particuarly hard to get right: the interactive behaviour of the facets themselves, i.e. how they should respond and update when selected. Surprisingly, the design choices at this level of detail can make a remarkable difference to the overall user experience: the wrong ones can make an application feel disjointed and obstructive, and increase the likelihood of returning zero results. In this post, we’ll examine the key design options and provide some recommendations.
Design Principles and Interaction Models
One of the fundamental principles of faceted search is that the set of facet values displayed at any given time should be constrained to those for which results are currently available. Consequently, it should not normally be possible for a user to obtain zero results through the selection of individual facet values alone. Note however that there are circumstances under which a zero result set can become unavoidable (bonus points for anyone who can name the two most common – one is obvious, one not so obvious!)
For example, in the example from computer manufacturer Dell shown below, we can see that there are seven laptop products that match the specification Screen=’small’ AND price=£400-800. Note that by convention, values from different facets are usually applied conjunctively, i.e. using AND rather than OR. At this point, the user can widen their search to include other screen sizes, such as Standard, Large, etc. or other price ranges; such as e.g. Up to £400. Note that the facets in this design also communicate values which would have been available had the initial selections not been made: i.e. the other Processor options which are currently disabled (and rendered in pale grey). These are sometimes referred to as Smart Dead Ends, and we’ll discuss these further in a future post.
The point is that in each case, the user can only select values for which results are currently available. This is made possible by applying the following interaction design principle: that the set of results and facet values should update immediately as soon as any selection is made. By observing this principle, the result set and available facet values remain consistent and accurately reflect the products available to the user at any given time.
This “instant update” model is very common, and forms the basis of many faceted search experiences. Another such example is the travel site Kayak, which combines traditional facet selection options in the form of categorical values (rendered using hyperlinks or check boxes) with quantitative values that are rendered in this case using sliders (e.g. the Flight times):
Incidentally, note that the Price range data on dell.com could also have been rendered using sliders, and likewise the Flight times on kayak could have been converted to an ordinal scale. There are advantages and disadvantages to each approach, and exactly which to choose will depend on a number of factors.
It is when we start to examine such ‘non-traditional’ facets that the limitations of the Instant Update model become apparent: in this case, each of the sliders is double-ended, and in many scenarios it will feel more natural for users to adjust both ends as part of a single interaction. But of course this is not possible: the user must wait for an update to take place in between each selection. Furthermore, in cases where the sliders provide only a coarse level of selection over the underlying data, it is likely that some degree of iteration with these controls will be required.
But there is an alternative approach. In the example below, computer equipment supplier CDW allows the users to “cherry pick” multiple facet values in a single iteration, and then submit them en masse via the View Results button:
The advantage now is that a user can select as many values as they like without interruption, and choose to view the results when they are ready. But the disadvantage is equally apparent – this style of interaction is in effect a type of parametric search, and in many instances (including the one above) this can return zero results. In the example shown, there are simply no products available that match the selection of Brand=(Apple OR Asus) AND Type=(Tablet PC OR UltraPortable). The user is thus forced to remove the facet selections one by one until a legitimate combination is found (or they just clear them all and start again).
Upon reviewing the above example it would be easy to conclude that the “two-stage” interaction model is fundamentally flawed, as it allows facet selections and result sets to become ‘out of sync’. But there is more to it than that. In fact, the shortcoming with this design is not the two-stage model per se – it is the combination of this model with the design decision to allow the end user to arbitrarily open and close facets at will. In the above example, the range of values revealed when the user opens the Notebook Type facet is not updated to reflect any selections already applied, and thus it breaks the fundamental principle described in the opening section. The inevitable result is that ‘illegal’ combinations of facet values can be selected and these will return zero results.
So how can this be avoided? Automotive classified site Carzone provides one such example. In the figure below, we see a similar instance of the two-stage model, with each facet allowing selection of multiple values and an Update button provided to submit them en masse:
But the difference this time is that the user does not have the ability to arbitrarily open and close facets at will: instead, opening one facet will, by default, close any other. This crucial difference means that when a facet is opened, its values can be updated to be consistent with the current result set and any facet values applied thus far. So in the example above, if the user chooses to apply values from another facet such as Body Type, as soon as the facet is opened it will be updated to show only values which are consistent with those applied thus far, i.e. Make&Model=(Audi A2 OR Audi A3 OR Audi A4). A dialogue overlay is used to remind users to choose whether to commit any values selected thus far (although by default they will always be applied unless explicitly cancelled).
So which of the two approaches (instant update and two-stage) is to be preferred? As we have seen from the examples above, they both have their strengths and weaknesses. Indeed, it is possible to offer both approaches, and let the user decide which interaction model they prefer. In the example below electronic component distributor Farnell does exactly this, offering a checkbox to “Auto Apply filters to update results dynamically” which applies the instant update model to the facets (shown here in the Open Parametric configuration), and a “Show Results” button to refresh the results pane with the currently selected values.
Multi-select AND vs. multi-select OR
Note that the facet values examined in the two-stage examples above are disjunctive (multi-select OR), e.g. the selection of a value for a facet such Make & Model does not preclude the selection of another value from the same facet. In this case, selecting multiple independent facet values has the effect of widening the search. However, if the facet values are conjunctive (multi-select AND), then the choice of which interaction model to apply is quite different. An example of a typical conjunctive facet would be ‘features’ (e.g. air con, alloy wheels, sat nav, etc.), as these only meaningful when applied as a conjunctive set (i.e. the results should match cars with ALL these features, not just one or more of them). In this case, the facet values are no longer independent, as selecting one value directly affects the number of results for which the other features also apply. In this case, the only meaningful interaction model is the instant update, as this is the only approach which will ensure that facet values and the current result set stay in sync.
Interstitial Pages
It is interesting also to compare the various approaches to interstitial pages, i.e. the messaging that is provided to indicate that the facets are being updated and results retrieved. Dell, for example, leaves the facets in situ but reloads the entire results pane, which inevitably introduces something of a cognitive disconnect between the two result sets. CDW takes this further by refreshing the entire page and discarding the open/closed state of the facets, thus introducing an even greater degree of disruption to the user’s mental flow. Kayak and Carzone both adopt a more lightweight approach, providing an “Applying your filter choices” overlay but otherwise ensuring that any updates stay on the page.
But possibly the most sophisticated interstitial treatment is that found at LinkedIn, which provides a semi-transparent mask over all the elements that need to be refreshed (e.g. the results pane and any facets other than the one the user just applied) but other than that keeps the disruption to a minimum:
Conclusion
Faceted search offers tremendous potential for transforming search experiences. It provides a flexible framework by which users can satisfy a wide variety of information needs, ranging from simple lookup and fact retrieval to complex exploratory search and discovery scenarios.
In this post, we have explored the detail of how facets should respond and update when selected. We have introduced two alternative interaction models, and reviewed their strengths and weaknesses and how they apply to different types of facet values (e.g. conjunctive and disjunctive). We’ve also reviewed some alternative approaches to the design of interstitial pages.
Recent comments