Search by Algolia
Introducing new developer-friendly pricing
algolia

Introducing new developer-friendly pricing

Hey there, developers! At Algolia, we believe everyone should have the opportunity to bring a best-in-class search experience ...

Nick Vlku

VP of Product Growth

What is online visual merchandising?
e-commerce

What is online visual merchandising?

Eye-catching mannequins. Bright, colorful signage. Soothing interior design. Exquisite product displays. In short, amazing store merchandising. For shoppers in ...

Catherine Dee

Search and Discovery writer

Introducing the new Algolia no-code data connector platform
engineering

Introducing the new Algolia no-code data connector platform

Ingesting data should be easy, but all too often, it can be anything but. Data can come in many different ...

Keshia Rose

Staff Product Manager, Data Connectivity

Customer-centric site search trends
e-commerce

Customer-centric site search trends

Everyday there are new messages in the market about what technology to buy, how to position your company against the ...

Piyush Patel

Chief Strategic Business Development Officer

What is online retail merchandising? An introduction
e-commerce

What is online retail merchandising? An introduction

Done any shopping on an ecommerce website lately? If so, you know a smooth online shopper experience is not optional ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

5 considerations for Black Friday 2023 readiness
e-commerce

5 considerations for Black Friday 2023 readiness

It’s hard to imagine having to think about Black Friday less than 4 months out from the previous one ...

Piyush Patel

Chief Strategic Business Development Officer

How to increase your sales and ROI with optimized ecommerce merchandising
e-commerce

How to increase your sales and ROI with optimized ecommerce merchandising

What happens if an online shopper arrives on your ecommerce site and: Your navigation provides no obvious or helpful direction ...

Catherine Dee

Search and Discovery writer

Mobile search UX best practices, part 3: Optimizing display of search results
ux

Mobile search UX best practices, part 3: Optimizing display of search results

In part 1 of this blog-post series, we looked at app interface design obstacles in the mobile search experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 2: Streamlining search functionality
ux

Mobile search UX best practices, part 2: Streamlining search functionality

In part 1 of this series on mobile UX design, we talked about how designing a successful search user experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 1: Understanding the challenges
ux

Mobile search UX best practices, part 1: Understanding the challenges

Welcome to our three-part series on creating winning search UX design for your mobile app! This post identifies developer ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Teaching English with Zapier and Algolia
engineering

Teaching English with Zapier and Algolia

National No Code Day falls on March 11th in the United States to encourage more people to build things online ...

Alita Leite da Silva

How AI search enables ecommerce companies to boost revenue and cut costs
ai

How AI search enables ecommerce companies to boost revenue and cut costs

Consulting powerhouse McKinsey is bullish on AI. Their forecasting estimates that AI could add around 16 percent to global GDP ...

Michelle Adams

Chief Revenue Officer at Algolia

What is digital product merchandising?
e-commerce

What is digital product merchandising?

How do you sell a product when your customers can’t assess it in person: pick it up, feel what ...

Catherine Dee

Search and Discovery writer

Scaling marketplace search with AI
ai

Scaling marketplace search with AI

It is clear that for online businesses and especially for Marketplaces, content discovery can be especially challenging due to the ...

Bharat Guruprakash

Chief Product Officer

The changing face of digital merchandising
e-commerce

The changing face of digital merchandising

This 2-part feature dives into the transformational journey made by digital merchandising to drive positive ecommerce experiences. Part 1 ...

Reshma Iyer

Director of Product Marketing, Ecommerce

What’s a convolutional neural network and how is it used for image recognition in search?
ai

What’s a convolutional neural network and how is it used for image recognition in search?

A social media user is shown snapshots of people he may know based on face-recognition technology and asked if ...

Catherine Dee

Search and Discovery writer

What’s organizational knowledge and how can you make it accessible to the right people?
product

What’s organizational knowledge and how can you make it accessible to the right people?

How’s your company’s organizational knowledge holding up? In other words, if an employee were to leave, would they ...

Catherine Dee

Search and Discovery writer

Adding trending recommendations to your existing e-commerce store
engineering

Adding trending recommendations to your existing e-commerce store

Recommendations can make or break an online shopping experience. In a world full of endless choices and infinite scrolling, recommendations ...

Ashley Huynh

Looking for something?

The 3 key search box UX design elements
facebookfacebooklinkedinlinkedintwittertwittermailmail

Marketers and website owners often overlook the design of their search interface at the expense of a good search experience. A clunky or non-intuitive search experience leaves users frustrated and more likely to move on to a competitor’s site to find what they need. For media sites, e-commerce retailers, and every site in between, it is imperative to fine-tune every part of the browsing experience, including the search bar. 

Why the search bar matters

The search bar is often the first interaction a user has with a website. In fact, studies have shown that about 43% of website visitors go immediately to the search bar and that these searchers are 2-3 times more likely to convert.

The search bar can provide a sort of conversational experience for users where every keystroke is effectively a two-way discussion with the system. Users shouldn’t have to reverse engineer your interface to make searches. Rather, the process should feel like a natural human experience that can quickly guide them to what they’re looking for. It’s imperative that your website provides a seamless user experience for these customers. 

