Multiple Selection from a Small List
From Windows Vista
Problem
Users need to be able to select multiple items from a small set of possible items.
Solution
Provide people the ability to choose a more than one item from a small set.
Context
The person needs to be able to select multiple items from a set.
The set is small enough for the person to be able to see and think about them together and often needs to be aware of all of the options to make the right choices.
Rationale
If the list is small enough (e.g., less than ten items) or the user needs to see all available options in order to make correct choices, you need to present the items in such a way that the user can review the possible items and select the ones appropriate to their needs.
This is very common in database-based applications when dealing tables that map to m-n relationships (like the roles for a given user).
Implementation
Essentially, you will create a list of the items on the screen (either always on the screen or in some sort of popup/expansion) that provides the person with sufficient information about the items to distinguish them from each other. Usually, selection involves clicking or double-clicking. No matter how you implement it, you need to clearly indicate the selected items.
The lists should be sorted alphabetically unless there is another sort order that makes more sense for the specific scenario.
Some implementation strategies allow having ‘Select All’ or ‘Unselect All’ commands. They can be added as buttons or link actions.
Help Me Get There
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
ASP.NET
Multiple Selection is implemented in the following ASP.NET controls: WebDataGrid, WebGrid, WebDataTree, WebDataMenu,WebListBar, WebDropDown. Check out the samples browser to see it in action.
Windows Forms
You can use the NetAdvantage for Windows Forms controls: WinGrid, WinTree, and WinListView in combination with Buttons to build a shuttle which implements this pattern.
WPF
You can implement this pattern using the NetAdvantage for WPF XamDataGrid and buttons to build a shuttle control which implements this pattern.
Examples
The primary example is from Window Vista’s permissions dialog. It uses a list of checkboxes to let the user select the multiple items. It does not consume a lot of real state, and if it does not scroll, always display all the available options. In this example the list does scroll, which seems unnecessary as the dialog box could afford a larger height, or be resizable so it’s possible to see all the items if wanted.
http://quince.infragistics.com/10yq
Office 2007 enables customization of the Quick Access Toolbar by using two lists with buttons that let users move items from one to the other. This option provides an easier way to see the selected items but it consumes more space in the screen. The first list has the available options and the second list the selected ones. This implementation lets people filter the values in the left side list, providing a two-level hierarchy in the left side. You could add a “Select All”/”Remove All” buttons if it’s a common use case. You could let the user drag and drop items between the two lists.
http://quince.infragistics.com/11gh
This example from Visual Studio lets you select the database objects that you want to add to a specific Data Source. It uses a tree instead of a list, as the value list is hierarchical. When a parent node is checked, all the children nodes are checked. When a parent node is unchecked, the child nodes are not unchecked. This provides a quick way to select all but some children nodes.
http://quince.infragistics.com/110a
This screenshot from DeKlarit shows how two trees can be used when the data is hierarchical. It takes more real estate than a single tree with checkboxes, but it lets people easily see the selected items. This approach usually provides buttons to select all or unselect all the options, and allows drag and drop operations between trees.
http://quince.infragistics.com/11c9
Sources
Jennifer Tidwell, Designing Interfaces
Patterns in Interaction Design, Parts Selector
Tags
