7 min read
Your website search tool is kind of like the TV remote—It can function in a multitude of helpful ways to help you find what you need but you don’t truly appreciate it or notice its value until you can’t find it or it stops working. The TV can’t operate without the remote (unless you want to manually press each button) and your self-service can’t operate without a successful search (unless you want to manually navigate throughout the site).
Search tools that are well-designed can provide the most natural interactions for your users across your various sites and applications. This function can allow people to have an interactive “conversation” with your website—telling it what they need or what they are looking for then quickly receiving the answer. For larger sites with more than a few pages, navigating through each page to find an answer or compare multiple items can take way too long. An effective search feature does the work for your users, providing them with the most accurate and relevant information with the least amount of effort expended.
Not to mention that utilizing all of the benefits of the search function on your site allows you to understand your user’s needs better. You can look into exactly what your customers are searching for and improve the relevance of the results.
But how can you ensure your search tool is as effective as it can be, producing all of these positive results? In this article we will review some best practices for the visual design aspects of your search tool, the search functionality design, and the result page design.
A crucial aspect in the success of your search function is the way it is visually designed. This may not seem as important as its actual functionality, but without effective visual designs, it cannot be functional at all. So let’s look into what those aspects are:
The search field should be visibly prominent and easy to recognize with a simple glance. When choosing where to locate it, remember to keep it in the same place on every page of the website to remind your users where it is at all times. Speaking of which, consider placing it on every single webpage to provide the most convenience.
Speaking of choosing where to locate your search, let’s talk about how to make it easy to find. Putting your search somewhere unexpected or somewhere that requires multiple click-throughs and navigational journeys means your users are less likely to adopt it. So, try placing it where people are most likely to find it (like at the top right or left-hand side of the page).
There are a few icons in the world that are universally understood. The magnifying glass representing the idea of search is one of them. Using that to your advantage allows you to reach global audiences without translating, provide instant recognition to all audiences, and cut the label “search” from your tool to free up space for something more creative (which we’ll get to in number 5).
Allowing an additional button (usually represented by the magnifying glass icon) that activates the search can bring more clarity to users who are looking for a more traditional submit button. Yes, this can also be done by clicking enter on any device, but, why not make it as convenient as possible?
Something fun and helpful to include in your search field can be prompting sample search ideas. Rather than filling your placeholder text with basic phrases like “search” or “type here,” you can include something more encouraging like “Find device compatibility” or “Extend warranty.” This also can provide clarity to your users on the different topics they can try searching for.
The length of your search text box should be long enough to display all of the text that the user types in. Making this length decision can also be a reference for your user on how long their queries should be (approximately). A standard length is about 27 characters, but depending on what your search is being used for most, you can adjust accordingly.
This is a simple, but important, point. Providing some kind of loading wheel or symbol shows your users that their results are in progress, so just be patient.
Since many of your users will be utilizing your search tool on mobile devices, make sure your design transfers over. Some quick tips include: stretch the field size to fit the full length of the screen, keep it in easy-to-access places, make the search button large enough to click on a small screen, etc.
Once you’ve got your search looking the best it can and located in an effective place, it’s time to focus on the actual functionality of the thing. This portion is critical, so let’s look into some different ways you can ensure prime performance in your search:
Auto-suggest is great for helping users articulate what they are trying to search for. It is not just meant to speed up the actual time spent typing in a search, but instead, lead the user to the most constructive queries while reducing data input. A good tip for auto-suggest is to highlight the matching criteria to help remind your user of the relevance.
Some good tips for auto-suggesting include: keep it to around 10 or fewer suggestions, allow for keyboard arrow navigation through results, consider using images with suggestions, include the option to turn it off with the Esc button, and use recognition of root words, predictive texts, and auto-spelling corrections.
Saving recent and/or frequent searches lets your users make a future search or return to a past one quickly and easily. Not only does this allow convenience, but it also provides more insight into frequent or current topics being searched.
Filtering and sorting (which we will get to here) both help users comb through large search results in different ways. Filtering allows users to narrow down results by predetermining different options like price, color, size, and so much more. It’s a good idea to allow for ranges here (like a price range, rather than a fixed price filter) and try to stick with the most common filters while saving the more nitty-gritty ones for the advanced search field.
It’s always good to provide an advanced search option for the users who know exactly (or almost exactly) what they’re looking for. This is something that can be hidden within a drop-down menu and offered as optional. It can be helpful to allow advanced search by every possible field like name, product, date, ID number, category, etc. This allows for a search between multiple combined fields.
The most basic or standard way of generating results from a search is through keywords. Many sites today are going beyond this (which we’ll get to next), but that doesn’t mean you should forget the basics. Account for typos, synonyms, and empty or short entries in search queries that might not have led to a standard or successful result.
Next, try going beyond text and keyword matching by working to supply curated results. Rather than providing just a list of articles containing the mentioned word, consider producing more relevant options like related products, customer-facing processes, problem areas, or contact options.
The final portion of designing a successful search tool is the actual result page. Providing an easy-to-navigate and convenient result page is just as important as offering an effective search. Now that you gave your users ample relevant resources, you can help them sort through these results and find the most useful answer to their search. So, let’s look into some best practices in doing so:
Sorting helps users decide how they want to consume the results. This can mean sorting by relevance, price, date, popularity, alphabetically, etc. In most cases, automatically sorting by relevance is your best bet because it offers your users the most accurate and tailored results first.
While usually automatically sorting by relevance first is a good idea, still allowing users the option to change their sort choice is very helpful. People typically search with all different motives that can’t be completely predicted by your search function, so allowing them the option to customize how they consume results will bring more convenience and ease to their experience.
Humans are forgetful by nature. It’s unfortunate, but it’s true. Therefore, continuously showing the initial query on the result page is a great reminder to the user and will help them stay on track to finding their answer. But most importantly, if you allow that query to be modifiable from the results page, users can choose to improve their search based on initial results by narrowing down their topic without having to begin an entirely new query.
This is arguably one of the most important steps in result page design. It’s important to never provide “no results” to a query, but instead, always supply additional content or resources. These could be suggestions like similar topics to try searching instead, related or popular material, or contact options.
As a rule of thumb, images or graphics are best displayed in a grid, while text content is better displayed in a list format. Depending on the size and importance of your sample text for each search result, you may need to adjust how large each list item is displayed, or how many can be displayed per page. The same goes with deciding sizing for image grid layouts.
Although you may have made an educated choice on how the results are displayed, every user has their own personal preference. So, it can be a good idea to still provide the option to let users choose between list and grid, and how many are shown per page.
Once the results are generated, showing your user how many they’ve received is a good way to notify them of what they are about to dive into. This can help your user decide if they want to filter or sort further, or if the amount of results they received is what they were looking for.
Let’s say your user received thousands of results and is feeling overwhelmed. Allowing them to continue editing and altering their filter options directly on the result page is an awesome tool to help them play around with the amount of content they receive, and ultimately, find the most digestible results.
Over the last few years there have been giant leaps in the improvement of search functions. They are becoming smarter and more curated as we continue to gain more technological abilities. Because of this, you want to think of designing your search tool as a living and ongoing process. As your company grows and improves, your search can as well. Especially as your customer and content pools expand, you can learn and create new ways to provide relevant searches.
But, even without any long-term growth and change to your search function, you can work to improve it every day. By analyzing common search results, you can find ways to improve your search experience, and ultimately, your UX and relevant resource find-ability.
Something to consider when analyzing search results is what analytics you are basing your search design and alterations on. Quantitative analytics are based on numbers (ex: 7 out of 10 customers searched for x product), while qualitative analytics help you understand customer behavior by observing interactions and preferences to receive better insights into the customer experience. Both can be useful in designing and improving your search tool in different ways.
A lot goes into creating a successful self-service design and your search tool is critical. However, it is not the only factor at play. Learn more about things you can do to improve your UX design and see what top companies are doing with their self-service designs today.
.jpg)
.jpg)