We have the data: across our customer base, 1 in every 4 online visitors use site search within their sessions, and the 24% of users that search drive 44% of revenue, on average. Optimizing the site search experience can push that metric even higher on an individual website.
A critical feature within site search is autocomplete: the dynamic, predictive text that suggests search terms, product and category matches as a user begins typing in the search bar. It’s designed to speed up the search process, reduce errors, and guide users toward relevant queries or products before they finish typing.
Autocomplete is a feature you can enable within your search and discovery platform, but its behavior and UI are up to you. How you implement it can make or break user experience. Baymard Institute observes that 80% of ecommerce sites use autocomplete, but only 19% are doing it well.
At Constructor, we’ve conducted a large number of autocomplete A/B tests with our customers and found 5 optimizations that consistently move the conversion needle.
The Power of Autocomplete
Autocomplete simply makes searching easier. Every second of user effort saved improves the experience, especially for mobile shoppers where typing accuracy is more challenging.
Suggestions also surface product attributes that shoppers may forget are important to their purchase decision and save them clicks on faceted navigation menus.
For example, a search for “moisturizer” on Sephora will pull results from Skincare (face), Bath and Body and Makeup (tinted moisturizer) categories. Autocomplete helps steer shoppers to the right department scope, or hone in tighter on ingredients like SPF, niacinamide, and vitamin C.
In our experiments program, we’ve found customers that use autosuggest see (on average):
- 16.5% higher average order values (AOV)
- 13% lift in total conversions
- 9% lift in search revenue
- 93% decrease in bounce rates
When autocomplete self-optimizes with AI and machine learning, user experience gets even better. By sniffing out user intent before they start typing, suggested search terms, categories and products can be personalized and optimized for attractiveness, not just relevance.
5 Battle-Tested Autocomplete UX Improvements
1. Include Product Images and Hit Counts
Displaying product images along with total product count in autocomplete results are two optimizations that work great together. Why? The key is context.
Both of these optimizations provide the shopper with more information before they commit to a click: images are easier to recognize than product titles alone (the brain processes images 60,000 times faster than text), and hit counts tell you exactly how many results match each suggested term.
When testing both back-button-busting tactics together, we found average lifts of:
- Clicks: +1.28%
- Clicks per user: +0.58%
- Revenue: +1.42%
- Conversion: +0.67%
2. Show Rolling Search Suggestions
Rolling search suggestions appear when a user touches the search bar and can be pre-populated with trending searches, best-selling products, or personalized recommendations.
Inside Constructor, you can choose your merchandising strategy and rank products by clickstream trends, revenue metrics, inventory levels or manually pin products that you want to feature. You can also choose whether to show only search or product suggestions, or combine them with category suggestions, and set the maximum number of suggestions to display on desktop and mobile.
You can also pull in article content and customer service links, like Serena & Lily.
Each decision is its own variable, so it’s a good idea to A/B test your rolling search strategies against each other to find out what works best for your customer and catalog.
3. Increase Price Font Size
For value-driven merchants, simply increasing the price font size can boost click-through rates.
This tactic works best if your average customer is price sensitive and you feature great deals. Just like showing images and hit counts, making price easy to spot and scan puts important contextual information front-and-center.
However, this doesn’t work for all brands and retailers. For example, prestige and luxury brands may see lower click through when emphasizing price. When in doubt, run an A/B test.
4. Increase Image Size
Thumbnail images in the autocomplete widget can become distracting visual clutter if they’re too small to inspect. We’ve found increasing their size works well – even if it means showing fewer product suggestions.
Consider A/B testing different sizes and numbers of results to find out what works best for your customer (especially on mobile). You may also want to test showing products before search suggestions and vice-versa.
5. Add a “View More Results” Filter
This one’s a “big little detail.” Some shoppers may assume the products shown in the widgets represent all search matches, and this misconception can cost conversions. Simply adding a “View All” or “Show more results” button with product results mitigates this risk.
In fact, you might argue this one doesn’t require A/B testing – it’s a universal best practice that adds clarity to the autocomplete experience. You may want to test different UI styling, such as buttons against text links or placement location within the widget on desktop and mobile.
Want Even More Testing Ideas?
Autocomplete is just one area of search and discovery that’s ripe for A/B testing. In the Ultimate Guide to A/B Testing for Search & Discovery, you’ll find even more testing patterns for autocomplete, search results pages, browse pages and recommendation pods – plus tips for setting up and interpreting tests.
And to keep up with the Constructor Data Science team and their revenue-driving experiments, subscribe to The Split/Test Digest.
