blink design library

Visual search suggestions

Most designers are likely familiar with functionality that dynamically displays search results suggestions as you type - for example, Google Suggests, which is shown below.

The Apple Store takes this idea one step further by automatically displaying images as part of the results display. For example, here are the results suggestion when I've typed "ip":

And here are the suggestions when I've typed "iph":

There is some seemingly promotional content in the results, but the top few choices are relevant. In some ways, this feels more like small dynamic web page built from the letters you've typed into search.

Query Builder

Supercook has an innovative query-builder for finding recipes (click to see full-sized image).

I enter ingredients I have on-hand in the upper-left green box, which are displayed below in the tabbed area labeled "Your Kitchen."   The search results on the right displays recipes with the ingredients I've specified (in this case chicken, lettuce, and salsa).

What's interesting is display below my list of ingredients - it suggests other ingredients I might have on-hand (or could easily buy).  These appear in a tag cloud so I can see which ingredients will yield the highest number of recipe options. For example, if I added the ingredients "cheddar cheese" and "tortillas" to my chicken, lettuce, and salsa, I go from being able to make 1 recipe to 5 recipes.

Though this example is food-specific, it seems this approach could work for other items that have a standard set of attributes.

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.

Vertical Range Sliders

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

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.

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

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].

From: Shop Wiki