Best Design Practices for Search — Autosuggest Product Manager
Reference — Baymard Institute
99+% of the candidates have major hick-ups in their resume, want to be in the other top 1%? Connect with me over Resume Review Session
What do you mean by Autosuggest?
You must have used a lot of e-commerce applications be it on web or mobile. When you start typing, some suggestions come up like this. This is known as autosuggest or predictive suggestions.
When you start typing “Watch”, Amazon gives you a lot of suggestions to click on, these are called autosuggestions. In this article, we are not discussing how autosuggest increase customer experience but we are thinking about the best design practices for autosuggestions.
We have taken close to 100+ mocks and helped students to get into their dream product roles.
Best Design Practices for Autosuggest
Autosuggest has kind of become mandatory for any e-commerce websites, you can’t screw customer experience here. Still lot of websites don’t comply by the best practices for autosuggest, resulting in the diminishing customer experience. If you are working as Search Product Manager in any of the e-commerce companies, here are the best practices which you can adopt to increase the customer experience.
1. Keep the List of suggestions manageable (mobile & desktop)
Too many suggestions in the autosuggest will increase the cognitive load on the user and the customer will not be able to scan quickly the suggestions and eventually will not find the autosuggest feature meaningful. It will eventually lead to degrading the down the funnel experience and subsequent conversion metrics on your platform.
Thumb Rule: For a desktop website, you can have as many as 10 suggestions and for mobile application, try to limit suggestion between 6 to 8.
2. Autosuggest should be set off from rest
The right way to set off the autosuggest from rest is to use shadow or border around the autosuggestion box which will ensure that the user doesn’t get overwhelmed while using autosuggest.
Right image seems more comprehensive than the left one because the other elements added visual noise to the user cognition.
We have taken close to 100+ mocks and helped students to get into their dream product roles.
3. Highlight the difference in the suggestions, not the search term
Now see what Amazon has done
It isn’t useful to highlight the search term since it is repeated in all the suggestions. Instead, highlight what’s different each suggestion. This creates an easily scannable list and speeds up users’ searches.
4. Avoid scrollbar in the suggestions particularly in Desktop
Users don’t spend a lot of time seeing the suggestions in the autosuggest. Adding scrollbar will add the cognitive load at the mind of user which will add barrier in the user journey.
To increase down the funnel experience, avoid scrollbar particularly in desktop
