“Search” for a better user experience
Improving the on-site search function for your website can help users find what they need faster, improving the overall user experience. In this article, we’ll take a look at how autocomplete and autosuggest features can help refine search results to better serve users.
Before we start, we need to learn the differences between autocomplete and autosuggest. The most important difference between the two is functionality.
Autosuggest: As the user types into a search bar or input field, autosuggest displays a dropdown list of potential matches, helping the user complete their query more efficiently.
Autocomplete: Autocomplete can include features like autosuggest, where search suggestions are presented, but it also extends to situations where the system completes entire words, phrases, or forms based on the user’s input.
In summary, autosuggest is a specific type of autocomplete functionality that focuses on suggesting search queries or completions as the user types. Autocomplete, on the other hand, is a more general term encompassing various features that predict user input in different contexts beyond just search.
What are the benefits of autosuggest and autocomplete in search?
Enhance user experience: Autosuggest plays an important role in enhancing the overall user experience by providing real-time suggestions as users type their search queries. This, allows users to reach accurate results more swiftly, making the search process more efficient.
Quick and accurate results: By assisting users in completing their search queries, autosuggest helps to generate quick and accurate results. This ensures that users can access the information they’re looking for with greater speed and less effort.
Correcting spelling errors: Users may make spelling mistakes while typing in search queries. Autosuggest helps correct these errors, ensuring users arrive at the correct results despite any typographical mistakes.
Personalization based on user needs: Autosuggest can offer personalized suggestions based on a user’s previous search history, preferences, or behavior. Personalization creates a more tailored and user-centric experience.
Query completion and expansion: Autosuggest not only completes a user’s query but can also encourage further exploration by providing additional suggestions. This can lead users to discover more content beyond their initial search intent.
Reducing zero result pages: One of the notable advantages of autosuggest is its ability to decrease instances where users land on pages with zero results. Through proactive suggestions, users can be directed towards accurate and relevant results.
7 tips for autocomplete and autosuggest
1. Prioritize autocomplete suggestions
When it comes to sorting a list of autocomplete suggestions, you’ll want to present users with the most relevant queries first. As discussed previously, several factors can affect the ranking of recommendations. By analyzing user behavior, for example, we can prioritize popular searches (i.e. those entered most frequently).
Additionally, you can customize how choices are ranked to highlight items that are purchased more frequently. You can also prioritize results that include ongoing promotions or special offers.
2. Enhance autocomplete predictions through personalization
Personalization plays a important role in optimizing the effectiveness of autocomplete suggestions in on-site search, and there are three key approaches to achieve this:
Geographical relevance: Tailor suggestions based on the customer’s location, presenting queries that are popular in their area while excluding irrelevant ones. Capitalize on the trend of users often choosing fashionable products, aligning with their current location and preferences.
Include search history: Leverage the user’s search history to provide suggestions related to their previous site interactions. For instance, if the user has a history of searching for “gifts,” strategically highlight popular “purchased gift” options to boost product sales and enhance user satisfaction.
User segmentation: When a user is logged in, recognize their profile characteristics to offer tailored suggestions. For instance, avoid suggesting products intended for a different gender to maximize the relevance of the results and make the most of the limited suggestion space.
3. Keep it simple
Listing too many suggestions can cause confusion and overwhelm the user, making it harder for them to find what they need. At the same time, you will reduce the visual quality of your site because it will take up too much space on the screen.
The best design is simple. Don’t offer more than 10 suggestions. This also prevents your search time from increasing. No user wants to wait for suggestions when searching for something. If you have to show more than 10 products or autosuggest options, you can show it by changing the layout to use columns instead of extending the list down.
4. Show differences
As you can see in the screenshot above, Google currently offers me three different types of search results. The first two options are phrases I’ve searched for before. It highlights these with the icon shown on the left and purple text.
Below that is a suggestion that I haven’t looked for before. When I typed the first two letters into the input field, it highlighted the rest of the suggested search term in bold.
At the end of the list is a recommendation that directs you to a product page. It displays the product image in the icon area to differentiate it. When clicked, this option will open the product page rather than returning a page of search results.
Here, based on the information it receives from the user’s history, it finds the product that the user will be looking for and highlights the remaining part of the word.
The complete functionality of the autocomplete feature might not be immediately apparent to users, especially considering the varied nature of on-site search solutions.
You can offer instructions and labels to assist users with this feature. These instructions may include headings such as “Search Suggestions,” “Categories,” “Products,” etc. As seen in the example above, the top suggestion directs users to the category screen, while the other suggestions display search results. This structure helps users understand the list, making it easier to scan and focus on relevant items.
Without clarifying these details and combining various suggestions into a single list, users may inadvertently select an article instead of a product or navigate to a category page rather than a more general results page, contrary to their original intent.
5. Keep the user’s focus on search
When customers search, make sure the autocomplete and search box grab their attention first.
Here’s how other products do that:
Google uses shadowing to keep the user’s focus on the search box during the search.
Airbnb, on the other hand, directs the user’s focus to the search area by darkening the area behind the search box.
You can draw the user’s focus to your suggested search results by using such a structure that follows the use cases for your own product.
6. Allow users to use both the mouse and keyboard
Users should be able to clearly see which suggestion they’re selecting. This can be done by highlighting the row. You can also use a hand cursor to show they can click on suggestions to go to a result page.
7. Make it clear what users can search for
It’s a good idea to show a sample search query in the input field as a placeholder, suggesting to users what they can search for.
Summary
Ensuring a top-notch experience throughout a customer’s journey can directly boost your revenue. A superior search experience can lead to increased satisfaction, higher conversion rates, and a higher average order value.
Follow these basic guidelines. Autocomplete should:
- Operate in real time, without lags.
- Deliver relevant, personalized results.
- Offer clear visual guidance on how to use it.
- Focus the user on the search function by fading other site elements into the background when it’s in use.
A better search experience for Jotform
We used the practices mentioned here to make changes to Jotform’s customer support page. Users now instantly find solutions to their questions with the search algorithm we developed. In this way, 14% of our users quickly find a solution in previously answered questions, instead of submitting a new question. This allows us to direct the power of our support employees to address new or more complex questions and to offer instant solutions to our users within seconds.
