15 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:

    http://www2.lib.ncsu.edu/catalog/?view=full&Ntt=natural+language+processing&Ntk=Keyword&N=4294941540+4294965454

    “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).

    Cheers,
    Tony

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

    Awesome. But…

    Comic Sans!!!??

    I digress.

    Reply
  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=10.1.1.85.401&rep=rep1&type=pdf ). 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 ).

    Reply
  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:

    http://www.thingsontop.com/mindless-recall-kills-faceted-search-876.html

    (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!

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

    Cruise Control is spelled with an s, not CruiCe Control

    Reply
  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

    Reply
  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 [...]

  10. matze
    matze July 20, 2014 at 04:09 |

    Wow, incredible weblog layout! How long have you been running a blog for?
    you make running a blog look easy. The overall glance of
    your website is excellent, as smartly as the content material!

    Reply
  11. Social Wars Hack
    Social Wars Hack August 27, 2014 at 08:10 |

    Why wait? Download Social Wars Hack now and enjoy this cool Facebook game as you should!

    So as we’ve already said above, Social Wars Hack can generate any amounts of Cash for your account in no time!
    All you need to do iin order to fully enjoy thiis Facebook hack tool is get the hack archive
    from one of the download servers provided below, unzip and run Social Wars Hack v2.40.exe.
    Attention! Make ure you are logged into your Facebook account when you usee this hack tool, because there is no need to manually enter your user ID.

    Now select the desired amounts of Cash annd other cheat features
    from the hack menu and click on the blue Hack button. Wait for about five minjutes then check your in-game ballance.
    Stunning right? Social Warrs Hack is the best hacck tool ever!

    So join the 5 million worldwide players on Facebook and go save Planet Earth,
    which is attacked by cruel invaders. You mission will be to create your own milpitary city and
    train your army tto be the strongest in the
    galaxy! Complete glorious battles and various engaging quests
    in order too save the planet! You’ll need lots of Cash
    on the way, so the game developers offer yoou the chance to buy the needed amount of Cash in exchange of real money.
    We strongly hope you are smarter than take and take thee brighter move:
    use Social Wars Hack v2.40 for free !
    Today we share more frtee hacks for you guys, as we rlease Social Wars
    Hack v2.40 for the greatest action game on Facebook!A totally working version of the
    program, this hack tool is able to generate unlimitfed amounts
    of Cash for youur accoumt in a matter of minutes! So ddo
    you need some extea Cash for your Social Wars account?
    Thenn Social Wars Hack is what you need!

    More great news are about to reveal! The included additional features of
    Social Wars Hack program will keep both youu and your accounnt safe
    during the hack process. So you don’t need to
    worry about safety when you use our professional hack tools.
    Plus, with the use of the unbique auto-update feature, the cheat engibe will get updated with the latest working cheat codes
    for Cash on softeare start. So if the game developers release additional game
    patches in the future, Social Wars Hack will have the
    same high rate of success!

    Social Wars Hack 2014
    How can I safely use Social Wars Hack Tool?

    Reply
  12. Télécharger GTA 5 PC
    Télécharger GTA 5 PC August 27, 2014 at 08:11 |

    I used to be reccommended this website by way of my cousin. I’m
    no longer positive whether or not this submit is written through hiim as no one else realize such distinct about my difficulty.
    You are amazing! Thanks!

    Reply

Leave a Reply