Part Two: 6 Ways To Optimize Your Autocomplete Overlay
In Part 1 of this series, we gave some tips about creating the best search box for your site. Now that you’ve optimized your search box, we’ll discuss some tips on how to offer an awesome autocomplete overlay.
Autocomplete suggestions are like a helping hand and play a key role in how easily your customer finds what they are looking for in your store. When autocomplete suggestions work well, they help your customers form better search queries thus leading to more relevant search results. But a fair warning, on the flip side, when autocomplete suggestions work poorly they are just confusing and distracting.
Surpass your customers’ expectations by stacking these 6 features into your autocomplete overlay:
1. Search suggestions
Search suggestions start appearing when your customer begins typing in your search box, offering them suggestions that help them formulate their search query easier and faster. The suggestions act as reassurance that they’re are on the right track, getting closer to finding what they want. With the input of a single letter, your customer can already begin to see possible matches, which means they can type less and make fewer spelling mistakes. But search suggestions are less about saving time and more about guiding you customer to an accurate and relevant page of search results.
In addition to saving time and reaching a more accurate page of results, search suggestions can also act as a discovery tool, suggesting products that match their input but may not have otherwise had in mind.
2. Product matches
Like search suggestions, product matches help take some mental load of your customers and guide them towards products they may be interested in. The major difference is that, when clicked, product matches take customers directly to a specific product page, like a short cut. If your customer knows exactly what they’re looking for, this saves them time and effort by eliminating the search results page from the equation. Product matches should be reasonably limited so your customers don’t feel as though they’re doing their shopping within the small overlay.
3. Keyboard navigation
As discussed in Part 1 of this series, keyboard navigation is an important feature for your search interface. The ability to use up/down arrows to navigate the suggestions, and the “enter” key to submit the search, are a natural extension of using your keyboard to type in the search box. It’s not a default behavior of autocomplete suggestions, but offering it is a must.
4. Accommodating misspellings
Something as small as a typo could be the force behind a negative experience and a lost sale. Superior search performance means your search has the ability to recognize spelling mistakes and provide results anyways. Customers expect that mistakenly writing “ipohne” will give a suggestion for “iphone” without a second thought.
5. Adapt and improve with machine learning
Autocomplete suggestions that continuously adapt and improve will ensure your suggestions are ever-relevant. As trends and behaviors change with time, so must your autocomplete suggestions, else they’re at risk of being irrelevant. Search technologies are becoming more and more advanced and as they do, machine learning algorithms are improving the accuracy and relevancy of search results using vast amounts of data. Machine learning leads to endless possibilities, continuously adapting search suggestions is just one way to better cater to your customers.
6. Keep the style simple and clean
Visual noise will hinder your customer experience, it pulls the focus away from what’s important. As mentioned in Part 1 of this series, the right amount of white-space acts as a buffer between elements and helps group elements that are related. Suggestions should be clearly separated, but not separated so much they they don’t connect as a related group. Alternating line colors and too much padding will distract customers from focusing on the suggestions and are examples of too much visual noise. Make sure the overlay can be distinguished from the rest of the page, appearing to have depth like a layer on top.
Conclusion
If your customer can easily find what they’re looking for, the chances of them making a purchase increases, so why not give them a helping hand with autocomplete suggestions. When executed correctly, they’ll improve the search and discovery experience in your store significantly.
Read more
This post is part two of of three-part series about optimizing search for your e-commerce store, read the introduction “A Three Part Series: The Essential Guide to Ecommerce Search”.
In “Part One: 6 Tips for Creating the Best Search Box”, we give some advice on optimizing your search box to attract your customers to it. This is important as we know that customers who use search, are more likely to make a purchase.
In “Part Three: 8 Ways to Make Your Search Smarter”, we get into the details of your search interface. We cover tools like filtering and sorting, and give advice on everything from your 0-results page to your pagination.
