Active Filtering

Example of the Active Filtering UX pattern.

Problem

There is a lot of information that people need to sift and poke through to analyze, explore, or find something specific that they’re looking for.

Solution

Enable people to change filters on a large set of information and see the results actively update as they do so.

Context

Ideally, you need to be able to represent the information in a graphical visualization. While you can apply this pattern to table or list-based results, it will be more successful for users to see the results visualized in a graphical way.

The information involved needs to have at least one, preferably more than one, aspect that you can supply controls to filter with. Usually these aspects are ranges (e.g., numbers/dates), Boolean values, and known values that users can effortlessly constrain through controls like sliders, checkboxes, toggle buttons, and drop-downs/list boxes. Plain-text input for keyword-based constraint is less common.

The most common scenarios are for analysis and exploration; finding something specific would be a secondary concern.

Rationale

Originally called dynamic queries in an early paper (see pattern examples), the key findings were that presenting results in graphical format is the “most important part of dynamic queries, but that sliders direct manipulation of the query are also important.” The immediate or near-immediate visual feedback is crucial for success, and the visual controls make it easier to modify the filters. Remember, the key scenarios are analysis and exploration, so the user will be using active filtering to help them perceive patterns and find interesting correlations in the information set. You could almost think of it as active multivariate charting, if that helps.

Part and parcel in this pattern is having controls that are readily understandable and easy to use and don’t require switching from pointing device to key input. In fact, you probably should shy away from key input entirely. Imagine the users using it on a Surface, Tablet PC, regular touch screen, or even mobile devices—you don’t want them having to switch to key input to do the exploration.

This pattern is much better than presenting an up-front criteria form to execute a query or using some sort of query language because of these two things—immediate feedback and no key input.

While you can use this pattern for finding specific things, a more likely candidate for that would be Faceted Navigation, which is similar but geared more towards finding than exploring and analyzing. And if the criteria are mapped 1-1 with aspects being displayed in a table/grid format, you might consider using Table Filter, as it is easier to implement and also readily understandable.

Implementation

You’ll divide the display into two basic areas: results and filters. Results can be visual (such as using a chart, tree map, etc.) or even simply list- or table/grid-based. Whatever is the most appropriate visualization for your information is what you should choose, but a graphic visualization should usually be preferred as those lend themselves more towards analysis and exploration.

The filters section should be in an obvious location and be clearly identified as such. It should be clearly associated with the results so there is not even a split second confusion as to what the filters apply to. This is usually best achieved through visual proximity--put it right next to or above the results. Below is usually not a good option unless the filters and results still fit together on one screen.

The controls used should be, as noted in the rationale, ones that can be controlled by pointing devices. For range-based aspects, consider a dual-button slider. For single-value numeric and time values, you can still use a slider. If the aspect can be meaningfully represented visually, you could use image-based selectors, but keep these to a minimum due to space constraints. Users shouldn’t have to scroll to tweak the filters. For set-based filters, go with the usual suspects—drop-downs, list boxes, and the like.

The ideal is that the result set is refreshed as soon as a filter changes. For instance, a slider should modify the results as it is being dragged. If the queries take too long for this to feel right, the next best would be immediate filtering based on releasing a control or a second lag time, i.e., the user stops tweaking a filter for a second so you update the results then. The least desirable option would be forcing a user to press some sort of execute button, but if the query takes more than two seconds, you may want to do that to communicate the relative effort required by the system to perform the query. At that point, however, the value of active filtering comes into question.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

The example below from the ASP.NET Samples Browser/Grid/ Defining Layouts/Client-Side Filtering (Advanced) shows the Infragistics.WebUI.UltraWebGrid.UltraWebGrid control:

Example of the Active Filtering UX pattern.

 

Windows Forms

You can use the following controls to implement the Active Filtering pattern: WinGrid, WinComboEditor, WinOptionSet, WinCheckedListbox. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called MyFinances and [WinEditors] AutoCompleteModeto see it in action.

WPF

You can implement the Active Filtering Pattern in the following controls: XamDataGrid, XamCheckEditor, and XamComboEditor. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Enabling Record Filtering to see it in action.

JavaServer Faces

Active Filtering can be built into a JSF app easily using context appropriate components from the core libraries and NetAdvantage for JSF.An example of applying a filter to a data grid is available here.

Examples

Kayak is an airline booking engine that allows the user to interactively adjust various options to get the best price vs. schedule. vs airline preference and more. The sliders on the left adjust the takeoff / landing times. Other checkboxes are used to filter based on airline or day of the week. All results are updated dynamically.

http://quince.infragistics.com/119i

Example of the Active Filtering UX Pattern Example of the Active Filtering UX Pattern

The primary example for this pattern is from The Hive Group and shows six filters for a Treemap. The panel in the right lets the user filter with two checkboxes and then uses sliders for additional filters. Each time a control’s value changes, the Treemap is refreshed.

http://quince.infragistics.com/113b

Example of the Active Filtering UX Pattern Example of the Active Filtering UX Pattern

The example above comes from an early paper presented at the Conference on Human Factors in Computing Systems called “Dynamic Queries for Information Exploration: An Implementation and Evaluation” by Christopher Ahlberg et al, 1992. You can see it presents the periodic table and uses the sliders at the bottom to filter elements based on various aspects.

http://quince.infragistics.com/119j

Example of the Active Filtering UX Pattern Example of the Active Filtering UX Pattern

Spotfire is a visualization program that uses Closable Panels on the right, to let the user modify the filters. In this case, several charts are displayed. The underlying chart data is filtered by the demographic variables specified on the filter panel.

http://quince.infragistics.com/11et

Example of the Active Filtering UX Pattern Example of the Active Filtering UX Pattern

Mint.com has a well executed implementation to help people find credit cards that match their criteria. You can adjust the sliders and other options on the left, and the result set is immediately filtered.

http://quince.infragistics.com/111y

Example of the Active Filtering UX Pattern Example of the Active Filtering UX Pattern

The Institute for Healthcare Improvement's Silverlight 3 application - Improvement Map - allows users to filter an extensive catalog of processes by selecting from 11 different filters. As soon as a value is selected, the list is refiltered to reflect the current criteria allowing the user to find items that meet their needs.

http://quince.infragistics.com/110u

Example of the Active Filtering UX Pattern Example of the Active Filtering UX Pattern

Sources

Jennifer Tidwell, Designing Interfaces – Dynamic Queries

Tags

Data Visualization, Displaying Complex Data, Analysis.