Combo Box: Behavior Deep Dive

I wrote an article about designing user interfaces recently. In the article, I emphasized the importance of designing UIs based on how often users will use a certain feature. For features that are rarely used, you want to provide the user with lots of help to make sure they understand what they need to do. For features that are constantly used, you want to design the UI to minimize the number of required keystrokes and mouse clicks.

Usually, these two approaches are in conflict with each other. A guided interface requires extra screen space and additional clicks. It is usually mouse-driven.

A streamlined interface often packs many editable controls into a small space. For maximum user efficiency, it should be keyboard-driven.

It's difficult to design a single user interface that is both guided and streamlined.

And that's why combo boxes are so amazing. The autocomplete feature is keyboard-friendly and helps to minimize the number of user actions required to complete a task. Meanwhile, the dropdown feature is mouse-friendly and caters to users that are unfamiliar with the task at hand.

As great as the combo box control is, there are a few ways we can improve it to make it more "streamlined-friendly." Which is to say, we can save our users a few keystrokes or a second or two of their time. This may not sound like much, but it adds up. It also makes the combo box user experience simply more pleasant.

Before we get to the improvements, though, we need to get clear about what it is that we are actually going to improve.

Autocomplete Feature

The optional autocomplete property can greatly reduce the number of keystrokes necessary to perform a task. As you type, the first entry in the list that matches the characters you've entered prefills the combo box.

This is fundamentally different than the behavior of an HTML dropdown box. With a standard dropdown box, you can't edit the text. If there are multiple entries with the same first letter in a dropdown, you need to keep pressing the same key repeatedly to get to your choice.

For example, let's say you are choosing the state of Montana from a dropdown of all 50 US states. You would have to press the letter "M" key on the keyboard eight times to get to Montana after first going through Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, and Missouri. With a combo box, choosing Montana requires only two keystrokes, "M" and "o."

Choosing "Montana" from a list of 50 US states requires only two keystrokes.

The Autocomplete Gotcha

One issue with the autocomplete feature is that it only works if there is not already a value in the combo box. Let's say the current value of the combo box is "Nevada." Using the mouse, you place the cursor in the front of the combo box and type "Mo." The text in the combo box is now "MoNevada," and of course, that does not match anything.

Single-clicking into a combo box that already has a value makes the autocomplete feature less useful.

This is not an issue when you tab into a combo box that already has a value. Access highlights the current text. So, now when you type "Mo" in the "Nevada" combo box, the "M" replaces "Nevada" and the "o" is enough to trigger the "Montana" autocompletion.

Tabbing in to the combo box selects the whole word so it can be easily replaced via autocomplete.

Workarounds

The default mouse behavior of clicking into a combo box with an existing value always annoyed me. A single-click places the cursor where I clicked, but it does not select the existing text. Thus, if I immediately start typing to switch to a different option in the combo box, I won't get any matches.

There are some ways around this. If you click on an attached label, the combo box value will be selected and receive the focus. Then you can start typing to replace the existing value and generate a new match.

Clicking on an attached label will set focus to the combo box and select the text within it.

Another option would be to double-click on the existing text instead of single-clicking. The double-click will select the word you click on. If the value is only a single word this would allow you to immediately begin typing to replace the value.

Double-clicking on a single word will select the whole word, which can then be replaced via autocomplete.

If the current value is two or more words, a double-click will only select one word and not the whole value. You would need to double-click and drag to select the entire value. Only then could you begin typing and get new matches.

To select multiple words in a combo box for autocomplete, you need to double-click and drag.

For power users, the double-click and drag is an easy shortcut and does not take much longer than a single-click. But most users are not power users. For them, they will likely use the mouse to place the cursor at the beginning or end of the combo box, then click and drag to select the whole thing.

Clicking and dragging is the slowest workaround, but it's the one that many users fall back on.

Many users will release the mouse button before completing the operation and the combo text will be only partially selected. Then, when they try to type in the new value for the combo box, they won't get any matches because of the rogue text that they failed to select.

If the user doesn't select the entire text, then the autocomplete feature won't work right.

These types of issues rarely come up during development, but if you do any sort of testing with non-technical users, you will almost certainly see this phenomenon.

In upcoming articles, I will discuss a few ways we can improve on the default behavior using VBA.

Photo by Gerald Schömbs on Unsplash