Today I’ve been experimenting with a different take on faceted navigation. TwigKit’s current facet widget is already robust – it displays both flat and hierarchical facets, it’s expandable, it allows users to exclude a given filter, the list continues. But today, there are two additional use cases that I set out to address:

The Challenge

1. View all filters. Not just expanding from 7 to 20, but viewing all the available filters.
2. Search within a facet. If the filter of choice doesn’t appear at the top of the list, allow them to search for it.

Neither of these features are necessary in the average search interface (in fact, many interfaces are better off without them). However, they are useful when detailed analysis is required. An intelligence analyst, an academic researcher, and even a very dedicated shopper would appreciate the flexibility that these controls provide.

Design Philosophy

Once I understand what the user needs, I tend to look through three lenses when designing the how. In order of priority:

1. Minimize cognitive load
2. Minimize visual complexity
3. Optimize browser performance

Unfortunately, many of the search within/view all implementations I’ve seen are a bit heavy-handed. I was hoping for a gentler approach.

A Potential Solution

After experimenting with a few different approaches, I decided to prototype a design patten based on progressive disclosure. The series of screenshots below correspond to these four actions:

1. Default state. As few controls as possible are shown by default to minimize cognitive load and visual complexity.
2. Expanded state. Once the user clicks “Show more,” the container expands and the “search within” box appears.
3. Endless scrolling. Not only does the expanded container enlarge, but it also becomes scrollable. When the user hits the bottom of the list, we’ll ask the server for more and append them to the bottom of the list.
4. Search with autocomplete. As the user types into the facet search box, the filters will be refined as the user types.

(Here’s my partially-implemented webkit prototype for Safari and Chrome users.)

What’s Your Take?

A few reasons why I like this solution:

1. The search-within box and scrollbar are shown only after the user has expressed interest in the facet
2. It allows all the filters to be viewed without using an additional popover or modal.
3. The search box refines the list of filters below it, avoiding the need for the traditional popover-based autocomplete.

However, this is only the result of one day of experimentation. More than anything I’d love to hear what others think of this new take on an old design pattern.

« Back to the blog