The onsite search function is one of the central functions of every well-known online shop and corresponds to the most important language channel for customers. Behind an onsite search usability function, there are not only intelligent algorithms but also a variety of search usability decisions that determine success or failure in the battle for customers.
Below you will find best practices for the most important criteria, clearly divided into four categories.
Display of the onsite search field
The design and form of the onsite search usability function already influence user behavior. A well-designed search field, including a well-thought-out placeholder text, sets the right expectations and optimizes handling even before the first entry.
Design and form of the onsite search function
Several user tests show that the more visible the search usability field is placed on the website, the more users feel encouraged to interact with the search. The design of the search field depends largely on the following three factors:
- Position: The onsite search field can be placed at the height of the navigation for a discreet display or in the center of the header for a prominent display.
- Style: The style of the search box can be influenced by several elements such as border, color, font type and size, icons, etc.
- Size: The size of the search usability function reflects the preferred way of finding a product.
Present display of the onsite search query
On average, users change the original search query three to five times to achieve the desired result. If the onsite search query is deleted during the search usability process in the search field, the user is forced to re-enter the search query with each iteration, which significantly increases the duration of the entire search cycle. In addition, the redundant entry of a search term within a short period is perceived as very annoying by users.
Placeholder texts in the search field
If users do not know either the name or the category of the product they are looking for, the onsite search function should prompt them to enter alternative solutions. Static placeholder texts in the search usability field (“Search for products, brands, categories or topics”) are a proven way.
Creation of a range of selection
For retailers with a large and varied product catalog, area selection can increase the accuracy of the search. The area selection should be visually subordinate to the search field but placed as close as possible to the search usability field. In the implementation, a drop-down menu for selecting the area selection has proven its worth.
Delete filter and sorting when searching again
The onsite search result is mostly influenced by activating filters or changing the sorting. Users may maneuver themselves into a dead end and are not satisfied with the result set. The initial state should therefore be restored when the search query is sent again.
Autocomplete
The autocomplete function is an essential part of a good search function and a decisive factor for an optimally managed customer journey. The goal must be to take users by hand from the first interaction with the search function. A good implementation supports users in the context of a pre-selection of frequent search terms and products help to avoid spelling mistakes and offers initial inspiration for products.
Support users with keyword-based onsite search suggestions
The ability to choose from a list of potential search terms within the autocomplete function is now the gold standard of every online shop. It is important to distinguish between search suggestions (lead to a product listing) and product suggestions (lead directly to a product detail page). If onsite search suggestions are not available, users lack support and inspiration when formulating the search query. Some users feel insecure if they are not immediately supported by known keyword suggestions when entering the request.
Autocomplete feature design
Numerous user tests have resulted in several best practices that should be taken into account when designing to guide users in the best possible way.
- Keep the number of search suggestions manageable: The number of search suggestions displayed for desktops should be deliberately limited. Too large a selection (more than ten) of possible search suggestions has a deterrent effect on the user.
- Use labels for better delimitation and readability: add clarifying names to the autocomplete function to differentiate between the various search aids such as search suggestions, product suggestions, categories, or trending results.
- Highlight the currently chosen selection: Give users clear visual feedback in the autocomplete function on which suggestion is currently active.
Restriction to onsite search in categories
Compared to searching for a term in the entire product catalog, preselecting a certain category can lead to better and more relevant results. When searching for “shoes”, women only want to get women’s shoes as results and therefore exclude men’s and children’s shoes in advance.
Separation of onsitу search suggestions and products
Group both variants into different sections in the autocomplete function with their header and offer a clear visual differentiation. Especially on mobile devices, the recommendation is to prioritize search suggestions over product suggestions. On the desktop, on the other hand, there is more leeway in terms of design and arrangement.
Avoid redundant and irrelevant search suggestions
Redundant terms lead to a poor user experience, as users are either forced to re-enter, miss relevant search suggestions, or resort directly to navigation.
- “Dead Ends”: “Dead Ends” describe both suggestions that return the same result that is currently being displayed and suggested terms that lead to a “No-Result” page. “Dead ends” usually occur when search suggestions are based purely on the search behavior of past users or the underlying product catalog/data feed is not regularly updated.
- Semantically repetitive: Many websites offer search suggestions with basically the same meaning, which are only differentiated by nominal differences (such as singular/plural, with or without punctuation marks, capitalization, symbols) or synonyms and therefore always return the same result.
To increase the quality of the search suggestions, additional factors such as the result set or conversion rate should be included in the generation – always taking into account that these factors are updated regularly.
Quick display of search and product suggestions
The optimization of scripts and their loading speed is in most cases a purely technical challenge. The principle applies: the faster, the better. The response time should not exceed 100 milliseconds in full response. Even if the loading time of the autocomplete function will always vary, the goal must be to offer the user consistent behavior.
Search results page
While the search logic and autocomplete function significantly influence the quality of the search results, the structure of a search results page determines whether users can deal with the set of results. Users interact with the search function in various phases of the customer journey. Especially in the early phases of the purchase decision process, the user needs the option of sorting and filtering search results to get to the desired product.
If the search results page offers too little information about the products displayed, the user is often forced into so-called “pogo-sticking” (jumping back and forth between the search results page and the product detail page), which is both a time-consuming and frustrating experience. In addition to the layout, sorting, and filter logic are also elementary for a balanced search experience and should be taken into account as part of a well-thought-out digital strategy.
Show the total results
Most users judge the quality of the search query based on the number of results to then decide whether the results need to be further refined. It is therefore particularly important to make the number of results recognizable at first glance.
Search results page layout
Two variants can be used for the layout – list view vs. grid view. The performance of the search results in a list view versus a grid view is largely dependent on the product groups displayed there:
- Spec-driven products: These include products with a higher information density, for which several characteristics are decisive for the choice and selection. Examples of this are products from electronics, household appliances, B2B, or e.g. Tool.
To display products in this category, a list view offers the advantage of displaying more information directly and thus offering comparability of the products without having to switch to the product detail page.
- Visually-driven products: The focus here is on appearance and aesthetics. Products from the areas of fashion or home & living are typical. In the case of visual products, a grid display is advantageous, since users primarily focus on the product image and only then check the product for other attributes.
In the case of a mixed product range, the premise is to implement both views and play them out dynamically or to offer the user the option of changing the view themselves.
Correct variant display
A frequently occurring use case in the fashion or home & living categories is the combination of a search term with preferred colors, brands, or materials. If, for example, a “white t-shirt” is searched for, users also expect “white t-shirts” in the search result. If a T-shirt is available in several color variants, the matching “white” variant should be displayed first in the result set.
Faceted Search
To ensure a modern search experience in 2021, it is no longer sufficient to limit static filter options to categories or attributes such as price, brand, or availability. All available filters must result from the user’s search query. While a category usually has to be selected to display suitable filters, a faceted search offers these filters without having to select a category beforehand.
The most important advantage of the faceted search is not only that the user does not have to click to get the desired result, but that filters are available at the point in time when they are needed by the customer.
Filtering of accessory products
Search results are often flooded with product accessories, which makes it even more difficult for the user to find relevant products, depending on the number of results. Especially when sorting by “cheap products first”, you first have to scroll through a list of non-relevant product accessories. The user should therefore be allowed to exclude product accessories from the search results using a filter option.
Search logic and guidance
It is not always possible to deliver the right results. It will happen that the retailer does not have the desired product in its range or that the user’s intent is not recorded correctly. The focus should therefore be on a user-friendly search iteration so that users receive the necessary support even in the event of a supposedly incorrect query. This includes the display of alternative search suggestions, error correction, and dealing with search queries that do not return any results.
Autocorrect obvious spelling mistakes
Spelling mistakes are common in the heat of the moment. Asking the user to improve the search query in the case of an incorrect spelling is an unnecessary step. Especially when the misspelling leads to an empty result set and therefore to a “No-Result” page.
Regardless of the use case, the search function’s auto-correction contributes significantly to a seamless search experience. Users must be automatically guided to the desired result without additional interaction. It is essential here to guide the user transparently, to inform them transparently about the logic in the background, and thus to address them directly.
Importance of an optimized “no-result” page
It is not always possible to display suitable results for every search term. Especially in cases where no results are found, it has a high priority not to let the user down, but rather to surprise them and set new incentives.
So what makes a good no-result page?
- Alternative search suggestions: If related search suggestions are found, these should also be offered to the user. One possibility would be e.g. B. the display of the search suggestion in combination with the products it contains to give the user a first impression of the results.
- Personalized Recommendations: Product recommendations based on the user’s past browsing and shopping behavior may not necessarily help the user to find the product they are looking for, but they are an effective means of drawing attention to interesting content to attract potential customers to the site to keep.
- Contact option: Reputable online shops offer several contact options, such as telephone support or live chat.
- Category suggestions and popular products: Displaying categories is a good way to get users back on the right track. Ideally, the suggested categories match the search term entered. As a last alternative, there is also a display of the most popular products. While this content has no relevance to the search usability term, it motivates the user to consider “Top Seller” or “Best Rated Products”.
Seasonality as an additional ranking factor
Some shops carry seasonal products whose relevance is always limited to a defined period. This seasonality should therefore also be taken into account in the search results. Accordingly, products that are currently in season should be ranked higher and, conversely, products with less seasonal relevance should be ranked lower.
Forwarding to navigation pages for generic search queries
Take a look at the most searched terms of your users. You will find that users often start the journey with a generic search for categories or brands. In most cases, the number of results varies between using the search function and navigating via category or brand pages.
In the case of an exact match between the search term and the given category or listed brand, the optimized landing page should be linked directly to also benefit from advantages such as visually rich content worlds, clear navigation through the sub-categories, or context-related product filters.