Large Set Single Selector
Problem
Users need a way to select an item from a large set.
Solution
Give users an efficient way to find and select the item.
Context
The person needs to be able to select one item from a set. The set is so large that it’s not possible to display the items at the same time.
Rationale
There are many cases in software development where people need to be able to select one item from a set of possible items. When the list is large, they items can’t be displayed at the same time. Additionally, if the list is very large, it cannot be loaded in a single UI control, and more sophisticated controls are required, so only a set of records can be loaded in the UI control.
Implementation
Essentially, you will create a list of the items on the screen (either fully loaded in the UI controls or loaded on demand) 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 item.
Selecting a value from a list where all the available items are not displayed is always challenging for the user. If possible, try to limit the number of items in the list by filtering it depending on the context. Consider using a hierarchical list as they are better for findability.
There should always be a value selected by default. If an empty value is valid create an option for that value, with an appropriate label (“Empty”, “Nothing”, “None”, etc.). Users should always be able to leave a field in its original state, and in most controls, once you select an item, there’s no way to leave the control in a state where there isn’t a selected item.
As the user needs to select only one value, make sure that the options are both comprehensive and clearly distinct.
The lists should be sorted alphabetically unless there is another sort order that makes more sense for the specific scenario.
There are multiple ways of solving this, and the solution will often depend on other incidental factors such as available screen real estate, the length of the list, and your user’s level of dexterity.
You need to create or choose an implementation of this pattern that meets those kinds of constraints. If you are limited by space, you need to create an implementation that consumes as little space as possible while not the focus of attention but can expand out or drop down or popup to enable the user to choose effectively.
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
Large 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.
Examples
Most e-mail clients support Text Field AutocompletionAutocompletion. As the user types into a text field, anticipate the possible answers and automatically complete the entry when appropriate.
http://quince.infragistics.com/10xi
If the number of items is not very large, you can use a drop down list where the user can start typing and the item that starts with the typed characters is displayed. This works for list of around 200 or 300 entries.
http://quince.infragistics.com/11fo
If the number of items is not very large and you have more screen state available, you can use a ListBox where the user can start typing and the item that starts with the typed characters is displayed. The user can see more options than in a dropdown list, but it has higher space consumption. It’s easier to operate than a drop down list. If you need to show more columns or images, evaluate using a Grid or a ListView. If you are using it inside a form, make the Grid or ListView look like a ListBox, as they aren’t used often for selecting items in a form
http://quince.infragistics.com/11fz
This example from Outlook 2007 lets people click the ‘To’ button to display trigger a new window from where they can select a value form a list. It requires a separate window, but it could be the only option if you need to provide search filters to find the desired item.
http://quince.infragistics.com/11an
Microsoft’ CRM also uses a popup window for search panels, and enables adding new object instances from there. In this case, if the Account being looked for is not in the list, it can be created by clicking the New button. The problem with this approach is that it could require a big number of open windows, but it lets the user do what they need without interrupting his workflow.
http://quince.infragistics.com/10yo
A different way to trigger Lookup dialogs is also used Microsoft CRM. There is non-editable but clickable Text Field with the current value. It can be clicked to navigate to the View or Edit form for corresponding entity. The button with the magnifier can also be clicked to display a lookup list. Additionally, depending on the Entity type there is a different kind of icon displayed to the left of the control:
http://quince.infragistics.com/119v
Instead of opening a new window, you can have a collapsible window that provides assistance to fill a field. In the example below from Microsoft’s CRM, when you fill each field, the right side panel lets you select the value from a searchable list.
http://quince.infragistics.com/11dz
When the list is hierarchical, using a tree lets the people find the desired option easily by navigating through the hierarchy. It may be unfamiliar to naïve computer users and requires dexterity. You can decide to render the tree with a Hierarchical Grid. Both grids and trees usually provide a way to display multiple columns or images to further illustrate the options. Instead of loading the whole hierarchical structure in the tree, evaluate loading just the first levels so it does not take that much memory, and load the rest of the branches on when the user expands the nodes.
http://quince.infragistics.com/11fx
The Windows Vista File Open dialog also provides a way to select an item from a large hierarchical list, which is the file system. It may be unfamiliar to some users; difficult to design; usually requires a separate window, so it's less immediate than controls placed directly on the page.
http://quince.infragistics.com/115f
Facebook does this exceedingly well throughout the site when when choosing a friend from your list of friends is required.
http://quince.infragistics.com/2h8n
A common scenario is choosing a destination from a large set of options. Travel website cleartrip.com a great job of making this efficient. Its filtering is intelligent and matches airport names.
http://quince.infragistics.com/2h8o
Sources
Jennifer Tidwell, Designing Interfaces
Tags
Tree, Data Entry, Grid.
