Building a query suggestion UX like Google’s

Maria Schreiber |
Feb 11th 2019 |
5 min read
|
Algolia

Last year was a big year for us here at Algolia. We hired scores of incredible people and released some incredible new features. One of the earliest was query suggestions, released in February. It harnesses our analytics API to create dynamic suggestions ranked by popularity. Its ease of implementation allows our users to, in a matter of hours, create a UX that consumers, “spoiled” by Google, have come to expect. To read more about how the feature works in detail, check out this blog post.

TL;DR: our query suggestions engine creates an index of the most popular search terms that lead to results (vs those with zero results) and refreshes that every 24 hours. This index can be used to create the autocomplete dropdown that Google has led many of us to know and love.

Unlike Google’s, however, this list is not yet tailored to an individual user.

What about a personalized experience?

One trend last year was increasingly personalized content— advertising follows us across devices and curated content is recommended to us based on our past browsing history. Google, for example, saves our searches (among other things) so that two people sitting next to each other, searching for the exact same thing, might get a different set of suggestions.

Algolia customers can recreate this experience by combining our current query suggestions feature and just a bit of additional leg work: By saving searches on a per-user or per-segment basis, to create a highly personalized search experience.

Personalized saved searches allow your users to quickly search for something they look for frequently, while the crowd-sourced suggestions allow them to more easily discover a term they may have been looking to search. Because the suggestions coming from our query suggestions feature are being generated by a wider audience, they will change more frequently and will represent what is trending. For this reason, we recommend sticking to a ratio similar to what is shown above: 1 to 5 for saved to suggested searches.

An added bonus—by building saved searches in Algolia rather than relying on some sort of caching like localStorage, these saved searches are available cross-device This allows a user searching on their phone to access searches they made on their laptop.

Building it

The query suggestions feature can be used as a template for how to do this. Query suggestions draw from our analytics API to create a new index; you will have to create a new index with recent searches in it. Algolia pulls results on a per character basis, but it would be best to only send “completed” searches to Algolia for indexing by debouncing — waiting a set amount of time without any new character input.

Each completed search should be tagged with a timestamp, count, and usertoken for the user who made it. The count attribute is incremented every time the user types the particular search term and can be used as a custom ranking attribute to boost the most popular searches to the top. The timestamp will allow you to both purge old searches (say those older than 30 days) and to rank searches by recency. The usertoken will allow you to only pull up relevant saved searches on a per-user basis.

It is better to create a large index with all of your users’ saved searches rather than creating one index per user, as indexing updates to multiple small indices is much slower than indexing the same number of updates to one large index. Additionally, we recommend using our secured API keys feature when pulling results from the API for enhanced history containerization and security.

On the front end

One caveat is that, since the dropdown is being built from two separate indices, it’s possible that something could come up as *both* a saved search, and a suggestion. This experience looks glitchy and takes up valuable real estate on dropdowns that should stay short. For that reason, it helps to always display the 1-2 saved searches, but then build additional logic to not display any suggestion that is also found in the saved searches.

A nice UI touch is to differentiate the saved searches from the suggestions. Google has done this by bolding and adding a “Remove” option.

Adding an icon to denote that this suggestion is being sourced from the search history is another nice option.

Announcing automated personalization

Saving a user’s search behavior and using it to influence the output of future search results is the basic concept behind our biggest feature release of last year.

On December 18th, we released an automated personalization feature that allows our users to return individualized search results for their end-users based on their past actions.

What events in that history to consider — whether it be product page views, hitting the “like” button, or reading an article to its completion, how much each event is weighted, and how “similar” items are scored — is up to you and configurable on the Algolia dashboard. The only additional development work is to send these events to our Insights API whenever they occur, and to toggle on the “personalized” option when returning the results.

Availability

Query Suggestions is available today for our Business and Enterprise customers and Automated Personalization is available for Enterprise customers only. To enable these features directly on your dashboard, reach out to your product specialist or customer success manager.

Have feedback? Tweet to us @algolia, or comment below. Thanks for reading!