5 Ways to Improve the UX of Site Search

Default avatar.
November 01, 2017
5 Ways to Improve the UX of Site Search.
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.

1. Put the search box where users expect to find it

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 with 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. 1 The areas where participants expected the search to be found. The upper-right corner is still the first place users expect to find search. 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. 0 Search is one of the most important features for eBay. Notice the contrasting color for the button “Search” on ebay’s homepage

2. Use a Proper Field Size for the Search Input Field

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).

3. Make It Clear What Users Can Search For

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. 3

4. Don’t Erase Users’ Query After They Hit ‘Search’ Button

Keep the original search query. Query reformulation is a critical step in many information journeys. If users don’t find what they’re looking for from the first attempt they might want to search again using a slightly different query. To make it easier for them, leave the initial search term in the search box so they don’t have to re-type the entire query again.

5. Use an Auto-Suggestion Mechanism

Research by the Nielsen Norman Group has found that typical users are very poor at query formulation: if they don’t get good results on the first try, later search attempts rarely succeed. In fact, users often give up right after the first negative attempt. However, it’s possible to improve this situation by using an auto-suggestion mechanism. Auto-suggestion mechanisms helps users to find a proper query by trying to predict it based on the entered characters. When this mechanism works well it helps users articulate better search queries. Here are a few things to remember when incorporate auto-suggestion mechanism on your site:
  • Ensure that auto-suggestions are useful. Poorly designed auto-suggestions can confuse and distract users. So use a spelling auto-corrections, recognition of root words, and predictive text in order to improve the tool.
  • Provide auto-suggestions as quickly as possible, such as after the third character is entered. This will provide immediate value and reduce user’s data entry effort.
  • Show less than 10 suggested items (and without a scroll bar) so the information doesn’t become overwhelming. Allow users to navigate between items susing a keyboard.
  • Highlight differences between the inputted information and suggested information (e.g., input text has a standard weight, while suggested terms have bold weight).
4 Google searches mastered this pattern, having implemented it since 2008.

Conclusion

Search is a critical element of building a profitable site. Users expect smooth experiences when finding and learning about things and they typically make very quick judgments about site’s value based on the quality of one or two sets of search results. An excellent search facility should help users find what they want quickly and easily.

Nick Babich

Fireart Studio is a design studio passionate about creating beautiful design for startups & leading brands. We pay special attention to nuances all the time to create professional while cool products that will not only meet all expectations, but exceed them.

Read Next

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…