Like an iceberg, the common search bar hides much of its functionality and brilliance beneath the surface.
An interface that has stayed visually the same since its first appearance in 1990, the search bar is now one of the most utilized digital tools in existence. Each day, Google processes over 8.5 billion searches, with over half of these done by mobile.
If little has changed on the surface, everything has changed behind the scenes. The complexity of the algorithms and programming that drive search bars today dwarf those of twenty years ago. User expectations have also evolved. This is why it’s so important your search bar both looks and functions in line with the needs and expectations of anyone navigating your website.
Do you need a search bar for your website?
There’s no hard-and-fast rule for when you need a search bar. Some recommend that any website with over 200 pages requires search, or if there is a library of content to browse, such as a streaming service.
Consider this: if a user needs to click more than three times to find any of your content, think about implementing a search bar.
Before creating a search functionality, make sure the content structure of your website is as simple and user-friendly as possible. Do you have 200+ pages because you have duplicated content or content that’s either out-of-date or redundant?
A content audit is the first step to make sure your site structure is easy to navigate. If you’ve created a structure with as few clicks as possible but users still need to dig further to discover all your content, then it’s time for search.
The benefits of good search bar design
With trillions of searches being made each year globally, the importance of good search bar design is clear. Some expected benefits for you and your users include:
- Increase conversions
- Reduce bounce/exit rates
- Demonstrate proficiency and investment in your backend, improving brand perception
- Support greater web accessibility
- Gain insight into visitor behaviors
Most importantly, a good search bar design and functionality help people feel in control of their experience. This underpins the work of UX and UI designers, as we recognize the need for people to feel in control of their surroundings. Support this feeling and you will build positive associations with your website.
How to design a great search experience?
You can break up your approach to search across three areas.
Visual design
Search box location – A key part of considering the design of your search bar is its location. As one of the most recognized icons, the white search bar, and the magnifying glass should be easily identifiable, to match user expectations.
Some other considerations for the location of your search include:
- Search bars are most discoverable either on the left or right of your navigation bar or high up on a page. Avoid placing search bars further down on a page.
- You don’t need a separate search landing page. Users recognize the search box and magnifying glass instantly, so they can sit on your homepage.
- Consider making your search accessible across your website, as a lifeline for users.
Search box design
Once you have tested and decided on the location of your search bar, consider its design.
Iconography – Always have a magnifying glass visible, as it generates immediate recognition for users. This is most important when designing for mobile and when you have limited real estate on your navigation bar.
Color – A white search bar remains the standard as it supports an intuitive experience. Your magnifying glass might align with your brand colors, but make sure there is enough contrast for it to comply with accessibility guidelines.
Length – Your search bar should be long enough to accommodate a query. If you already have a search, look at the average search length on your site and design your bar to make sure a user can read their entire query. If you don’t yet have a search, this is something to test and make iterative changes to.
Content design
The words you use to educate and engage users will shape how your search is utilized.
Research from Nielsen Norman Group has shown that, despite decades of experience with the search bar, people continue to struggle when it comes to refining an initial search. In fact, Nielsen found in one study that over half of users whose first search failed gave up immediately, and those who tried to refine their search had diminishing success each time.
This is why it’s so important to help users understand how to use your search bar. It all depends on the capabilities of your search, with more advanced systems able to surface accurate results based on a variety of inputs. If your search relies heavily on keywords, then you want to avoid users typing out full-sentence queries.
With this in mind, here are some tips for your search bar content:
- Match the instructions you offer with the functionality of your search bar
- Keep your instructions visible outside of the search box, (e.g., ‘Search for a document, image, or book below…’)
- Include your most common search as an example within the search box
The key to keeping your content design clean and concise is considering what users are trying to achieve with your search. If your website contains documents of different formats, then you might need a more descriptive instructional copy. If all your content is live on your website without any downloadable, then you can afford to keep your instructions minimal.
Functionality
The final piece of the puzzle is how easy your search is to use – in other words, its functionality. Below are some common things to consider when designing the interface of your search.
Predictive search – Google is a master of predictive search, and including it in your own search can help boost a user’s experience and perception of your brand. Some benefits of predictive search include:
- Faster search for users
- A guarantee the user will find a result, reducing the chance of them leaving
- Decrease the chance of typos and poor results
Tip: ensure you use text styling to make it obvious what the user has typed vs. what the algorithm is suggesting. If your system suggests a word or phrase at the end of a query, highlight the suggestion to differentiate it.
If your predictive text suggests entire phrases that appear on either side of a query, highlight the user’s search term instead.
Animation/buttons – consider what happens when a user interacts with your search bar or magnifying glass. If they type a query and click on the magnifying glass, make sure they get visual confirmation that a search is underway in case their internet connection is slow. This can simply be a color change that indicates an action.
Advanced search – avoid promoting advanced search from the start of the journey. Nielsen's research found that the mean query length was only two words and that users were not on average adept at using advanced features of a search. If you do have an advanced search, such as filters, include these on your results page.
Search history – on the results page, keeping a user’s search query in the search field can help them successfully refine their search again.
Suggest something every time – make sure your search platform never sends back a ‘We found zero results' for your search query message. This increases the chance of a user leaving your site. Always provide a suggestion to encourage users to try again.
Grid vs. list view – choosing how to display your search results depends on two things. Firstly, what type of pages or products are you displaying? If you’re a retailer, you will likely have a grid view for people to browse your products. If you’re a government department, you might list our relevant pages. Secondly, are your users searching or browsing in general? If they’re browsing, a grid view with imagery is preferable.
Shape user behavior – beyond a list view, any additions to your search result page, such as image results or featured snippets, affect how users engage with your results. The greater the number of visual differences on the page, the more people engage in a ‘pinball’ search pattern. Being aware of this can help you design a friendly user experience.
Ready to get started with your search bar design?
By splitting up your approach to search across those three areas – visual design, content design, and functionality – you’ll be able to better plan and track your testing and manage different stakeholders more easily. Remember to test individual components sequentially, so you can accurately measure their impact.