Attribute filter

WHAT

The attribute filter pattern reduces large datasets into more meaningful and manageable selections based on attribute criteria.

WHY

Filters are omnipresent in modern apps and, like search, are the most important mechanism to find the data that best suits a user’s needs. Search aims at finding a particular place, object, or group of objects that have a common value. Attribute filter, on the other hand, works by refining and reducing the number of items from a full list of data. Seeing all the data can be overwhelming and complex, appear crowded, and isn’t necessarily useful because users are typically interested in only a specific subset of the dataset. The goal of the attribute filter is therefore to help users reduce the data to the smallest number of options that are relevant to their task. This goal aligns with Hick’s law, which describes the time it takes for a person to make a decision as a result of the possible choices. Increasing the number of choices will increase the decision time logarithmically. Conversely, reducing the number of choices will aid people in making better decisions more quickly. The attribute filter helps users make better and faster choices.

WHEN

Filtering is a common way to reduce the number of features displayed on the map or in a list. It allows users to progressively remove what they are not interested in and so leaves them with what they are interested in. Common use cases include consumer apps in the real estate, travel, and shopping space and enterprise apps in the insurance and agriculture industries.

HOW

Attribute filter comes in many flavors and can vary greatly in complexity and length. Sometimes a simple drop-down list suffices while other times the filter is long and warrants its own panel. On mobile devices, filters are often a series of buttons and drop-down choices just below the header. You also may use other components such as the legend, charts, or timeline slider as the filter control.

Start by showing all the features and provide a form-based interface that allows users to filter based on attribute values. This approach is sometimes referred to as “data first, filter later.” Construct the attribute filters so that users get to their desired selection as quickly as possible. Although the practical construction of your filter will vary from case to case, the following rules provide general guidance:

• Bring important filters to the forefront.
• Carefully select the attributes to be filtered. Domain values tend to work well.
• Use check boxes to opt in and option buttons, also called radio buttons, to toggle between mutually exclusive options.
• Use radio buttons when few options exist; use a drop-down list when options extend beyond a handful.
• Consider adding counts to groups of options to indicate the impact of a filter choice.
• Consider graying out impossible filter options or remove them.
• Range sliders may return zero results, so consider restricting minimum/maximum values to indicate the available attribute ranges.
• Provide smart default selections, such as the most common choices, all options selected, or none selected.

The best practice for applying filtering logic is to construct a filter query that filters “OR” between attribute groups and that filters “AND” between the options of a group. Filtering works best when changes to the filter return asynchronous results and display immediate feedback on the number of results, such as “Showing 731 properties.” Make it clear that a filter was applied and is active by adding small hints or explicit text. Provide an easy way to reset and clear the filters.

Finally, don’t forget to consider the empty state. Some filter combinations may result in zero results to be displayed on the map or list. Provide feedback on what happened and an easy way to reset the filters.

EXAMPLE

The Census Business Builder: Small Business Edition (CBB: SBE, figure 4.3) app provides potential and new business owners access to a range of information, such as demographic, socioeconomic, workforce, consumer spending, or employment data. For instance, if a prospective restaurant owner wants to research the best place to open a new, high-end, specialty dining option, they would add “restaurant” to the cluster of selected industries. Then they would select a primary mapping variable such as “total population” and optionally add a second variable to enable bivariate mapping. After the choropleth map is rendered by the selected geography level (such as by zip codes), the user can apply an attribute filter to refine the visualization. This future restaurant owner may want to add a filter that shows only zip codes in which “average income is greater than $100,000.” Applying this filter will gray out all the zip codes that don’t match the filter criteria. The remaining geographies appear highlighted and indicate better target locations for opening the new restaurant.