Search by Algolia
How personalization boosts customer engagement
e-commerce

How personalization boosts customer engagement

You land on your favorite retailer’s website, where everything seems to be attractively arranged just for you. Your favorite ...

Jon Silvers

Director, Digital Marketing

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?
e-commerce

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?

There is such tremendous activity both on and off of retailer websites today that it would be impossible to make ...

Catherine Dee

Search and Discovery writer

8 ways to use merchandising data to boost your online store ROI
e-commerce

8 ways to use merchandising data to boost your online store ROI

New year, new goals. Sounds positive, but looking at your sales data, your revenue and profit aren’t so hot ...

John Stewart

VP, Corporate Communications and Brand

Algolia DocSearch + Astro Starlight
engineering

Algolia DocSearch + Astro Starlight

What is Astro Starlight? If you're building a documentation site, your content needs to be easy to write and ...

Jaden Baptista

Technical Writer

What role does AI play in recommendation systems and engines?
ai

What role does AI play in recommendation systems and engines?

You put that in your cart. How about this cool thing to go with it? You liked that? Here are ...

Catherine Dee

Search and Discovery writer

How AI can help improve your user experience
ux

How AI can help improve your user experience

They say you get one chance to make a great first impression. With visual design on ecommerce web pages, this ...

Jon Silvers

Director, Digital Marketing

Keeping your Algolia search index up to date
product

Keeping your Algolia search index up to date

When creating your initial Algolia index, you may seed the index with an initial set of data. This is convenient ...

Jaden Baptista

Technical Writer

Merchandising in the AI era
e-commerce

Merchandising in the AI era

For merchandisers, every website visit is an opportunity to promote products to potential buyers. In the era of AI, incorporating ...

Tariq Khan

Director of Content Marketing

Debunking the most common AI myths
ai

Debunking the most common AI myths

ARTIFICIAL INTELLIGENCE CAN’T BE TRUSTED, shouts the headline on your social media newsfeed. Is that really true, or is ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

How AI can benefit the retail industry
ai

How AI can benefit the retail industry

Artificial intelligence is on a roll. It’s strengthening healthcare diagnostics, taking on office grunt work, helping banks combat fraud ...

Catherine Dee

Search and Discovery writer

How ecommerce AI is reshaping business
e-commerce

How ecommerce AI is reshaping business

Like other modern phenomena such as social media, artificial intelligence has landed on the ecommerce industry scene with a giant ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

AI-driven smart merchandising: what it is and why your ecommerce store needs it
ai

AI-driven smart merchandising: what it is and why your ecommerce store needs it

Do you dream of having your own personal online shopper? Someone familiar and fun who pops up every time you ...

Catherine Dee

Search and Discovery writer

NRF 2024: A cocktail of inspiration and innovation
e-commerce

NRF 2024: A cocktail of inspiration and innovation

Retail’s big show, NRF 2024, once again brought together a wide spectrum of practitioners focused on innovation and transformation ...

Reshma Iyer

Director of Product Marketing, Ecommerce

How AI-powered personalization is transforming the user and customer experience
ai

How AI-powered personalization is transforming the user and customer experience

In a world of so many overwhelming choices for consumers, how can you best engage with the shoppers who visit ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show
algolia

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show

Get ready for an exhilarating journey into the future of retail as Algolia takes center stage at the NRF Retail ...

John Stewart

VP Corporate Marketing

How to master personalization with AI
ai

How to master personalization with AI

Picture ecommerce in its early days: businesses were just beginning to discover the power of personalized marketing. They’d divide ...

Ciprian Borodescu

AI Product Manager | On a mission to help people succeed through the use of AI

5 best practices for nailing the ecommerce virtual assistant user experience
ai

5 best practices for nailing the ecommerce virtual assistant user experience

“Hello there, how can I help you today?”, asks the virtual shopping assistant in the lower right-hand corner ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Add InstantSearch and Autocomplete to your search experience in just 5 minutes
product

Add InstantSearch and Autocomplete to your search experience in just 5 minutes

A good starting point for building a comprehensive search experience is a straightforward app template. When crafting your application’s ...

Imogen Lovera

Senior Product Manager

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