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 = 192 x 96 | - Header, brief Title. - Content area, which provides instructions. - Action. |
| Small = 192 x 96 | - Header, brief Title. - Content area, which provides instructions. - Actions. |
| Small = 192 x 120 | - Header, brief Title. - Content area, which provides instructions. - Option. - Actions. |
| Medium = 192 x 128 | - Header, brief Title. - Content area, which provides instructions. - Action. |
| Medium = 192 x 128 | - Header, brief Title. - Content area, which provides instructions. - Actions. |
| Medium = 192 x 152 | - Header, brief Title. - Content area, which provides instructions. - Option. - Actions. |
| Large = 192 x 192 | - Banner text - Header, brief Title. - Content area, which provides instructions. - Action. Single or double. |
| Large = 192 x 192 | - Image - Header, brief Title. - Content area, which provides instructions. - Actions. Single or double. |
| X-Large = 192 x 232 | - Banner Text - Header, brief Title. - Content area, which provides instructions. - Actions. Single or double. |
| X-Large = 192 x 232 | - Image - Header, brief Title. - Content area, which provides instructions. - Actions. Single or double. |