Faceted Navigation: Showing More Values

25 May 2010

My workshop on faceted Navigation Design in Cologne at the IA Konferenz 2010 was a success, from my perspective. It really got me thinking about the details of design solutions and ways to structure discussion around very specific aspects of faceted navigation. I’m also now on the look-out for different examples and techniques. This post is about how to handle the display of values, in particular how to show additional values.

PROBLEM
Often, there’s not enough space in the UI to show all values of faceted filters in a results list by default.

SOLUTION
Show a subset of values by default (e.g.,  the first 5 values), and then provide a mechanism to reach more values.

In terms of that mechanism to get to the additional values, different situations will call for different solutions. It depends on several factors, including the number of additional values, the length of value labels, and the position of facets on the page (e.g., vertical or horizontal).

Below is a collection of examples for 6 different ways to reveal more values in a faceted navigation scheme.


1. INLINE EXPAND

This is perhaps one of the most commonly-seen solutions, for instance on many e-commerce sites. It works well for many situations where there are a limited number of values. But it doesn’t necessarily scale up well. If you have more than several dozen values (or more), it may create a very long page. Figure 1, below, is from http://www.homedepot.com.

Figure 1: Example of Inline Expand from Home Depot (click to enlarge)


2. SCROLLING

Allowing users to scroll each facet component is also a common approach, and it works well in many situation. It may add an impression of more complexity to the page, and having a row of HTML scroll bars may not meet expectations of design aesthetics. Scrolling in a small range is also not a satisfying experience and can feel somewhat cramped, particularly for longer values with wrapping.

Below is an example from Zappos.com. Note that the Inline Expand approach (above) wouldn’t work well here since the facets are arranged horizontally on the page: the results would get pushed potentially far down the page.

Example of scrolling

Figure 2: Example of scrolling from Zappos.com (click to enlarge)


3. NEW PAGE

The FLAMENCO model for faceted navigation makes use of new pages to show all values from a given facet. This works well for a large number of values and for values with very long labels. In terms of overall workflow, however, this is the most intrusive of the approaches described here, and it brings the user furthest away from the results list.

Below is an example from the ACM Digital Library for the facet “Publication Title.” There are potentially a hundred values that could appear here, and some of them wrap across 5 lines. (Inline Expand wouldn’t work here at all). Note also that in the ACM example users can also select multiple values via checkboxes on the new page; whereas multiple selections weren’t possible from the default faceted navigation values.

Example of showing values on a new page from ACM digital library

Figure 3: Example of showing more values on a new page from ACM Digital Library (click to enlarge)


4. DYNAMIC MENU

Clicking a link labeled “more” could also reveal an in-page menu with the additional values. Artist Rising has an example of this. This overcomes real estate problems elegantly and could potentially scale up, if needed. It may not be clear to users, however, that the dynamic menu represents an extension of the list since there is a physical disjunctness to the layout (in this case, at least).

Example of a dynamic menu to show more values from Artist Rising

Figure 4: Example of a Dynamic Menu to show more values on Artist Rising (click to enlarge)


5. PAGING

It’s rare to find an example of paging within a set of a faceted filters. Semedico uses this technique, and the interaction is fairly smooth without a page reload–just the values in the facet component update when paging. It’s easy to overlook the paging mechanism, however, so I’m not sure many people will actually find and use this feature.

Example of paging on Semedico

Figure 5: Example of paging on Semedico (click to enlarge)


6. AUTO COMPLETE

This approach is gaining in popularity, but there are still not that many examples out there. LinkedIn recently introduced faceted navigation for its person search. Some of the facets (depending on facet type) include an input field. Typing in the field presents a list of matching values from that facet via auto complete. It’s a nifty solution, but perhaps too advanced for some users to leverage effectively.

Example of auto complete on LindedIn

Figure 6: example of Auto Complete on LindedIn (click to enlarge)

COMBINATIONS

Of course, you’ll also find combinations of the above. For instance, in the Semedico example (Figure 5), there is also an input field to filter the list via Auto Complete. But unlike LinkedIn, this solution filters the entire list using the space of the original values (i.e., there isn’t an additional layer for the auto complete).

Another combination of solutions I’m particularly fond of is from the Freebase Parallax interface. The default state of each facet shows the top seven values with a link to view more. It feels like it should behave like an Inline Expand, but clicking the “more choices” link turns the default list into a scrolling region without a page reload. All of the additional values can be viewed by scrolling.

Example of a combination of techniques of Freebase Parallax

Figure 7: Example of a combination of techniques with Freebase Parallax (click to enlarge)

Overall, there is a range of approaches to showing more values from a facet, each with its advantages and disadvantages. One thing is for sure: you must first understand the nature of the facets themselves and, in particular, of the values. Very long lists of values may require a new page or dynamic menu. Other facets, like rating on a five-point scale, may be much more predictable and compact: you may not even need to reveal more.

As the designer, you’ll have to be aware of the benefits of each approach in order to decide which to use.

About these ads

10 Responses to “Faceted Navigation: Showing More Values”

  1. Qualterio Says:

    That’s an interesting compilation!

    I usually see a ‘top-5′ or ‘top-8′ selection based on the number of items within the facet, sorted by alphabet or number, and then some sort of a ‘more…’ button.

    I compiled a list of some Swiss examples. Mostly websites that I built in my former life…
    http://e-byz.ch/usability/guided-navigation-faceted-search-websites

    This coming weekend we will launch the new Guided Navigation with ALPHA.CH

  2. Guido Says:

    Hi James,

    thanks for the good article, it is a nie addition to your workshop. It was very comprehensive and valuable for my zurrend project.


  3. [...] Faceted Navigation: Showing More ValuesMy workshop on faceted Navigation Design in Cologne at the IA Konferenz 2010 was a success, from my perspective. It really got me thinking about the details of design solutions and ways to structure discussion around very specific aspects of faceted navigation. I’m also now on the look-out for different examples and techniques. This post is about how to handle the display of values, in particular how to show additional values. [...]


  4. [...] informative Zusammenstellung für Variationen innerhalb der Facet-Darstellung für weitere Auswahloptionen hat James Kalbach [...]


  5. [...] link or “show all” link could open an overlay dialog window. This is similar to #4. Dynamic Menu mentioned in my previous post, but has an important difference. Namely, in this solution the items in the new dialog are not an [...]


  6. [...] > Faceted Navigation: Showing more values (Teil 1) > Faceted Navigation: Showing more values (Teil 2) This post is about how to handle the display of values, in particular how to show additional values. Kategorie: Information Architecture Tags: faceted navigation, search [...]


  7. [...] is part of a series of posts on faceted navigation design. Previous related posts include “Showing More Values Part 1” and “Part 2.” Also look out for posts written after this [...]


  8. [...] examine the main approaches. In so doing I’d like to acknowledge the work of James Kalbach, whose previous posts on the subject may be the first attempt to document the topic in a comprehensive [...]


  9. [...] informative Zusammenstellung für Variationen
    innerhalb der Facet-Darstellung für weitere Auswahloptionen hat
    James Kalbach [...]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 64 other followers

%d bloggers like this: