Overview
Overlays, including dialogs, onboarding dialogs, drawers, and wizards, are pop-up layers that sit on top of the main interface. They allow us to request a decision from the user, provide critical information, or guide actions without overwhelming users.
Overlays aren’t a one-size-fits-all solution, so we have different types to serve each purpose.
Types of overlays
Dialog
A standard Dialog (coming soon) focuses the user’s attention on one task, decision, or piece of information.
The user actions generally fit into the categories of Confirm (such as Delete), Create (such as Add or Upload), or Edit (such as editing a user input and choosing to Save their changes).
Examples:
- Unsaved changes
- Delete environment/tenant/project/etc
- Add environment/tenant/project/etc
- Import Step Template
- Upload package
Onboarding Dialog
An Onboarding Dialog (coming soon) guides users through a task step by step and provides additional helpful information.
A user may be able to navigate multiple steps using the actions Next and Back. A collapsible side panel shares additional information.
Examples:
- Configure Audit Stream
- Add New Kubernetes Agent
Drawer
A Drawer contains supplementary content or actions, overlaying content from the right-hand side.
It offers more screen real estate than a Dialog, so it’s more suitable for complex tasks such as searching or navigating complex elements like tabs, while providing the same advantage of keeping the user on the same page.
It may contain a single step or multiple steps (using Next and Back actions).
Examples:
- Deployment Timeline
- Create Git Credential
Wizard
A Wizard is a full-screen overlay that uses a series of simple, manageable screens to guide users through a complex task step by step.
Only the steps and information relevant to the user’s situation are visible in a well-designed Wizard.
Example:
- Add New Project
How to choose the correct overlay
Choosing the right way to communicate with users often isn’t straightforward. Refer to the flowchart below to pick the most suitable approach for your use case:
Usage
Avoid stacking multiple overlays on top of each other, especially dialogs and drawers.
This can confuse and disorient users as they lose their original context. Stacked overlays require users to dismiss each individually, creating a tedious and overwhelming experience.
Consider whether you're using the right pattern and how another pattern may improve the user's workflow.
Recommended reading
Other documentation that will help guide your thinking when working with this UI pattern.