Dialogs are typically used to prompt users to make a specific decision as part of or before continuing with a task or process. They can be used to inform users about a specific issue, to confirm particularly important actions, or to explain significant ramifications of an action before allowing the user to proceed.
Complex operations, particularly decisions which require involved explanation, may not be appropriate as dialogs.
Dialogs contain an optional title, dialog content, and actions.
The title briefly describes the type of choice being made. The title is optional and should only be used when necessary.
Content describes the decision to be made.
Actions enable the user to proceed in their process by confirming a particular choice.
When text labels exceed the maximum button width, you can use stacked buttons to accommodate the text.
Side-by-side buttons are recommended when the text of each label does not exceed the maximum button width, such as the commonly used OK/Cancel buttons.
Dialog titles are optional, and can be used to clarify the decision being made, for example, by indicating what part of a process the dialog relates to or by identifying what will be affected by the decision, such as a setting.
Dialog titles should always be displayed in their entirety.
Dialog content can vary widely, but typically consists of text and/or UI control elements and is focused on a specific task or process, such as confirming item deletion or choosing a setting.
Dialogs present a focused and limited set of actions, which are generally affirmative or dismissive.
Affirmative actions are placed on the right side and continue the process. Affirmative actions may be destructive, like Delete or Remove.
Dismissive actions are placed on the left side and return the user to the originating screen or step in the process.
Actions can be placed side by side or can be vertically stacked if more room is needed to accommodate longer button labels.
Dismissive and affirmative action text can be Cancel/OK or can be more specific active verbs or verb phrases that indicate the outcome of the decision.
Dialogs are separate from the content on the parent paper and do not scroll with the parent paper.
When possible, content within a dialog should not scroll. Excessive scrolling may indicate the content would be better served with a different container or presentation. However, if content does scroll, make it obvious by cutting off text or UI components.
Touching outside of a dialog will dismiss the dialog.
Dialogs are always fully on-screen. Dialogs always retain focus until they have been affirmed or dismissed or a required action has been taken (such as choosing a setting).
