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

Is your website search user interface (UI) easy to use, or is it a usability work in progress that requires moments of extreme patience? Does your overall user experience (UX) with search get rave reviews?

Putting your search UI under the microscope, and then streamlining your website search user flows where needed for your unique use case, is one of the most underrated but powerful things you can do to promote your online business.

Granted, some companies — from startups to established behemoths — pour significant effort and resources into web development and applying UI design skills for their target audience. Some go so far as to create and analyze complicated user personas. But even the most well-thought-out search user interface design can unintentionally throw people for a loop. And due to poor search-template design thinking, misguided developer decisions, and outdated technology, certain problems crop up in site search interfaces.

Search: not “set and forget”

In the dynamic world of online commerce, continual monitoring and hands-on tweaking of what’s going on with your search features could turn out to be insightful; maybe even transformational.

Whether you’re running a small ecommerce shop, managing a giant marketplace, or maintaining a publishing or enterprise website, well-executed site search design work is your best friend.

If your site has overwhelming amounts of content, for instance, rather than forcing visitors to comb through your page directory, you can forcefully aid them in heading straight to relevant items. When your target end users can avoid pain points and find what they need, the battle is half won.

Common search UI problems

How can you ensure a good search experience, which, while rewarding your users, can be instrumental in bumping up your customer retention and conversion?

Here’s a look at some real-world interaction design roadblocks — issues with search information architecture that can be addressed by streamlining your UX design process. 

Tip-offs of a faulty design process include:

People can’t find your search box (or magnifying glass)

It’s not large enough, or it’s not in a prominent place on your home page, and it’s not consistently displayed in the same location on lower-level pages. Now what?

The look/feel of your search doesn’t match the rest of the site

Why? Maybe a developer was tempted to create “good UX” by tacking bells and whistles on to the search button to make the visual design “exciting.” Maybe their idea was to add pop-up animation and wacky typography. However, these distractions are interfering with the completion of effective search user journeys.

Search results are not easily skimmable

You dutifully present your searchers with dense text blocks and long descriptions. Unfortunately, though you’ve tried to give them the details, people can’t easily figure out which relevant results they should click by looking at the mess. They need a way of zeroing in, and fast.

Searchers can strike out with “no results”

If their search terms aren’t quite right or incorrectly entered, they could get no matching results. It happens. However, you don’t have to “terminate” their search and leave them hanging in the void. You can instead use that space to provide shortcuts to alternative items they might like, recent searches made by other people on your site, or promotions.

They aren’t shown associated content

Let’s say there’s an interesting blog post that promotes the product they just searched for, but when they type the product name in the search field, they’re shown only the product page as relevant information.

Federated search would solve that problem. It surfaces multiple types of content, such as product-related editorial, FAQs, product-use guides, tutorials. You can label each type of search results (e.g., “Products” and “How-to videos”). Federated search also lets you address each user’s needs by fine-tuning the relevance of their results.

There’s no helpful microcopy

Microcopy is bits of text that can help website users navigate the search interface or effectively generate search results. If it’s missing from a critical search juncture, your search users could struggle to get on track.

You don’t offer suggested search and autocomplete

These two responsive design features are generally present in most modern search experiences, where users expect their assistance, for example if they enter typos.

Your search functionality is not accessible to everyone

People have different ability levels in terms of using site search, among other website features. Due to impediments like not having clear eyesight, some of them need a little assistance. You want your UX design to be easily usable by all your visitors, and you can enhance it with established guidelines.

Why does glitch-free search matter so much?

All of these scenarios can be iffy for a business, especially considering that 43% of website visitors go immediately to the search bar. And then, these search-focused folks are 2–3 times more likely to convert. So from the minute they decide to search, you don’t want to frustrate them.

Never fear: you can make your search UX seamless for your information seekers, which means they stay productively engaged in the process.

Best practices for super site search 

Here are some of our favorite proven ways to create user-pleasing, excellent search:

Evaluate your search bar

When it comes to search, user research has found that people are accustomed to industry-standard layouts and having everything work the way they expect. For instance, they expect to be able to easily spot the search icon or text-entry bar.

Get your design team stakeholders together, take a look at the search bar on your home page, and ask these questions:

Is it aesthetically pleasing?

A good search interface is a thing of beauty: the more attractive and inviting it looks, the more likely it is to entice people on the site to check it out. 

Is the search box prominently placed?

The conventional wisdom: make your search bar or magnifying glass icon easy to see on your home page, whether it works best at the bottom center, top center, or upper (or lower) right corner of the page. Then, for consistency, keep it in the same location on all your pages.

Is it eye-catching?

If your site visitors are forced to start their search by first searching around for your search bar or magnifying glass icon, your UI needs some tweaks.

You don’t have to go overboard with a flashing red rectangle, but you want an input field that also works with your site’s overall look and feel. Plus, you want one that also shows up on a tiny screen so your mobile search users can access it fast without squinting.

Is the text-entry space long enough for an average query?

Most searchers won’t enter super long phrases, but if they do happen to be in a wordy mood, you don’t want to stand in their way.

Does it work?

