WEBSITE DESIGN GUIDE - OPTIMISING YOUR WEBSITE'S ON-SITE SEARCH FUNCTIONALITY
Determine if search functionality will be of benefit to your visitors and, if deciding to implement it, take the time to ensure it is genuinely improving, rather than hindering, their experience.
I’m sure that most readers of this guide will know what a search box is. However, just to ensure everyone is on the same level, I’ll define it. Also known as a ‘search bar’ or a ‘search field’, a search box is the element on a website in which the user can enter text (or also nowadays, voice) and have that site return a list of pages, or products that relate to that search term. It is typically shown as a single-line text box and is often accompanied by a magnifying glass icon or a submit button.
You’ll almost certainly have used one of these before (in fact, it would be a herculean feat to have been online for any significant length of time and not run into this handy feature).
Including a search box on your website offers a number of benefits, predominantly for the visitor but also for the website’s designer. To list a few:
They save the visitor time. Rather than having to navigate through a series of menus and links, they can enter text and be taken more directly to content relevant to that search query.
They let visitors navigate the website on their own terms. ‘Search first’ is a preference for many visitors, and without a search box a visitor would be forced to abandon their navigational preferences and engage with the navigation system the website offers.
If other navigational methods fail, they give the visitor a final chance to find what they want. If the visitor can’t find what they are looking for, they will leave the site. Giving them a number of different ways to find relevant content will, therefore, reduce the number of visitors exiting dissatisfied with failed journeys.
The website designer can record the search terms entered and get a better idea of the journeys that their visitors are undertaking - allowing them to write more relevant content, optimise their navigational structure and, in general, better serve the needs of their visitors.
With this in mind, it’s easy to jump to the conclusion that every website should have a search box. In an ideal world I’d almost always agree - they give the visitor choice and, when done well, improve the visitor’s navigational experience. However, good search functionality is hard to achieve. We take it for granted because certain sites that many of us use frequently, such as Google and Amazon, have invested heavily in optimising their search functionality, resulting in a strong search experience. Not all sites can do this, and so not all sites’ search functionality works nearly as effectively.
Herein lies the problem.
Good search is highly beneficial, but bad search is actively damaging to the experience.
There’s a number of reasons why the latter part of this statement is true:
Spending time searching for, and failing to find, relevant content is frustrating. Visitors might blame themselves or they might blame the site, but either way it leaves them in a negative mood.
If a visitor can’t find relevant content through search, they’ll presume you don’t have any. This is because we’ve been trained to believe search just works, and that if it can’t be found then it’s likely not there.
Having a search box on your site implies you have enough content on your site to warrant having a search box. This raises visitors’ expectations of your site that it might not be able to meet.
In this guide I’ll cover the two biggest problems relating to search:
Websites not having search functionality when it would be highly beneficial for their visitors.
Websites having search functionality that is poorly implemented, and that damages the visitor experience.
As you read through, it’s worth bearing in mind that this topic is complex. Achieving great search takes time and effort, and due to either your own, or your website builder’s, technical limitations it is not always possible to get search working as smoothly as you’d like. Be pragmatic - your site doesn’t need to be as good as Google; no-one else’s is. Any search functionality (if it’s even needed) just needs to be good enough to improve the visitor experience even a little, and, importantly, not worsen it.
2. DECIDING WHETHER YOUR WEBSITE NEEDS SEARCH FUNCTIONALITY
First of all, it's worth noting that not everyone agrees on the importance of the search box. Beyond the dangers of implementing it poorly, many argue that the increased effectiveness of search engines has made visitors’ journeys more targeted and direct to begin with. The importance of the homepage has dwindled over time as search engine and SEO improvements have lead to visitors arriving on other parts of the site more commonly. This is relevant as, if a visitor is linked through a search engine to the exact part of your site that they were hoping to find, then they obviously no longer need to search.
Ultimately, a search box should be added if it provides a genuine benefit. Only you can assess the likely benefit one will have, but there are some key questions you can ask yourself to inform this decision:
Do you have lots of content on your site? The more you have, the harder it will be to find organically (through navigation bars and other links on the site) and the more your visitors will benefit from search.
Is your site’s navigation complex? Search shouldn't be a crutch for a poorly designed navigational structure, but if complexity is unavoidable then search can help alleviate some visitors’ problems.
Are you a marketplace selling products? When visitors buy things online they expect to see a search box, particularly if you are listing lots of different products.
Will visitors on your site know what they are looking for? A search box requires a user to enter a search term, which is, of course, predicated on them knowing what to search for. If your site has frequent visitors or visitors who are familiar with your topic area, then search could likely help them more quickly access the content they want to consume.
Do you have a back-catalogue of content that will be hard to find without search? For example, most news sites will only display recent content on the homepage or relevant topic pages. Some will allow visitors to browse through archives, but search will be a lot more efficient a way to find old content.
Does the majority of your traffic arrive through your homepage? If so, visitors will tend to be at the very beginning of their journey where search is more relevant. If they arrive on pages further down the navigational hierarchy, it is likely that they've already started closer to where they need to be, so search will add less value for them (and, at worst, could even take them further away their goal).
If you've answered yes to some or more of these questions, then it's worth considering implementing a search box.
If you've answered no to all of these questions, but already have a search box on your site, then it's worth considering how much value it's really adding. See if you can find any stats on how often it is used and test it with common search terms that your visitors will be using to understand how effective it is. If it’s not adding to the visitor experience then don’t be afraid to remove it.
Implementing a search box
If you do decide you need a search box, how do you actually go about adding one to your site?
If you're using a website builder, the first step is to check your provider’s help pages to see if search is natively supported. Many (but not all) have pre-built search box widgets or plugins that are incredibly quick to add to your site.
If that fails, or if you're not using a website builder, then there are a number of free or paid tools you can use. Again, like many things, Google can help here - it offers a free search tool that is fairly easy to install and works reasonably well. In all cases, just follow the instructions carefully and you should be fine.
3. OPTIMISING THE SEARCH FUNCTIONALITY ON YOUR WEBSITE
Once you have a search box then it's time to make sure it works as effectively as possible. As mentioned, search is an intricate topic area and whole books can be, and have been, written on the subject. I don't have the space (or for that matter, the expertise) to cover all the detail, but instead I’ll focus on what is considered to be the most important aspects.
Again, a warning. Depending on the limitations of your website builder or the search tool you're using, not all of these points are going to be actionable. Don’t worry too much about this - any steps taken to improve the experience, no matter how small they might seem, will be worthwhile.
To provide value to the visitor, your search box needs to be used. To be used it needs to be seen. You probably didn’t need this guide to tell you either of those things, but they are both worth remembering. Boxes that fail to stand out are either missed entirely (and assumed not to exist), or cause frustration to the visitor as they hunt around the page.
I'll talk more in a second about how this can be achieved through effective positioning of the box and through its look and feel, but ultimately you’re trying to ensure that it can be seen quickly at a glance. Ask a friend, family member or colleague to visit your site and watch how long it takes them to find the search box. If it takes them any more than a single second (be strict when timing this) then consider how you can help it stand out more. Don't be tempted to do this test yourself - you're already way too close to the design of your site to be a fair judge of how easy it is to find something on it.
To help with visibility, you should adhere to web conventions by placing the box at the top of the page, ideally in the top right. Don't have it in your vertical navigation bar (if you’re using one), don't hide it behind a click, and don't have it below the fold. Ensure this is consistent on all pages to avoid confusing visitors.
Look and feel
I’ve already written about the value of icons and how they can help your visitor quickly understand what various parts of your page are for.
There are few icons more synonymous with web design than the magnifying glass, denoting ‘search’. As such, you should use it somewhere! That could be on the bar itself, to the side of it or on the search button.
On that note, ensure you have a button that visitors can press to submit their search query. Many visitors will hit return on the keyboards/keypads, but many will be looking for something to press, so make sure to give it to them.
Finally, the box itself should be long enough so that it stands out and can contain the average search query entered into it. Many believe the ideal box width seems to be around the 23-30 characters mark.
Placeholder text is the text that sits in the search box before a visitor starts to enter something into it (at which point it instantly disappears).
It can be used to further highlight that the field is a search box or, more usefully, as a way to denote what, specifically, can be searched for. A good example of this (at time of writing) comes from IMDB.com (a resource for movies, TV shows and people in these industries) whose placeholder text currently reads:
Find Movies, TV shows, Celebrities and more…
This gives the visitor clear guidance on what can be searched for, removing any ambiguity and empowering them to use it. If your site is complex enough that visitors will be searching for many different categories of things, then leveraging a similar approach could well help you out too.
Predictive search (also known as autocomplete) is the practice whereby the search box itself will suggest likely search terms based on what the visitor starts typing. For example, if someone were to go to Google and type in the word ‘puppies’ the search bar suggests the following:
puppies for sale
puppies near me
puppies for adoption
Adorable. And it’s also incredibly useful for a number of reasons:
It speeds up the visitor’s search. They no longer have to type the whole of their search query, they can simply select their search term if it is suggested to them.
It reduces user error. If the visitor had typed ‘puppys’ instead, predictive search would return the same suggestions but with the correct spelling. Without this, they would be shown far fewer, and more inaccurate, search results.
It gives visitors a quick idea of the content available to them. They might not have thought about adopting a puppy before their search, but thanks to predictive search they now know that is a viable option.
It tells visitors that they are on the right track. If the predictive search on a website suggests something, it’s almost always because the website has that thing somewhere on it. If no suggestions are given then visitors can more quickly work out that it isn’t available on the site.
Predictive search is an advanced feature, but some website builders and search box plugins do support it. Use it where possible and, if given the option to spend time optimising it (again - not always possible depending on the tool you’re using), take that opportunity - it’ll lead to a much stronger visitor experience.
So far we’ve covered the mechanics of the search box itself, but ultimately what’s most important is results accuracy. As with predictive search, some search tools will give you the opportunity to spend time optimising them. This can be done in a number of ways, from better tagging of the content that will be searched for, to manually specifying the results you want various search terms to return. How this works will depend on the tool you use, so look at the help resources available to you.
If it is not within your power to improve your search accuracy, you can at least analyse and understand it. Take some common search terms (which, hopefully, your search function will record and let you see) and see where they lead. If these are inaccurate then, as previously discussed, consider whether the search box is adding to the experience or worsening it. For search terms that are particularly inaccurate, think about how your navigational hierarchy, or other parts of the site, could be optimised to ensure this content can be found organically - giving visitors another way to access it.
Sorting and filtering
The final piece of advice is around sorting and filtering. It’s last on the list not because it is not important, but because it’s likely to be an area where you have the least amount of control. In fact it’s incredibly important, particularly for transactional websites.
Firstly, search results should be sorted in an appropriate way. For most sites, sorting by ‘relevance’ (a value determined by the search algorithm) will be best. For blogs and news sites, sorting by ‘newest’ might be more appropriate. Choosing the right option here can dramatically speed up how quickly your visitors can access relevant content.
Secondly, visitors should ideally be given the ability to change the sort type manually if they wish. The most common sort types that visitors will expect are:
Most visited/most viewed.
Most popular/highest rated.
(For product results) Price lowest/highest.
Finally, it is sometimes appropriate to give visitors even more control and let them filter their results. This is far more applicable for store pages, but other websites might benefit from basic filters such as date of content submission (last day, week, month, year) or some sort of predefined category (for example PC, Xbox, PS4 on a gaming website).
Add a search box to your website if it will be of benefit to your visitors.
Remove your search box if it is actively damaging the visitor experience.
Ensure your search box is clearly visible and easy to find (positioning it in the top right of the page if possible).
Leverage magnifying glass iconography to aid search box recognition.
Include a search/submit button to make it clearer how the search box works.
Allow around 25 character’s worth of width for your search box.
Use placeholder text to further signify the field is a search box and to denote what search terms might be entered into it.
If possible, spend time optimising the accuracy of your search results.
If possible, enable predictive search and spend time optimising how it works.
Look for other ways to improve the findability of your most-searched-for content.
Consider what results sort type should be applied as default on your site.
Give visitors the power to change their sort type manually.
Consider providing content filters to further streamline the search experience.