Autocomplete vs Drop-down. When to use?

Question

I've read somewhere (can't remember/find where) an article about web usability describing when to use drop downs and when to use autocomplete fields.

Basically, the article says that the human brain cannot store more then the last five options presented to choose.

For example, in a profile form, where there is your current occupation, and the system gives you a bunch of options, when you read the sixth options, your brain can't remember the first one anymore. This example is a great place to use an autocomplete field, where the user types something that he thinks that would be his occupation and then select the better from the few options filtered.

I would like to hear your opinion about this subject.

When should I use a drop-down and when I should use a Autocomplete field?

Answer 1

I would use 2 criteria,

1) How long is the list, if the list contains 5 elements you better use a combobox as it will be easier for the user (better UX)

2) In case the list is long, how easy for the user to remember the prefix of what he/she is looking for... if it's not easy, using autocomplete is irrelevant..

Answer 2

I'd say it depends on the diversity in the list, and the familiarity with the list items.

If for example the list contained over 5 car brands (list items I'm familiar with), no problem.

If on the other hand the list has over 5 last names, it could take me some more time before I'd make a selection.

You should probably just try out both options and trust your gut on which you find easier to use.

Answer 3

I usually look at how big the list is going to be. If there are going to be more than 15 options then it just seems easier to find if they can just start typing.

The other circumstance for me is when there is an other option and they can free type it. This essentially eliminates the need for two controls since you can combine in one.

Answer 4

Here's the opposite approach:

The worst time to use an auto-complete box is when you have a finite and relatively small set of options, and the user doesn't know the range of valid options. For example, if you're selling used cars and you have a mixed bag of brands, simply listing the brands in a combobox is more efficient and easier to browse than an auto-complete method.

Being able to remember the last 5 options is most likely irrelevant unless you have a giant list of options and are requiring the user to select the most relevant item.

An alternative approach is to use both. I believe Dojo has a widget that acts as both a combobox and an auto-complete field. You can either choose to start typing and it will narrow down the possible options, or you can interact with it with your mouse and browse it like a combobox.

Answer 5

The main difference has nothing to do with usability but more to do with what defines the acceptable inputs.

You normally use a ComboBox when you have a predefined list of acceptable inputs (e.g. an Enum or list of occupations).

An auto-complete field is best used when there are many known inputs BUT custom input is accepted as well. The user will become frustrated if they type "Programmer" in as their occupation but it wasn't one of the pre-defined, acceptable inputs, and they are given a message that their input is not valid.

Keep in mind that ComboBoxes do allow you to type in them to select the first matching option. Some types of ComboBoxes (depending on the UI framework you are using) even allow free-form text fields at the top or side of the field to search or add to the list.

Of coarse the best way to determine what YOUR user will prefer is testing: A/B, field, user, etc.

Hope this helps you solve your dilemma!

Answer 6

For a limited list, don't use an autocomplete edit box or combobox, but use a listbox where all values are visible all at once. For limited lists, especially with static content of up to about 8 items, this takes up real estate, but presents the user with a better immediate overview.

For less than 5 items a radiogroup or checkbox group (multiple selections) may also be better.

For lists whose content is dynamic, like a list of contacts, a (scrolling) listbox or combobox are appropriate because you never know how many items will be in the list. To keep it manageable, you will need to allow for some kind of filtering and/or autocomplete.

Autocomplete usually suffers from the fact that what the users types needs to match a string from the beginning. I hate those except for when they are used to complete a value based on what I typed in that (type of) field before. E.g. what browsers nowadays offer when filling out online forms.

Allowing a user to start typing in a combobox usually suffers the same drawback. But admittedly it doesn't need to if the filtering is based on "like %abc%" instead of "starts with abc"

When dealing with lists that can have many similar items, I really like the way GMail's "To" field handles it. You start typing any part of someone's name or e-mail address and GMail will drop down a list presenting all the contacts whose name or e-mail address contains the characters you have typed so far anywhere within them. Using the up and down keys changes the selection in the dropped down list (without affecting what you have typed) and pressing enter adds the currently selected item to the "To" field. By far the best user experience I have had so far when having to select something from a list.

Haven't found any components yet that can do this, but it's not too hard to "fake" by combining an edit box and a listbox that drops down when you start typing and has its contents is filtered based on what has been typed so far.