One of the advantages of the prevailing model of faceted filtering on the web is the display of magnitude, or the size of the resulting set of items after selecting a filter value. You’ve seen this already: I’m talking about the numbers next to filter labels. This let’s you know how many things you’re going to get if you select that option.
While these calculations may be performance intensive, indication of magnitude provides valuable navigational cues to users. Seemingly trivial, this tiny bit of information can affect a user’s decision to select a filter or not. This post reviews approaches to showing magnitude in faceted navigation.
Indication of magnitude can be classed into two primary types:
- Absolute magnitude shows the exact number of items. The most common approach indicates magnitude with a number in parantheses, usually after the filter label but sometime also before it.
- Relative magnitude shows the general size of the set in relation to other filter values. This is usually done with bars of some kind, either horizontal or vertical.
A hybrid of absolute and relative is also possible, as seen in the Relation Browser, an academic project for faceted filtering at the University of North Carolina (Image 1):
Image 1: The Relation Browser from UNC shows both absolute and relative magnitude (click to enlarge)
This example shows faceted filters for a collection of science and engineering data. The absolute number appears to the left of the value label. The relative magnitude appears as a blue, horizontal bar.
Notice that to save space, the designers put the value label over the bar. This avoids a real estate problem for showing longer filter labels: had the labels appeared to the left of the bars, for instance, some would most likely have to be truncated.
But wait, there’s more…
The Relation Browser take the display of magnitude one step further: rolling over an available filter forecasts the size of the resulting set of items by overlaying the new magnitude on top of the existing bars.
In the next screenshot (Image 2), the mouse is hovered over the value “Graduate” in the facet “Education level,” (as indicated by the red outline). The blue bars now show the set of items you’d get after selecting that value. The white bars indicate the original magnitude (as seen in blue above) for all of the other filters.
Image 2: The Relation Browser forecasts magnitude by overlaying blue bars (target set size) on white bars (current magnitude).
This interaction is dynamic and instant, so you get a feel for the relationship of existing magnitude and new magnitude quickly. In the above screen shot, you’d know that by clicking on “Education level: Graduate” you will not get any documents in PDF, text or PowerPoint formats. This might affect your decision to select that filter at all, thus potentially saving you a step.
The display of magnitude is admittedly a very detailed aspect of faceted navigation. But the example of the Relation Browser goes to show there is room for exploration and innovation in faceted navigation. How, for instance, might this be integrated into ecommerce without overwhelming users and in a way that is immediately understandable? What might be the benefit of this approach in a business context?
—-
Upcoming Workshop: Faceted Navigation (part of UX Fest, London, 2012)
If you’d like to learn more about faceted navigation, visit my day-long workshop on faceted navigation in March 2012 in London. We’ll cover faceted navigation from end to end. Below links to details about the event and about UX Fest, the series of four workshops William Hudson and I are running together:
- Tuesday 13 March, Agile User Experience & UCD (William Hudson)
- Wednesday 14 March, Agile Requirements (William Hudson)
- Thursday 15 March, Alignment Diagrams (James Kalbach)
- Friday 16 March, Faceted Navigation (James Kalbach)
.
EXPERIENCING INFORMATION 
Pingback: Resources on Faceted Navigation Design | Experiencing Information