Drop Down Button

Example of the Drop Down Button UX pattern.

Problem

There are a lot of related commands that a person could choose but displaying them all as regular buttons would be too much visual burden.

Solution

Use a button with an indicator that, when selected, shows more commands related to the primary command.

Context

There are several related commands (or variations on one command) but displaying them all would potentially add too much visual burden or there is simply not enough space.
There is one action that is more commonly used than the rest.
The number of commands is not large, e.g., not more than seven.

Rationale

This pattern functions as a sort of context menu for a button. Because of that, it suffers the similar caveat of requiring users to ask for available commands, rather than showing them; however, if you provide a good affordance (such as a down arrow resembling down arrows as on a Drop Down Chooser, there’s a good chance the user will inquire, unlike context menus triggered by invisible commands like right-clicks.

It works best when there is a single, primary command that users will want to use most of the time, which of course implies that you know what that would be. It’s also important that the commands be related, which could mean they act on the same target (such as the message in Gmail’s implementation) or they are variations of the same command, such as different ways to paste in Microsoft Office.

If there is no primary command, this won’t work so well. If you have multiple primaries, consider using regular buttons for all the primaries and tucking the secondaries into the Drop Down Button because having to click twice for a common command is irritating.

If the commands are not related to the primary, the user may not be motivated to explore there to find the command they are looking for.

An alternative to this, assuming minimal space constraints, is Primary Action where you use visual emphasis to achieve similar effects of reducing visual burden.

It is different from a standard menu in that the top level item is not just a category grouping commands—it is a command in itself.

Implementation

Determine if you have a viable candidate for a primary command and that you have alternatives or related commands that could be grouped “under” it.

Use a regular button for the primary command and then add an indicator (usually a triangle pointing downwards is best) to the side or below the primary command.

When the indicator is selected, display a one-level menu by the indicator (usually just below it) that has the secondary commands displayed. Ordering of secondary commands could be alphabetical, but if you know that certain ones are more commonly used than others, then ordering them according to usage is best.

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

Drop Down Button pattern can be implemented in any of the ASP.NET editor controls using the custom button feature. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms WinDropDownButton to implement this pattern.

Examples

The primary example is from Gmail. They use a divider line between the primary command and the drop down command to visually distinguish for the user where to click for both. The drop-down is almost just a list of link command, though they draw emphasis to the first two. These presumably are used more often and are more of the same kind (communicative in goal).

http://quince.infragistics.com/11ew

Example of the Drop Down Button UX Pattern