When search autocomplete is implemented properly on your site, you can help your users recall what they may have forgotten to search for on your site, complete partial search queries, prevent misspellings, and narrow down their searches to applicable categories in your site.
82% of the top ecommerce sites offer autocomplete suggestions, which significantly enhance a user’s search experience whether on desktop or on mobile.
While the obvious benefit of search autocomplete is it speeds up the typing process, it actually leads your potential customers to better search results.
In this article, we will show you 7 search autocomplete design best practices that you can follow to give your users the best search experience on your site.
Go beyond by giving the best suggestions
Although it is helpful to have your search results display all best matching suggestions based on an entered query, you can go beyond the usual results displayed in plain text to make your suggestions even more relevant.
You can do something similar to Kohl’s where they show users the top suggestions for the product they are searching for and the photos of those suggestions.
This guides users to the most popular choices for their searched item, and they are also immediately given an idea at how these choices look like, spiking curiosity and clicks for those options.
Sears also does a similar implementation on their site by displaying products based on the search query plus information on the categories on the site where the products can be found.
Another way to make your search results extra helpful to your users is to provide detailed search suggestions, similar to the Printerland example below.
Aside from including snippets of product descriptions to their search results, they also include the price of the product, which helps users make informed buying decisions as early as searching for a product to purchase from their store.
This manner of implementing search autocomplete on an ecommerce site can positively affect your conversion rates. In fact, this very implementation helped Printerland gain a per visitor value 4 times more than their previous sales.
Have your developer implement the necessary autocomplete jquery or Ajax autocomplete widgets on your site to ensure the best and most helpful search experience for your users.
Use search logs with caution
Majority of search suggestions that are redundant or of low-quality is often a result of search logs.
What are search logs?
Whenever a search engine or an onsite search is used, a log that records all the things that have been searched for is kept. The purpose of keeping this log it is to know what people are searching for and to make future suggestions for those terms more accurate and relevant.
However, if the search log does not include tracking the success of those search queries, meaning people found and bought products as a result of those logged information, then it won’t be useful for your users.
In this Overstock example below for instance, four suggestions for coffee table immediately appears when ‘coffee’ is typed on the onsite search field. Autocomplete may be helpful in this scenario if the user was indeed completing ‘coffee tab…’ on the search field, but that can hardly be assumed.
If you do intend to use search logs to automatically generate search suggestions, make sure to track the success of your search queries. This will ensure that there are no duplicate or irrelevant auto suggestions appearing, making it truly easier for your users to select what they are looking for.
It is important that your automatic search suggestions are operating at a conceptual level so your users are able to construct a smarter search query than the one they initially have in mind.
Having less presumptive auto suggestions for ecommerce sites should be easier to do than on any other website because ecommerce data are structured. Similar to the example below from Foot Locker, present a shortlist of the most popular and relevant search suggestions related to your user’s search.
There are many products related to running in Foot Locker. Users may or may not be looking for running shoes specifically, so they made sure any running-related merchandise will appear in the search suggestions.
Keep search result lists manageable
Counterproductive to your conversions is giving your users way too many options to choose from. To avoid inducing choice paralysis, always make your search result lists manageable by limiting your search suggestions to 10.
This way, your users won’t be presented with extra options they may only end up ignoring or spend unnecessary amount of time reading through.
Limiting search query suggestions to 10 – or even less if you can – also keeps the list simple, eliminating the need for the search results widget to have an inline scroll. Several tests have shown that having inline scrolls can cause usability and interaction issues to your users.
Inline scrolls can be difficult to navigate through especially on smartphones and mobile devices where screen size is already compromised.
On the other hand, for desktop users who are likely to use the mouse wheel to scroll pages up and down, the need to shift to place the cursor on the inline scroll and to drag it down to see all information may not easily be understood. Further, when scrolling a page using a mouse wheel and the cursor hovers over the inline area, what usually happens is the inline scroll gets dragged briskly and users unknowingly skip past numerous relevant options.
Keep in mind that the goal of your onsite search is to smoothly guide your users all throughout the search process and not distract them. Regularly test your site search functionalities to ensure the best usability and interaction possible.
Emphasize the differences
Styling the terms entered by your users and the terms you suggest is a great way to highlight the differences in your list of suggestions.
Most ecommerce sites would highlight the terms that their users have entered. While that has its merits, it will make more sense to highlight the ones your site is suggesting. After all, your users are aware of the term they have entered on the search field. Highlighting the terms you are suggesting will make it easier for them to scan and spot the differences, guiding them towards making informed selections later on.
As you can see in the example from Tiger Direct above, the differences in the suggestions are more apparent when the suggested terms are highlighted.
Use search scopes
Search scopes are common internal site search features, which serve to limit the boundaries of a search into a specific category. Ecommerce sites organize their products into categories, which in turn can be used as search scopes.
The best time to implement search scopes is while your users are performing their search on your site. By doing this, you allow them to drill down their options and see immediately the category of products they will be directed to once they choose a particular search suggestion.
Similar to highlighting the search terms you suggest instead of the terms entered by your users, highlighting search scopes in your search suggestions is equally important. This is to eliminate the possibility of the search scope being mistaken as just another term in the query or letting your users spend unnecessary time interpreting what those are.
Amazon does a good job of making search scopes (categories) stand out in their list of search suggestions by setting the text color in orange, which easily introduces the product categories where the search term can be found.
Search suggestions that have search scopes are also the first to be mentioned in the list and are separated from the other suggestions with a faint line.
Bonus: Aside from having autocomplete scope suggestions, consider having manual scope selectors to encourage users to search for products on your site starting with your product categories. This makes sense for ecommerce sites with very large inventories. This also yields search suggestions that are relevant and already specific to what your users are looking for.
And as a tip, make sure that your manual scope selectors are designed secondary to your internal site search field. Both should be in close proximity with each other and the ‘Search All’ or ‘All Departments’ scope should be selected as the default option.
Setting the default value to a specific random search scope may mislead your users to think that you are selling very limited products, resulting to site abandonment.
Support keyboard and mouse navigation
Users may interact with your internal site search and the results it yields in two ways – by keyboard navigation or by mouse navigation. Ensuring that both navigation are allowed on your site allows you to align with users’ expectations.
To ensure keyboard navigation, make sure that the up and down arrows allow your users to navigate through your search suggestions.
As they navigate the search suggestions with the up and down arrows, the search suggestion in focus should automatically appear on the on site search field. This way, pressing the return or enter key will immediately submit your user’s chosen search suggestion.
On the other hand, for mouse interaction, the chosen autocomplete suggestion should be highlighted and a hand cursor should appear next to it, assuring the user that their chosen search suggestion will be submitted.
Also, the focused search suggestion should not be copied on the on site search field – a different experience compared to keyboard navigation.
Based on a Baymard usability study on mouse navigation and hover selection, users do not expect hovering to manipulate their data. Otherwise, they would have to be extra careful with their mouse cursor, making sure it does not go anywhere near the search suggestion they do not want to select.
Hover selection is technically a non-committing act unlike keyboard navigation and input where the goal is to purposely manipulate data.
Make the design clean
Of course, aside from emphasizing the on site search bar on your ecommerce site, such as making it easy to find, testing on the best field length, or labelling it properly, how your auto search suggestions are presented should also be one of your design focus points.
In the example below from Target, we can gather some tips to make a clean design for your search autocomplete.
Remove as much visual noise as you can so your users can focus on the list of autocomplete suggestions in front of them. Make the search widget appear in white or any offsetting color to make it pop.
Apply reasonable padding, separators and even alternating row colors to your search suggestions to make it visually pleasing for your users.
And to help them focus more on their autocomplete suggestions, bring the search widget to the foreground by either adding a border or a shadow to it. Additionally, keep your search field wide enough to accommodate searches and search suggestions of great length.
Tip: Go beyond making your design clean by considering adding labels and instructions to your autocomplete suggestions. Although majority of your users already know how to interact with your site’s search autocomplete feature, it is always a smart idea to think about your users who may not be as familiar.
Similar to the Amazon example above, you can add a label on your search widget that reads ‘Search suggestion’ to help your less tech savvy users understand what that search widget is for and its options.
You can also have a label that reads ‘Press Enter to search’, which is similar to Google, that tells your users that they can submit their search query by simply hitting the enter key on their keyboard.
Finally, have a label that reads ‘Recent Searches’ to remind your users of the search queries they have already made.
Bonus: Search autocomplete on mobile
Despite that what we talked about so far are focused on search autocomplete on desktops; do not forget optimizing this essential site feature on your mobile site.
It might be impossible to give your users more descriptive search suggestions on mobile, like product photos or prices, due to the limited screen space, but you can implement some of the best practices we just discussed on your mobile site, such as:
Emphasizing the difference between your user’s entered search terms and what you suggest, similar to this example below from Barnes and Noble. Even on mobile, it is still a great practice to highlight the parts of the search query you are suggesting to your users.
Keep the search results list manageable and have separators in between the suggestions. This will make it easier for your users to read through their options on their small screens and select what they want. Check out the Amazon example below for an illustration.
The use of the dotted lines in between search suggestions helps the eyes focus one by one on the suggestions presented.
Use search scopes also in your search suggestions, similar to the Williams-Sonoma example below. Similar to desktops, encourage the use of manual scope selectors by formatting them properly on the mobile interface – it is beside the internal site search field and the default scope value is not specific to a category.
Remember to let go of having an inline scroll on your mobile site due to its usability and interaction issues. And of course, ensure a totally responsive site with these practical tips, such as making CTA buttons easy to click on and ensuring that your mobile design elements are constantly working towards more conversions.
Make sure that autocomplete jquery and ajax autocomplete are also working properly to ensure a pleasant mobile experience for your users.
With search autocomplete, you can guide your users to interact best with your on site search feature, resulting in better search suggestions and a few inches closer to conversions.
Give more than what’s being asked from you by your potential customers by showing product photos and prices along with your list of search suggestions.
Be cautious with how you use your search logs and make sure to track the success of your search queries. This way, your suggestions will always be relevant and useful to your potential customers.
Do not give too many options to your users and limit your search results list to at least 10 autocomplete suggestions. By doing this, you are truly guiding them make better purchase decisions and not distract them. This will also help you avoid having to install inline scroll areas, which does more harm than good.
Emphasize the differences in the terms entered by your users and those that you are suggesting.
Put your product categories to good use and let it serve as your search scopes for targeted and focused search suggestions.
Account for both keyboard and mouse navigation and make the design as visually pleasing as possible.
Lastly, do not forget to optimize your search autocomplete feature on mobile. This way, you get to meet your users’ expectations regardless of the device they are using.