In this blog:

• Common search UX problems
• Leverage the power of analytics
• Implement personalized search
• Use fuzzy search and intelligent suggestions
• Power up your search UX

Is the search user experience (UX) on your website a joy for visitors or does it frustrate them to no end and possibly drive them to competitors?

A high percentage of website visitors go straight to the search bar when they arrive, as they know exactly what they want and just need to find it. Other visitors may opt to do a search later, after browsing.

That means effective search functionality is a must for online businesses that want to grow. Whether you have a budding niche ecommerce website or you’re running a large marketplace site, enhancing your search UX is a powerful way to improve your shopper engagement and bolster your bottom line.

Common search UX problems

If you’ve ever tried to search on an ecommerce website and come up short or exasperated, you understand that even the best-laid UX plans may fail to have the envisioned impact. Design and implementation issues can result in customer dismay.

What are some of the main search UX problems that crop up on companies’ websites? These problems and best practices can help you create an online search experience that works well for your shoppers every time.

Your search bar is not quite right

The problem: If your search bar is not in a prominent location on your home page, not consistently in the same place on all website pages, too small to see without squinting (on a phone), or all of the above, some of your visitors are likely to get annoyed.

Best practice: make over your search bar

As the tool shoppers rely on to find information fast, a well-designed search bar can make or break your UX.

• Place it in a prominent location. The upper right corner or top center of the page is standard.

Here’s ecommerce giant Alibaba’s version:

• Make the placement consistent: Put it in the same spot on all your pages so shoppers intuitively know where to find it.
• Make the text-entry field wide enough to accommodate typical queries without truncating text (27–30 characters is optimal). In addition, the search box size should responsively adjust for different devices and screen sizes.
• Include placeholder text, such as “electric scooter” above, to guide shoppers on what they could search for and how to do it efficiently. Use clear descriptions such as “Search for products, categories, or brands.” You can also offer searchers ideas, for instance, “Try ‘running shoes’”.

An amateur look and feel

The problem: Maybe a designer was tempted to “upgrade” your search by tacking on some attention-getting bells and whistles — they added pop-up animation or wacky typography. That jazzy look and feel isn’t consistent with the professional, straightforward experience on the rest of the site, and it’s proving to be a distraction that’s hampering people’s ability to quickly find what they need.

Best practice: Keep it simple

Your goal isn’t to entertain people; you want to give them the shortest path to buying. That means focusing on functionality over flashiness. If your search bar is a sight to behold, and not in a good way, get back to basics.

Inadequate sorting

The problem: Your search often returns an abundance of results, which is a good thing. However, visitors are easily overwhelmed because there’s no way to narrow the parameters, such as to show only items in a certain size.

Best practice: provide robust sorting

Sorting options are essential for helping visitors prioritize their search results based on their preferences and keep the volume of results reasonable. Here’s how to enable effective sorting:

• Set a default sorting option. Relevance is a popular default: that way, the majority of shoppers will be shown some potentially useful results without having to sort manually.
• Use common sorting criteria. Let shoppers customize their search results according to what they value most, such as lower prices.
• Make sure sorting works well on all device types: desktop computers, tablets, and smartphones.
• Label options, for example "Sort by price (low to high)".

By supplying handy search filters and facets you can:

• Let shoppers filter by attributes such as brand, price range, size, and color.
• Allow for multiple attribute selection through lists of check boxes.

Amazon lets shoppers sort by selecting check boxes, using sliders, and clicking buttons to define preferences for brands, prices, sizes, colors, and more:

Yelp uses faceted search with drop-down menus and other variables.

• Display the number of results for each selected filter so shoppers know the volume to expect.

Unskimmable search results

The problem: Shoppers are typically in a hurry, so they like to skim search results for what’s relevant. Dense text blocks and overly long item descriptions get in the way of that.

Best practice: Condense the text

Include all the right keywords but edit out what doesn’t matter as much; they can click if they want to learn more.

No search results

The problem: If your searchers run into a “No matching results” message — one that’s not even accompanied by similar suggested results — it doesn’t reflect well on you, and this dead end can understandably drive them away.

Best practice: Provide “positive” no-results messaging

Don’t just lament that “Oh noo! We couldn’t find any results.” Instead:

• Offer suggestions on retrying their search; for example, if they searched for “joggers”, suggest results that include “sweats”
• In case they misspelled something, offer similar correctly spelled queries to try
• List recent searches that other people have conducted
• Mention some popular things to search for

Lack of associated content

The problem: If visitors search but don’t see any related content, such as blog posts about an item they’d like to buy, they may be missing out on helpful information.

Best practice: Include all related content in search results

Are there any promotions, ebooks, video tutorials, reviews, or other info they should know about? Give them a heads up on everything that’s relevant.

Missing microcopy

The problem: There’s no microcopy, helpful mini text snippets. For example, if you’re about to enter your credit card number on a retail website, microcopy may assure you that the site is encrypted. With search, microcopy can help shoppers find their way through your interface, be alerted about perceived errors in query spelling, and get search ideas. If you don’t include it, shoppers may have trouble making buying decisions.

