Search

Search component is fundamental to building a content-heavy site or application as it allows users to narrow the scope of the type of information that they are looking for.

Users typically make quick judgements about a site's or application's value based on the quality of one or two sets of search results. Therefore, effective search experience is critical to the user experience.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Forms

Demo

Configure: select the dropdowns below to display the variety of options that checkboxes support.

Usage best practices

The search component engages the users via a search input box and the search result display.

Search input box needs to be easily noticeable. It requires a properly sized input box, a search icon and a search or submit button. The purpose of the search input field is to help users to form their search query quickly, easily and accurately.

Search results needs to deliver the most relevant information in a digestible manner. Users can become overwhelmed by too many or seemingly irrelevant results all at once. Therefore, consider providing filter and sort function to help users narrow down the data.

Make search available on every page of the site, including the 404 page. Search gives the users a control of navigating the site as well as helps them to quickly find the information that they have been looking for. However, search is not a remedy for bad navigation. An effective information architecture needs to strike a balance between searching and browsing available navigation mechanisms. 

Consider using search when:

  • there is a large amount of or particularily complex content on the website or application (more than 200 pages) 
  • site provides a service of information delivery

Usage examples:

  • e-commerce site
  • government website
  • realestate site

Do

Put the search box at the top of the page, on either left or right side as long as the position is consistent with the rest of the site.

Size the search input field according to their expected input length. A 27-character text input field typically accommodates 90% of the queries.

Always provide a search or submit button to submit the query.

Use concise placeholder text or input hints to let users know what to look for.

Use helpful auto-suggestion and auto-complete to assist users with forming and articulating better search queries.

Accompany search box with magnifying-glass icon as it is mostly universally recognized by users even without text labels.

Look out for search box placeholder text colour contrast.

Don't

Do not use hide search box behind an icon or text link, while taking up less space, it makes search feature less noticable and can increase interaction cost.

Do not make the search input box so small that the query doesn't fit in and causes side to side scroll as that diminishes usability.

Do not erase users’ query after they hit the search button. Keep the original input text for users' reference in case they don't find what they are looking for.