Skip to main content

Modals

Modal dialogs interrupt workflows and require user interaction.

Behaviors

  • Dialogs are usually activated by user actions (such as activating a button) but may also be the result of a timed event (such as a session timeout warning), or other events.
  • Dialogs can only be closed by choosing an action represented by a button (e.g., Save or Cancel). They cannot be dismissed by tapping or triggering outside of the modal.
  • Avoid extensive copy or many elements within the dialog that require scrolling actions.
  • Dialogs are centered horizontally and vertically in the field of view by default and appear at 50cm from users.
    • For spatial UIs (i.e., model viewing), implement a Radial Solver by default.
    • For dialogs in the context of a non-diegetic UI (e.g., Browser), dialogs inherit the parent’s UI behavior.
  • Consider “displacing” the non-diegetic UI away from the user and/or covering it with a dark surface to reduce its brightness. You can also eliminate it altogether.
  • Retain focus until dismissed or an action has been taken. Dialogs shouldn’t be obscured by other elements or other dialogs within or without the context of the function or environment.

Touch = UIs placed at 50cm (~20 Inch) from users

Example Size (px or mm) Elements
Small Dialog Small = 192 x 96
- Header, brief Title.

- Content area, which provides instructions.

- Action.
Small Dialog Double Small = 192 x 96
- Header, brief Title.

- Content area, which provides instructions.

- Actions.
Small Dialog Double and half Small = 192 x 120
- Header, brief Title.

- Content area, which provides instructions.

- Option.

- Actions.
Medium Dialog Medium = 192 x 128
- Header, brief Title.

- Content area, which provides instructions.

- Action.
Medium Dialog Double Medium = 192 x 128
- Header, brief Title.

- Content area, which provides instructions.

- Actions.
Medium Dialog Double and half Medium = 192 x 152
- Header, brief Title.

- Content area, which provides instructions.

- Option.

- Actions.
Large Dialog Large = 192 x 192
- Banner text

- Header, brief Title.

- Content area, which provides instructions.

- Action. Single or double.
Large Image Dialog Large = 192 x 192
- Image

- Header, brief Title.

- Content area, which provides instructions.

- Actions. Single or double.
XLarge Dialog X-Large = 192 x 232
- Banner Text

- Header, brief Title.

- Content area, which provides instructions.

- Actions. Single or double.
XLarge Dialog X-Large = 192 x 232
- Image

- Header, brief Title.

- Content area, which provides instructions.

- Actions. Single or double.
Last updated May 18, 2023.