Issue № 304

Design Patterns: Faceted Navigation

We are pleased to present an excerpt from Chapter 4 of Search Patterns by Peter Morville and Jeffery Callender (O’Reilly, 2010). —Ed.

Article Continues Below

Faceted Navigation#section1

Also called guided navigation and faceted search, the faceted navigation model leverages metadata fields and values to provide users with visible options for clarifying and refining queries. Faceted navigation is arguably the most significant search innovation of the past decade.[2] It features an integrated, incremental search and browse experience that lets users begin with a classic keyword search and then scan a list of results. It also serves up a custom map (usually to the left of results) that provides insights into the content and its organization and offers a variety of useful next steps. That’s where faceted navigation proves its power. In keeping with the principles of progressive disclosure and incremental construction, users can formulate the equivalent of a sophisticated Boolean query by taking a series of small, simple steps. Faceted navigation addresses the universal need to narrow. Consequently, this pattern has become nearly ubiquitous in e-commerce, given the availability of structured metadata and the clear business value of improving product findability. Faceted navigation is being deployed rapidly across an impressively wide variety of contexts and platforms. In the world of search, faceted navigation is everywhere.

Figure 4-19 illustrates a successful implementation of faceted navigation as a model for interacting with the catalogs of several academic libraries. This is a good example of a federated search in which source (roughly equivalent to location) is deemphasized relative to subject and format. The consortium’s goal is to connect students and faculty with the best materials, regardless of which university owns them. This example also hints at the design challenges. Faceted navigation is not simply a feature to check off a list. Success requires painstaking attention to detail and an appreciation for the vast array of possibilities for interaction design. For instance, the libraries run collapsible facets down the left. Only the most relevant facets (subject, format, location) are open. Most are closed by default. Each open facet reveals only the top four or five most heavily populated values. This allows for a small facet footprint that frees up plenty of space on the main stage for the results themselves. The number of matching results for each value (shown within parentheses) is a key element of the map, as is the reformulation of search terms and selected values as stacking breadcrumbs, which let users view and modify their current search parameters. This interface is the result of user research, usability testing, and iterative design. But it’s not the only way.

