Search Bar Design Guide: How to Get Your Users Where They Need to Go
The search bar is an easily overlooked part of a site during the design process yet users depend on it to find specific information. Since the search bar is one of the most used elements on a website, search bar design has a significant impact on user experience. This article will give you the complete guide on how to design search bars that help users find the information that they are searching for.
Should you have a search bar on your site?
The thinking and psychology behind search bar use is that it helps users find information quickly. Search bars are useful in complex content-heavy sites that have more than 100 pages. In the Business to Consumer (B2C) sector, search bars are used in large e-commerce sites, news sites, deals sites, and booking sites to help users find information easily. They are also used in large Business to Business (B2B) sites that have many customer segments and product lines. If you have a small site that has few pages, a search bar might not be required but you will need it as the site grows.
Ideas to consider when creating your search bar
A search bar is usually made up of two UI elements: an input field, and a button. However, the design of a search bar has a significant effect on how fast users can find the information that they are looking for on your site.
Display your search bar prominently
Make your website search bar easily discoverable by displaying it prominently on your site. The discoverability of your search box is even more important on ecommerce sites or booking sites where users rely on search to navigate the website.
Avoid hiding your search box in a drop-down menu or behind the search icon (progressive disclosure) because it makes it hard for users to find it. Additionally, when you hide your search bar, you add an extra action that users have to take before searching your site.
Include a magnifying glass icon in your search bars
Icons act as mental shortcuts and visual cues for an action or an object. For the search action, the magnifying glass is the universally accepted symbol, and using it will make it easy for users to recognize your search bar even when there is no text label. When choosing a magnifying icon, choose a schematic icon that is not overly stylized to increase the speed of recognition.
Use a lot of contrast and padding to make sure that the icon stands out and make it large enough.
Have a search button in your search bar
Depending on the type of site you are designing, you can choose to have a search button next to your search bar instead of a magnifying glass icon. The button shows users that they need to submit a search query before they can get their search results. LiquidPlanner’s search bar has a prominent search button that is well labeled.
When creating a search button for your search bar, follow the conventions of good button design by ensuring that it is of the right size and it has enough contrast so that it stands out. Ensure that users can use the ‘Enter’ function on their keyboards to submit their search queries. Some users still use the enter function to submit queries and it’s also good for accessibility.
Use placeholder text to guide users on what they can search for
Use a sample search query as placeholder text to guide users on the search queries that they can make on your site. This is useful for website search bars where users can search for different items. Limit the length of your placeholder text to reduce cognitive load and ensure that there is enough contrast for it to be legible.
Design a simple search box
Create a search box looks like a search box and that it is easy to use. Start with a simple search and give users the option to use search filters or advanced search mechanisms if they need to. A good example is IMDb, which allows users to choose the type of search that they want to use. If you make advanced searches as the default, streamline the search box design so that it’s easy to use.
Place your search bar where users expect to find it
Website users scan websites using an F pattern and it is important to place your search bar within this F pattern so that users can see it. This is at the top center or top right of your website. Additionally, users actually expect to find search bars for websites at the top of the page. Don’t bury your search bar in the footer, where users have to hunt for it. Use heatmaps to find out the areas of your website where users scroll and click the most (hotspots) and place your search bar there.
Use auto-suggest
Auto-suggest guides users when they are typing out their search queries to avoid errors in search query formulation. Make sure that your auto-suggestions are helpful to avoid confusing or distracting users. Show the difference between the information put in by the user and auto-suggestions by bolding the auto-suggestions. Make your auto-suggestions keyboard navigable to and don’t give too many auto suggestions as this can cause confusion.
Put your search bar on every page
In your search bars design,make it possible for your users to always access the search box. The search bar is especially useful in the 404 and other error pages where users hit a dead end.
Use a large field size
If the input field of the search bar for your website is small, users have to scroll back and forth to see what they have typed which leads to poor usability. Make it easy for users to view and edit their search queries by using large input fields that reduce query errors. Google uses a large query input field to accommodate its common search queries.
Size your input fields according to the size of queries that you expect and set your widths with em. Use a growing search box that expands with the users’ search query if you want to save space.
Design search bars with the best UI tool
In order to design search bars that answer your users’ questions, you need the best UI tools. UXPin provides you with an all in one platform where you can design and prototype your search bar as you collaborate with your team members and developers. Sign up for a free trial of UXPin (no credit card required) and start designing your search bar today.
Turn your Search Bar into a UI Component
Tired of designing the same search bar over and over again? You can ask your developers to turn your search bar into UI component. If you don’t have engineers on your team, you can also use a search bar from a public UI component library, such as Ant Design, etc. You can bring this component to UXPin thanks to its powerful Merge technology and use it in your next prototype.
We’ve just released Merge Component Manager, a handy tool that makes it easy for designers to import and manage UI components in UXPin. Try it out on trial. Just request our salespeople to enable it for your trial account.