How to create the best search bar design

There are three key aspects to the search bar ux design process: look, location, and function. All of these aspects work together to form a more clear and efficient user experience. 

1. The look of the search bar

The look helps users form a first impression of the search bar — and often your entire website. It helps them understand the purpose and use cases of the system and convinces them to start using it and exploring content. It’s important to make sure that the design is clear and logical without sacrificing functionality:

    • Keep it simple and use common design patterns. Users come to the site expecting the search bar to look and function in predictable ways. Don’t overdesign your search bar by overloading it with too many fields for the user to fill out. A single field that users can type into will do. A simple, clean design will make the search bar easy to find and use.
    • Use a magnifying glass icon. Modern users immediately understand the magnifying glass as the universal sign for search. You can quickly draw their attention by using design patterns they recognize.
    • Consider the field size. The search input and font size should accommodate the standard user query length — typically about 27 characters. Make sure to test this on various devices, including different mobile devices.
    • Use microcopy. Without prompting, users will enter all sorts of questions into your search bar. If you’re expecting them to search for specific types of content, then tell them. Simple prompts within the search bar such as “search for products,” “what do you want to learn,” or “find the perfect destination “ can help guide your users and shape their expectations of what they can find.

https://www.algolia.com/doc/guides/solutions/gallery/animated-placeholder/

  • Keep the last query in the search bar. When users are looking at a search results page, it can be helpful for them to reference their past search query. In the case that they didn’t find exactly what they’re looking for, they can then quickly go back and revise the search.
  • Make the search bar visible. Users shouldn’t have to search for the search bar. The search bar needs to be large enough so it isn’t obscured by the rest of the site. Consider the color and visual contrast relative to the rest of the site so that it doesn’t accidently blend into other components and get lost.

simple search bar design + magnifying glass icon

 

2. Location of the search bar

Users should be able to navigate to search regardless of where they are on your site. Consistency of the placement allows them to browse through different pages without getting lost. Here are some tips to remember:

  • Be strategic in search bar placement. The more prominent the search bar, the more likely users are to use it. Users typically expect to find a button or icon for search on the top-left corner or top-right corner of the webpage. Depending on the use case, however, you may choose to make the search bar even more prominent. Whatever you do, don’t hide it!
  • Put it in the same place on every page. Regardless of the context of the page, the search bar should always be available. And when they navigate to a different page, the search bar should be in the same place as the last time they used it to ensure that they can quickly get back to their exploration process. Consistency is key as curious users will want to jump between different types of content, and the search experience should help them do so.

 

3. Functions and capabilities of the search bar

Ultimately, the function and capabilities of the search bar connect users to the things they’re looking for. Make sure your search bar not only provides the functions users expect, but goes above and beyond to offer a robust experience that promotes search and discovery:

  • Use query suggestions and autocomplete. Users do not always immediately know what to search for or what your offerings are. With query suggestions, you can recommend queries that are known to provide good results to users as they begin to type in the search bar. It can also help nudge them toward executing searches that align with your strategic business goals and keep them away from the dreaded “no results” page.

query suggestions in action
https://www.algolia.com/doc/guides/solutions/gallery/predictive-search-suggestions/

  • Tolerate and autocorrect typos. While users are accustomed to search systems, they often misspell words in the queries. The system should be capable of returning results despite typos, correcting errors where possible or necessary, and making suggestions as to alternatives.
  • Display results as the user types. Instantly showing users content and images as they type helps them stay engaged and ensures they understand how the system responds to their queries. This increases the chance that they continue their exploration and find what they’re looking for.
  • Provide robust results with federated search. Federated search interfaces can pull results from your whole site, including diverse microsites and databases. This means your users can have access to guides, pdfs, products, and more with the power of one search.
  • https://www.algolia.com/doc/guides/solutions/gallery/federated-search/

  • Cater to all of your users with accessible search design. Lastly, it’s important to consider all of the users who may utilize your search. Is your design accessible? For example, can a user who does not use a mouse still navigate search through keyboard? Consider usability and accessibility. 

search results being displayed as the user types

 

How to implement a great search UX

Building a search bar means going above and beyond user expectations. You need a search as a service provider that offers robust features and opportunities to tweak the search to your business use case. Read our e-book “Search and the user-business relationship” and learn how understanding your users can help you drive search improvements and tailor the search experience.

About the authors
Louise Vollaire

Product Marketing Manager

linkedin
Alexandra Prokhorova

Product Designer

medium

Building a great mobile search experience

Best practices in design and functionality.

Get my eBook
Ebook
Ebook

Recommended Articles

Powered byAlgolia Algolia Recommend

7 examples of great site search UI
ux

Xabier Ormazabal

VP of Product Marketing

How to streamline your search UX design
ux

Catherine Dee

Search and Discovery writer

5 Best Practices for Site Search
product

Matthieu Blandineau

Sr. Product Marketing Manager