Filtering

Simple Filtering Interface

This is a simple filtering interface for items in a list. You click on an item to include it in the filter; the entire item is clearly highlighted when selected so it's easy to see what's selected. The two-column format is easy to scan and keeps the vertical length manageable (excessive length can be a problem with vertical filtering controls).

Ravelry_simplefilter

From: Ravelry.com

Endless Filtering Possibilities

Endless, an on-line shoe merchant, provides options to filter products by category, brand, color family, size, width, and price range - all right within the page.

Initial Page State - Women's Shoes
Endless1_1

Any selection made on the left immediately filters the products listed to the right.  But, selections don't trigger a page refresh. Instead there is a smooth fade out of the current results and fade in of the new results.

The filtering controls are somewhat visually complex, but work well.  Category filtering is more of a link-browsing experience - including a little breadcrumb at the top:

Endless_breadcrumb

As you apply filters, options that are no long available are shown as inactive.

Endless_brands_1   

With Brands, this  makes it difficult to see what all the brand options are. For example, I had to scroll all the way to the bottom of the list to filter by the brand Saucony. I could have searched for it, but I wasn't quite sure how it was spelled.

The treatment for showing the colors as inactive is also a bit awkward. It wasn't immediately clear to me that the "color corners" were actually colors that were not available.

Endless_colorfilter

The display on the slider control is slightly misleading. On first glance, it appears that the lowest selectable value is $263.00.  Actually, the lowest value is $15.00.

Endless_priceslider

This range slider from Diet Television is a clearer presentation of the selected range:

Diettvrange_1

My Photo

About

  • Blink Interactive is a Seattle-based user experience consulting firm. Our design library is an informal collection of design examples with commentary.

Search

Widget

  • Get this widget from Widgetbox