Optimizing your search user interface is not simply ticking off visual-element checkboxes to make it prettier and then doing a quick handoff to production. In terms of user-centered design principles, it’s also making the UI elements 100% functional — that is, straightforward and a joy to encounter. For instance, it quickly provides relevant search results.

Optimize how people’s search results appear

Get out your bag of digital design tools: here are some secrets of fixing the appearance of search-page items.

Decide between grid and list view

According to UX research, for some sites, it makes sense to use a list view and for others, a grid view is the obvious choice.

Ecommerce websites with colorful, clear item images typically go with a grid view to show off their products, while those with more spec-heavy items (e.g., computers and computer parts, academic work), use a list view. You can also simply let users choose the view they want.

Eyebuydirect’s ecommerce grid view, for instance, looks like this:

Enhance skimmability

Ever had your eyes glaze over from being confronted by a thick fog of wordy search results? It doesn’t take UX design skills or usability testing to figure out that people need the search experience to feel easy; they just want to identify their desired information or product-related options.

To that end, you can:

  • Make titles and product descriptions concise
  • Below the title or item name, include a short snippet or preview of the content
  • Add enough white space between items and text blocks
  • Highlight entered keywords in search-result items
  • For your mobile users: Look at how search results appear on different mobile devices, such as the limited screen space on the latest Apple iPhones and other models. Visually differentiating and labeling different types of search results content can help your mobile users better skim the content. Your graphic design should be compatible with device restrictions

Place information where people will see it

Studies show that to efficiently gather information, people read web page content in different patterns. Two examples:

  • On pages without headers, subheaders, and bullets, users scan in an F-shaped pattern, focusing on the top couple of sections and the left side of the page
  • In the layer-cake pattern, they focus on headings and subheadings before the body text

The problem-solving takeaway is that you can align the look of search results with the way your users read. By figuring out which reading patterns your visitors typically use, you can see where on your pages their eyes are drawn. Those spots are the places for key details like titles, snippets, and descriptions.

Use contextual search snippets

At first glance, your site visitors may wonder how relevant their search results are to their needs. This is where contextual search snippets can play a role: emphasis of excerpts that indicate how a search result matches their query. This is easily achieved through methods like placing bold fonts on the key terms in the search results.

Here’s how the CDC uses contextual snippets:

The use of bold on key terms, plus color coding of different types of text, gives readers instant context so they can easily click and go.

Guide searchers with microcopy

If something related to search is at all ambiguous, add directional copy, hints, or labels to clarify. 

Search-prompt ideas are one example. Here’s how Birchbox uses microcopy, suggesting popular search queries that could inspire visitors to jump in:

Provide search filtering options

Like microcopy, filters can be used to nudge people toward search queries you know will provide ample results. Filters also narrow user searches based on predefined categories. 

Here’s how Rugs.com filters its many floor coverings:

Facilitate advanced search with facets

Faceted search is another form of filtering. Facets differ from filters in that they are dynamic; they can change based on the context of the query.

Yelp is a good example of a site that effectively uses faceted search in its design portfolio. Whether you’re looking for a restaurant, plumber, or mechanic, it’s easy to narrow your search with the drop-down menus at the top of the screen; you can then drill in to a search results page based on the provider’s distance from you, business hours, and other variables.

Provide suggested search and autocomplete

Every site-search user interface can help users by offering relevant suggestions and letting users see their search results “evolve” as they type. And autocomplete (also referred to as autosuggest) keeps things moving by noting perceived spelling errors in addition to seemingly trying to read your mind. 

Here’s how Coursera generates search suggestions as you type:

Always provide (some type of) results 

“Oh noo! We couldn’t find any results.”

When it comes to UX/UI web design, you never want your site visitors to see a downer message like this; it’s akin to “You’re out of luck; go away and try another site.” And this unfortunate conclusion may only be appearing because they misspelled a word in their query, or maybe they used a synonym that your search engine couldn’t figure out (e.g., “joggers” instead of “sweats”).

Fortunately, there are several ways you can replace a dead-end search results message with constructive ideas. And it’s certainly worth doing in your UI design process, as it could go a long way toward keeping people on your site and ultimately improving your conversion rate.

The Dior ecommerce site turns the “No results” bummer into a potential win for its shoppers by suggesting lucrative bestsellers:

Of course, you don’t have to wait for your searchers to strike out to politely promote items. Before visitors even look for the search bar, you can suggest intriguing trending content that could pique their interest, as Medium does:

Reward your searchers, boost your KPIs

With careful analysis of your search bar, how your search results appear, and what information your target users see, you can create winning UI design that powers your website or mobile-app search revenue to new milestones. 

Want a partner in search user experience design, one who can help you provide all the industry-standard UI design patterns and features your customers expect? Check out the Algolia search API. We have the proven skill set to turn your user search experience into nothing short of magic. Let’s get started fine-tuning and optimizing every aspect of your search UX today.

About the author
Catherine Dee

Search and Discovery writer

linkedin

Is your site search 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 search performing as well as it could?

Recommended Articles

Powered byAlgolia Algolia Recommend

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

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

The (almost) ultimate guide to site search
product

Ivana Ivanovic

Senior Content Strategist

5 Best Practices for Site Search
product

Matthieu Blandineau

Sr. Product Marketing Manager