Best UX Practices for Search Box

A search box, search field or search bar is a graphical control element used in computer programs, such as file managers or web browsers, and on web sites with the dedicated function of accepting user input to be searched for in a database. The functional requirement of a search box is that the user expresses their information need as a query, and the search delivers its response as a set of real-time results. Users expect smooth experiences when searching and they typically make quick judgments with respect to results. The best search practices might increase the engagement level of the user.

Search Box Design:

A search box is a combination of the input field and submit button. But since the search box is one of the most frequently used graphical control elements on content-heavy websites, its usability is critical. There have been several iterations based out on usability on the two simple elements; Input and button.

Description of a search box:

A search box is usually a single-line text box or search icon (which will transform into a search box on click activity) with the dedicated function of accepting user input to be searched for in a database. Depending on the particular implementation, a search box may be accompanied by a drop-down list to present the users with past searches or search suggestions. Search boxes may have other features to help the user, such as autocomplete, search suggestions, a spelling checker, etc. Search boxes are often also accompanied by drop-down menus or other input controls to allow the user to restrict the search or choose what type of content to search for. At its best, a site search box can be an assistant that helps the user find content — even content that they didn’t know they wanted. Like any good assistant, it should be virtually invisible and practically everywhere.

Position of Search field:

Too many websites get this wrong. How would your visitors feel if they have to search for the search box? People visit your website to find something specific. If they’re confused about how to find that thing, they’re going to leave. Add a prominent search box that users can easily locate to locate specific content. The most important rule in search box design is to make it easily noticeable.

Figure 1: Website has a search icon only

Figure 2: BBC Website having only a search bar

Put the search box where users expect to find it:

Let’s look at how popular websites position search and search-related features like text box or search icon. Many popular websites such as YouTube, Amazon, IMDB place the search boxes towards the top center or top right of the page. In 2001, Bernard conducted a survey to determine the expected location for a variety of web objects. The study split web users into novice and experienced groups and evaluated expected location for the following web objects: back to home link, internal links, external links, internal search engine, and advertisements. As shown in Figure 1, many participants expected to find the “Site Search Engine” to be located in the upper right corner of the web page or near the upper left corner were the results obtained from this survey.

As shown in Figure 3, many participants expected for find the “Site Search Engine” to be located in the upper right corner of the web page or near the upper left corner.

Let’s look at the example of a travel-specific website where search is given in two formats even though the positioning is right. In Figure 2, it is represented by a magnifying glass and in Figure 3 by the search button in red color.

Figure 4: Search icon at Jet airways site

Figure 5: This search button is fixated to flight search ignoring universal search.

The three factors that determine the character of your site search box are:

● Size

● Location

● Prompt text

In a study of the top 50 websites using site search extensively, certain patterns emerged as the most common arrangement of the site search box size, location and prompt text. Here are the findings:

Size — The amount of screen space taken up by the site search box varies enormously, based mostly on design concerns. The two elements of size are the total site search box, including buttons and titles, and the size of the search input area. The total size ranged from 2,646 to 29,820 pixels with an average of 10,859 pixels. In terms of just the input area, sizes ranged from a tiny 1,632 up to 13,312 pixels, averaging at 5,969 pixels. The most important aspect to consider is that the site search box should not dominate other design elements.

Location — The majority (54 percent) chose the top right corner. Because site visitors read left to right, this is the first place their eyes go after looking at the site’s main logo. Another 30 percent of sites chose the center, most notably Amazon, because many retailers reserve the right side for the shopping cart tools and information. The remaining sites (only 16 percent) chose the left side, where people often look for navigational tools.

Prompt what the users search for:

With content-heavy website, it is a good idea to include a sample search query in the input field to suggest to users what queries can be used. If the user can search for multiple criteria, use the input hint to explain that. But make sure to limit your hint to just a few words, otherwise you increase the cognitive load.

Figure 6: IMDb, where search prompts you to look for TV shows.

Figure 7: Alibaba promotes a conversation with usr asking what the user is looking for.

Use an auto-suggestion mechanism:

Auto-suggestion is a powerful tool that reduces data input. Designers often think that the auto-suggestion mechanism is intended to speed up the user’s data entry, but it’s helpful for guiding the user in constructing their search query. Typical users are very poor at query formulation: if they don’t get good results on the first try, later search attempts rarely succeed. When autocomplete suggestions work well, they help the user articulate better search queries.

Figure 8: LED hut prompts products in suggestions increasing user engagement.

Conclusion

Site search is essential for reducing bounce, extending the time users spend on your site, and motivating them to act. Site search should be considered a basic function that consumers have come to expect on their favorite sites. Take note of how the most popular sites in your industry treat the size, position and text prompts in their site search boxes. This gives you a clearer vision of how the ideal site search box will fit into your site’s overall design. Best practices will help the searcher find more relevant content on your site. Making site search a priority in your SEO strategy creates content that is worth searching for. When you include unnecessary elements in your search bar, it makes doing a search that much slower. Not only that, but having more elements decreases aesthetic appeal. It’s best to seek the simple approach that not only looks appealing but enables users to find what they’re looking for fast.