Key Takeaways
- Some users want to be able to edit a query suggestion but can’t as the highlighted suggestion isn’t copied to the search box
- 58% of e-commerce sites fail to support this important user need
- Users should also be allowed to loop through suggestions using their keyboard
Search autocomplete aids users by suggesting queries they could choose among.
Indeed, during Baymard’s large-scale desktop testing, participants relied heavily on using autocomplete suggestions as a starting point for query generation (as opposed to submitting the suggestions directly).
However, when they were unable to alter the suggested queries before submission, autocomplete suggestions were far less useful and many participants had to resort to manually typing the full search term.
This inability to easily adjust and modify an autocomplete suggestion increases the time and effort users need to search effectively.
Yet our e-commerce UX benchmark reveals that 58% of sites don’t support users attempting to use autocomplete as a starting point for query generation, thus risking the abandonment of search.
In this article, we’ll discuss several of our Premium research findings related to the search autocomplete feature:
- How failing to copy highlighted query suggestions hinders users
- How copying the autocomplete suggestion supports users’ query formulation
- Two other ways to support users navigating search suggestions
How Failing to Copy Highlighted Query Suggestions Hinders Users
When a user types “chai” on Kohl’s, the highlighted suggestion (“accent chairs”) isn’t copied to the search field. This means that users can’t edit suggestions before submitting them, reducing their usefulness significantly.
During desktop testing, some participants’ observed behavior was to begin typing a query, at which point autocomplete query suggestions would appear.
These participants would then highlight different suggestions using the keyboard arrow keys or mouse cursor before finding one they liked, selecting it, and then going to a search results page.
However, a different behavior was also observed during testing.
A subset of participants, rather than wanting to select from among the site-provided query suggestions, instead wanted to use the query suggestion as the foundation of a query — that is, they wanted to edit the suggestion.
Sites responded in 1 of 2 ways:
- The search box only retained whatever the user had begun typing before navigating down the list of query suggestions
- The search box updated with each query suggestion as it was highlighted
When sites responded in the first way, users were unable to use autocomplete suggestions as a starting point for a search query, and it was significantly harder for them to submit a suitable query.
It’s worth asking, however, why users would want to edit query suggestions in the first place.
One common reason users alter autocomplete suggestions is to add a term that reduces the scope of the query (e.g., to “filter by search”).
For example, users might consider the autocomplete suggestion “toy cars” useful, but they might want to add the color “red” to the term to align it more with their preferences.
The reverse is true as well — sometimes autocomplete query suggestions are too narrow, and users want to remove a term to broaden the query.
But if users can’t add to the autocomplete suggestion or tweak it — instead, they’re forced to either select the query suggestion as provided by the site or manually type out their own search in the search box — the benefits of autocomplete are reduced because suggestions that aren’t exactly right are of limited use.
How Copying the Autocomplete Suggestion Supports Users’ Query Formulation
On Staples, the highlighted autocomplete suggestion is copied to the search box, making it easy for users to tweak it before submitting it as a query.
Therefore, when users are navigating among query suggestions using the keyboard arrow keys, it’s vital to copy the suggestion to the search box.
This allows users to edit the highlighted suggestion if it’s not quite suitable without slowing those who’d prefer to submit it without alteration.
For example, if users start typing “Laptop” into the search box, autocomplete suggestions such as “15” laptop”, “Windows laptop”, and “Gaming laptop” might appear.
Then, if the highlighted autocomplete suggestions are copied to the search box, users can add words or otherwise edit the suggestion (e.g., changing “15” Laptop” to “17” laptop”) before submitting it.
2 Other Ways to Support Users Navigating Search Suggestions
Testing revealed 2 other ways users can be supported while they’re navigating query suggestions:
- Allow users to “loop” through the suggestions list
- Allow users to copy highlighted suggestions to the search box using the mouse
1) Allow Users to “Loop” through the Suggestions List
Allowing keyboard users to “loop” through the suggestions list will save users time and streamline the process of choosing one.
That is, when a user reaches the end of the list and presses the “Down” arrow key, they are taken back to the search field with their original input displayed, and vice versa — when they are in the search field and press the “Up” arrow key, the last suggestion in the list is copied to the search field.
Allowing users to “loop” through the list in this way is especially important if the number of autocomplete suggestions totals more than around 5 items. It also makes it easier for users to assess each suggestion in the search box to judge its suitability.
2) Consider Allowing Users to Copy Selected Suggestions to the Search Box Using the Mouse Cursor
Autocomplete suggestions on Walmart can be copied to the search box by simply clicking on the “arrow” alongside each one (e.g., the suggestion for “crossbody purses and handbags”). This speeds up the process of selecting and editing suggestions for those who prefer to use the mouse.
Some users prefer to use the mouse rather than the keyboard, so offering a way to easily copy an autocomplete suggestion to the search box will speed up the process of submitting queries for them also.
Many sites add an icon alongside autocomplete suggestions that, if clicked, copies the suggestion to the search box.
While not observed to be used in testing, a small subset of “power users” may take advantage of this feature if it’s offered.
Thus, consider providing this ability to users as well.
Optimize the Navigation Experience of Search Query Suggestions
While perhaps seemingly a minor detail, not supporting users navigating search query suggestions introduces friction at an important point in the product-finding process.
Users looking for products through search, and seeking to further tailor suggestions to their specific needs by editing a suggestion, will be unable to do so without additional effort if the query isn’t copied to the search box.
As a result, users may end up with a less tailored search results list — and as a consequence are less likely to find a suitable product.
On the other hand, supporting users’ needs by copying the highlighted suggestion to the search box — along with allowing users to loop through the suggestions and providing a “copy” icon for users using a mouse — allows users to focus on exploring products and finding one that meets their needs.
This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
If you want to know how your desktop site, mobile site, or app performs and compares, then learn more about getting Baymard to conduct a UX Audit of your site.
