12 Responses

  1. Tony Russell-Rose
    Tony Russell-Rose October 16, 2009 at 09:54 |

    Hi Vegard,

    Great stuff. Really thought provoking, as usual! Can I explore a couple the details:

    “Tabs or links, on the other hand, will not let you cross-compare”. Is this strictly true? I may be mis-interpreting what you mean by ‘cross-compare’, but in principle I don’t think using links per se precludes this. If I understand you correctly, what matters is whether you ‘refine away’ the dimension once a selection has been made. Obviously for multi-select dimensions you don’t want to do this, but that doesn’t mean you *can’t* use links. For example, check out the multi-select subject dimension here, which uses links:


    “Don’t use check boxes for facet that are very large (50+) or hierarchical. Multi-selection with check boxes doesn’t scale with size.” What would be your preferred alternatives? (e.g. a vertical scroll bar, a pop up expandable panel, etc?)

    “I include an extra set of radio buttons (Show All/Choose Makes)” I don’t quite understand the use case for having a “show all” – isn’t that what “more choices” does? Or did you mean “Select all”?

    Re Single-select with radio buttons: “Undo is really easy, since all options are visible all the time.” This implies that the dimension stays visible after selection, which for single select, would not normally be the default behaviour (they would typically be refined away, and the breadbox would then be used to maintain navigational state). In your experience, do you assume the converse (i.e. dimensions aren’t refined away by default)?

    Repeated selection with link lists – I agree with your general guidance here, but the example you’ve chosen strikes me as a bit of an edge case – multi-select AND is quite rare (e.g. compared to multi-select OR) and possibly the most difficult combination to get right (IMHO). Because it is multi-select, I’d normally expect a check box to give the right affordance, but because it is AND, we have to be careful of the combinatorics (as soon as you select one feature, it affects the number of hit counts on the other features, so you *have* to update the values immediately or risk getting zero results… in which case, links perhaps give a better affordance of the “click this and something will happen straight away” interaction.

    But that’s why I feel multi-select AND isn’t the best example here – unless the point you are specifically about the “Repeated selection” (i.e. the multi-select AND) part rather than the “with link lists” part (which is a much more generic design element).


  2. Lee Peterson
    Lee Peterson January 8, 2010 at 19:51 |

    Awesome. But…

    Comic Sans!!!??

    I digress.

  3. Lars Grammel
    Lars Grammel January 16, 2010 at 22:34 |

    Thanks for this post – it helped me better understand design decisions and possibilities when it comes to facets. Two further facet improvements came to my mind when reading it:

    (1) Scaling the font size of this different elements to visualize the number of occurrences, e.g. Ford would have the biggest font size in your example for pattern 1. This is similar to the idea behind tag clouds and has been applied in some research projects, e.g. Jadeit ( http://edelstein.pebbles.cs.cmu.edu/jadeite/index.php?api=java6 )

    (2) The filter element for a facet can be a visualization, e.g. a scented widget ( http://citeseerx.ist.psu.edu/viewdoc/download?doi= ). This is might be appropriate if the data of the facet numerical, e.g. car mileage, or a date. VisGets is a nice example for faceted search with visualizations ( pages.cpsc.ucalgary.ca/~carey/papers/2008/VisGets2008.pdf ).

  4. Vegard Sandvold
    Vegard Sandvold January 17, 2010 at 13:40 |

    @Lars Grammel

    (1) Good point about using font size to visualize the hit counts. I’m familiar with tag clouds, but I didn’t think about applying that to facets. Haven’t seen many examples of it either.

    Before going down that path I would make sure that number of occurences is indeed a good indicator of relevance. Have a look at this post about the effect recall may have on faceted search, and share your thoughts with us:


    (2) Visualizing numerical range facets as histograms is a good idea. Check out http://www.globrix.com for a good example. A timeline is the classical example.

    Summarization, which is a strengt of visualization, may also be a drawback. When information is summarized in a timeline or POI (point of interest) on a map, the details are automatically hidden. The user then needs to perform an extra action to access the information, via a hover (mouse-over) action or a click. Whenever possible I try not to hide anything important from the user.

    Thanks for sharing!

  5. Chris
    Chris May 31, 2011 at 13:00 |

    Cruise Control is spelled with an s, not CruiCe Control

  6. beccaccia
    beccaccia December 8, 2011 at 03:50 |

    Nice article. However, I disagree with pattern 3 (links), because I think checkboxes work better.

    In theory, I agree with your argument – that checkboxes give a better indication of an OR condition, and links give a better indication of an AND condition. However in practice, I think it’s generally pretty obvious from context: it’s illogical to select cars that are both a Ford *AND* a Toyota. That’s not possible! And so users don’t need to give this a second thought. Similarly, no user would imagine that you would select cars that have a sunroof *OR* cruise control. It’s possible, but it would be pretty strange! I think most users would assume the *AND* condition here.

    Therefore, I would tend to go with checkboxes, because they are much easier to undo (which you point out is the major drawback of links).

    I think the checkbox / link distinction would be more important if the AND / OR distinction was not in fact clear from context.

    An example of a site which uses exclusively checkboxes, (where the distinction is clear from context, in my experience as a user), is http://pisos.com

  7. Principles Of Effective Search In E-Commerce Design - Goodfav Howto

    [...] 3 Quick Design Patterns for Better Faceted Search [...]

  8. Advanced search on your webshop is important | Servage Magazine

    [...] 3 Quick Design Patterns for Better Faceted Search [...]

  9. Advanced search in your webshop is important | Servage Magazine

    [...] 3 Quick Design Patterns for Better Faceted Search [...]

Comments are closed.