Search by Algolia
Building a performant search bar in Nuxt with Algolia & Storefront UI
engineering

Building a performant search bar in Nuxt with Algolia & Storefront UI

In today's highly competitive e-commerce landscape, providing customers with a seamless and efficient search experience can make all ...

Jakub Andrzejewski

Senior Developer and Dev Advocate at Vue Storefront

How to use AI to build your business
ai

How to use AI to build your business

The world of technology is constantly evolving with generative Artificial Intelligence (AI) currently leading the charge. We’re suddenly surrounded ...

Abhijit Mehta

Director of Product Management

Haystack EU 2023: Learnings and reflections from our team
ai

Haystack EU 2023: Learnings and reflections from our team

If you have built search experiences, you know creating a great search experience is a never-ending process: the data ...

Paul-Louis Nech

Senior ML Engineer

What is k-means clustering? An introduction
product

What is k-means clustering? An introduction

Just as with a school kid who’s left unsupervised when their teacher steps outside to deal with a distraction ...

Catherine Dee

Search and Discovery writer

Feature Spotlight: Synonyms
product

Feature Spotlight: Synonyms

Back in May 2014, we added support for synonyms inside Algolia. We took our time to really nail the details ...

Jaden Baptista

Technical Writer

Feature Spotlight: Query Rules
product

Feature Spotlight: Query Rules

You’re running an ecommerce site for an electronics retailer, and you’re seeing in your analytics that users keep ...

Jaden Baptista

Technical Writer

An introduction to transformer models in neural networks and machine learning
ai

An introduction to transformer models in neural networks and machine learning

What do OpenAI and DeepMind have in common? Give up? These innovative organizations both utilize technology known as transformer models ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What’s the secret of online merchandise management? Giving store merchandisers the right tools
e-commerce

What’s the secret of online merchandise management? Giving store merchandisers the right tools

As a successful in-store boutique manager in 1994, you might have had your merchandisers adorn your street-facing storefront ...

Catherine Dee

Search and Discovery writer

New features and capabilities in Algolia InstantSearch
engineering

New features and capabilities in Algolia InstantSearch

At Algolia, our business is more than search and discovery, it’s the continuous improvement of site search. If you ...

Haroen Viaene

JavaScript Library Developer

Feature Spotlight: Analytics
product

Feature Spotlight: Analytics

Analytics brings math and data into the otherwise very subjective world of ecommerce. It helps companies quantify how well their ...

Jaden Baptista

Technical Writer

What is clustering?
ai

What is clustering?

Amid all the momentous developments in the generative AI data space, are you a data scientist struggling to make sense ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is a vector database?
product

What is a vector database?

Fashion ideas for guest aunt informal summer wedding Funny movie to get my bored high-schoolers off their addictive gaming ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Unlock the power of image-based recommendation with Algolia’s LookingSimilar
engineering

Unlock the power of image-based recommendation with Algolia’s LookingSimilar

Imagine you're visiting an online art gallery and a specific painting catches your eye. You'd like to find ...

Raed Chammam

Senior Software Engineer

Empowering Change: Algolia's Global Giving Days Impact Report
algolia

Empowering Change: Algolia's Global Giving Days Impact Report

At Algolia, our commitment to making a positive impact extends far beyond the digital landscape. We believe in the power ...

Amy Ciba

Senior Manager, People Success

Retail personalization: Give your ecommerce customers the tailored shopping experiences they expect and deserve
e-commerce

Retail personalization: Give your ecommerce customers the tailored shopping experiences they expect and deserve

In today’s post-pandemic-yet-still-super-competitive retail landscape, gaining, keeping, and converting ecommerce customers is no easy ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Algolia x eTail | A busy few days in Boston
algolia

Algolia x eTail | A busy few days in Boston

There are few atmospheres as unique as that of a conference exhibit hall: the air always filled with an indescribable ...

Marissa Wharton

Marketing Content Manager

What are vectors and how do they apply to machine learning?
ai

What are vectors and how do they apply to machine learning?

To consider the question of what vectors are, it helps to be a mathematician, or at least someone who’s ...

Catherine Dee

Search and Discovery writer

Why imports are important in JS
engineering

Why imports are important in JS

My first foray into programming was writing Python on a Raspberry Pi to flicker some LED lights — it wasn’t ...

Jaden Baptista

Technical Writer

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

Great search is so much more than just a box on the homepage that your web developer keeps insisting you include. Properly designed and optimized, the user interface can be a powerful portal that connects your users to their needs—even ones they have yet to discover. A well-designed search interface is a great way to help users stay engaged and easily find what they’re looking for.

 

Why search UI design matters

Though today most sites have a search bar, many don’t provide a holistic search experience. Great search extends beyond the search bar to include a range of functionalities, the relevance of the results, and the design. So why does careful attention to your search UI matter?

Well, the search interface may be the first thing your users interact with on your site. It may shape their impression of your offerings, their perception of your brand, and their overall experience on your site. Just look at the following stats:

Search Ui matters

Additionally, users who search are 200% more likely to convert than those who browse. If your interface is hard to use and serves unhelpful results, your site can’t reap the benefits of search. Optimizing the functionality and UI of your site’s search leads to more satisfied visitors and drives improvements to conversions, engagements, and stickiness.

Related Links –

  1. Learn about all the pre-built UI components from Algolia.
  2. UI Starter templates from Algolia Code-exchange.
  3. Pre-built UI design kits for react, angular, vue and mobile.

