Small Set Single Selector

Problem

You need to make it clear to users that only one selection is to be made from a set of choices.

Solution

Present all choices together at once, using a selection control that allows only one item to be selected.

Context

• The number of possible choices is small enough to fit on the screen, etc that you expect users to be using.
• Only one selection is to be made from the set of choices.

Rationale

If only one selection is to be made from a set of choices, then all you really need to be concerned with is showing all possible choices to the user, and making sure that the selection control only allows one selection.

This makes the most sense for smaller sets of items, and items that are clearly mutually exclusive. For example, it is clear to users when choosing a selection for their age range that it makes sense to choose only one selection. But in cases where multiple selections would make sense (to the user), even though you expect one selection, users may not understand why only one choice is allowed. This pattern is still appropriate in these cases, but you will want to take extra care in making it clear that only one choice is to be made, either through explanation or through the use of easy to understand selection controls.

Implementation

In most cases, you will simply want to create a list of the possible choices, with a selection control next to each item. You want to make it as clear as possible which selection control is associated with which choice. For example, if you have multiple rows and columns of items, it can sometimes be difficult to tell if the selection control on right or left of an item is the correct one to click on. Your primary goal is to make it clear to the user which item is being selected. When possible start with a vertical list of items, only moving to rows and columns when absolutely necessary because of this issue with determining which item you are selecting when multiple items are laid out horizontally. The example below shows choices laid out horizontally; notice how it might be difficult to understand quickly which selection to mark if you want to choose “Four.”

Be sure to clearly mark the selected item immediately upon selection by the user.

When appropriate, provide a “none” or “other” item so that users will not be forced to make a selection even when none of the options make sense.

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

Small Set Single Selector pattern 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, WinCombo, WinListView, WinComboEditor, WinCheckEditor, WinButton, and WinOptionsSet to implement this pattern.

WPF

You can implement this pattern using the NetAdvantage for WPF controls: XamComboEditor and XamCheckEditor.

 

Sources

Jakob Nielsen, Checkboxes vs. Radio Buttons

Jennifer Tidwell, Designing Interfaces

Tags

Data Entry, Form.