Also known as: Guided Navigation, Faceted Search, Faceted Browsing, the Ultra Rich Search Experience, Real-Time Search, Live Filter.

Why

• Refining search guides the user visually towards his goal.
  • Seeing results helps 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.

How it works

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.

History

This pattern was created by Janne Lammi. It is inspired by several articles, design patterns, and books on the topic.

Pattern Gallery

Show Your Pattern Examples Here!

Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:

More photos in Flickr group "UIPatternFactory.com" tagged with refining-search