Refining Search

Also known as: List, Data Table, Data List, List View, Data Grid, Spreadsheet, Table, Multi-Column List

Tags: navigation

Allow user to refine search results in real time using multiple filters in any order until the desired items are found.
Kayak.com hotel search is a typical example of Refining Search pattern. Search filters are vertically stacked on the left, and search results on the right, which is the most common layout for Refining Search model. Search gets triggered immediately when filters are tweaked. Search results are paginated and can be sorted in several different ways. When the search is in progress, a feedback message is shown to keep the user up to date what is happening.

Kayak.com hotel search.

What problem does the pattern solve?

  • Search items can be classified using multiple filters/facets (e.g. price, color, size).
  • User doesn’t know exactly what he is looking for, but he has specific needs e.g. he needs a fuel efficient family car that has cruise control and is in a price range of 20 000-25 000 dollars).
  • User wants to compare multiple items by specific criteria (e.g. all the blue long sleeve shirts for men).

When to use it?

  • Search items can be classified using multiple filters/facets (e.g. price, color, size).
  • User doesn’t know exactly what he is looking for, but he has specific needs e.g. he needs a fuel efficient family car that has cruise control and is in a price range of 20 000-25 000 dollars).
  • User wants to compare multiple items by specific criteria (e.g. all the blue long sleeve shirts for men).

How to use it?

Layout

Select a layout that suits your content:

  • Vertical layout where filters are stacked on top of each other on the left and search results on the right is the most typical layout in Web applications.
    • It is usually the best choice when there are many facets and many values in each facet. It minimizes vertical scrolling but leaves less horizontal screen real estate for results.
  • Horizontal layout where filters are at the top of the page, side by side, leaves more horizontal screen real estate for results.
    • It is usually a good choice when there are only few facets and facet values to show.

Filters

  • Select filters carefully.
    • Keep the amount of filters reasonable. Select the facets that are most useful and familiar to users and hide others.
    • Consider allowing the user to add more filters, custom or predefined.
  • Order filters based on their importance.
    • Usually it is the best way to order filter values too, but sometimes alphabetical or numerical ordering is more appropriate.
  • Indicate clearly what search filters are on, and make it easy to clear the filters and start over.
  • Use filter controls that are easy to interact with and intuitive to use.
    • Prefer controls that can be manipulated via the mouse.
    • See Input Controls pattern for further instructions.
  • Show filter options visually when possible.
    • Use colors, shapes, sparklines, and other visual elements to make it easier to the user to understand them.
  • Display the number of occurrences in each facet item.
    • Most common way is to show it in brackets after the facet item.

Results

  • Update search results instantly after each refinement, without reloading the page.
    • Asking the user to press a button requires extra work from user and makes it less clear to see what filter affects what.
    • Sometimes it can be better to wait few seconds before triggering the search or use a button to trigger the search.
  • Display the number of results found and update it after each refinement.
  • Provide sorting options for results.
  • Use Endless Scrolling or Page Pagination pattern when all the results doesn’t fit within one page.

Feedback

  • Tell the user what is happening.
    • Show a progress indicator when the results are being updated.

Why to use it?

  • Refining search guides the user visually towards his goal.
    • Seeing results help the user to refine the search, guiding him to find the items he needs in an intuitive and fast way.
    • Seeing weight proportions, sparkline visualizations, symbols etc in facets makes it easier to select filters.
  • It allows user to create a custom way to search the information. Instead of forcing the user to follow a hierarchical path, he can refine the search any way he wants.
  • It is a good way to allow user to compare items based on specific needs.

Useful linksUseful links icon

Example images (3 examples)

Comments

  • stock ticker (www) Sept. 12, 2013 04:35

    Keep the amount of filters reasonable. Select the facets that are most useful and familiar to users and hide others.

  • stock charts (www) Sept. 15, 2013 06:13

    Usually it is the best way to order filter values too, but sometimes alphabetical or numerical ordering is more appropriate.

  • forex trading (www) Jan. 12, 2014 17:23

    i agree with stock ticke you should Keep the amount of filters reasonable

  • forex indicators (www) Jan. 12, 2014 17:43

    it's great that Google lets users add new criteria to the search