Windows UI Design - The Combo Box

Question

Until today I had not realized there was a difference between a list-box (like the HTML Form control drop-down selection box) and a "combo box" which is a combination of the list-box and the text-entry control. So the ComboBox allows the user to enter in a new value and if programed to do so, will append the value to the list of values it displayed when clicked on.

Having just read a few books on interface design, I think that while the concept sounds cool, and will ultimately save me having to make another interface to 'add' choices, I feel like it may be confusing to less-than-advanced users who may miss the fact that you could enter values in this way.

Does anyone have any opinions on the use of the combo box and its pro/con vis-a-vis good UI design principles? My application should be used by many people of all age groups.

Answer 1

Pro: Easy to add new options (for the user)

Con: Easy to add new options (especially later when you are talking about data clean up, duplicate entries. Basically the same flaw when you allow free text entry).

Answer 2

Matt, here are some details that might be of use to you, in case you proceed with it.

I have used combo boxes in a couple of places on my forms in exactly the way you have mentioned.

In addition to the adding facility, you can also give edit & delete options to the user where the user can edit/ rename and delete the combo entries. However, you need to be extremely careful with the selected index when providing this feature as it can get pretty messy.

In my case, I have the following three items to take care of all the above mentioned functionality:

1. Combo box with DropDownStyle = DropDown
2. Save button
3. Delete button

Functionality is as follows:

In the combo box in addition to the items already saved by the user, I have an item --New-- at the top. When the user has to edit/ rename an item, he should select the item from the combo, type the new name in the combo and then click Save. If the user wants to add a new item, he should select --New-- from the combo, type in the name in the combo (this will overwrite --New--) and click Save If the user needs to delete an item, he should simply select the item and click on Delete

I have implemented the SelectionChangeCommitted event rather than the SelectedIndexChanged, as the latter fires event if the selected index is set through code, whereas the former only when user is selecting an item in the combo box from the screen.

In addition, I have maintained a form level variable called _selectedComboID which stores the id of the currently selected combo item. It gets set in the SelectionChangeCommitted event handler. This is because, if you have to rename an entry in the combo, you will first select it. At that time the selectedIndex is correct (the one you have selected). Then since you need to rename it, you will edit the combo text and click Save. However, since you have edited the name, it now messes with the selected index. So I save it in a variable before hand when user makes the selection.

In the Save method, I have checked if _selectedComboID is same as the ID for --New--. If yes, the insertion code is fired, else the edit code. In both cases, you need to check that the name chosen by the user doesn't already exist, in addition to other validations.

If you are setting Sorted = true for your combo box, it is very important to use SelectedItem throughout your code rather than SelectedValue. This is because when you set sorted as true for a combo box, it messes up the selected values. You can refer to my post on Setting selected item in a ListBox without looping for details.

Wow, that was huge!!! Hope it helps :)

Answer 3

This page from kdedevelopers.org was a good read. Let me see if I can summarize.

Listbox

+ Good for showing a short list
+ Shows most options at all times + It follows that it works great when the user can choose multiple options from a list
- Listboxes do not support "adding" to the list of choices intuitively

Combobox

+ Good for long lists. It prevents big lists from taking up too much space on the UI.
- Shows one selected option only - the choices are hidden unless you click on the dropdown button.
+ Allows the feature of users being able to add to the list of choices. Usually has a style property, where you can customize e.g. prevent 'addition' in case you don't want it.

Others feel free to add on. Humble suggesion: hopefully via comments. Upvoted comments can then moved into the post text by anyone.