Design Pattern Library 1.5

General Guidelines

Desktop/Web

Mobile (Tablet & Phone)

Visual Design Guidelines

Search

Problem

A user needs the ability to find data, files or other content in an application.

Solution

Provide users with an easy to use search mechanism that offers advanced functionality and filtering capabilities as options.

Why

In addition to the main navigation scheme, the application has secondary functionality to search for information. There may be several types of search-related functionality within the application. The search functionality is not the primary means to access the information, it has a secondary role.

In many cases users have a sense of what they are looking for, or at least a sense of what to ask for. Users also in many cases are thinking of what they are looking for in ways that do not match with the way you have organized your content. Therefore, rather than forcing users to get to know your navigational categorizations, just let them search based on what they are able to articulate, in their own terms.

Code

code here

How

Place a search box in a consistent position near the top of the view. In most cases you will want to simply use a text field for users to enter a search phrase and a single button labeled "Search" or "Go."

The default search mechanism should just be a simple free form text box that allows users to enter text describing what they are looking for. Do not require users to make any other choices for this simple default search. You can of course offer more advanced search features, but because many people do not like this, do not force them to use it.

Here are some specific elements for search functionality to consider:

  • Organize your content, and allow users to search within each section
  • Create a taxonomy as part of your information architecture, including a thesaurus which allows you to define which terms should be seen as synonymous or related in other ways, allowing for better matches to user searches
  • Notice potential misspellings and offer suggested spellings of terms
  • Offer suggestions to users based on search results being very small or very large, and based on related searches that other users have used
  • Provide an advanced search page - or expandable panel - with more powerful search features (e.g., Boolean logic operators), and searching tips
  • Show users the search term as part of the search results

Advanced Search

Some more specific elements for implementing advanced search to consider:

  • When a search is related to items or data that have standard attributes (e.g., ticket, service, creator), you may want to provide optional fields that match these attributes as part of an advanced search
  • For filtering fields, such as Country, State, etc, make sure to use a default of "all" so that the user is not forced to make choices for filters they don't care about

Examples