How To Design A Winning Autocomplete For Your Search
HOW TO (AND WHY) DESIGN A WINNING AUTOCOMPLETE FOR YOUR SEARCH
WELCOME BACK TO THIS NEW
SERIES ABOUT DESIGN
Last week was our debut with the first post of this collab series. It was amazing. and we're so happy that you all were super positive. Thank you. It's time for part 2. swipe!
AUTOCOMPLETE IS A
METHOD TO INCREASE
Optimizing your searches will gain more accurate results. More accurate results will increase your conversion. Autocomplete is visual feedback that shows the user predictive suggestions, based on what they typed before. But how to design a winning autocomplete?
HIGHLIGHT THE SUGGESTIONS
From the moment the user starts typing, they should immediately receive predictive suggestions by the autocomplete. The user is already aware of the characters they just typed, so you don't need to give those more visual weight. Focus on the autocomplete suggestions and make it easy to scan the differences.
DON'T USE SCROLLBARS (DESKTOP)
A big benefit of autocomplete is that you stimulate the user to fill in more and more characters when the predictive suggestions aren't showing the one they are aiming for. Avoid scrollbars in the results list and use the natural size of the current suggestions. You ask a lot of user effort when you use scrollbars in a list like this.
CATEGORY LABELS FOR SCANNABIUTY
It's possible that the results of the current search query are different types of content. As example, for a webshop the results can be a suggestions like products, categories or brands. To keep the suggestion list clear and scannable, you can work with labels to categorize the different types of results.
CONTRAST AND VISUAL DEPTH
To make the experience more comfortable. you need to add some visual depth. A good practice is using a background overlay or a subtle shadow to give the panel more priority. The key here is to avoid distracting elements from the first action.
EASY WAY TO REMOVE THE QUERIES
Users need to be able to remove the queries (typed text) quickly and without spending too much time to enter a new one. That's super important, especially for longer lines. Adding a little icon at the end of the input for that action will resolve the scenario—both on mobile and web.
Don't forget to apply the right spacing between the autocomplete options. That not only will improve the quick legibility and recognition of each one but also the touchable area in mobile devices. Leave them to breathe, and users will thank you.
THANK YOU ALL!
Let us know your thoughts and what you would like to learn. We got you! Spread some love and tag a designer!