How to streamline your search UX design

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.