Full-page dialogs involve multiple tasks and can contain multiple actions. They take over the full screen so they can also be used in instances where we need the user's focus clear of app distractions, such as acknowledging critical information.
Visual Examples
Usage
Appears in front of the app
Purposefully interruptive - should be used sparingly
At least two actions, a confirming and dismissing action, should be available
Can open additional dialogs
Principles
Focused: grabs user's attention
Direct: dedicated to completing a series of tasks/decisions
Types
Priority
High/Critical
Behavior
Interruptive by design
Remains on screen until user dismisses or uses actions that will dismiss it
Atomic Model Identification
Templates(fully baked UI in Features)
Recommendations
Full-screen dialogs are used when there's multiple fields or inputs a user needs to fill out
a. Multiple actions: confirming, dismissing, edit, etc.
b. Can contain multiple steps
c. Contains a"back" to return to previous steps when applicable
d. Require confirmation and submission screens when there are multiple steps or tasks involved
Dos and Don'ts
Do
Group related content together and break content sections apart.
Don't
Overload user with unrelated or unnecessary information that they don't need to complete task(s).
Content
Accessibility Requirements & Resources
Mouse and keyboard interactions can be used to navigate throughout dialog and can either confirm or dismiss it.
When active, the dialog takes keyboard focus and users cannot interact with page content behind it.
Focus returns to the control that initially activated the dialog when dialog is dismissed. It can be dismissed it by:
Definition
Visual Examples
Usage
Principles
Types
Priority
Behavior
Atomic Model Identification
Recommendations
Dos and Don'ts
Content
Accessibility Requirements & Resources
Mountaineer Design System Link
Related Components