Search is like a conversation between the user and system: the user expresses their information need as a query, and the system expresses its response as a set of results. Search is a fundamental activity and a critical element of building a content-heavy site.
In this article, I would like to share 5 tips that will help you improve the search UX.
It’s not good when users have to search for search box because it doesn’t stand out and is not easy to spot.
The chart you see below was taken from a study by A. Dawn Shaikh and Keisi Lenz: it shows the expected position of the site search form in a survey of 142 participants. The study found that the most convenient spot for the majority of users is the top left or top right area of a page on your site.
Thus, place a search box in the upper-right or upper-center area of your layout and you’ll be sure that your users will find it where they expect it to be.
Ideally, the search box should fit the website’s overall design yet manage to stand out slightly when users need it.
The more content you have, the more prominently you want to display your search feature. If search is essential for your site (e.g. your website is a e-commerce store), use plenty of contrast so that the field and icon stand out from the background and from the surrounding elements.
Making the input field too short is a common mistake among web designers. When users type long queries, only a portion of the text is visible at a time and this means bad usability since users cannot review and edit easily their query. In fact, when search box has a limited number of visible characters users are forced to use short, incomplete queries, because longer queries would be hard to read.
If input fields are sized according to their expected input they are both easier to read and to interpret for users. A rule of thumb is to have a 27-characters text input (this size accommodates 90% of queries).
It is a good idea to include a sample search query in the input field to suggest to users what’s possible to search for. HTML5 makes it easy to include text as a placeholder inside the input field. If the user can search for multiple criteria, use the input hint pattern to explain (see the IMDb example below). But be sure to limit your hint to just a few words, otherwise, you’ll increase the cognitive load.