Skip to main content

Searchbox

Search lets users assert independence from websites' attempt to direct how they use it. Therefore, many users go straight to the homepage search function.

Search is also users' escape hatch when they are stuck in navigation. When they cannot find a reasonable place to go next, they often turn to the site's search function. This is why you should make search available from every page on the site; you cannot predict where users will be when they decide they are lost.

Do's​

  • use placeholder text. Placeholder text provides context as to what can be searched and describes the action of the input

  • use a magnifying glass icon. The magnifying glass is universally recognized as a symbol for search and one which users can easily identify

  • provide a button to submit search queries. Inputs should be accessible. Ensure users can return results using their keyboard as well as clicking a button or the magnifying glass icon

  • consider the search icon position. In most cases, it is beneficial to place the Icon to the right of placeholder text. This allows the Icon to act as the submit button and makes more sense hierarchically as queries are entered first, and results returned after

  • use input widths which are appropriate for the typical query length. The width of the Input field should be wide enough to contain the typical search query. If an Input field is too narrow, it results in scrolling and decreases usability. It is recommended to use a minimum width of 27 characters