< Design Pattern Library
Managing options in faceted navigation

Epicurious is one of my favorite web sites. But I’ve been mystified by their implementation of faceted navigation, which can result in an absurdly long left-hand navigation bar (click to see image full-sized):

In the page above, they’ve displayed all the values for the first facet (Main Ingredient), which pushes the remaining facets (Meal/Course, Type of Dish, Season/Occasion, Recipe Category, Preparation, Dietary Consideration) down to about 2800 pixels “below the fold.”  That’s a long way to scroll—and of course it significantly reduces the discoverability of these options.

How could Epicurious have avoided this? One option would be to initially present all the facets closed. This has the disadvantage of requiring two clicks to select a “refine by” option (one click for the facet, one click for the value).

Another option would be to initially display a facet that has relatively few values. My choice here would be Meal/Course:

Another approach is to use more/less links, as shown in this example from Buzzillions:

The top brands are shown initially, with the option to see “more”: