What goes into a great search experience?

The Elements of Search [Infographic]

Predictive Search and Autocomplete

Predictive Search and Autocomplete

In the past decade, artificial intelligence has made our lives easier and faster in many areas. Predicting keystrokes, words, products, and phrases is one of the areas where artificial intelligence has made its mark. Under the hood of many e-commerce sites, you’ll find high-end AI technologies that are used to improve sales with advanced natural language processing. The science behind NLP for understanding user’s queries and predicting the best search results was made possible through machine learning. Today, Google uses BERT, which helps return meaningful results of queries they haven’t previously encountered, no matter how you spell or combine the words in your query.

Predictive search is a useful user experience (UX) tool for effectively helping customers discover products they want to find. In this article, you’ll gain a complete understanding of how predictive search works, common pitfalls of predictive search, and how to avoid those pitfalls, along with best practices for implementing autocomplete and typeahead search.

What is predictive search?

Predictive search is an approach that attempts to anticipate search terms based on the behavior, previous searches, geolocation, and other attributes of the end user, as well as trending searches across all user sessions, and displays the possible suggestions in or under the search field. Autocomplete, autosuggest, and predictive search are often used interchangeably in the tech industry, especially in the UI/UX department.

Amazon, Google, Shopify, Spotify, and Walmart are some examples of sites that have implemented predictive search capability to show popular queries, offer contextual suggestions, avoid typos, and filter content based on user’s location or preferences. Companies like Search.io have implemented autocomplete for site search engines as well.

The ability to select from a list of suggestions without having to type the complete term in the search box is the core functionality of predictive search. Most of us have experienced the wonderful world of AI, where you type the first few letters of what you’re looking for into a search engine and click on one of the autocomplete suggestions from the drop-down, but there’s a lot that goes on in the background to make this possible.

Benefits of predictive search

Predictive search increases conversion rates and saves time for users when searching for an item by providing helpful auto suggestions. It’s an important functionality when shopping from a mobile phone that has a compact keyboard. Having the predictive search feature in the application reduces friction for users, making it less likely that they’ll abandon their search.

Here are a few of the benefits of using predictive search:

  • It reduces search time by offering suggestions, which means the user will rarely have to enter their entire query.
  • Predictive search offers a more personalized experience, informed by users’ previous queries, location, and preferred categories.
  • It educates users about your site and product, and helps users find what they’re looking for by providing relevant images and descriptions for certain products.
  • It increases sales by showing users appropriate and useful suggestions based on popular searches and bestselling products.
  • By making content available in a more optimized fashion, it increases and improves the overall user experience.
  • It increases the number of relevant queries, and offers optimized results.
  • Predictive search helps to avoid confusion caused by typos and errors, and offers faster results by filtering the data.

How does predictive search work?

Google search was the first organization to implement an autocomplete feature. Predictive search has now become an expected feature, and has been implemented by many organizations, big and small.

A search query is the term that the user types in the search bar of a page. Predictive search analyzes the search query as it’s being typed and provides a set of suggestions, like spelling corrections or a completed search query, in a drop-down menu before the user has even finished typing. These suggestions are generated by a series of algorithms. Multiple machine learning and natural language processing algorithms and models are used to generate matches, starting with a simple string in order to identify, match, and predict the outcome of the unfinished search query.

Typeaheads

Typeaheads are more commonly known as autocomplete. In a site search typeahead, users are offered a list of suggestions based on existing data in your search index. For example, if a user types the letters “cho”, they get the first ten items that start with these words, regardless of the user’s location, recent searches they’ve made, or popular searches.

Typeaheads helps users to get results faster with less typing, which helps prevent typos and create queries that will return the desired results. The algorithms behind typeaheads begin with simple string matching from static lists or existing data, but can get as complex as using natural language processing to manage typos and synonyms to help users get the desired results.

typeahead search example

Here are some best practices to create a good user experience with typeahead or autocomplete searches:

  • Add visual focus when active: Ensure that the search bar and autocomplete suggestions are focused when in use. You can see how it works in the video above—note how when the search bar is selected, the rest of the page is dimmed. Especially on smaller mobile devices, reduce the icons, shortcuts, or menu items that are displayed beside the search bar to help in minimizing visual distraction on screen.
  • Use text wrapping for suggestions: If the suggestions contain lengthy text, avoid using a horizontal scroll bar. Ensure the lengthy keywords and terms are large enough for readability, but are constrained to a single screen. If necessary, use text wrapping and allow suggestions to spread across multiple rows, especially on mobile devices.
  • Avoid scrollbars: It’s important to ensure that suggestions aren’t hidden on the screen. This means avoiding scroll bars wherever possible. Scrollbars increase the time users spend searching, making it more likely that they’ll abandon the search, and making it more difficult for them to find the content that they want.
  • Provide visual hints that the list is scrollable: Sometimes it’s impossible to avoid using scrollbars. In cases like this, give enough hints and instructions that it’s clear the list is scrollable.
  • Enable easy removal of queries: Provide clear visual icons and options for the user to clear the search bar and autocomplete suggestions. The most widely used indicator is the “X” icon, which is provided to help the user remove a search query. This design solution drastically improves the overall user experience.
  • Optimize suggestions: Part of the appeal of autocomplete suggestions is faster results, and these results should be displayed in real time, as shown below. Suggestions should appear almost as soon as the user types the first character, and should update with each character added to the query. Typos and other errors should be filtered so as to return relevant suggestions.
  • Limit the number of options being listed: It is important to limit the number of suggestions shown in response to a user query. Too many suggestions can result in irrelevant results and distracted users. It’s a best practice to keep the suggestions to ten items or less.
example of typeahead predictive search

Predictive search

Predictive search is built on top of autocomplete. Instead of the relatively straightforward logic of a typeahead, predictive search results are influenced by not just matching strings, but also popular searches and user data. Predictive search relies on machine learning algorithms. These algorithms are continually learning from user behavior, improving the accuracy with which they predict what the user is searching for and what results might be relevant.

Amazon's predictive search at work

Regardless of the algorithm used to implement predictive search, the relevance, structure, and design of the search suggestions are critical for user interaction and overall user experience. Having a well-designed predictive search that provides relevant and responsive search suggestions is crucial.

All of the best practices for typeaheads are also applicable to predictive search, but predictive search also comes with some best practices of its own.

  • Use ranking to determine display order: There are many factors that contribute to how the suggestions provided are ranked. Generally speaking, queries related to the user’s location, language, recent search history, previous order history, popular searches, and ongoing promotions should be ranked highly. For example, if it’s near a holiday, suggestions related to that holiday should be ranked higher to ensure that they’re displayed in the first few options of the suggestion dropdown.
  • Style different types of suggestions differently: In some instances, there may be search results and suggestions that include both products and categories. In these situations, ensure that the different categories of suggestions are clearly differentiated. The text could be styled differently, or different colors could be used for different types of suggestions.
  • Highlight potential outcomes: When displaying a number of suggestions, make sure to highlight potential outcomes of the search term provided by the user in the autocomplete suggestions. This helps the user determine the differences and decide faster. If the user has typed “cou”, for example, you’ll want to show different potential outcomes, such as couch, countertop, and counter.
  • Personalize autocomplete suggestions: Consider the queries based on the user’s location, language, and search history in order to personalize the results. If a user located in a cold place like Oslo or Toronto searches for “shoes” in December, the suggestions presented to them should be useful to someone in those locations: boots or warm shoes, not fabric athletic shoes or sandals.

Conclusion

Predictive search offers many advantages, including an increased conversion rate and a better customer experience, and is a crucial component in the success of many businesses. Using the best practices described in this article will help you make sure that your site search works as hard as you do.

Search.io is a cloud-based, AI-powered solution that allows enterprises to manage their search engines at scale. It offers extensive customization on an intuitive platform and provides you all the tools you need to create a rich search experience for your users.

About the author

Sheekha Singh is the author of the bestselling book "The IT Girl: 3 Steps to Find Career Options for Young Women in Tech." She has worked in the IT/tech industry for 7+ years in both the US and Canada. In addition to being a software engineer and writer, she is a public speaker at international tech conferences.

CTA banner

Similar articles

User Experience (UX)
Best Practice

Drastically Improve Your Website's UX by Improving Site Search

Best Practice

An Introduction to Custom Search Engines

Ecommerce
Best Practice

How to Get a Competitive Edge with Smart (and Surprisingly Easy) E-commerce Site Search Solutions