Dropdown Chooser
Word's color chooser | |
What: |
Extend the concept of a menu by using a dropdown or pop-up panel to contain a more complex value-selection UI. |
|
The user needs to supply input that is a choice from a set (such as in the color example above), a date or time, a number, or anything other than free text typed at a keyboard. You want to provide a UI that supports that choice -- a nice visual rendering of the choices, for instance, or interactive tools -- but you don't want to use space on the main page for that; a tiny space showing the current value is all you want. |
Why: |
Most users are very familiar with the dropdown list control
(called a "combo box" when used with a free-typing text field).
Many applications successfully extend this concept to dropdowns
that aren't simple lists, such as trees, 2D grids, and arbitrary
layouts. Users seem to understand them with no problem, as long
as the controls have down-arrow buttons to indicate that they
open when clicked.
Dropdown choosers encapsulate complex UIs in a small space, so they are a fine solution for many situations. Toolbars, forms, dialog boxes, and web pages of all sorts use them now. The page the user sees remains simple and elegant, and the chooser UI only shows itself when the user requests it -- an appropriate way to hide complexity until it is needed. (In general, I wouldn't recommend using it on UIs that are used primarily by computer novices. But Microsoft Office has trained its legions of users in Dropdown Choosers -- color selectors and font selectors, for example, all take advantage of them -- so just make sure your audience is comfortable with them.) |
How: |
For the Dropdown Chooser control's "closed" state, show the
current value of the control in either a button or a text
field. To its right, put a down arrow. This may be in its
own button, or not, as you see fit; experiment and see what
looks good and makes sense to your users. A click on the
arrow (or the whole control) brings up the chooser panel,
and a second click closes it again.
Tailor the chooser panel for the choice the user needs to make. Make it relatively small and compact; its visual organization should be a familiar information-graphics format, such as a list, a table, an outline-type tree, or a specialized format like a calendar or calculator (see the following examples). Scrolling the panel is OK if the user understands that it's a choice from a large set, such as a file from a filesystem, but keep in mind that scrolling one of these popup panels is not easy for people without perfect dexterity! Links or buttons on the panel can in turn bring up secondary UIs -- for example, color-chooser dialogs, file-finder dialogs, or help pages -- that help the user choose a value. These are usually modal dialog boxes. In fact, if you intend to use one of these modal dialogs as the primary way the user picks a value (say, by launching it from a button), you could use a Dropdown Chooser instead of going straight to the modal dialog. The pop-up panel could contain the most common or recently chosen items. By making frequently chosen items so easy to pick, you reduce the total time (or number of clicks) that it takes for an average user to pick values. |
Examples: |
|
From Windows Explorer One of the first non-list uses of a dropdown chooser was this pseudo-tree selector in Windows Explorer. The nodes are not openable or closable, so it really behaves more like a dropdown list than an actual tree, but it was visually different from a dropdown list. |
|
From Photoshop 7 Photoshop's compact, interaction-rich toolbars use dropdown choosers heavily. Two examples, Brush and Opacity, are shown here. The Brush chooser is a selectable list with a twist -- it has extra controls such as a slider, a text field, and a pullright button (the circular one) for yet more choices. The Opacity chooser is a simple slider, and the text field above it echoes its value. (Note that a right-arrow is used here, mysteriously.) |
|
From MS Money Normally a user would just type a number into this text field. But in the context of a financial application, having a calculator attached to a text field is very useful. A user might type in a number and then multiply it by 12, for instance. |
|