I have a data entry page where the user is required so make some selections from a list. Currently it is just a check list with about 10 items they can tick, but is will expand soon to about 230. What is a good UI paradigm for dealing with a large number of selectable items? I am considering dual list type control.
-
What do you mean you can't sub-divide a list of 230 items. Who decided on the items? Have you done any User Group work at all, or did someone invent all of these requirements? This smells bad. – AdamC Jun 18 '09 at 23:20
4 Answers
Dual list, BUT, for a large # of non-groupable elements:
- MUST have ability to select multiple elements (Duh!)
- SHOULD have ability to select ALL elements with a click
- SHOULD have ability to search (in either list), and select all matching elements
Also, if the lists are REALLY big (1k+), you may run into trouble with slow rendering. If so, you can also "paginate" the list - e.g. display only first N elements, allow selection from those, and then ability to shift the "frame" to next N elements.
(all the above, BTW, are real attributes of a solution we implemented in an enterprise web app needing a selection list with 30k possible values which could not be grouped).

- 126,886
- 32
- 213
- 327
Here's an accessible way using only HTML and Javascript:
- Use the HTML
fieldset
tag to chunk them into logical groups; - use (say) JQuery to show/hide each group;
- add navigation at the top to jump to each group.
If you hide all the groups initially, users can click the link for the groups they want to complete. Further, if you add a rollover (could just be a tooltip title
attribute on the links for accessibility) with a description of each group, users will have a 'preview' before visiting it.
Finally, if the labels are short enough, give the fieldsets
a width and make them into columns using CSS float
or absolute
positioning.
Try to stick to valid (X)HTML, CSS and Javascript - there are plenty of precedents for this.

- 17,193
- 6
- 67
- 97
Are the items grouped in any way? If so, a collapsible tree-type navigation might be useful.

- 1,843
- 1
- 12
- 18
It really depends on the situation and how much space you have but in most cases I prefer the dual list control, aka list builder, you where thinking about.
Here's a nice link for inspiration (requires silverlight): http://good.ly/qh7aeg8

- 405
- 2
- 10