[2] Marti Hearst and her Flamenco project collaborators at UC Berkeley deserve credit for their pioneering research in faceted navigation (http://flamenco.berkeley.edu/).

Screenshot

Fig. 4.19 Faceted navigation at the Triangle Research Libraries

For instance, applications rely on a mix of scented widgets for viewing and interacting with facet values, and some shift facet selectors to the top or right rather than the left.

Screenshot

Fig. 4.20 A variety of scented widgets

Presenting facets along the top draws added attention to the narrowing facility. Given massive result sets, this is an effective way to highlight the data structure and draw users into filtering. Top placement may sometimes obscure results and cause clutter, but can work well with image collections like Artist Rising (Figure 4-21) or when only a few facets are needed. It’s often useful to allow for flexibility in the number of facets displayed. As shown in Figure 4-22, adaptive facets let controls conform to the content as users shift between categories and drill down within collections. This may be a reason to avoid facets on top. While less visible, facets on the right can work, too, assuming they appear to be controls rather than ads and don’t get cut off by narrow browsers. When in doubt, lean toward the de facto standard (left side) and subject different designs to user research and testing.

Screenshot

Fig. 4.21 Faceted navigation puts metadata on the map

Screenshot

Fig. 4.22 Amazon’s adaptive facets

In contrast to the relatively mature design space of the desktop Web, mobile is a platform where standards for faceted navigation have yet to emerge. A few research projects such as FaThumb[3] have explored the challenges and possibilities of facet-based interfaces for mobile search. Clearly, tiny screens preclude the established model. There’s insufficient space to present facets and values alongside results. Ever the pioneer, Amazon is among the first to design a mainstream application that adds faceted navigation to mobile search. As Figure 4-23 shows, it features an iterative model that requires more steps than ideal, but it’s a move in the right direction. As mobile search crosses the chasm, users will expect the features and functions to which they’ve become accustomed on the desktop, and first and foremost outside of the box, they will absolutely, positively need to narrow.

[3] A facet-based interface for mobile search. Available at http://research.microsoft.com/apps/pubs/default.aspx?id=64303.

Screenshot

Fig. 4.23 Faceted navigation on Amazon mobile

Across all platforms, there are some qualifications and questions worth review. First, we’ve been using the term “faceted navigation” rather loosely. Formal definitions of facets may exclude simple fields and filters, but discrimination is unwarranted in practice, provided that filters operate independently and users can add or remove them in arbitrary order in concert with the updating of results.

On the other hand, the distinction between faceted navigation and parametric search is relevant. In parametric search applications, users specify their search parameters up front using a variety of controls such as checkboxes, pull-downs, and sliders to construct what effectively is an advanced Boolean query. Unfortunately, it’s hard for users to set several parameters at once, especially since many combinations will produce zero results.

Today, it’s rare to see pure parametric search, but many applications lean closer to that end of the spectrum than they should. For example, Snooth fails to indicate the number of matching results until after users execute a refined search. The widgets are decidedly unscented and the interface encourages users to modify multiple parameters before query execution. It’s a solution that’s hard on people but soft on hardware. In other words, it’s an unfortunate compromise that sacrifices immediate response to reduce the server load.

Screenshot

Fig. 4.24 Parametric problems at Snooth

At the other extreme, live search applications like Volkswagen UK (Figure 4-25) and Kayak (Figure 4-26) update results dynamically with no submit button and no page refresh. There are some real advantages to this dynamic model, which allows for immediate response, minimal disruption, and elegant transitions. But there are also costs. The Volkswagen UK application takes time to load, and Kayak must use a conspicuous (and somewhat awkward) overlay to call attention to the updated results. Live search applications are like dangerously quiet hybrid vehicles. When the noise disappears, we find it had value. Elegant transitions can reintroduce some useful disruption, but in cases where both results and facets change simultaneously, this becomes a bit tricky.

Screenshot

Fig. 4.25 Immediate response at Volkswagen UK

Screenshot

Fig. 4.26 Live search at Kayak

Of course, as design and technology evolve in concert, we will solve these problems even as new challenges arise. Processors grow faster; people don’t. So, we’ll need to carefully manage transitions. Meanwhile, faceted navigation will surely adapt to every context and platform because the need to narrow exists at the crossroads of behavior and the box.

Faceted Navigation#section2

Screenshot

Fig. 4.27 The faceted navigation design pattern

Faceted navigation is a master pattern. Its deployment impacts all other search patterns and the information architecture as a whole. To oversimplify, there’s the Google model and the faceted navigation model. Choosing between these two is a major strategic decision. Determining whether or not faceted navigation is sensible and feasible is among the earliest steps in design. The infrastructure for faceted navigation can enable a tighter relationship between search and browse. It can shape the structure and navigation of the entire site or application. It also changes how we think about autocomplete and best first. It offers a familiar framework for managing the sources of federated search. Plus, its discriminatory power to clarify intent and refine results may offset the need for personalization and advanced search. That said, faceted navigation won’t work everywhere. For starters, it’s an expensive proposition. The demands on search software and servers are substantial. Also, the metadata infrastructure involves both initial investment and ongoing expense. For these reasons and more, a simpler search model is sometimes better, but it must often be supplemented by advanced search.

Screenshot

Fig. 4.28 Advanced search at Genentech

Advanced Search #section3

A relative concept, advanced search includes whatever simple search doesn’t. It’s a pattern that many of us love to hate. Often, advanced search is a clumsy add-on that’s rarely used, and it lets engineers and designers take the easy way out. Valuable features that are difficult to integrate into the main interface can be relocated to the ghetto and forgotten. Plus, there’s confusion about its purpose. Is it a user-friendly query builder for novices or a power tool for experts? Many interfaces try (and fail) to be both. For instance, isn’t it fair to assume that users who understand what “exact phrase” means also know to use quotation marks to specify such a search? The main problem with Boolean isn’t the syntax, it’s the logic. And even the plain language shown in Figure 4-28 is unlikely to help the few novices who brave the intimidating realm of advanced search.

About the Author

Peter Morville

Peter Morville is a writer, speaker, and consultant. His bestselling books include Information Architecture for the World Wide Web and Ambient Findability. He advises such clients as AT&T, Harvard, IBM, the Library of Congress, Microsoft, the National Cancer Institute, Vodafone, and the Weather Channel. His work on user experience design and the future of search has been covered by Business Week, The Economist, Fortune, NPR, and The Wall Street Journal. You can reach him by email or find him online at semanticstudios.com and findability.org. Peter lives in Ann Arbor, Michigan with his wife, two daughters, and a dog named Knowsy.

Jeffery Callender

Jeffery Callender is vice president and design director of Q LTD, a strategic design consultancy with a global reach. Jeff joined Q in 1986, helping to shape a creative environment fueled on collaboration, authenticity, and ingenuity that has attracted a formidable team of talented designers, experienced writers, strategic planners, brilliant information architects, and 21st-century technologists. In partnership with Q Wiesbaden, Q has established itself as the world’s smallest global agency network. You can contact Jeff by email or learn more about his work at www.qltd.com.

15 Reader Comments

  1. Interesting article although I don’t think the term “faceted navigation” is very descriptive. Gems have facets, searches don’t.

    But where’s fig. 4-28?

  2. Great article Peter. I usually urge people i know who have the kind of websites which yield a lot of product information to use faceted type of navigation.

    I mean you can’t imagine how helpful and effective can a really intuitive navigation when it satisfies every need of the user 🙂

  3. Nice article. I actually like faceted navigations on a website that i often wander in. They really help you find things much more easily 🙂

  4. Yeah if a website contains lots of configurable data, has many variables or catgeory based system with many sub ordiantes then a faceted navigation could be the way forward.

    Faceted navigation seems to break down large areas of information into smaller easier pieces that makes the information easy to digest.

  5. I’ve been trying to figure out the best way of making a _useful_ search for a group of academic web sites (which have tons of information). This seems like an obvious solution (though I hadn’t considered it at all). Thank you for the insight!

  6. very nice article – can’t help liking faceted navigations the best with some websites. thanks, cleawalford

  7. The dreaded figure 4-28 was initially omitted because of an error in production. The missing image, along with its caption, now appears in its correct location in the article. Thanks, readers!

  8. I haven’t ready ALA for so long (like 8 months) because it was about content and such for so long. Some of this newer stuff is getting really good again though. Keep it coming. I click ads 🙂

  9. Any user testing about faceted navigation? The topic is really interesting, but I moderated some quick test in the past with a faceted search prototype that didn’t performed well. Obviously there are a lot of interface issue, because the mental model of “filtering” or selecting option in sequence, may not be common. I think the next step is identifying not only when and where to use facets, but what works and what doesn’t in term of GUI elements.

    As an example, people in my test weren’t able to understand the “exclude this facet” widget. Now gmail (and others) use a similar feature on the mail tagging that seems to work: so are there any (tested) best practice?

    There were other problems, too, maybe with the overall concept. So it would be great to have some user test done.

    Thank you for the great examples in the article.

  10. Thanks, Peter and Jeffrey, awesome content as always.

    I too have been preaching faceted search to my Enterprise Search clients for years. I agree it’s just different for mobile, so I’ve been seeking the right user experience. I think I’ve come up with something interesting: http://blogs.avalonconsult.com/blog/search/yes-faceted-search-for-mobile-is-possible/

    I’m interested in more feedback . . . are there flaws with this design? Are there ways it needs to be tweaked?

  11. Hi, lovely article and thanks for the examples.

    Re: academic data and faceted search – worked on this a lot in the past and it is pretty much the best route, providing you pay careful attention to the facets and match them to the fields terminology and taxonomy. E.g. historians and anthropologists would approach the same resource on Ancient Greece from different perspectives (perhaps time period for historians, or cultural type for anthropologists).

    With regard to user testing: In my experience, faceted navigation controls are key to user acceptance – with particular attention to the default display, order of application of facets (should all combinations be available or only ‘true’ combinations etc.) and the positioning of the controls and the currently applied filters to the results list.

    As with all things, it depends on the context, the content and the users 🙂

  12. Very interesting & educational article. This has been influential in helping me decide upon the structure and flow of project Im currently working on.

    Thanks

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA