Related Pages: Message Popups, Dialogs
| Table of Contents |
|---|
Description
A popup is a small window which appears over the primary screen, designed to display important information or collect information from the user.
Popups appear as a result of a user action, such as clicking a button, a link or a menu action.
Popups must be dismissed by the user before returning to the primary screen.
Types
Type | Usage | Example |
|---|---|---|
Displaying warnings, error messages, and important information. |
 | |
Collecting information from the user, or allowing them to make decisions. |
 |
Usage & Behavior
General guidelines
A popup window usually appears as a result of a user clicking a button, an icon, or a link.
Structure
A popup window consists of:
A colored header, including:
The ID, name or metadata for the object that the dialog relates to. a title
If needed, the object type can be added for clarification, in this format: [Object type]: [Object Name] (e.g. Interaction: 07/28/2023 04:49:25 AM).
When the object metadata is comprised of several fields, a divider will be displayed between each field. (e.g. Request: Break - 08:00 AM | 27/01/2023).
For “Add new” dialogs, the name of the UI component (e.g. table/list/page) that the object is added to will be displayed (e.g. Notes).
For dialogs which don’t relate to a particular object, no text will be displayed in the header (e.g. a calculator popup).
a close button (unless otherwise specified).
a help button (optional).
A content area, which:
contains a title describing the action that will be performed.
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 black background with an opacity of 40%.
Placement and Positioning
The popup is centered horizontally on the screen.
The popup appears at 2/3 height of the screen.
The user will be able to move the popup around the screen.
The user cannot change the width or height of a popup window.
...
Keep the text short and informative.
Avoid opening a popup from another popup.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
...
Help, Informative, and Error will use a White color F/ocus
The warning pop-up will use a Black color Focus
 |
 |
 |
 |
Design
See Message Popups and Dialogs.
...
See Message Popups and Dialogs.