Best UX practices for search inputs
The search box. Where would we be without it? Search is a powerful tool, and as one of the most common elements that we interact with on a daily basis, search input usability is an important consideration.
This article discusses how search elements can be designed to provide better experiences.
1. Don’t make users search for the search box
Search Inputs should not be difficult to find. This is particularly important for content-heavy websites where performing search is a primary function.
2. Input fields should be visible
It is not recommended to hide search inputs behind a button or Icon click. This leads to reduced visibility of the search element, and increased interaction cost in the form of an extra click.
3. Use placeholder text
Placeholder text provides context as to what can be searched and describes the action of the input.
Describe the action of the Input
- The first word of the placeholder text can be used to immediately describe the action of the Input. In the above example, ‘Search’ Twitter provides context of what is being searched, and describes the input action.
4. Use a magnifying glass icon
The magnifying glass is universally recognized as a symbol for search and one which users can easily identify.
5. Provide a button to submit search queries
Inputs should be accessible. Ensure users have the ability to return results using their keyboard as well as clicking a button.
6. Consider the search icon position
In most cases, it is beneficial to place the Icon to the right of placeholder text. This allows for the Icon to act as the submit button and makes more sense hierarchically as queries are entered first, and results returned after.
7. 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. A recommendation from the Nielsen Norman Group is to use a minimum width of 27 characters.
Bonus: Harness the power of autocomplete
Autocomplete can improve the experience for users by helping them to type less, avoid spelling mistakes, and decrease the level of overall effort required to reach a result. By providing useful suggestions, autocomplete functionality can help guide users to their destination. It is also a useful way to help refine further search queries.
Tip: Autocomplete can be a very helpful tool for those in eCommerce. Helping users find exactly what they want faster, and more accurately can lead to a decrease in bounce rates, and increase in conversion.
