blink design library

Filter controls with keyword search

We've tested a number of search interfaces and in general we've found that people often neglect refinement options. It could be that people are conditioned to the web search experience (particularly Google) and therefore are less inclined to take refinement steps as part of entering their search.

The search function at iStockphoto encourages visitors to refine by displaying the controls dynamically when the cursor is in the keyword search field:

Both the placement (under the search field) and the dynamic behavior (which catches the eye) helps bring these options to the user's attention.

Compare this treatment with that found on the Corbis site (click image to see full-sized):

Here the refinement options appear after the search field and button. Since the user's attention will initially be on the search field and button, the refinement options seem less discoverable in this position.

More Radio Buttons Driving Form Behavior

This example, from Virb, is via Signal vs. Noise. It is a similar idea to what's shown in this previous post, where radio buttons at the top of the page (with strong visual emphasis) drive the form behavior.

In this case, each option has an associated "details" button, which displays help content below:

It's a small detail, but I wanted to see the triangle on the far right move to the "point down" position when the help content is open. This would help indicate that this works as a toggle (clicking again closes the help content) and is a common visual cue found not only on the Web but also in Mac OS X.

Using Radio Buttons to Drive Form Behavior

In a form, it's often handy to ask users an up-front question that will dynamically change what fields are displayed. And, often, radio buttons would seem the ideal control for presenting the options.

The problem is that radio buttons at the top of a form are often overlooked by users, who instead jump right into entering data in the fields.

This form uses a background color to highlight the currently-selected option.  The highlighting helps draw the eye to the radio button selection, making it much less likely to be overlooked.

From: Wetpaint

Dynamic Field Help

When the user's cursor in is a field, the related field help displays on the right. The appearance of caught my eye, bringing my attention to it (this type of text tends to be overlooked, which can lead to errors). This solution also eliminates the clutter of exposing all the field help on the form.

From: Multiply

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.

From: Diet Television

Cruise Finder

The approach for this cruise finder might also work in other search situations where they are only a few variables and relatively few possible values for each. One thing they could likely do to improve the usability of this interface is to gray out the options that cannot be selected; I find the blue shading to indicate "your options" potentially confusing.

From: Princess Cruises

Actions Display on Rollover

This is an alternative way to provide Edit and Delete actions for each item without cluttering up the list with multiple instances of Edit and Delete links. There is potentially a discoverability issue here, but this is mitigated by the implementation - the entire line item is "hot" so rolling over it at any point triggers the display.

From: Backpack