Best practice: add microcopy

Use text bits in your search interface, such as by giving people popular phrases to enter.

• Add short instructions to the search bar and filters.
• Use tooltips to provide guidance when people hover over elements such as filters.
• Place microcopy where shoppers will see it (like near the search bar).

Beauty retailer Birchbox does it this way:

Lack of autocomplete and suggested search

The problem: If your search doesn’t provide autocomplete and suggested search results, shoppers may need to endure the process of entering long queries — possibly replete with typos — before they can hit Enter. That’s likely to lead to frustration and make it evident that your search functionality is ancient.

Best practice: Use the power of suggestion

Add auto suggest and autocomplete to quickly steer shoppers to relevant results.

• Make real-time suggestions by immediately popping up feedback as someone is entering a query.

Coursera generates search suggestions as a visitor types, giving plenty of options:

• Display popular and trending searches, which may encourage shoppers to discover new desirable things. You can also suggest results based on the visitor’s browsing history or the page they’re on.
• Incorporate visual cues by placing icons next to suggestions to indicate the type of content (e.g., a product or a blog post).

Poor functionality for people with disabilities

The problem: If your search feature is not easily accessible for everyone, you’re creating a negative user experience that’s probably going to alienate some prospective customers.

Best practice: Ensure universal accessibility

Enhance accessibility for everyone by:

• Making searching keyboard-friendly for people who rely on keyboard navigation.
• Providing visual indicators, such as a magnifying glass in the search box, to convey where visitors are in your interface.
• Implementing keyboard shortcuts for common actions, such as starting a search and applying filters.
• Making your site compatible with screen readers. To assist visually impaired shoppers, use semantic HTML elements to provide meaningful structure and context for readers. Implement Accessible Rich Internet Applications (ARIA) labels and roles to enhance reader compatibility.

Leverage the power of analytics

Search analytics are essential for understanding shoppers’ behavior and continually improving your search UX. When you can identify how shoppers interact with the search interface, which items they click on, and what they do on their journeys across your site, you have the foundation for creating content they’ll find appealing.

• Use heat mapping: A heat map visually represents where shoppers have clicked the most while interacting within your interface, revealing areas of common interest. You can use the data you gather to optimize the layout and design of your search interface.

Here’s what a heat map might look like:

Choose a heat mapping tool you can integrate with your site that provides comprehensive data visualization.

• Track clicks: Knowing click-through rates will help you assess the effectiveness of your search and make data-driven improvements. Monitor which search results are getting clicks, then refine your search algorithm.
• Try customer journey mapping: To identify pain points, track from when people enter a search query to their finding desired results or exiting search. You’ll discover areas where shoppers may struggle, such as when they encounter unclear filters and confusing navigation.

Implement personalized search

Personalized search aided by AI enhances the user experience by leveraging user data to tailor search results to people’s individual preferences and behavior.

Here’s the general process for personalizing ecommerce search:

• Gather your user data: Get an understanding of your shoppers’ interests and behavior by collecting data on their interactions (namely past searches, clicks, and purchases).
• Analyze it: Use analytics software to identify patterns and preferences that can form the basis for detailed user profiles that can inform personalized recommendations.
• Generate personalized suggestions: Recommend items that align with people’s browsing and buying patterns. For example, if a shopper often searches for tech gadgets, prioritize tech-related suggestions.
• Conduct A/B testing: Determine which version of two personalization strategies works best, then make data-driven improvements.
• Stay abreast of shopper preferences: Use a personalization algorithm that incorporates any new data.

Here’s how one retailer has factored in shoppers’ behavior and personalizing to cater to their interests:

Use fuzzy search and intelligent suggestions

Fuzzy search and intelligent suggestions help visitors find relevant results even when their queries aren’t perfect (such as when they’re doing a mobile search on the go), handling typos, inferring intent, and providing related queries and results.

For example, here’s what happens on Amazon if you mistakenly enter “wooy hats” instead of “wooly hats”:

To implement fuzzy search:

• Use a fuzzy matching algorithm, which can correct common typos and misspellings in queries. Even if there’s no exact match, similarity measures can identify results that come close. You can also adjust the tolerance for errors based on the search context and importance of precision. For example, product searches may be set up to have higher typo tolerance than medical information searches.
• Analyze the context of user queries to infer intent. Your algorithm might consider the shopper’s location, previous searches, and current browsing behavior, as well as utilize NLP techniques to grasp the meaning behind queries. The search results could be tailored based on synonyms, related terms, and alternative phrases.
• Regularly conduct data analysis. Monitor your click-through and conversion rates, plus your user feedback, to evaluate the effectiveness of your fuzzy matching. Use the insights to streamline your search algorithm.

Power up your search UX

There’s no doubt about it: a seamless search UX can significantly boost your key performance indicators (KPIs). By analyzing your search functionality and optimizing how search results are presented, you can better drive engagement and revenue.

Looking for an expert partner to help you level up your search UX? Algolia provides award-winning internal search that’s sure to meet your customers’ expectations. Contact us to start expertly upgrading your search experience today!