Guides / Solutions / Ecommerce / Search / Autocomplete

Autocomplete UX Patterns

Most ecommerce websites include autocomplete menus in their search experience. As you start typing in the search box, a menu suggests completed versions of the search query, related categories, or answers to common questions. Autocomplete helps users refine their search queries and reduces typing, notably on mobile devices. Three states are essential when designing autocomplete experiences: the empty query state, the as-you-type searching state, and the “no results” state.

See the CodeSandboxes for autocomplete for code examples for autocomplete menus.

Designing the empty query state

The empty query state is an excellent opportunity to engage users before they start searching. When users select the search bar, the autocomplete menu can show trending searches and categories, recent searches, and more.

Desktop autocomplete menu in the empty query state

The Search and Discovery UI Kit has mobile and desktop screens for the empty query state. You need to consider two scenarios for this screen: before searching (idle), and when they focus the search bar (focused).

  1. The search bar should have descriptive placeholder text, showing users what they can search. Depending on your implementation, you can also add an icon for image search to the search bar.
  2. When users open the search screen, show popular searches.
  3. Invite users to browse with promoted content.
  4. When users focus the search bar, add recent searches.

Designing the as-you-type searching state

When users start typing in the search bar, the autocomplete menu automatically updates with search suggestions from multiple categories.

Autocomplete menu on Desktop

The Search and Discovery UI Kit has mobile and desktop screens that show federated suggestions from different sources.

  1. Show suggestions from popular searches update on every keystroke
  2. Speed up repeated searches by showing suggestions from the user’s recent searches.
  3. Users can apply different filters to the search from the autocomplete menu. For example, hierarchical categories. Instead of a search with filters, you could also redirect to dedicated pages.
  4. The autocomplete menu includes suggestions for filters that update as the user types, for example, for brands or buyer personas.
  5. Users search for more than products. You can help them by showing matching content, for example, from frequently asked questions.
  6. The autocomplete menu shows the top matching products as cards with essential information such as the product name, image, and the price.
  7. You can show even more federated content, for example, matching editorial articles.

Designing the “no results” state

Sometimes, a search produces no results. In these cases, it’s important to give your users options to continue searching or browsing your site. By designing the “no results” experience, you can keep users engaged and prevent dead ends. The “no results” state offers another great opportunity for merchandising by showing personalized recommendations.

Mobile autocomplete

This “no results” screen from the Search and Discovery UI Kit has two important functions:

  1. A clear “no results” message informs users.
  2. Trending categories invite users to browse and stay on your site.

Autocomplete best practices

When building an autocomplete experience, you need to combine at least two things:

Data. In the back end, you can use Algolia’s Query Suggestions feature. It stores the most popular searches of the last 30 days in a separate index. You can also add your own data sources.

Autocomplete menu. With Algolia’s open source Autocomplete library you can create fast, accessible and responsive autocomplete experiences. Autocomplete is fully customizable and includes plugins for most common tasks, including suggested searches, recent searches, and matching products. Autocomplete lets you seamlessly integrate data from third-parties.

Consider these features for a foundational autocomplete experience:

  • Responsiveness and accessibility. The autocomplete menu needs to be delightful and accessible on any device. With Autocomplete, you can add keyboard navigation and shortcuts.
  • Trending searches. Use Algolia’s Query Suggestions to suggest popular searches. Add them to the autocomplete menu with the autocomplete-plugin-query-suggestions plugin
  • Recent searches. Use the autocomplete-plugin-recent-searches plugin to add searches from the user’s history to the autocomplete menu.
  • Recently viewed items. Similar to recent searches, you can show products that users recently looked at on your site.
  • Multiple search types. Show suggestions and matching content from various categories. The autocomplete menu should update dynamically, based on the type of search. For example, when entering a product number, show only the matching product from your catalog and hide search suggestions. The UI should support these different search types:

    • Brand
    • Products
    • FAQ
    • Product number (SKU)
    • Keywords (search suggestions)

Next steps

Start by adding search suggestions for an essential autocomplete experience. You can then add related categories and recent searches to add more scope and personalized relevance to your autocomplete experience. Integrate search results, product categories, and search suggestions in a federated search.

Check out more examples of Autocomplete in Algolia’s showcase on GitHub.

Did you find this page helpful?