Search suggestions are proposed suggestions that appear in a drop-down menu when a user is entering a search term into the search box.
Let’s talk about the benefits of such search suggestions:
- The user chooses from the terms that will show them suitable results. This minimizes the chance that they will enter an expression and find wrong results. Or none.
- Less writing. The user chooses from the suggested terms.
- Fewer typos because they don’t have to type the whole search term.
- The user does not have to think about the correct wording, because they can choose from the suggested terms.
Such a search makes sense even if the user does not choose any of the suggested terms. This is because it gives them an overview of what is on the page, how to write complex terms correctly or what other users are looking for on the page. In particular, if the search term is short, it is easier for users to type the entire term without using the mouse or tapping the screen.
Conversely, if something doesn’t appear as a search suggestion after entering the first few characters of the product name, some users may conclude that the site doesn’t offer the product. And they leave it without completing the search. And you don’t want that, do you?
Therefore, ensure that each suggested term has really good and relevant results.
Distinguish the entered text from the suggested expressions
Each search proposal consists of two parts:
- characters already entered by the user
- characters that the system suggested to complete the expression
You can use bold, italic, color or indentation to visualize these differences. A visual representation helps users understand why suggestions are displayed and helps them more easily scan available information.
Use different visual styles to highlight which characters belong to which part.
The type of suggestions your site offers should help you determine how to edit those suggestions.
- If the search only appends characters to the end of the user’s text to complete the query, you should highlight the suggested characters.
- If the search suggests popular queries that contain the user’s text anywhere in the query instead, it’s best to highlight the user’s query.
Let’s show you an example:
The user enters the term “basketball” in the search box. While entering each character, suggested terms appear in the drop-down menu.
The search in our example uses the first type of suggestions – it adds characters to the user’s text in an effort to complete the expression for them. Characters that match what this user has already typed were displayed in bold (“basketball”), while characters designed to complete the expression were of normal font thickness.
Although this approach clearly distinguished the user-entered term from the system suggestion, it unfortunately emphasized the repetitive characters in each suggestion (characters already written). In this case, it would be better to display search suggestions with an emphasis on unique characters:
In case your search suggests popular terms that contain the user’s text anywhere in the query, the opposite approach is better – to highlight the user’s query.
Using our example with basketball, a system with this type of suggestions would return proposals like “basketball sweatshirt”, but also things like “portable basketball hoop” and “children’s basketball jersey”. In this case, you should highlight the user’s query to help them scan suggestions and determine where the query text will fit within each suggestion.
Show the area where the term is located
Scope search should only be used on certain websites. And in case it can be implemented well.
Where such implementation is possible, each suggestion should consist of the following three elements:
- characters already entered by the user
- characters that the system suggested to complete the expression
- the area to which the entered expression belongs
It is also necessary to visually distinguish the search term from the area to which it belongs.
Show more than just simple suggestions for completing a term in your search
In addition to displaying suggestions for completing a user-entered term, you can also show other types of related content.
For example:
- categories
- products
- articles
If you decide to go for this type of results, make sure that the suggestions are properly arranged and visually illustrated. Users should be able to easily scan the results and understand all the information displayed.
For mobile devices, it’s important to adjust the results to the screen size. On smaller devices, it’s enough to offer simpler results.
Consider whether such advanced search suggestions will benefit your customers. Or, conversely, they would make the results less clear to them.
