Internal search is an important and yet one of the most underrated elements of modern eCommerce sites. At least that’s what the numbers show: 72% of foreign online stores fail to meet expectations when using in-house search1. Even worse, on average, up to 25% of all internal queries end up on a page with zero results, not because the product is missing but because of imperfect search mechanics.
What is a Full-Text Search, And Why is it Too Early to Write it Off?
The internal search of the online store searches for goods by word or phrase. It looks like a field for entering text with a magnifying glass icon or a “Find” button on the surface. Against the background of advanced multi-level filters, such an interface may seem a bit simple and even outdated, a delusion. Nevertheless, this is a very compelling technology that, when used correctly, becomes the driving force behind the entire online store: search delivers a boost in conversions, optimizes behavioral data, and provides an array of data for internal business intelligence.
Separately, note that full-text search is not an alternative to filters (faceted search) and vice versa. Instead, they are complementary interfaces that work in tandem. Most users start their search through a query and use filters in a second step for a more refined search.
Internal Search Capabilities
The main task of this interface is to help users find the right product. Everything here is simple and straightforward, but this is just the tip of the iceberg.
Proper implementation of search on store pages is also:
- A shortened customer journey through the sales funnel.
- Additional navigation through the complex structure of the site, which should not be forgotten, because a lost user is a lost customer.
- Optimized behavioral factors that ensure an increase in search engine positions and an influx of free traffic.
- A source of strategic information for businesses. By analyzing data from search, it’s easy to determine which products are most searched for, what sells better, what products are missing from the store’s assortment, etc.
- The functionality of internal search directly affects site conversions.
Visitors who use internal search are more convertible than the rest of the audience because they already know what they want to buy. All of this is borne out in the numbers. On average, 60% of people start interacting with an online store through search2. At the same time, if it does not give relevant results – 80% will leave the site. Those who interact with the search bar, on average, make a purchase 1.8 times more often. These numbers make you think and ensure that all of the barriers that prevent a customer from finding a product through search are removed.
Now let us discuss how to implement an effective search interface on e-commerce sites. First, we go over basic UX rules and the latest trends in search interfaces.
The Basic UX of Search Interfaces
Localizing The Search Bar
The search box is placed in the header of the site: in the center or offsets to the right. These are the places where users can see this element most often. The search line should not be hidden behind the icon or a burger menu. Around the input field leaves free space so that it visually dominates the header of the site.
Accessibility of Search on All Pages
The search field is accessible on every page of the store since the need to interact with this interface arises at any stage. The only exception is on the checkout pages. Hence, the search box can distract users from purchasing, so there’s no need to use extra elements.
Optimal Field Length
The search box should be comfortable for long queries. A short text box forces users to shorten their phrases because they can’t fully see the text they enter, edit, or change. This is not only inconvenient but also impairs the overall effectiveness of the search. The optimal length of the input field is when it fits about 40 characters of visible text. There is an alternative solution: by default, the search box is made small, but with the function of expanding as you enter characters into it.
Running a Search Via Enter
Many users automatically search through enter, while others prefer to press a button on the site to enter a query. Therefore, it is essential to make sure that the in-house interface supports both input options.
Saving a Query in The Search Box
Once on the results page, the search box should continue to display the original query. This is necessary so that the user can quickly correct the phrase without having to enter it again, which is often required.
Provide the ability to quickly clear the search box by adding a cross that appears when the first character is entered.
Auto-Complete Search Query
For good usability, it’s crucial to ensure that search prompts are displayed as you type characters so that the search engine anticipates the query and does some of the work for the user.
Drop-down cues speed up the navigation process and reduce the likelihood of manual typing errors. But not only that. With autocomplete, you can direct the shopper to the most in-demand and relevant products, which are pulled up in the drop-down list along with relevant results. Many view these “recommendations” along with the product they initially searched for.
Additional product information can be displayed in the dropdowns for better user engagement: price, number of reviews, and product rating.
Buy Buttons in The Tooltip Box
For online stores with a large number of inexpensive products, CTA buttons make sense to be placed directly in the dropdown box with tooltips. This option works very well on sites with groceries, medications, cosmetics, and other popular products often bought impulsively. This way, the user’s path in the sales funnel will be shortened to the minimum possible, suitable for absolutely everyone.
When the user has focused on the search bar but hasn’t entered anything yet, this is the right moment to refine the search area and show the available categories since it’s now deciding where the potential buyer will go next. Such integration is particularly relevant for marketplaces and hypermarkets, with their complex structure, including many sections and subsections. It can be implemented in various ways.
Users searching for items through a search very often go back to previous queries. To save them from having to re-enter, display their search history. This is usually done by clicking on a blank field.
Voice Input Capability
In a situation where eCommerce, as elsewhere, is noticeably dominated by mobile traffic, it is not unreasonable to think about this part of the audience and provide for the possibility of voice input. A button with a microphone should be placed directly in the search field.
The voice input option is undoubtedly very useful, but some critical comments are to be made here. First, its implementation places high demands on the mechanics of the search itself. Second, it must handle natural language queries, which are very different from typed queries. Finally, if your regular search can’t search by synonyms or, for example, process semantic variations of source phrases, the benefits of implementing voice input will be questionable.
Organizing a Listing With Search Results
Now let’s talk about what the page displaying the search results should look like. In general terms, this is a standard listing, compiled and optimized in accordance with the rules, which we discussed in detail in a separate article. However, there are many essential nuances in the organization of these pages that should not escape the notice of UX designers and developers.
Displaying a Search Query Above a Product Title
With this seemingly insignificant detail, you remind the user what he is looking for and at the same time allow him to improve the query by adding a qualifying phrase or other data (model, color, article). This ensures better usability and more accurate search results.
Displaying Search Results on The First Screen
The title with the found products should be displayed on the first screen so that the user doesn’t have to scroll through the page. While this might seem obvious to some, some layout options display unimportant information above the search results: cross-content blocks, banner ads, and other content that disorients users who expect to see search results immediately.
Sorting Search Results
The sorting options here are just as important as in a regular listing, mainly when searching for broad queries.
Typically, users are prompted to sort products by:
- Increasing/decreasing price;
- Number of reviews;
- Updates (new arrivals);
- Current Promotions/Sales;
By default, search results may appear with one of the set parameters that are most profitable for a particular business or most often used by customers (usually, it’s ranking by price, promotions, and reviews).
Designing Pages With Zero Search Results
A “Goods Not Found” page is a common scenario even for stores with a large assortment and impeccable internal search quality. Getting into such a cul-de-sac is not a problem in itself. However, we can speak of defects in usability if the user’s interaction with the site is interrupted on the “Product not found” page. In other words, he closes the tab and goes to look for a competitor. To keep the potential buyer on pages with zero results, you can use several solutions:
- Redirecting to a general category. For example, if the person searched for a “light, short polka-dot dress” and ended up on a blank search page, offer him a link to a relevant product category, in our case – “Women’s dresses” or “Summer clothes.”
- Display with popular products. Blocks with top products or discounted offers hold user interest well.
- Redirect to an online consultant. Invite the user to contact the support to find out if the product you need is available or pre-ordered.
- Display hints on how to refine the request. If your internal search can’t handle complex queries, offer tips on simplifying the original search phrase.
- Informative and functional product previews
The listing with search results is organized so that the user can easily compare products and quickly get information about each product without going to the card itself. Well-designed previews solve these important tasks. The following elements provide their information value and functionality:
- Photo + full product description + price;
- Button “Add to cart;
- Button “Add to Favorites” + “Compare”;
- Product options (available sizes, colors, configurations);
- Status (in stock/number of items available);
- The rating of the product;
- The number of reviews;
- Terms of delivery + terms.
What a Site Search Should be Like. Summary Checklist
- A summary of my guide on building a modern and effective search without leaving out a single detail.
- The basic rules for organizing a search
- The search bar is located in the site’s header: to the right or in the center.
- The search field is not hidden in the burger and is available on every page (the checkout page exception).
- There is a large contrasting button with a magnifying glass or “Find” inscription.
- The input field length allows you to display 35-40 characters of visible text.
- The search field has a non-contrast text tooltip (“I’m looking for,” “Enter query,” etc.) that disappears on the first click.
- The search is accessible by clicking the button on the site + via Enter.
- The field saves the original query after pressing enter.
- A reset cross for the entered query is available.
- Quality UX elements.
- A drop-down box displays relevant tooltips as you enter characters.
- You can add items to the cart directly from the search tooltip box.
- A menu with store categories is integrated into the search functionality.
- Clicking in an empty field displays the history of requests.
- A voice input option is available.
- Search by photo (for marketplaces and stores with offline outlets).
- An optimized listing with search results.
- The original search query is displayed above the found items tile.
- The output results are shown on the first screen.
- There are sorting options for search results (by price, rating, stocks, etc.).
- The “Product not found” page offers exits from the UX stalemate.
- Product previews are informative and have the functionality to compare/buy directly from the listing.
- Available options to switch the appearance of the listing (tile/list, number of items displayed).
- Faceted search filters are applied to the products displayed in the listing.
- Internal search mechanics.
- Search is good at searching through synonyms, word forms, and semantic variations of a query.
- Queries with a long tail are correctly processed.
- Relevant tagged pages are pulled into the search results.
- Various spelling variants of brands are set in the settings.
- The search takes into account slang names and abbreviations.
- If you search by article, you’ll be redirected straight to the product card.
- Search generates output with products through a query with a description of the problem.
- In addition to products through the search, you find answers to frequently asked questions.
Bio: Effie J Franks specializes in writing articles on such topics as Digital Marketing and eCommerce. She has a Bachelor’s Degree in Marketing and works at CV writing services to help people find their dream job. In her free time, Effie enjoys playing video games, reading, and camping.