Best UX Practices for Search Box

Nazreen Nizam
Aug 27, 2018 · 6 min read
Image for post
Image for post

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.

Image for post
Image for post
Figure 1: Website has a search icon only
Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Figure 4: Search icon at Jet airways site
Image for post
Image for post
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.

Image for post
Image for post
Figure 6: IMDb, where search prompts you to look for TV shows.
Image for post
Image for post
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.

Image for post
Image for post
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.

NYC Design

A publication for designers of New York & design lovers from all around the world.

Nazreen Nizam

Written by

User Experience Researcher @Booking.com

NYC Design

A publication for designers of New York & design lovers from all around the world. Design thinking is what makes us share with the whole world.

Nazreen Nizam

Written by

User Experience Researcher @Booking.com

NYC Design

A publication for designers of New York & design lovers from all around the world. Design thinking is what makes us share with the whole world.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store