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:

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.

 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:

 

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.

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. 

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. 

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.

 

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:

 

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.