10-step checklist to build a great search
Search stakes are really important at Videdressing, we’ve learned a lot about search experience. This article is our guideline to make a great user experience.
But before, a small reminder about search speed importance. Indeed, you have to build a fast search engine! We observe that slow search results, like slow search as you type experience are churning reasons: 100ms are the threshold rule. Above it, perception is changing, and the user is aware a machine is working behind the scene. Keeping this prerequisite in mind, let’s talk about these 10 points in order to make a great search and discovery tool.
1 - Make it visible
Don’t be afraid to provide a large search bar. On many websites, searching is often the first reflex and users are more and more used to seeing big search inputs: Google, browser search bar, … It’s something also very true on mobile apps, for instance at Videdressing 73% of product searches are made through the search bar.
“Repeat yourself!”: the user should be able to access your search bar on several pages: homepage, catalog, product pages,… a lens icon and a placeholder inside the search bar also helps to make it more visible, as placeholder provides query example to assist and inspire your users.
2 - Search as you type: highlight the right way
By following these two main rules, you’ll make an awesome search-as-you-type experience:
- 1st rule: highlight your suggestions as you type results. It will be easier to read and detach from the rest of the auto-completion.
- 2nd rule: do not highlight what your user has already typed. Do the opposite.
3 - Search-as-you-type: mix recent searches, saved searches and suggestions
As we mentioned earlier, the search input is often the main entry point on an app or a website. Display recent searches, saved searches and suggestions on the same screen. Those concepts are often confusing for users and maybe you can provide shortcuts to filter them: as-you-type filtering, sorting toggles or tabs (it’s not an easy choice, to be honest).
4 - Search-as-you-type: implement the weird arrow
(the typeahead pattern)
More than 80% of your users will not know what this weird arrow stands for. But people that are used to it will be strongly engaged by the power of this feature. Except if you don’t have the space to implement it, it’s a standard that you should use.
5 - Make search results self-explanatory
Try to explain your search results. A good way to tackle that is to use highlight in result cards and in result details. But don’t overuse it, highlighting obvious things will kill your design and make this feature less powerful.
6 - Display all filters/facets-values in one screen
Provide a filter screen that avoids frictions for your users. Try to avoid the “one criteria = one screen” paradigm. Users like to filter quickly with ease. Displaying all facets on a single screen, along with their values, is the best approach.
Nonetheless, some filters will require their own screen. At Videdressing, to filter brands, we had to provide a text field to browse in a huge set of brands (do not forget to directly focus on the input and open the keyboard).
One last observation: price sliders can be really useful but not the easiest to develop. Users will lose precision when price ranges are too large. At Videdressing, we made a slider where the upper boundary is managed with a “+” (probably not the best option for every business).
7 - Organize facets & facet values
Order your facets by their importance and usage volumes. Usually, sizes prevail over materials or colors.
Also, it’s really important to adapt facet values ordering, for instance at Videdressing:
- Brands, Colors, Materials are ordered by volume of results, useful when you have a large volume of possible values, this helps to see more relevant first.
- Sizes are ordered from the smallest to the largest (S, M, L, XL, …)
- Conditions are ordered from the best to the worst (New, Very good, Good, Average)
- Special offers are ordered by business opportunities (Flash Offers, Free shipping, Free certificate…)
- …
8 - Avoid “no-result”
By displaying only facets values that are available in the current search context you will avoid no-result pages and prevent your user from wasting time.
8 bis - If no choice, offer “no-result” experience
In an ideal world, you will never have “no-result” pages. For many reasons, it will not be the case: legacy indexed page on SEO, custom facet filtering, universal-links management on your app, … So, just don’t forget to provide an experience to avoid disappointment and keep your user engaged. Saved search creation and Similar results are two possible patterns.
9 - Push personalization & customization settings
Some users always use the same filters when using the search engine. It’s the ideal moment to ask them if they want to customize and personalize their experience.
10 - Draw special attention to new results
Showing what’s really new on a result page can substantially increase your overall conversion and more probably user’s stickiness. Try to figure out the best strategy to highlight the new arrivals and consider using A/B to improve it.
In some cases, it’s interesting to provide a filter to be able to see only fresh listings.
