Adapt and Anticipate Create an Instant Search experience that performs

As context awareness has become a key differentiator for brand experiences, search has become all about anticipation and adaptation . It helps make users feel special and understood. It’s often thought that the best way to achieve this is to provide greater degrees of personalisation. However, I’d argue that there are many other ingredients that are equally important when adapting your search journey to the user intention. In this article, I wanted to discuss just one of these other ingredients: Instant Search.

What is Instant Search?

Instant Search, also known as search-as-you-type or typeahead, is a feature that causes search results to appear in real-time as a user types their query. Unlike Delimited Search, Instant Search provides immediate feedback to the user , without needing to actively submit a complete search query.

What are the benefits of Instant Search?

Imagine that one of your customers decides to use your search feature. They click on the search box and start typing. At this point, most search experiences would provide a few search or category suggestions through an autocomplete feature. With Instant Search, all elements of the interface adapt to the current context, (a user wanting to perform a search). Categories transform into filters, promoted products into search results, and unnecessary elements into history. The user is not only rewarded with relevant results, but also relevant elements in the UI. Whilst autocomplete’s great for assisting, guiding and inspiring search journeys , Instant Search takes these concepts to the highest level.

Instant Search also helps to create more engaging search journeys. It does this by changing the way users interact with your catalogue. Counter-intuitively, data shows the kind of experience provided by Instant Search encourages users to type more and to tweak their query until they see results that match their intent. This is instead of submitting an initial query and then filtering to narrow down the result set. The information this provides is worth its weight in gold if you’re trying to accomplish one of the hardest challenges in search - bridging the gap between how you name products in your catalogue and how your customers articulate their needs. Instant Search provides a larger conversational space with your users and transforms your search into a highly-interactive experience. However, note this kind of experience might not be suitable for all screen sizes. Often, on mobiles or other devices where screen space is limited, you’d be better off prioritising suggestions over results. Having moving elements below the fold on these sorts of devices doesn’t make much sense. For that reason, we typically encourage using Instant Search on desktop and tablet, but not on mobile .

How can I create an Instant Search experience that performs?

Instant Search presents a number of technological challenges. As search requests are expensive, firing one off for every keystroke is not always worthwhile. It is important to find the correct balance between responsiveness and performance when building your search experience . To that end, you can use techniques, such as debouncing the search requests, to reduce the number of unnecessary API calls. Libraries like RxJS or Underscore have built-in debounce functions, but writing one from scratch is not hard either, as you can see below:

1
2
3
4
5
6
7
const debounce = (fn, delay) => {
    let timeout;
    return () => {
        clearTimeout(timeout);  
        timeout = setTimeout(fn, delay);
    }
}

With a debounced search function, you can easily limit the request’s firing rate, so that immediately subsequent keystrokes only count as one. The API is only called after a delay happens between events (in this case, once the user stops typing for a number of milliseconds). In our experience, the sweet spot for search is somewhere between 100 and 300 milliseconds . Another approach is to use motion and progressive loading to increase the perceived performance of your search, (a.k.a. First Meaningful Paint). This could be achieved by using animated content placeholders, staggered animations, or delaying the rendering of secondary components such as filters or Related Tags .

Instant Search is a great way to provide a more adaptive and anticipatory experience, without relying on individual personalisation. If you are considering implementing Instant Search or just want to share some cool ideas, drop us a message. We will be happy to discuss!