Sliders

Vertical Range Sliders

On Farecast,  search results include vertical sliders that let users broaden or narrow the search criteria.

Farecast_verticalsliders1
Farecast_verticalsliders2

From: Farecast

An advantage of the vertical (vs. horizontal) slider is that it's easier to display more information about each point included in the range.  In this case, each point includes a description of the time frame and the associated lowest available price.

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

Dynamic Search Interface

This interface uses a series of sliders that let users specify their search criteria. The control on the left automatically update the results on the right. There is an interesting treatment of the results into relevancy groupings - with the top five getting bold color treatment, the next 10 getting gray shading and then next 10 on a white background. I'm not sure how well this works visually, as to me it appears the page contains three separate elements rather than a single, ranked list.

Mydiet

From: Diet Television

Range Slider

This slider allows users to dynamic change the results shown by narrowing the price range. You can change the lower value, upper value, or both - as shown in [2].

Rangeslider

From: Shop Wiki

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