Drop Down Chooser
Problem
People often don’t know the answer to a question posed in a software interface.
Solution
Supply a drop-down chooser dialog to help people find an answer.
Context
- You have a set of possible answers that you can supply to the user as options.
- You want to help the user find an answer and/or constrain their answer to a predefined set.
- You don’t want to (or can’t) put the choices in line with the question.
- You can provide a way to present the options in a relatively small panel for the user to select from.
Rationale
Most software involves a dialog between the person and the system, and often this comes in various forms of the system asking a person to supply some answer (value) to a question that the system needs an answer for. This could be anything from asking someone for a color they prefer to asking them to provide an obscure, legacy system code.
Most drop-down choosers tend to constrain the answer given in order to make sure it complies with an expected, acceptable system value, but they can also be used to suggest answers.
Very often the option displayed in a chooser is more human-friendly. For instance, the system may need an obscure code (such as a hexadecimal or RGB color value) or some database-driven artificial primary key (such as an integer or GUID). These would be meaningless to users without some kind of a legend, so the chooser supplies something that a person can recognize and use to meaningfully distinguish from other answers.
The drop-down aspect of these choosers is there to simplify the visual complexity of the surrounding UI. Just take a look at your average software interface, and imaging if you took all of the drop-down choosers and make them inline. The interface would quickly become intimidating if not downright unintelligible with significant effort to focus. And sometimes, you simply don’t have the space to do that in particular form factors. So hiding the options away until the person needs them (similar to Extras on Demand) to answer the question at hand.
Implementation
Visually, the convention for drop-down choosers is to provide a button with a down arrow that will trigger the display of the chooser. It is also conventional to display the currently selected value to the left of that button or, if that doesn’t make sense, some icon to identify what the drop-down button is for.
When the drop-down button is selected (usually by clicking on it), you show the chooser dialog just below it (hence the “drop down” bit). You could animate this, or not, such as sliding down from the button to reinforce where the dialog is coming from. Typically, choosing an answer (if it is not a combination of choices) should hide the dialog as well as clicking outside of it.
The panel itself should be based on the answer the user needs to supply. Often that is simply a bit of text in a list of text, but it could be more complex as in color choosers, date pickers, calculators, or trees for hierarchical choices. Ideally, it should be small so as to not obscure too much of the surrounding context. You can have scrolling if it’s a long list but that wouldn’t work if the user needs to see all the items in the panel at once or scroll back and forth a lot to use it. You can also have commands in the panel that open up new dialogs, but they should be modal—you don’t want lots of dialogs floating around at once.
You should provide the ability for a human-friendly and a machine-friendly answer value for those cases where they differ.
This pattern is pretty well-established, so many platforms supply ready-made solutions, especially for the common scenarios like picking an item from a straight list, choosing a color, etc. So you shouldn’t need to create one from scratch unless you have specialized needs.
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
The Drop Down Chooser pattern is implemented in the following ASP.NET controls: WebDropDown, WebDateChooser. Check out the samples browser to see it in action.
Windows Forms
You can use the NetAdvantage for Windows Forms controls: WinCombo, WinComboEditor, WinFontNameEditor, or WinColorPicker to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called AutoCompleteMode Sample to see it in action.
WPF
You can implement this pattern using the NetAdvantage for WPF XamComboEditor Control.
JavaServer Faces
Use NetAdvantage for JSF’s dialog window to create drop down choosers. You can see more information on dialog windows for JSF in the online demo section of componentsforjsf.com.
Examples
The primary example for this pattern is the font color chooser in Microsoft Office 2007. You can see that it has the letter “A” icon (to indicate font) as well as the currently selected color beneath it. The drop-down button next to that shows the dialog to pick colors, including the ability to launch a more advanced dialog at the bottom.
http://quince.infragistics.com/110b
Probably one of the most ubiquitous drop-down choosers is the HTML-based SELECT element, as shown here from Microsoft Internet Explorer 7 on Vista. It allows for the basic scenario of text-based selection from a list, supporting a display (human-friendly) value and a hidden, backing (machine-friendly) value.
http://quince.infragistics.com/11bd
This is the directory selector in Windows XP’s Windows Explorer. It is indented to look like a tree view. You cannot open or close its nodes, so it really behaves more like a simple list with indented items than an actual tree, but it was visually different from a dropdown list.
http://quince.infragistics.com/10yn
Microsoft Word 2007 provides a drop down chooser to create new tables, where you can easily select the table’s dimensions as well as launch more complex ways to create tables.
http://quince.infragistics.com/10ze
Sources
Jennifer Tidwell, Designing Interfaces
Tags
