Search by Algolia
Vector vs Keyword Search: Why You Should Care
ai

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 ...

Nicolas Fiorini

Senior Machine Learning Engineer

What is AI-powered site search?
ai

What is AI-powered site search?

With the advent of artificial intelligence (AI) technologies enabling services such as Alexa, Google search, and self-driving cars, the ...

John Stewart

VP Corporate Marketing

What is a B2B marketplace?
e-commerce

What is a B2B marketplace?

It’s no secret that B2B (business-to-business) transactions have largely migrated online. According to Gartner, by 2025, 80 ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

3 strategies for B2B ecommerce growth: key takeaways from B2B Online - Chicago
e-commerce

3 strategies for B2B ecommerce growth: key takeaways from B2B Online - Chicago

Twice a year, B2B Online brings together industry leaders to discuss the trends affecting the B2B ecommerce industry. At the ...

Elena Moravec

Director of Product Marketing & Strategy

Deconstructing smart digital merchandising
e-commerce

Deconstructing smart digital merchandising

This is Part 2 of a series that dives into the transformational journey made by digital merchandising to drive positive ...

Benoit Reulier
Reshma Iyer

Benoit Reulier &

Reshma Iyer

The death of traditional shopping: How AI-powered conversational commerce changes everything
ai

The death of traditional shopping: How AI-powered conversational commerce changes everything

Get ready for the ride: online shopping is about to be completely upended by AI. Over the past few years ...

Aayush Iyer

Director, User Experience & UI Platform

What is B2C ecommerce? Models, examples, and definitions
e-commerce

What is B2C ecommerce? Models, examples, and definitions

Remember life before online shopping? When you had to actually leave the house for a brick-and-mortar store to ...

Catherine Dee

Search and Discovery writer

What are marketplace platforms and software? Why are they important?
e-commerce

What are marketplace platforms and software? Why are they important?

If you imagine pushing a virtual shopping cart down the aisles of an online store, or browsing items in an ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is an online marketplace?
e-commerce

What is an online marketplace?

Remember the world before the convenience of online commerce? Before the pandemic, before the proliferation of ecommerce sites, when the ...

Catherine Dee

Search and Discovery writer

10 ways AI is transforming ecommerce
e-commerce

10 ways AI is transforming ecommerce

Artificial intelligence (AI) is no longer just the stuff of scary futuristic movies; it’s recently burst into the headlines ...

Catherine Dee

Search and Discovery writer

AI as a Service (AIaaS) in the era of "buy not build"
ai

AI as a Service (AIaaS) in the era of "buy not build"

Imagine you are the CTO of a company that has just undergone a massive decade long digital transformation. You’ve ...

Sean Mullaney

CTO @Algolia

By the numbers: the ROI of keyword and AI site search for digital commerce
product

By the numbers: the ROI of keyword and AI site search for digital commerce

Did you know that the tiny search bar at the top of many ecommerce sites can offer an outsized return ...

Jon Silvers

Director, Digital Marketing

Using pre-trained AI algorithms to solve the cold start problem
ai

Using pre-trained AI algorithms to solve the cold start problem

Artificial intelligence (AI) has quickly moved from hot topic to everyday life. Now, ecommerce businesses are beginning to clearly see ...

Etienne Martin

VP of Product

Introducing Algolia NeuralSearch
product

Introducing Algolia NeuralSearch

We couldn’t be more excited to announce the availability of our breakthrough product, Algolia NeuralSearch. The world has stepped ...

Bernadette Nixon

Chief Executive Officer and Board Member at Algolia

AI is eating ecommerce
ai

AI is eating ecommerce

The ecommerce industry has experienced steady and reliable growth over the last 20 years (albeit interrupted briefly by a global ...

Sean Mullaney

CTO @Algolia

Semantic textual similarity: a game changer for search results and recommendations
product

Semantic textual similarity: a game changer for search results and recommendations

As an ecommerce professional, you know the importance of providing a five-star search experience on your site or in ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is hashing and how does it improve website and app search?
ai

What is hashing and how does it improve website and app search?

Hashing.   Yep, you read that right.   Not hashtags. Not golden, crisp-on-the-outside, melty-on-the-inside hash browns ...

Catherine Dee

Search and Discovery writer

Conference Recap: ECIR23 Take-aways
engineering

Conference Recap: ECIR23 Take-aways

We’re just back from ECIR23, the leading European conference around Information Retrieval systems, which ran its 45th edition in ...

Paul-Louis Nech

Senior ML Engineer

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

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.

Autocomplete or autosuggest? Several names, same pattern

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:

Google autocomplete
Example of an autocomplete that provides search suggestions as you type

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.

Twitch search - a rich autocomplete that goes beyond search suggestions
Example of a rich autocomplete that goes beyond search suggestions

An effort-saving pattern on mobile

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.

Implementation—doing it well

Speed: as-you-type experience

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 the differences

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.

autocomplete mobile
On the left, Ali Express. On the right, a better implementation by eBay – even though the contrast could be improved.

Tap-ahead pattern

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.

From left to right: eBay, Youtube and Google Maps. - autocomplete mobile
Many apps are using the tap-ahead pattern. From left to right: eBay, Youtube and Google Maps.

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.

 

Quick_Fill_Amazon - autocomplete mobile
Amazon on iOS: a perfect implementation of the tap-ahead pattern

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):

autocomplete mobile

 

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.

Building relevant suggestions

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.

Going beyond suggestions

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.

Pinterest mixing search suggestions with top results for People and Boards - autocomplete mobile
Pinterest is doing a fabulous job of mixing suggestions with top results for People and Boards

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.

Bestshack electronics example - autocomplete mobile

 

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

About the author
Lucas Cerdan

Product Manager

linkedintwitter

Curious about what Algolia can do for your business?

Get a free and personalized demo of our search and discovery solutions

Request a demo
Curious about what Algolia can do for your business?

Recommended Articles

Powered byAlgolia Algolia Recommend

Introducing Query Suggestions: Making Autocomplete Search Experiences Right
product

Lucas Cerdan

Product Manager

Suggested search and autocomplete: What is it and how does it work?
ux

Catherine Dee

Search and Discovery writer

Predictive search and autocomplete
ai

Julien Lemoine

Co-founder & former CTO at Algolia