Maximize Your Ecommerce Search Box With Autocomplete and Autosuggest

Many of today’s ecommerce platforms offer the ability to create and curate search suggestions using type-ahead lists within the search box. Some also include thumbnail images in addition to text.  As the capabilities of the internet and Google make things easier for the user, it is critical for anyone running an ecommerce website with a search box to have a well-developed and finely tuned type-ahead feature.

What can type-ahead do for your users?

  • Speed up the search process for your users
  • Provide insight into products the user might not have known you sell
  • Ensure that users get something back from their query.

With all of the functionality available in today’s search engines, nobody should get zero search results – unless they are just stubborn and won’t take the suggestions!

There are two ways to design the type-ahead feature and help users with their search queries – Autocomplete and Autosuggest.

New call-to-action

Autocomplete

Autocomplete is used with the taxonomy and provides a drop-down list of options for the user to select based on the terms in the taxonomy. For example, the taxonomy might have the term, Product Management, in the Department taxonomy, in the Software Tools taxonomy, and in the Business Processes taxonomy. As the user begins to type in P-r-o-d-u-c-t-space-M-a, etc., the search engine can provide a drop-down list of the following it finds appropriate matches in the taxonomy:

            Product Management in Department?

            Product Management in Software Tools?

            Product Management in Business Processes?

Here’s an example of how Home Depot provides an autosuggest for “sink.” Before the user finishes typing, the search engine suggests “sink,” provides context around the kind of sink available as per their taxonomy, and suggests other options that include sinks, based on search terms in the search logs.

You will notice that the letters/terms that I did NOT have in my query box are the ones that are highlighted. This feature helps the user understand why the particular term or phrase shows up in the list.

Autosuggest 

Autosuggest uses terms and phrases in the lexicon of the search engine (a dictionary or index consisting of pointers to content) to suggest a selection. In the Home Depot example, autosuggest brings up “sink faucet” and “sink strainer.” This feature is a powerful option as it offers opportunities for the user to explore the kinds of products that you have available. Synonyms for the taxonomy and search suggestion terms can be added to provide the user with an even more powerful experience. If the user is typing in a term that isn’t commonly used but is a synonym to a commonly used term, the autosuggest function will still be able to offer a list of options.

Depending on the search query, the list of suggestions could become quite long, so it might be beneficial to group the items that are shown in the drop-down list. Guitar Center has done this based on their taxonomy, but the concept is equally valuable if content is grouped by a content type or recent searches.

When should you use autocomplete and when should you use auto-suggest?

Certainly, the abilities and limitations of your search and web platforms need to be taken into consideration, but ideally, both forms of type-ahead should be used in the drop-down box. 

The search engine uses search logs and the taxonomy to produce the type-ahead suggestions and needs to be able to rank search log queries in a frequency order so the user receives the most popular suggestions first.

If you plan to include top searches in your type-ahead, make sure they are a curated list and not simply automatically generated from search logs.

This approach will prevent duplicates that result from inclusion of singular and plural versions of a word, misspellings, and different forms of the same term(s) from appearing in the results.

Having said that, including only top searches in the type-ahead suggestion list is not critical, as counterintuitive as that may seem. The main purpose of type-ahead in a website search box environment is to show the user a short list of search results even before the search is performed.  This way users can be lured into choosing one of many good options even before they have completed their search, based on seeing more than just the results for the originally intended search.  This paves the way for more discoverability in addition to better findability, and doesn’t dumb down the search box to just an autocomplete tool. 

While users may appreciate the autocomplete function of type-ahead, autosuggest provides much more depth to the experience, especially in an ecommerce environment.

For example, a user searching for a Gibson guitar on GuitarCenter.com will immediately see many phrases containing “gibson” in the first column of results. just from typing “gib” in the search box. The second column lists several brands of Gibson guitars, and the third one shows three specific Gibson guitars. The user can also complete the intended search for “Gibson guitars,” and see a page of guitars that shows pictures, detailed descriptions, and prices. So type-ahead provides a glimpse of other options before zeroing in on a narrower selection. 

Supercharging the user experience

You will want to show the user some highlighted products which could be populated based on sales data or merchandising objectives, but you will also want to give the user the ability to select one of your curated categories from the taxonomy. 

PRO TIP: Custom landing pages and promotional pages can also be included in the type-ahead index. Use what works with your customers.

Providing a list of top searches that match the user’s query can also be helpful, but is not as critical as the previous two.  A better leveraging feature would be related categories, such as Gibson Guitar straps or picks.  Macy’s provides a grouping of Best Sellers to help promote discoverability.

While Google and other web search engines use type-ahead primarily for completing user queries and displaying top searches, a site search box on a website can do so much more with its internal content, and create a unique custom experience.  

The suggestions list can be further stratified into deeper search results, such as the case of HomeDepot.com, where ”sinks” can be selected based on bathroom or kitchen categorization.  Thumbnail images in the search selection box can provide greater depth to the user experience and increase discoverability (see images above, from Macy’s website).

In today’s seemingly mind-reading environment, having a well-designed and curated type-ahead is critical to the success of any website with a search box. 

In particular, ecommerce sites need to go beyond simply autocomplete and correcting user queries.

They need to match on products, categories, and other indexed pages to show the user immediately what is available, show the user something they wouldn’t have thought of otherwise, and show related products. 

User search logs need to be deeply analyzed and integrated into the type-ahead so that the experience feels customized and is not just automatically populated by the search platform. 

Get to know your users even better and increase their loyalty by showing them you have their interests in mind from the first moment they start to look for something on your site!

If you are ready to take your ecommerce search experience to the next level our team of product data experts are ready to help.

 

Meet the Author
Earley Information Science Team

We're passionate about managing data, content, and organizational knowledge. For 25 years, we've supported business outcomes by making information findable, usable, and valuable.