Related Pages: Message Popups, Dialogs
...
| Table of Contents |
|---|
Description
A popup is a window which appears over the primary screen. It usually appears as a result of a user action, such as clicking a help icon. A popup must be dismissed by the user before returning to the primary screen.
Types
Type | Usage | Example |
|---|---|---|
To display warnings, error messages and important information. |  | |
To collect information from the user, or to allow them to make decisions. |  |
Usage & Behavior
General guidelines
Structure
A popup window may contain:
A colored header, including:
a title.
a close button (X).
A content area, which may contain text, inputs and controls.
Buttons, including:
a primary action button.
a secondary action button, if relevant.
other action buttons, if relevant.
The popup appears over a semi-transparent background.
...
The semi-transparent background will appear and disappear with a fade effect (TBD)
The popup window itself will appear and disappear with a slide down / slide up effect (TBD)
Best practices
Use popups
to display important information. Remember that popups can be intrusive
Do not use popups
to display a large amount of content, and keep text concise. Where a lot of content is needed, consider using another pattern. In this case, link to help desk or, in case of a dialog, consider using a form.
for less important or unintrusive messages. In this case, consider using toasts
General
Keep the text short and informative.
Avoid nested popups.
Accessibility compliance
...