Usage

A dialog is a “conversation” between the system and the user. Dialogs inform users about a task and can contain critical information, involve multiple tasks, require decisions or specific user actions.

Use a dialog in the following cases:

For short and simple tasks
For important task relevant information
For gathering information from the user

However, dialogs are disruptive and therefore they should be used sparingly.

There are two different ways how to use dialogs:

Modal dialog, used for most cases
Non-modal dialog

Modal dialog

This dialog focuses the user’s attention exclusively on one task or piece of relevant information. Content in the background is not accessible, user must continue with an action.

Non-modal dialog

This dialog is on the same level as the content. The user can continue viewing and interacting with the page content while the dialog is open.

The main difference lies in the way you can interact with each screen. While a Non-Modal Screen allows users to simply go back to the parent screen, the Modal Screen requires users to complete an action before returning to the main window (“save” in our example) or cancel the current action.

Types of dialogs

We divide between 4 different types of dialogs:

Type	Usage	Sample
Informal dialog	Presents information the user needs to be aware of concerning their current workflow. Contains no actions for the user to take.	Informal dialog, following a close action
Progress dialog	Requires an action to be taken in order to continue or complete a user workflow. Contains secondary and primary action buttons.	Progress dialog, following a primary actionInformal dialog, following a CTA action
Confirmation dialog	Requires an critical action to be taken in order to continue or complete a user workflow. Contains secondary and primary action buttons or a negative action button.	Confirm dialog, following a neutral actionConfirm dialog, following a negative action
Error dialog	Shows an error message, critical information. Contains secondary and primary action buttons.	Error dialog with neutral actions

Appearance & Design

Structure

A dialog contains of:

Header: The title should be brief and clearly describe the dialog’s task or purpose.
Description text: In addition the description text gives more precise context to the dialogs aim. Should be always supportive, if it only repeats the title in other words, skip the description text at all.
Content: Contains the information and/or controls needed to complete the dialog’s task. This can be form fields, text, lists, icon buttons.
Action Buttons
Highlighting strip on the left (Brand identity)
Overlay or scrim: Gray base, 40 % transparency

Measurements

Measurements in rem:

Left stripe: 0.625rem
Corner radius: 0.1875rem Padding: 1.25rem
Margin between Buttons: 0.875rem

Sizing

The dialog should adapt to the size of its content.
There are four widths that can be used: small, medium, large and extra large.
The height of a dialog is determined by the length of its content. If the content is way longer than the length of the dialog allows, the user can scroll within the dialog.

Interaction & Behavior

Scrolling in dialogs

Dialog with scrolling bar. Full content scrolls, buttons are fixed.

Dialog with scrolling lists. Only list content scrolls.

Responsive behavior

Simple dialogs on mobile phone

Simple dialogs are used when no input action or complex interaction is required. For tablet there can be used also more complex dialogs as you have more space (same for desktop).

Full screen dialog on mobile phone

For mobile phone design use full screen dialogs, when it comes to complex dialogs (e.g. with input fields)

If there is only one action button use a sticky bottom bar when the keyboard is shown. Additional some clear action icons can be used next to the Primary action, like previous and next.

If there is are more than one action button use a sticky bottom bar which hides the keyboard.

If you need to allow landscape mode, add a toolbar on the right with a close icon and a more icon, where you can find all additional actions.

Dialog exit

Closing a dialog is possible in the following ways:

Action / Cancel button: Quit the dialog by clicking a button that continues or cancels the process
Close button or close icon button: Quit the dialog by clicking the close button

Escape key: Quit the dialog by pressing the escape key, except there is a forced interaction to do

Accessibility

Focus Keyboard Accessibility

Focus rules

After the dialog opens, initial focus should be set on the first focusable element in the modal.
For modal dialogs, the focus should be trapped inside the dialog and must not move outside the modal until it is closed.
After a modal dialog closes, focus should return to the element that invoked the modal.
When dialog is open and users tabbed through interactive UI elements, the most logical next action of the user is the continuing primary button, so focus is set on it next (e.g. after activating checkboxes or filling from field)
When the dialog is open and there are no required interaction, Tab is set always on continuing primary button invisible.

Keys

ESC should close the dialog
tab navigates the user to the different interactive elements
shift + tab tmoves to previous focusable element
space bar, enter triggers the selected element

Tab order

First interactive element in the body area.
Proceed left to right and top to bottom through the rest of the body elements.
Primary action
Secondary action
Close icon, if available otherwise close with ESC

UX Writing

As dialogs are very disruptive for a user it is important to provide text that helps the user to continue in a fast way. Here is some guidance what to consider when it come to write proper texts for dialogs:

Use descriptive action verbs for button labels

Use precise diction

Use precise diction