2

When using an autocomplete or autosuggest component, which of the following highlighting options are preferable, and why?

Assume user types Mal. The suggestions are:

Option 1 (probably the most common way)

Malvern

Malvern East

Option 2 (Google way)

Malvern

Malvern East

Option 3 (No highlighting)

Malvern

Malvern East

  • It also depend on if this is a search term or data entry. For data entry start with short first and let them tab (or click) the longer. For a search longer (more specific) they might want the longer first. Put on audit on the application and see what users are using most. – paparazzo Mar 11 '15 at 17:30
5

Google doesn't just do stuff for the sake of doing it

Highlighting what I typed over and over again doesn't really add any value while highlighting the differences helps a user quickly find what they are looking for...

google

If I had to pick just one then I would go with Option 2 (Google way) since they do a lot of usability testing based on successful completion rates and completion times and have way more data than I could ever gather myself. Users know what they are typing so highlighting the differences in a manageable list (no scroll bars) is the way to go.


Highlight the search term itself in the filtered results

I wanted to point out that when implementing a real time filtering solution then highlighting the search term totally makes sense.

The difference here is that the user is starting out with too much information and wants to quickly filter it down to a manageable size. Highlighting the term they are typing helps a user quickly see why the remaining results are still on the page.

highlight


Here are some other auto-complete guidelines backed by data

  • Style Auxiliary Data Differently
  • Avoid Scrollbars & Keep the List Manageable
  • Highlight the Differences
  • Support Keyboard Navigation
  • Match User’s Hover Expectations
  • Show Search History
  • Reduce Visual Noise
  • Consider Including Labels & Instructions

Here is the full article with data showing how users responded to the different approaches.

  • What a silly example of a Google search that was. – DaveAlger Jun 14 '16 at 23:56
1

In this case, Google is probably not your friend. Some observations:

  • Option 1 - Google search is ubiquitous, and there is very strong user awareness of the search box autocomplete. So Google can help users focus on the differences between search results to find the right one, because users already understand how Google autocomplete works.

  • Option 2 - You are probably not Google. If you are developing an app where users are new and/or the autocomplete is used infrequently, it's better to highlight the commonalities between results (i.e. option 2). This will help users understand why the autocomplete results are appearing.

  • Option 3 - This is the most legible but least communicative option. This can be appropriate if you are confident that users will understand how the autocomplete options are generated without the use of highlighting. This approach is also popular when automcomplete results are visually complex (e.g. avatar + name)...because uniform text helps calm the complex results list.

Most designers will opt for approach #2, but you can read the observations and figure out which applies to your situation best.

1

Highlighted (or selected) text in any text edit area indicates the text will be the subject of various operations, cut, copy, paste (replace with clipboard contents), or replace with keyboard input. This convention is well established long predates auto-complete.

Most auto-complete fields select the auto-complete suggestion part but do not replace the selection (highlighted text) if the keyboard input does not conflict with the highlighted text. This deviates somewhat from the older convention of always replacing the highlighted text, but still conforms to older convention in many ways. Highlighted text is still vulnerable and still subject to cut, copy and paste.

Option 1, highlighting the text input by the user and not highlighting the auto-complete suggestion completely breaks with established conventions and should be avoided.

Option 3, no highlighting, provides less feedback (what part is user input and what part is suggestion?). Also, it's not an established convention: I type "Mal" and out comes "Malvern" - I don't what "Malvern", what do I do?

Option 2, the "google way" (it's used in many places outside the browser) respects the old established selection behavior well enough and has become in its own right a common enough convention. Definitely use option 2.

0

The answer is simple, you should first try the third option, and see how your specific users are reacting about that, how many fault actions they have or how fast they can behave with that suggested items. Then decide to choose between either option 1 or 2. Google highlights the rest if estimation because the user group consists everyone in the world, then Google tries to minimize the false input for all people in the world with different demographic features and reading ir typing abilities, they also consider the different levels of knowledge about a subject. In a nutshell the answer to your question is different case by case and you should put one of them ( my idea is the third one) in action and balance your best option base on that prototype.

0

We had tested this solution and it's working pretty well (responsive friendly) But it depend of your app/site structure.

enter image description here

0

It depends...there are factors like how much of the string you will end up highlighting. If your results are long and you've only typed a couple of characters, then by highlighting everything, you highlight nothing.

Use option 1 when the text the user is searching for may appear anywhere as a substring, so that the user can identify where the match is occurring and why the item is appearing in the list. This also prevents having to highlight two sections of the string.

E.g. Amazon

enter image description here

Use option 2 when the the string the user is searching for appear at the start of every option, so that you push the substring that is identical (by match and by position) out of the way and into the background, so that the user can identify how each option is different to each other.

E.g. Google

enter image description here

Alternatively just do what you want, and probably few will notice or care so long as it works well.

E.g. Apple

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.