...
A colored header, including:
The ID, name or metadata for the object that the dialog relates to.
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 label (see Content below).
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 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.
Content
Message headers will Popup header labels should describe the object they are referring to (for example: Shifts). In some cases they may also contain the actual names of the entities (for example: Car Insurance evaluation form).Dialog headers may describe the object they are referring to, or display action names (for example: Save as…), and may including the following information:
Object name - a specific label for the individual item the popup relates to, e.g. Agent Name, Article Title, or Timestamp.
Object type - the class of item, for example an Interaction, Article, or Shift.
Object type should be included for all Add New popups.
When object name and type are both used, it should be in the format [Object type]: [Object name], e.g. Interaction: 07/28/2023 04:49:25 AM.
Additional object metadata - such as timestamps, user type etc. Each additional piece of metadata should be separated using a divider, e.g. Interaction: Agent name | 07/28/2023 04:49:25 AM | Agent role.
Where a popup does not relate to an object, its header label should be the name of the tool or a message title instead, e.g. Calculator.
If the header text exceeds the container’s width it will be truncate, showing an ellipsis (…). In this case, hovering over the header will open a tooltip showing the full header text.
In rare cases, button labels may change as a result of a user action.
...