Autocomplete best practices
Autocomplete should provide two types of suggestions: related searches and product suggestions.
Vary styling for different types of suggestions
Related searches help the user complete their query more rapidly, and will take them to a search results page.
Product suggestions will take the user to a specific product page.
This distinction is important since it sets an expectation for the shopper. If they believe they’re completing a search, they will expect to see a list of products that they can sort and filter on the next page.
If the suggestions look identical, it will create confusion since many users will land on pages that they don’t expect.
We recommend that related searches be text, with a visual emphasis added to the characters the shopper has already typed.
Product suggestions should be placed below the related searches.
Add a border or a colored background to these suggestions for better separation. Also, include product images to convey that clicking will take the user to a product page.
Provide typeahead autocomplete suggestions and related search queries for your shoppers.
Why is this an important ecommerce site search best practice? Because shoppers aren’t great spellers. They also usually aren’t sure if they should use their lingo or yours.
Providing related and suggested searches while the user types will help eliminate misspellings, errant searches, and most of all, any confusion your shopper might have.
When you provide product suggestions directly in the autocomplete, you will see a considerable amount of your traffic navigating directly to those product pages and converting.
So much so, by providing product suggestions you can double engagement and conversion rates from autocomplete.
Limit suggestions so it’s manageable for the user (avoid a long list)
Limit your suggestions to your top few and most relevant, anymore than that will burden the shopper and diminish their experience. If you’re suggesting dozens to hundreds of options then you’re not helping anyone.
Display pricing with product suggestions
Displaying the price with other product data helps shoppers understand that what they are seeing is a specific product which will take them directly to that product page.
Keep the focus inside the search bar and not on the first suggestion
Ensure that your search bar does not select or highlight the first autocomplete suggestion by default. Hitting the enter key should simply search for the query that the shopper has typed into the search field.
Remove redundant suggestions
As a site search best practice, you should do your best to avoid showing over granularization in your suggestions, especially if the suggestions deliver the same results page.
Different spellings of the same word, plural vs. singular, or case sensitivity – bloated suggestions can start to populate for nearly any reason.
Get rid of them. Don’t confuse your shopper into thinking they’ll see different product results when they won’t, and don’t waste your digital real-estate on duplicates.
Support persistent queries
Persistent queries follow the user and retain the query in the search box after the shopper hits “search”.
This is important because the average search visitor enters more than two iterations of their search. Let them modify their search without needing to re-enter their entire search.
Make sure it doesn’t go offscreen
It’s easy to forget, but just because your website is responsive, that doesn’t mean your autocomplete will magically follow your CSS rules. Make sure your autocomplete dropdown doesn’t fly off or get partially hidden at any screen or window size.
Make it accessible
Over 15% of the world’s population and approximately 19% of the US population live with a disability.
Regardless of how few people with disabilities you think might visit your store, ensuring your site search, autocomplete, and navigation are accessible with both the mouse and keyboard will only bring you positive results.