Long check list ui pattern for web

Question

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.

Answer 1

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

Answer 2

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

Answer 3

Here's an accessible way using only HTML and Javascript:

1. Use the HTML fieldset tag to chunk them into logical groups;
2. use (say) JQuery to show/hide each group;
3. 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.

Answer 4

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).