7 examples of stellar search UIs

There are a number of search UI components that you can fine-tune to provide a helpful and engaging experience. The design and capabilities of the search bar, the layout and features of the search results page, search filters and facets, and more can all be optimized for your specific use case. Let’s look at 8 sites that have customized the search UI to best serve their users.

 

1. Birchbox — Helpful hints and suggestions with microcopy

Microcopy is the term for the brief and helpful text around the site that helps users navigate and use the interface. Microcopy improves site usability by ensuring users understand the intent of different search components.

Birchbox uses microcopy within the search bar to communicate to users that searching for both brands and products will yield results. The site also uses microcopy for search suggestions just below the search bar. This can be a strategic way for companies to drive business goals, by highlighting target brands in a place that’s hard for customers to miss.

Birchbox uses microcopy
 Note – A developer’s guide to create animated placeholder text

 

2. Cartier — Consistent search bar placement

For some sites, navigation is the primary way to highlight offerings. Even so, search shouldn’t be neglected. Although search may be de-emphasized in placement and styling, as it is on Cartier’s site, it’s still important to place the search bar somewhere users are accustomed to finding it. Cartier’s search bar is small in size with minimal contrast, but regardless of the page, it can be found in the top-right corner, right where users expect to find it:

Cartier - consistent search bar placement

 

3. ManoMano — Autocomplete or query suggestions

Autocomplete or query suggestions, also called predictive search or autosuggest, are search recommendations given to the user in real time as they type. Contextually related to the user’s query and/or popular queries on the site, these suggestions intend to meet user needs by speeding up the search process and increase click-through. As a user types in ManoMano’s search bar, they are served both specific product suggestions as well as broader category suggestions. To help users quickly choose the best option for them, differences between the suggestions are shown in bold.

ManoMano - autocomplete and query suggestion
Note – A developer’s guide to create predictive search suggestions.

4. JB Hi-Fi — Instant filtering from the search bar

Search filters and facets help users refine their intent as they navigate your site. Facet filters, usually shown on the search page, help users narrow down their search with predefined categories. These are extremely useful for large catalogs or catalogs where products have many different attributes. To guide users, JB Hi-Fi leverages facets with a drop down from the search bar. As the customer searches for an item with a broad category, like TVs, filter categories appear which help the user specify their search from the beginning of the search experience. 

JB Hi-Fi — Instant filtering from the search bar
Note – A developer’s guide to create auto selected facets for ecommerce stores

5. Birchbox — Comprehensive results with federated search

With federated search, you can serve users diverse results such as products, documentation, product guides, articles, and more in an easy-to-use interface. This leads to a number of benefits for the company, including better customer engagement and increased conversions. 

With only a few keystrokes on the Birchbox site, a customer is presented with relevant products, top brands, useful categories, and related articles. This creates a more comprehensive search experience, which can greatly decrease the search time. Federated search can also strengthen the customer’s perception of the brand as the level of thought behind the curation is evident to the user. 

Birchbox — Comprehensive results with federated search
Note – A developer’s guide to create Autocomplete experience with federated search

 

6. National Geographic Expeditions — Facets for a dynamic browsing experience 

Though facets can be great for narrowing search results, they also provide a powerful basis for an exploratory navigation experience. National Geographic Expeditions leverages facets for a unique browsing experience that guides uses through content without a search bar. On the expeditions homepage, users are able to search for trips by destination, trip type, and departure month. 

On the results page, they can further refine their search by facets such as price, trip length, interests, and more. These facets are easily adjustable and don’t require users to start their search from scratch. All of this can be done without users ever typing in a search bar. Ultimately, your search UI should be designed in a way that best speaks to the needs of your users and the experience you want to curate for them.

Facets for a dynamic browsing experience

 

7. Under Armour — Useful “No Results” page

Generally, “no results” pages are UX dead ends that can be avoided by optimizing your search. Sometimes, though, users search for products or content that are irrelevant to your website or they type incomprehensible search queries that typo tolerance systems cannot recover. When this happens, it’s important to provide a pathway for users to quickly jump back into their search and discovery process. 

On Under Armour’s site, if this situation occurs, users are shown search recommendations that are relevant to their original query as well as specific product recommendations. Although their original query may have been unsuccessful, the search subtly directs them to discovering something new they might be interested in:

Under Armour — Useful “No Results” page

 

Design a search UI that smoothly guides users to their needs

When designing a search UI, you must consider every step of the user journey and exploration process. To provide a level of service that your users expect, you’ll need a search as a service partner that can help provide all of the industry standard capabilities in a flexible and customizable way. Read our e-book “Search Beyond the Box” to learn how you can start building a great search design for your users.

Related Links –

  1. Learn about all the pre-built UI components from Algolia.
  2. UI Starter templates from Algolia Code-exchange.
  3. Pre-built UI design kits for react, angular, vue and mobile.
About the author
Xabier Ormazabal

VP of Product Marketing

linkedin

Is your site performing as well as it could?

Assess your search experience in less than 5 minutes and get your free report with recommendations.

Grade my search
 Is your site performing as well as it could?

Recommended Articles

Powered byAlgolia Algolia Recommend

The 3 key search box UX design elements
ux

Louise Vollaire
Alexandra Prokhorova

Louise Vollaire &

Alexandra Prokhorova

5 Best Practices for Site Search
product

Matthieu Blandineau

Sr. Product Marketing Manager

How to streamline your search UX design
ux

Catherine Dee

Search and Discovery writer