I’ve developed a bit of a penchant (obsession?) for decomposing the pieces of analytical applications and framing the good and the bad characteristics. So far I’ve taken on treemaps, real-time dashboards, alerts, composite measures, success metrics.
Next up the poor, neglected, and taken-for-granted filter. For such a common and essential component, it seems rare that designers take a moment to consider how to make the best possible filtering mechanism. Here are the five elements I consider critical to a good filter selector along with examples from exemplary interface designs.
- Selections
- Impact
- Context
- Persistence
- Short-cuts
Selections
Good filters make it obvious to users what has been selected. That might seem like an obvious necessity but consider what happens when you filter in an Excel list. The filter section, even if it is a single item, is immediately hidden from view.
Jonathan Harris’ frequently referenced We Feel Fine visualization offers one of my favorite filtering examples. Notice how the selected items are highlighted and the non-selected items are de-emphasized. The bar at the top clearly shows what has been selected, even after the filter …
I’ve developed a bit of a penchant (obsession?) for decomposing the pieces of analytical applications and framing the good and the bad characteristics. So far I’ve taken on treemaps, real-time dashboards, alerts, composite measures, success metrics.
Next up the poor, neglected, and taken-for-granted filter. For such a common and essential component, it seems rare that designers take a moment to consider how to make the best possible filtering mechanism. Here are the five elements I consider critical to a good filter selector along with examples from exemplary interface designs.
- Selections
- Impact
- Context
- Persistence
- Short-cuts
Selections
Good filters make it obvious to users what has been selected. That might seem like an obvious necessity but consider what happens when you filter in an Excel list. The filter section, even if it is a single item, is immediately hidden from view.
Jonathan Harris’ frequently referenced We Feel Fine visualization offers one of my favorite filtering examples. Notice how the selected items are highlighted and the non-selected items are de-emphasized. The bar at the top clearly shows what has been selected, even after the filter selector is “put away.”
Impact
The best filtering mechanisms also give instant feedback about the impact of your filters. This can be as simple as a subtle indicator that the filters are being applied. Even better, as demonstrated in the The New York Times’ Rent or Buy site, the graph animates in real-time as filters are applied. This creates a very tangible connection that helps the user understand the impact of the filtering choices.
Context
Filters should provide information around the items being selected. What does it look like? How many are there? Take the simple font selector in Office applications: Isn’t it a no brainer that the names of the options are shown in the actual typeface? Here are a couple other fine examples of context:
Click shirt is Bret Victor’s brilliant t-shirt design interface. In it, he offers an elegant filter implementation where all the selections show images of what you are about to select.
Elastic lists is one of the most innovative approaches to filtering. The height of individual blocks in the selectable stack shows the frequency of the items, an embedded sparkline shows the trend, and brightness indicates “weight of the metadata value compared to the overall distribution” (a bit too ambitious/confusing, in my view).
Persistence
Given the importance of filters to most information applications, it is surprising how often the interface makes them hard to find. As I mentioned in an earlier post, the failure of many analytical and reporting applications is that “they assume users know precisely what they need before they’ve begun the analysis.” Filtering shouldn’t be a one shot deal; the functionality should always be accessible.
Kayak, a travel site, integrated the selection filters into the results so users can easily change their trip criteria without having to start a new search.
Short-cuts
Finally, filters should make it easy to apply common selections (All, None) or complex sets (My Saved Filters, Northwest Region).
Moodstream by Getty Images recognizes that users aren’t always going to want to configure a bunch of filters individually. The presets wheel solves this problem by offering a series of pre-defined “filter sets.”
Finally, I’d be remiss if I didn’t mention the sophisticated and powerful filtering functionality delivered in Tableau. In addition to providing filtering by selecting graphs (i.e. in context filtering), the application allows for multiple selector types, wild-carding, conditional filters, top/bottom filters, and on and on. If you want a comprehensive catalog of potential ways to offer filtering, watch the Filter Data video here.