Mobile - Drop Down List

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.

Why

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 chevron), 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 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 very 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.

Examples