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 want, 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 web-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. So you can capture this information by reviewing your search logs and optimise the website so that it delivers relevant information to users.
UX tip A well-designed search is the most natural way to interact with websites, software, or apps and can provide insights about users' needs.
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.
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.
Here are some simple UX best practices for search:
General UX Search Tips
- Search should always complement navigation when searching is faster than navigating
- Small websites (under 12 pages) don’t need search and in most cases they are better off without it
- E-commerce websites with a catalog of products should always offer search, as most people rely on search on e-commerce websites
- Include search functionality on large websites to make them easier to navigate
- Rule of thumb: If your website has a 2nd level navigation, it should also include search
- If you have any kind of database on your website, always offer search capabilities
- If you add new content over time, such as a blog, news, events, your website should have search capabilities
UX Search tip E-commerce websites with a catalog of products should always offer search.
Search Appearance & Usability
- Make the search field easy to find. Users typically look for it in the top right corner
- The search field should always look like a text box on a desktop. The search icon is OK to use for mobile
- Accompany the search box with the simplest magnifying-glass icon. Don’t use any other icon
- Always put the search box on every page of the website and in the same spot
- Search fields should be wide enough to see the entire search query
- 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
- Use the same label in the search function as the actions the user wants to perform (e.g. “Search catalog”, “Find events”, etc.)
- Keep your search easily visible. Don’t hide it in dropdown or hamburger menus on mobile
- Use established patterns for search. Don’t get “creative” with search design—this can confuse website users
UX Search tip Make the search field easy to find. Users typically look for it in the top right corner.
Search Behaviour & Logistics
- Don’t confuse search with filters: search typically takes you to a separate results page; filters refresh the page you are on
- Show fewer than 10 most relevant results in auto-suggest (if you don’t use a scrollbar)
- Highlight matching keywords or criteria in the search auto-suggest
- Consider adding image previews to the search auto-suggest where applicable
- Always account for typos and synonyms in search user queries
- Make sure that hitting Enter when typing in the search field triggers the search
- Use search auto-suggest effectively: Look for important keywords and predict results
- Esc should close the search auto-suggest
- 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
UX Search tip Use effective auto-suggest in search: look for important keywords to predict results.
Advanced Search
- When searching records with multiple fields, allow for advanced search by each possible field (e.g. name, date, model, ID, category, etc.)
- It is best to hide advanced search by default and offer it as an optional feature that can be expanded when needed
- Allow users to combine multiple criteria in a single search query (e.g. search by name AND/OR model)
- Consider search operators “AND” and “OR” when combining multiple queries
- Allow users to search by ranges for numerical fields (e.g. price, date, ID, etc.)
UX Search tip When searching records with multiple fields, allow for advanced search by each possible field (e.g. name, date, model).
Search Results
- Always sort search results by relevance. Where applicable, offer to sort by other criteria (e.g. date, rating, etc.)
- Always show the number of search results found
- Consider highlighting the matching keywords in the search results
- Don’t return “No Results” in search results. Offer suggestions, (e.g. matching content, contact support, view sitemap). Avoid dead ends
- Display the proper page layout for your search results: Put details in lists and pictures in grids
- If applicable, consider allowing users to switch between list-view and grid-view in search results
- 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.)
- If your search does include various content types, separate and clearly label the various types
- Allow users to refine or filter search results to help users find relevant results and reduce the number of the matching results
- If your website search includes files, allow users to search by the content within the files as well as file names
- Save users’ most recent search queries and make it easy for them to do repeat searches
- Always log search queries and analyze the most common search results to improve UX and findability
