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](https://www.intechnic.com/hubfs/Blog/Search%20UX%20Tips%20and%20Design%20Guidelines%20to%20Improve%20Search%20Usability/A%20%20well-designed%20search%20is%20the%20most%20natural%20way%20to%20interact%20with%20websites,%20software,%20or%20apps%20and%20can%20provide%20insights%20about%20users%E2%80%99%20needs-1.png)
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 Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Small websites (under 12 pages) don't need search and in most cases they are better off without it ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
E-commerce websites with a catalog of products should always offer search. Most people rely on search on e-commerce websites ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
![E-commerce websites with a catalog of products should always offer search](https://www.intechnic.com/hubfs/Blog/Search%20UX%20Tips%20and%20Design%20Guidelines%20to%20Improve%20Search%20Usability/E-commerce%20websites%20with%20a%20catalog%20of%20products%20should%20always%20offer%20search.jpg)
Include search functionality on large websites to make them easier to navigate ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Rule of thumb: If your website has a 2nd level navigation, it should also include search ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
If you have any kind of database on your website, always offer search capabilities ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
If you add new content over time, such as a blog, news, events, etc., your website should have search capabilities ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Some people prefer searching vs. navigating so when in doubt, include search capabilities ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
![Don't mess up your search funtionality. Contact us for help](https://no-cache.hubspot.com/cta/default/439788/fdbba31a-1003-44de-a8b0-5fbf60a2d6db.png)
Search Appearance & Usability Tips
Make the search field easy to find. Users typically look for it in the top right corner ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
![Make the search field easy to find. Users typically look for it in the top right corner](https://www.intechnic.com/hubfs/Blog/Search%20UX%20Tips%20and%20Design%20Guidelines%20to%20Improve%20Search%20Usability/Make%20the%20search%20field%20easy%20to%20find.%20Users%20typically%20look%20for%20it%20in%20the%20top%20right%20corner.jpg)
When looking for search on websites, users typically look for a little box to type in ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
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 Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Accompany the search box with the simplest magnifying-glass icon. Don't use any other icon ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Always put the search box on every page of the website and in the same spot ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Search fields should be wide enough to see the entire search query ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
On mobiles, make the search field the entire width of the screen ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
![On mobiles, make the search field the entire width of the screen](https://www.intechnic.com/hubfs/Blog/Search%20UX%20Tips%20and%20Design%20Guidelines%20to%20Improve%20Search%20Usability/Target-Sam.jpg)
Put the label "Search" inside of the search box, but make sure it clears when users start typing in the box ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
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 Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Keep your search easily visible. Don’t hide it in dropdown or hamburger menus on mobile ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Use established patterns for search. Don’t get “creative” with search design—this can confuse website users ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
![Free UX Session Improve your website’s KPIs and ROI Eliminate guesswork and achieve tangible customer acquisition, conversion, and retention results. IMROVE YOUR WEBSITE](https://no-cache.hubspot.com/cta/default/439788/a142444e-6b2b-4e76-a03a-ed4e84641549.png)
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 Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Show fewer than 10 most relevant results in auto-suggest (if you don't use a scrollbar) ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Highlight matching keywords or criteria in the search auto-suggest ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
![Consider highlighting the matching keywords in the search results](https://www.intechnic.com/hubfs/Blog/Search%20UX%20Tips%20and%20Design%20Guidelines%20to%20Improve%20Search%20Usability/Consider%20highlighting%20the%20matching%20keywords%20in%20the%20search%20results.jpg)
Consider adding image previews to the search auto-suggest where applicable ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Always account for typos and synonyms in search user queries ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Watch out for empty and short (one, two letter) search queries that produce unexpected results ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Make sure that hitting Enter when typing in the search field triggers the search ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Use search auto-suggest effectively: Look for important keywords and predict results ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
![Use effective auto-suggest in search](https://www.intechnic.com/hubfs/Blog/Search%20UX%20Tips%20and%20Design%20Guidelines%20to%20Improve%20Search%20Usability/Use%20effective%20auto-suggest%20in%20search%202.jpg)
Esc should close the search auto-suggest ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Allow users to navigate the search results using the up and down arrows and the enter key ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
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 Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
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 Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
![When searching records with multiple fields, allow for advanced search by each possible field](https://www.intechnic.com/hubfs/Blog/Search%20UX%20Tips%20and%20Design%20Guidelines%20to%20Improve%20Search%20Usability/inserts-search%20-%20SM%202.png)
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 Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Allow users to combine multiple criteria in a single search query (e.g. search by name AND/OR model) ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Consider search operators "AND" and "OR" when combining multiple queries ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Allow users to search by ranges for numerical fields (e.g. price, date, ID, etc.) ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
![Offer-the-ability-to-search-by-rangers-for-numerical-fields](https://www.intechnic.com/hubfs/Blog/Search%20UX%20Tips%20and%20Design%20Guidelines%20to%20Improve%20Search%20Usability/Offer-the-ability-to-search-by-rangers-for-numerical-fields.jpg)
Search Results
Test your search functionality to ensure the results are relevant and accurate ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Always sort search results by relevance. Where applicable, offer to sort by other criteria (e.g. date, rating, etc.) ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Always show the number of search results found ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Consider highlighting the matching keywords in the search results ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Don't return "No Results" in search results. Offer suggestions, (e.g. matching content, contact support, view sitemap). Avoid dead ends ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Display the proper page layout for your search results: Put details in lists and pictures in grids ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
If applicable, consider allowing users to switch between list-view and grid-view in search results ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Always show the query in search results and make it easy to modify the query to search again ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
![Always show the query in search results and make it easy to modify the query to search again](https://www.intechnic.com/hubfs/Blog/Search%20UX%20Tips%20and%20Design%20Guidelines%20to%20Improve%20Search%20Usability/Always%20show%20the%20query%20in%20search%20results%20and%20make%20it%20easy%20to%20modify%20the%20query%20to%20search%20again.jpg)
Avoid mixing content of various type on the same search results page (i.e. web pages, documents, images, events, users, etc.) ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
If your search does include various content types, separate and clearly label the various types ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
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 Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
If your website search includes files, allow users to search by the content within the files as well as file names ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Save users' most recent search queries and make it easy for them to do repeat searches ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
Always log search queries and analyze the most common search results to improve UX and findability ![Click to Tweet Click to Tweet](https://www.intechnic.com/hs-fs/hubfs/Imported_Blog_Media/SmallTwitter-Icon-11_11_15-4.png?width=15&height=14&name=SmallTwitter-Icon-11_11_15-4.png)
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](https://no-cache.hubspot.com/cta/default/439788/45729b63-468a-455e-8e44-d720482258c1.png)