User Interface design for selecting elements from big lists

Question

I am not to sure if this is a question which fits the topics of software engineering.

I have two levels of objects "Categories" and "Category Values". I need to build a user interface for users to choose from that items and select as many as they want.

There can be like 10 or 20 Categories but each category can have from 1 to (worst case) 1000 category values.

For example:

• Type
  • Image
  • Document
• Priority
  • High
  • Low
  • Medium
• City
  • Cardiff
  • ... + 999 more.

So to categorize certain items the user needs to choose from this list and needs to see what has been chosen so far.

I thought of a double select list but the list would be so long that it would involve a lot of scrolling (especcially with many category values). The same is for two trees because its only two level there is not much folding possibility.

What is the best way of letting the user make such a categorization ?

Answer 1

If the user know what he is searching (which would be the case with cities), I would recommend autocompletion. Just let the user type the three first letter and then display few search results with those letters (using some fuzzy logic if you can) with the closest result directly in the field but selected so that if the user continue to type the process continue (you search again) but if he hit Tab then the result stay.

Answer 2

Well I don't think, that the question is at the right place. Anyway, IMHO the best approach would be to separate the categories from the selection itself. First you could have a ComboBox as first filter control. There the category can be selected before any selection is made. This provides a certain context to the user, helps him to focus.

After selecting the category, the user gets all available items of the this category presented in a ListBox. This is reducing the amount of scrollable content.

A ListItem could be a check box plus the name of the item. Checking the CheckBox means, the item is selected. A CheckBox is a very explicit way of selecting things, so nothing needs to be interpreted by the user.

To handle the amount of items efficiently, you should offer some filters e.g. below the ListBox.

• CheckBoxfor showing all Selected or Unselected items.

• A TextBox where the user can enter a search term. According to the entered term the available items are filtered in the ListBox.

Below the selection UserControl you could put a summary area, which is providing an overview about all selected items of all categories. Here you will also need a clever concept.