[EmpathyX] [UX] Instant Search


Search is all about anticipation and adaptation. Context awareness has become a key aspect of the brand experience and one of the main differentiators. However, we tend to think of personalization as the only way to adapt search to our users, to make them feel understood and special. But there are many other dimensions, equally important, where we can add a bit of this ingredient. One of them is the experience itself. On today's article, we are going to talk about one of the mechanisms to adapt your search journey to the user intention: Instant Search.

What is Instant Search?

Instant Search, also known as search-as-you-type or typeahead, is a feature where search results pop out as the user types. As opposed to Delimited Search, it provides immediate feedback to the user, without the need of actively submitting a complete search query.

Instant Search vs Delimited Search

What are the benefits of Instant Search?

Imagine the following scenario: one of your customers decides to use the search feature, so she clicks on the search box and starts typing. At this point, most commerces choose to provide an autocomplete feature with search suggestions and perhaps a few categories. And that's awesome: they are assisting, guiding and inspiring the journey. Instant Search is about taking this concept to the highest degree and adapting all the elements in the interface to the current context (i.e. a user that wants to search). This includes transforming categories into filters, promoted products into search results and unnecessary elements into history. Now a committed search user is not only rewarded with relevant results, but also with relevant elements in the UI.

Instant Search vs Autocomplete

Instant Search also helps to create more engaging search journeys by changing the way users interact with your catalog. Counter-intuitively, data shows this kind of experience encourages users to type more and polish their query until they see results that match their intent, rather than submitting an initial query and then filtering to narrow down the result set. This information is gold to accomplish one of the hardest challenges in search: bridging the gap between how products are named in your catalog 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 mobile devices, where the screen space is very limited, you might want to prioritize suggestions over results, and having moving pieces below the fold does not make much sense. For that reason, we typically encourage using Instant Search on desktop and tablet, but not on mobile.

How can I create a performant Instant Search experience?

Instant Search introduces a set of technological challenges. Search requests are expensive and firing one per keystroke is not always worth it. It is important to find the correct balance between responsiveness and performance. To that end, you can use techniques such as debouncing the search requests to reduce the number of unnecessary API calls. Libraries such as RxJS or Underscore have built-in debounce functions, but writing one from scratch is not hard either:


const debounce = (fn, delay) => {
    let timeout;
    return () => {
        clearTimeout(timeout);
        timeout = setTimeout(fn, delay);
    }
}


With a debounced search function, you can easily limit the firing rate, so that immediately subsequent keystrokes only count as one. The API is only called after a certain 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 in your favor to increase the perceived performance (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.

Progressive loading vs Loading wheel

If you are considering to implement Instant Search or just want to share some cool ideas, drop us a comment and we will be happy to discuss!