Vector vs Keyword Search: Why You Should Care
Search has been around for a while, to the point that it is now considered a standard requirement in many ...
Senior Machine Learning Engineer
Search has been around for a while, to the point that it is now considered a standard requirement in many ...
Senior Machine Learning Engineer
With the advent of artificial intelligence (AI) technologies enabling services such as Alexa, Google search, and self-driving cars, the ...
VP Corporate Marketing
It’s no secret that B2B (business-to-business) transactions have largely migrated online. According to Gartner, by 2025, 80 ...
Sr. SEO Web Digital Marketing Manager
Twice a year, B2B Online brings together industry leaders to discuss the trends affecting the B2B ecommerce industry. At the ...
Director of Product Marketing & Strategy
This is Part 2 of a series that dives into the transformational journey made by digital merchandising to drive positive ...
Benoit Reulier &
Reshma Iyer
Get ready for the ride: online shopping is about to be completely upended by AI. Over the past few years ...
Director, User Experience & UI Platform
Remember life before online shopping? When you had to actually leave the house for a brick-and-mortar store to ...
Search and Discovery writer
If you imagine pushing a virtual shopping cart down the aisles of an online store, or browsing items in an ...
Sr. SEO Web Digital Marketing Manager
Remember the world before the convenience of online commerce? Before the pandemic, before the proliferation of ecommerce sites, when the ...
Search and Discovery writer
Artificial intelligence (AI) is no longer just the stuff of scary futuristic movies; it’s recently burst into the headlines ...
Search and Discovery writer
Imagine you are the CTO of a company that has just undergone a massive decade long digital transformation. You’ve ...
CTO @Algolia
Did you know that the tiny search bar at the top of many ecommerce sites can offer an outsized return ...
Director, Digital Marketing
Artificial intelligence (AI) has quickly moved from hot topic to everyday life. Now, ecommerce businesses are beginning to clearly see ...
VP of Product
We couldn’t be more excited to announce the availability of our breakthrough product, Algolia NeuralSearch. The world has stepped ...
Chief Executive Officer and Board Member at Algolia
The ecommerce industry has experienced steady and reliable growth over the last 20 years (albeit interrupted briefly by a global ...
CTO @Algolia
As an ecommerce professional, you know the importance of providing a five-star search experience on your site or in ...
Sr. SEO Web Digital Marketing Manager
Hashing. Yep, you read that right. Not hashtags. Not golden, crisp-on-the-outside, melty-on-the-inside hash browns ...
Search and Discovery writer
We’re just back from ECIR23, the leading European conference around Information Retrieval systems, which ran its 45th edition in ...
Senior ML Engineer
Apr 5th 2018 ecommerce
Using Search Suggestions is a familiar pattern that has been around for years, and after reviewing thousands of implementations, we want to share with you some best practices. Here’s what you need to know.
Whether you are calling it an autocomplete or an autosuggest, a pattern used to display queries suggestions or search predictions, it is likely that you’re speaking about the same kind of a search experience. This pattern has been around for years and you are probably using it every day on websites such as Google or Amazon:
The concept is pretty straightforward: the search engine suggests several predictions in order to autocomplete your query as you type. Search suggestions are particularly powerful on mobile devices and for e-commerce marketplaces. Instant search experiences that display actual results instead of completing the user queries are a good example of the right pattern in other use cases.
There are a couple of constraints on mobile that you need to design for: limited screen real estate, and the “fat finger” effect (touch interfaces are even more prone to users’ mistakes!).
These constraints dictate a few reasons search suggestions are a better option than directly displaying search results on mobile. Using autocomplete will minimize the number of characters one has to type, thus reducing potential for typos (even though your search technology should handle them anyway). It is also easier to fit 3-5 suggestions on a screen, especially since you can expect the keyboard to be opened. Displaying results tends to require more space (pictures + 2-3 attributes on average).
Suggestions are also helpful for extending queries. For example, you probably wouldn’t have typed “iphone car mount magnetic” on your own, but having it suggested might help the user find the exact words to describe what they’re after, thus making it more precise and leading to more relevant results. It also guides your users and sets their expectations: if a suggestion exists, it means there are actual results behind it (otherwise, why would it even be suggested?).
For all these reasons, suggestions might help your users find the right content faster. However, a prerequisite is getting the implementation right.
Displaying suggestions should be blazing fast. Several studies already demonstrated that there’s a 100ms threshold between an experience that a user feels in control of and an experience that makes them feel like they are waiting for a machine to answer.
Suggestions should start with the first character. It’s not that the user will expect perfect suggestions with just one letter, but they will see right away that an autocomplete is there to help. Waiting for a few characters to kick in might (unpleasantly) surprise them, and they might ignore them entirely.
Highlighting is crucial in search, because it helps the user understand why the results match their request, and allows them to quickly decide which result to choose first. Without highlighting, the chances of the user choosing a bad result are higher, which can lead to a disappointing experience with your product.
A common practice is to highlight the part that matches the user’s input; however when offering search suggestions, the inverse is true: it is important to highlight the part that is being suggested. This approach visually aids the user in distinguishing between suggestions as it highlights the differences.
Have you ever noticed this icon next to suggestions?
Take a good look at the apps you have installed on your phone, and you will start seeing it everywhere.
Did you know this was not only an icon, but is used for a specific action? If not, don’t worry—our own studies showed that 80% of people on our panels had no idea this existed—but those who did use it profusely.
When taping on the icon, the suggestion will replace the initial query in the search box and the user can continue typing. This is a great way to reduce the amount of typing while having very precise queries. In this example, I only typed “i”, and found exactly what I needed in four taps.
A good implementation requires:
1. Use of the arrow icon that points to the search box
2. On tap, filling the search box with the suggestion
3. Staying on the same view while instantly updating the other suggestions according to the new query
Pretty simple, yet even Amazon struggles to keep consistency between its platforms (here, failing with point 3):
If you would like to learn more about the tap-ahead pattern, the earliest mention I could find is in a 2011 Smashing Magazine article.
Suggestions are only helpful if they’re relevant. We already mentioned how each suggestion should lead to actual results. Most of these suggestions are being built by analyzing what your users are searching for on your app (popular or trending queries).
However, be aware: never blindly trust user-generated content. Castorama, a French home improvement tools and supplies retailer, learned this the hard way in 2016. Some of their online visitors realized that typing the same query multiple times in a row would be enough for it to start appearing in the autocomplete for everyone. It only took a few minutes for the website to be flooded with inappropriate suggestions that I won’t share in this article. Castorama had to shut down their website for weeks and missed many sales opportunities.
Search suggestions is only one interesting pattern in the world of search. There’s a lot more you can do to create a great search experience.
Combining suggestions and instant search is something worth experimenting with, and not just on mobile.
At Algolia, we like to push the limits of search from technology and UX perspectives. Lately, we’ve been exploring the pattern below, which shows results and suggestions at the same time.
We have yet to prove or disprove it, but we’re working on it. Feel free to try the demo yourself, and please send us feedback in the comments below or via Twitter
Get a free and personalized demo of our search and discovery solutions
Powered by Algolia Recommend