views:

154

answers:

4

I am struggling with what the better practices or recommended ui design patterns are for making selections from a list of data, more specifically, key/value data.

My questions are:

  • When should I use a drop down?
    • When should you employ a list of radio buttons verses a drop down?
  • When should I use a list box?
    • If you do allow for multiple selection, is it better to use a list of check boxes?
  • What is the best way to handle selection from a large list of data?
    • Pop-up windows that allow filtering/selecting the data
    • Autocomplete text boxes (though not many support key/value)
  • Are there any good websites that explain ui pattern for data list selection?

When selecting from a large list of data, how are you handling this? I see lots of guidance for autocompletion using just values, but no keys.

I realized this may be subjective, but I really need some guidance on the better ways to handle this type of data entry.

For what it's worth, I am developing my application in C# and ASP.NET Web Forms.

Update

Here is an example of what the data might look like for a large list, for selecting customers:

Id      Name         Address                                 Active
-------------------------------------------------------------------
1       XYZ Company  1234 Main St., Some City, Some State      Y
2       ABC Company  1234 Main St., Some City, Some State      N
3       RST Company  1234 Main St., Some City, Some State      Y

Sometimes my customer wants to see more information, than just the value field, in this case Name (this is what would be displayed in the related text box).

+1  A: 

Radio buttons: Use them when there are a few options only (<10) and you only select one.

Checkbox list: A few options (<10) and you need to select many.

Lists: Another possibility to allow multiple selection.

List/Dropdownlist: Select one element from a long list.

Double lists: Select a single element from one long list and then click a button "select" to transfer selected item into the second list. The second list will give you an overview of selection.

Auto-suggestion: Select one element from an extremely long list (thousands).

Developer Art
I know it's subjective, but how many elements would be in a long list?
mattruma
In my subjective opinion 3-4 hundred, then I classify it as a very long list.
Developer Art
+1  A: 

To answer your specific ideas, the established wisdom is that for few data elements, use a full list with radio buttons for single selects; check-boxes for multiple selects when there are few elements and multi-select lists when there are more than a few elements (it's easier to select in multi-select list)

For filtering/auto completion, it's a VERY good diea to use for large data sets but the precise form would depend on the answers to the following questions:

  • Is it 1 value per each key? >=1 value per each key? 1/many key-value pairs where entire key-value pair is taken as an atomic datum?

  • Are there many keys? Many keys per value?

DVK
Most of the times it is one value per key, definitely for the end display, but some times I need to show them other values, like name and address for instance.
mattruma
Is there any need/use to search/filter by values?
DVK
A: 

Take a minute of your time and see how Remember the Milk (it's an online to do list) manages lists selections.

foxtrot
A: 

I would look closely at how Gmail deals with lists.

In essence, email is all about dealing with lists of items. Gmail makes it easy to move, copy delete and action these items.

Tom