Search UX Tips and Design Guidelines to Improve Search Usability

Andrew Kucheriavy

Search UX Tips and Design Guidelines to Improve Search Usability

A well-designed search is the most natural way to interact with websites, software, or apps. When it works well, it’s just like having a conversation with a person: You tell it what you need, and it gives you the information you’re looking for.

Incorporating a finely-tuned search function can dramatically improve user experience.

Search can be faster than navigation for websites.

For sites with hundreds or thousands of pages, it is faster for users to find specific pages using search rather than browsing to them.

Search is intuitive.

Recent advances in semantic search allow users to use synonyms and conversational-type queries. This means that they don’t need to use the exact keyword to find the result that they’re looking for.

Search allows you to learn about your users' needs.

A big advantage of search is that the user tells you what they're looking for. You can then capture this information by reviewing your search logs and optimize your website so that it delivers relevant information to users.

A  well-designed search is the most natural way to interact with websites, software, or apps and can provide insights about users’ needs-1

Search lets users compare multiple pages, products, or items.

A good example of this is Amazon’s website, where users can quickly compare and locate products that they’re interested in from the search results without needing to open multiple pages at a time.

Most e-commerce sales come from search.

This is a well-known fact—if you run an e-commerce website with multiple products, most of your revenue will come from people searching for products. Having a well-designed search is critical to your bottom line.

Is your search optimized? Find out with a UX audit.

Tips for Improving Search UX and Usability

Although search is sometimes an overlooked function, most websites can see significant improvements in revenue and conversions by getting search right. In one instance, a home décor website increased its website conversions by 34% and achieved an 84% increase in average revenue by improving its website search usability. In another case, an online retailer was able to increase its conversion rate for website visitors by 82% by using search queries to optimize its search functionality.

Here are some simple UX best practices for search:

General UX Search Tips

Search should always complement navigation when searching is faster than navigating Click to Tweet

Small websites (under 12 pages) don't need search and in most cases they are better off without it Click to Tweet

E-commerce websites with a catalog of products should always offer search. Most people rely on search on e-commerce websites Click to Tweet

E-commerce websites with a catalog of products should always offer search

Include search functionality on large websites to make them easier to navigate Click to Tweet

Rule of thumb: If your website has a 2nd level navigation, it should also include search Click to Tweet

If you have any kind of database on your website, always offer search capabilities Click to Tweet

If you add new content over time, such as a blog, news, events, etc., your website should have search capabilities Click to Tweet

Some people prefer searching vs. navigating so when in doubt, include search capabilities Click to Tweet

Don't mess up your search funtionality. Contact us for help

Search Appearance & Usability Tips

Make the search field easy to find. Users typically look for it in the top right corner Click to Tweet

Make the search field easy to find. Users typically look for it in the top right corner

When looking for search on websites, users typically look for a little box to type in Click to Tweet

The search field should always look like a text box on a desktop. The search icon is OK to use for mobile Click to Tweet

Accompany the search box with the simplest magnifying-glass icon. Don't use any other icon Click to Tweet

Always put the search box on every page of the website and in the same spot Click to Tweet

Search fields should be wide enough to see the entire search query Click to Tweet

On mobiles, make the search field the entire width of the screen Click to Tweet

On mobiles, make the search field the entire width of the screen

Put the label "Search" inside of the search box, but make sure it clears when users start typing in the box Click to Tweet

Use the same label in the search function as the actions the user wants to perform (e.g. "Search catalog", "Find events", etc.) Click to Tweet

Keep your search easily visible. Don’t hide it in dropdown or hamburger menus on mobile Click to Tweet

Use established patterns for search. Don’t get “creative” with search design—this can confuse website users Click to Tweet

Free UX Session   Improve your website’s KPIs and ROI  Eliminate guesswork and achieve tangible customer acquisition, conversion, and  retention results.  IMROVE YOUR WEBSITE

Search Behavior & Logistics Tips

Don't confuse search with filters: search typically takes you to a separate results page; filters refresh the page you are on Click to Tweet

Show fewer than 10 most relevant results in auto-suggest (if you don't use a scrollbar) Click to Tweet

Highlight matching keywords or criteria in the search auto-suggest Click to Tweet

Consider highlighting the matching keywords in the search results

Consider adding image previews to the search auto-suggest where applicable Click to Tweet

Always account for typos and synonyms in search user queries Click to Tweet

Watch out for empty and short (one, two letter) search queries that produce unexpected results Click to Tweet

Make sure that hitting Enter when typing in the search field triggers the search Click to Tweet

Use search auto-suggest effectively: Look for important keywords and predict results Click to Tweet

Use effective auto-suggest in search

Esc should close the search auto-suggest Click to Tweet

Allow users to navigate the search results using the up and down arrows and the enter key Click to Tweet

If search is not instant (if takes more than a second to process) always show the progress indicator and return results (even if partial) as soon as you can Click to Tweet

Advanced Search

When searching records with multiple fields, allow for advanced search by each possible field (e.g. name, date, model, ID, category, etc.) Click to Tweet

When searching records with multiple fields, allow for advanced search by each possible field

It is best to hide advanced search by default and offer it as an optional feature that can be expanded when needed Click to Tweet

Allow users to combine multiple criteria in a single search query (e.g. search by name AND/OR model) Click to Tweet

Consider search operators "AND" and "OR" when combining multiple queries Click to Tweet

Allow users to search by ranges for numerical fields (e.g. price, date, ID, etc.) Click to Tweet

Offer-the-ability-to-search-by-rangers-for-numerical-fields

Search Results

Test your search functionality to ensure the results are relevant and accurate Click to Tweet

Always sort search results by relevance. Where applicable, offer to sort by other criteria (e.g. date, rating, etc.) Click to Tweet

Always show the number of search results found Click to Tweet

Consider highlighting the matching keywords in the search results Click to Tweet

Don't return "No Results" in search results. Offer suggestions, (e.g. matching content, contact support, view sitemap). Avoid dead ends Click to Tweet

Display the proper page layout for your search results: Put details in lists and pictures in grids Click to Tweet

If applicable, consider allowing users to switch between list-view and grid-view in search results Click to Tweet

Always show the query in search results and make it easy to modify the query to search again Click to Tweet

Always show the query in search results and make it easy to modify the query to search again

Avoid mixing content of various type on the same search results page (i.e. web pages, documents, images, events, users, etc.) Click to Tweet

If your search does include various content types, separate and clearly label the various types Click to Tweet

Allow users to refine or filter search results to help users find relevant results and reduce the number of the matching results Click to Tweet

If your website search includes files, allow users to search by the content within the files as well as file names Click to Tweet

Save users' most recent search queries and make it easy for them to do repeat searches Click to Tweet

Always log search queries and analyze the most common search results to improve UX and findability Click to Tweet

 

Getting search right can take some time, but the benefits are well worth the effort. But if you've still got questions about your search, contact us about a UX audit.

Free UX Session   Get More Business from your Website  Schedule a UX review to increase business from your website.  GET MORE BUSINESS