Search by Algolia
How to increase your ecommerce conversion rate in 2024
e-commerce

How to increase your ecommerce conversion rate in 2024

2%. That’s the average conversion rate for an online store. Unless you’re performing at Amazon’s promoted products ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

How does a vector database work? A quick tutorial
ai

How does a vector database work? A quick tutorial

What’s a vector database? And how different is it than a regular-old traditional relational database? If you’re ...

Catherine Dee

Search and Discovery writer

Removing outliers for A/B search tests
engineering

Removing outliers for A/B search tests

How do you measure the success of a new feature? How do you test the impact? There are different ways ...

Christopher Hawke

Senior Software Engineer

Easily integrate Algolia into native apps with FlutterFlow
engineering

Easily integrate Algolia into native apps with FlutterFlow

Algolia's advanced search capabilities pair seamlessly with iOS or Android Apps when using FlutterFlow. App development and search design ...

Chuck Meyer

Sr. Developer Relations Engineer

Algolia's search propels 1,000s of retailers to Black Friday success
e-commerce

Algolia's search propels 1,000s of retailers to Black Friday success

In the midst of the Black Friday shopping frenzy, Algolia soared to new heights, setting new records and delivering an ...

Bernadette Nixon

Chief Executive Officer and Board Member at Algolia

Generative AI’s impact on the ecommerce industry
ai

Generative AI’s impact on the ecommerce industry

When was your last online shopping trip, and how did it go? For consumers, it’s becoming arguably tougher to ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What’s the average ecommerce conversion rate and how does yours compare?
e-commerce

What’s the average ecommerce conversion rate and how does yours compare?

Have you put your blood, sweat, and tears into perfecting your online store, only to see your conversion rates stuck ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What are AI chatbots, how do they work, and how have they impacted ecommerce?
ai

What are AI chatbots, how do they work, and how have they impacted ecommerce?

“Hello, how can I help you today?”  This has to be the most tired, but nevertheless tried-and-true ...

Catherine Dee

Search and Discovery writer

Algolia named a leader in IDC MarketScape
algolia

Algolia named a leader in IDC MarketScape

We are proud to announce that Algolia was named a leader in the IDC Marketscape in the Worldwide General-Purpose ...

John Stewart

VP Corporate Marketing

Mastering the channel shift: How leading distributors provide excellent online buying experiences
e-commerce

Mastering the channel shift: How leading distributors provide excellent online buying experiences

Twice a year, B2B Online brings together America’s leading manufacturers and distributors to uncover learnings and industry trends. This ...

Jack Moberger

Director, Sales Enablement & B2B Practice Leader

Large language models (LLMs) vs generative AI: what’s the difference?
ai

Large language models (LLMs) vs generative AI: what’s the difference?

Generative AI and large language models (LLMs). These two cutting-edge AI technologies sound like totally different, incomparable things. One ...

Catherine Dee

Search and Discovery writer

What is generative AI and how does it work?
ai

What is generative AI and how does it work?

ChatGPT, Bing, Bard, YouChat, DALL-E, Jasper…chances are good you’re leveraging some version of generative artificial intelligence on ...

Catherine Dee

Search and Discovery writer

Feature Spotlight: Query Suggestions
product

Feature Spotlight: Query Suggestions

Your users are spoiled. They’re used to Google’s refined and convenient search interface, so they have high expectations ...

Jaden Baptista

Technical Writer

What does it take to build and train a large language model? An introduction
ai

What does it take to build and train a large language model? An introduction

Imagine if, as your final exam for a computer science class, you had to create a real-world large language ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

The pros and cons of AI language models
ai

The pros and cons of AI language models

What do you think of the OpenAI ChatGPT app and AI language models? There’s lots going on: GPT-3 ...

Catherine Dee

Search and Discovery writer

How AI is transforming merchandising from reactive to proactive
e-commerce

How AI is transforming merchandising from reactive to proactive

In the fast-paced and dynamic realm of digital merchandising, being reactive to customer trends has been the norm. In ...

Lorna Rivera

Staff User Researcher

Top examples of some of the best large language models out there
ai

Top examples of some of the best large language models out there

You’re at a dinner party when the conversation takes a computer-science-y turn. Have you tried ChatGPT? What ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What are large language models?
ai

What are large language models?

It’s the era of Big Data, and super-sized language models are the latest stars. When it comes to ...

Catherine Dee

Search and Discovery writer

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

Mobile search done right: Common pitfalls and best practices
ux

Alexandre Collin

Staff SME Business & Optimization - UI/UX