When you sit down in front of a modern search engine, like Google, what comes naturally to you? Do you spend a few moments thinking of the most concise way to phrase your question, pondering how it might translate into computer speak lest it be misinterpreted and generate the wrong search results? I doubt it — most of us just start typing whatever comes to mind.
The best search interfaces are the ones that seem to intuit your thoughts, rather than get hung up on the exact syntax of a typed statement or set of criteria. Google accomplishes this through a triple approach of auto-completing your word or phrase, bubbling up related suggestions, and allowing you to preview live results, letting you search at what seems like mach speed and refine your results just as quickly.
In early versions of FullStory, we had taken a very different approach to the search interface: one that we discovered had some issues, well, interfacing with its human users.
More specifically, this variety of search UI is called parallel filtering: you can choose from available filters—such as “User status is signed up”—as opposed to typing in free-text queries, and you can apply as many of these filters as you want at the same time, hence the parallel designation.
Searching? Filtering? Is there a difference?
For the remainder of this post, I’m going to be as deliberate as humanly possible when using the terms “free-text search” and “filtering.” Why? Because even though searching and filtering are near-synonyms, the concepts of freely typing in a keyword or phrase and choosing from a list of available filters for narrowing your data are really quite distinct.
When free-text search is so ubiquitous on the web these days, you might wonder: why use filtering at all?
Filtering is the right choice for many web apps. Take B&H, purveyor of photography supplies and other electronics, for example: their online catalog contains thousands of items, and filtering for product category, brand, stock type, and customer rating simultaneously is the quickest way to display only the cameras that fit your requirements.
Notice, also, how B&H has placed a free-text search box—”Search Brands”—inside one of its filtering categories to allow the customer to find their brand quickly from a long list of options. Free-text search boxes and filters can work harmoniously to deliver results faster, an approach we’ve taken in the most recent iteration of FullStory’s search UI, which I’ll discuss in greater detail below.
The Three Sisters of search speed.
Let’s go back to Google for a second. Three key features that have earned Google its spot as the Web’s top search engine are auto-complete, related suggestions, and live results. These Three Sisters are each a tremendous breakthrough when it comes to enhancing search speed, but it’s difficult for a filtering system to take full advantage of them.
There are many things our (FullStory’s) customers like about filtering. (And no, we’re not just guessing; when we introduced the new search UI, OmniSearch, we gave customers a feedback form for letting us know their thoughts.) They like knowing what their search options are. They like getting inspired by scanning through the list of available filters. They like the fact that they don’t have to stress about syntax to get the right results.
When creating OmniSearch, we tried to strike a balance between free-text search and filtering. The result is a search box that helps you choose and refine filters. In this way, we’re able to incorporate the Three Sisters of search speed while still retaining all the filtering benefits our customers love.
Auto-complete is the big sister, and I don’t mean the eldest necessarily. I mean she’s the one who has an athletic trophy cabinet in her bedroom complete with a framed photo of her high school track & field team hoisting her up on their shoulders after winning the All-State Championship three years running.
She’s powerful and fast. The pillar of modern free-text search. If you already have a query in mind, all you need to do is start typing the first few letters and auto-complete covers the rest in the blink of an eye—or the stroke of an Enter key.
OmniSearch combines the speed of free-text auto-complete with the underpinning of filtering much the same way B&H photo does in the example I showed earlier. If you know which filter you want to apply (“Brand is Panasonic”) and you start typing it in (p-a-n-a…) you can add the query to your search almost instantly.
2. Auto-suggest, or as we call it, Suggestive 😏
Auto-suggest is the bookwormy middle child, always listening to her sisters’ conversations and swooping in to provide helpful—if tangential—information. She wants you to know what it is you don’t yet know, in the hope that you’ll find it useful or want to pursue the subject more.
Suggestion may be the biggest weakness of the filtering search method. A drop-down list of available filters, on its own, does nothing to help you find information that’s related to your current search or search-intention.
OmniSearch shines by showing you closely-related filters as you type, directly under the auto-complete suggestion.
In addition to showing related filters, OmniSearch’s Suggestive engine does another neat trick: if you start typing the name of an object on your page or a URL in your app, you’ll get suggestions for ways that your customers may have interacted with it.
Although only one of these results is the exact fit for your search intention, the others are interesting rabbit holes that you may find enlightening if you have enough time to explore them.
Auto-suggestions also have the benefit of subtly teaching customers about filters or features they may not have discovered yet. If you’re planning a redesign of your app’s search UI, don’t overlook the power of suggestion as a form of passive education. Discoverability of lesser-used filters is one of the primary reasons we felt the need to add a hybrid free-text system to our filtering search UI.
3. Live results.
Live results is the youngest of the Three Sisters, who lives to please. She can be found making sandwiches for her siblings during late-night study sessions, and constantly returning to the kitchen to correct her work (“I want mine with no mayo,” “Can I get roast beef instead of turkey?”)
The primary function of displaying results live in a free-text search UI is to short-circuit the need for auto-complete and auto-suggest altogether. If the search engine takes a stab at guessing your intention and displays the results instantly, chances are you might not even need the services of the other two sisters. But if you do continue on to refine your search, either through accepting an auto-completion or choosing an alternate suggestion, your results update again just as quickly.
Gotta go fast.
By now I’m sure you can tell that designing the right search UI for your app is no small feat. Intelligent free-text search boxes like Google’s are a great fit for searching inside content or hitting specific keywords, whereas filtering can be better for whittling down a huge dataset into digestible segments.
Depending on the type of app or website you have, one of these methods is likely to be faster than the other for getting your customers the results they need. Your intuition will guide you on this: how would you prefer to search in your own product?
Often, the perfect solution lies in a hybrid of the two paradigms. Of course, we don’t claim OmniSearch is perfect (yet), but combining free-text and filtering in a single UI feels like a step in the right direction. It’s fast. It’s suggestive. And judging by the feedback, our customers agree. 🙂