UI Patterns and Techniques

Dropdown Chooser

From MS Word
Use when:	The user needs to supply input that is a choice from a set (such as in the color example above), or is a date, 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 (sometimes called a "combo box" when used with a free-typing text field). This concept has been successfully extended to dropdowns that aren't simple lists: 2D tables, arbitrary layouts, etc. Users seem to understand them with no problem, as long as the controls have down-arrow buttons to indicate what they are. Because dropdown choosers encapsulate complex UIs in a small space, 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.
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. Design a 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 examples below). Scrolling the panel is OK if the user understands that it's a choice from a large set, e.g. a file from a file system, but keep in mind that scrolling one of these popup panels isn't easy for people without perfect dexterity! Links or buttons on the panel can in turn bring up secondary UIs -- color-chooser dialogs, file-finder dialogs, help pages, etc. -- that aid the user in the task of choosing a value. These are usually modal dialogs. In fact, if you intend to use one of these as the primary way that the user picks a value, you could use a Dropdown Chooser instead of going straight to the secondary UI; the chooser panel could contain the most common or recently-chosen items. This approach reduces the total time (or number of clicks) that it takes for an average user to pick their value.
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 small, interaction-rich toolbars make heavy use of dropdown choosers. Two examples, Brush and Opacity, are shown here. The Brush chooser is a selectable list with a twist -- 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 whose value is echoed in the text field above it. (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.
From http://orbitz.com Even Web sites can get into the swing of things. Orbitz's calendar is slightly clumsy (it appears far away from the dropdown button itself), but it's an effective presentation for a date chooser.