Almost all websites have one thing in common — the search bar. Regardless of whether you run an e-commerce store or a blog for your plumbing business, you need one. However, not all are created equal. When building your own, you must follow design best practices. Here are five design best practices that differentiate truly helpful search bars from unhelpful tools that leave users feeling frustrated.
Faceted Filtering
Let users manage and refine search results with filters. Enabling them to narrow results by media type, category, date or tags can help you meet user intent, even if your search algorithm is not advanced. If you are selling products, let them filter by product feature and allow for multiple stacked filter selections.
Predictive Suggestions
The United Kingdom’s Government Digital Service updated the GOV.UK site to increase usability and make the experience more user-friendly. It conducted an A/B test on the live website to see how search behavior changed. It found searches with autocomplete suggestions had a 92% click-through rate, demonstrating the value of autocomplete.
You want to streamline the search process, especially when users don’t know exactly what to search for. Say you are an HVAC provider selling fluid-filled and dry type models. Predictive suggestions would guide potential customers to products you have in stock instead of bringing them to a page that says “no results.”
Result Statistics
Show how many results each query returns. You can also display the date range or list the pages you pull the information from. Organizing the page gives visitors context, helping them know whether to scroll through the results or adjust their query.
Result Relevance
Automatically filter results by relevance rather than by date or popularity. Who would want to see new but irrelevant results at the top of the page? The keyword here is “automatically” — this approach is the default, but you should still allow people to filter by publish date, downloads or price so they can see the latest, most popular or cheapest items first.
Search Filter Reset
People should be able to clear search filters with a single action. However, this should not be the only way to adjust their query. Say you run a fashion e-commerce website. They should be able to change the color without having to reselect the price, material type and size.
Why Search Bar Functionality Matters
Regardless of user intent, your website visitors rely on practical, predictable search functionality. For many, it is the only way they will proceed through the sales funnel. Recent research found 44% of people search for product details, recommendations and comparisons before making purchases. People also depend on the search bar for navigation and information-seeking.
Effective site search is a must-have, not a nice-to-have. Knowledge workers already spend almost 30% of their workweek searching for information — an effective, well-designed site search reduces this burden, particularly for content-heavy sites.
Website search functionality can also empower your sales and service teams. The less time they spend looking for information, the faster they can help customers. Ensuring they have access to the information they need to do their jobs well will help them feel more confident and competent in their roles.
Functionality, Visibility and Placement
Aside from functionality, consider the search bar’s look and location. You should generally display it prominently at the top of the page, where visitors expect to find it. Additionally, it should be on every page, not just the homepage.
An empty box may be evident to some, but not all, and you only have a few seconds to make a good first impression. Consider using clear placeholder text, such as “search for products” or “search website,” to help people recognize the search bar. You can even cycle through popular products or trending searches to increase click-through rates.
As a general rule, use high-contrast colors and keep the user interface elements to a minimum when designing the search bar. You can use graphics that make their purpose obvious, such as a magnifying glass.
You have flexibility with colors, shapes and sizes to align with your website’s branding. Remember, there is no need to reinvent the wheel — your search bar can improve your website’s overall usability if you follow best practices. The easier people find your website to use, the better their experience will be.
Search Bar Design Mistakes to Avoid
In addition to knowing search bar design best practices to follow, you should also know what not to do. One emerging trend that some people find frustrating is forcing artificial intelligence interactions in the search bar.
The Microsoft Edge search bar used to show users a full-screen chatbot that pushed search results down. What’s worse, searching for “Chrome” used to generate a list of Microsoft Bing features. Not only did it fail to respect users’ search intent, but it also served them a full-screen advertisement. If you want chatbot search functionality, make it a separate feature.
You should also avoid the dreaded “no results” page. Say someone misspells “hair dryer” as “hair dyer” or “vacuum cleaner” as “vaccum cleaner.” Unless your search bar is typo-tolerant, they will not find what they are looking for, potentially causing them to leave your website entirely. It should handle misspellings and synonyms.
The last search bar design mistake to avoid is directing users to a download page or forcing open an app instead of showing the results directly. Such interactions may seem harmless, but they can quickly frustrate information-seekers.
Design With User Intent in Mind
Put yourself in visitors’ shoes. What are their goals when they search for something on your website? What information do they hope to find? Consider these questions from consumer and employee-facing angles. Answering them can help you enhance the user experience. Following best practices will help you apply your ideas in a meaningful way.
