Related Pages: Message Popups, Dialogs

Lead:  Liav Nadler 

Description

A popup is a small modal window that which appears over the main display. It usually appears on user's action (e.g. clicking help icon) and primary screen, designed to display important messages or collect information from the user.

Popups appear as a result of a user action, such as clicking a button, link, or a menu action.

Popups must be dismissed by the user before returning to the parent applicationprimary screen.

...

Types

Type	Usage	Example

For more information

Message Popups

Display

Displaying warnings, error messages, and important information.

Image Removed

Image Added

See Message Popups

Dialogs

Collect

Collecting information from

users See Dialogs

the user, or allowing them to make decisions.

Image Removed

Image Added

Usage &

...

Behavior

General guidelines

Structure

A popup window

...

consists of:

• A

  a colored header, including

  a title and

  :

  • a label (see Content below).

  • a close button (X)A unless otherwise specified).

  • a help button (optional).

• a content area, which

  may contain

  contains:

  • a title, describing the action that will be performed. (Optional for Dialog popups only, where space is limited).

  • the main content including any text, inputs and controlsA .

• Dialog buttons at the bottom of the popup, including:

  • a primary action button.

  • A a secondary action button, if relevant

  • Other action buttons, if relevant

  The popup appears

  • and other action buttons (where relevant).

Popups appear over a semi-transparent black background with an opacity of 40%.

Placement and Positioning

...

• Popups are horizontally and vertically centered on the screen.

• The popup appears at 3/4 height of the screen (TBD)The user will be able to move the popup across around the screen.

• The user cannot change the width or height of a popup window.

...

Content

• The popup header may contain a hard-coded text, a dynamic field or a combination of both

Interaction

• A popup window appears on users' action, usually clicking a button, icon or link

• The popup can be dismissed by either clicking the X button or by clicking the primary or secondary action button

• For interactions within dialog boxes see DialogsPopup header labels should describe the object they are referring to, 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 Interaction, Article, or Shift.

    • The 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 contain the name of the tool or message instead, e.g. Calculator.

• If the header text exceeds the available width it will be truncate with an ellipsis (…). The full header will be shown in a Tooltip on hover.

• In rare cases, button labels may change as a result of a user action.

Interaction

• The primary screen behind the popup is not interactive while a popup is open.

• The popup can be closed by either:

  • clicking the close (X) button,

  • clicking an action button, or

  • pressing the Esc key.

• Clicking outside of the popup will not close it.

• Dialog popups may contain additional interactive elements.

Validations and errors

• Message popups do not involve require special validations.

• For validations and errors within dialog windows information about dialogs validations, see Dialogs.

Transitions

• The popup window and 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

• A popup window should carry a limited amount of content. If the content you wish to display is too extensive consider using another pattern

• Avoid nested popups

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

...

Zeplin link

...

Screen thumbnail

...

<<Zeplin Link>>

...

<<Screen with 200 width>>

Code

...

...

• .

Best practices

Use

• to display important information. Remember that popups can be intrusive - only use them when necessary.

Do not use

• to display a large amount of content. In this case, link to another page or, in case of a dialog, consider using a Form.

• where a popup relates to a specific trigger point on the screen → use a Popover instead.

• to display non-intrusive messages which don’t prevent the user from interacting with the rest of the page → use a Toast instead.

General

• Keep the text short and informative.

• Avoid opening a popup from another popup.

• Only one popup may be open at any one time.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

The tab index flow will follow the order displayed below. Shift + Tab will follow the reverse order.

...

Where there are more than two dialog buttons at the bottom of the popup, the focus order will be from right to left.

...

• If the content is not focusable, the first item to get focus will be the Enter button.

• The same order logic as above should apply even if none of the additional buttons appear.

The focus style for elements within the header will be different to other LUX components due to the background fill color.

• Help (grey), Information (blue), and Error (red) popups will use a white focus indicator.

• Warning (orange) popups will use a black focus indicator.

Image Added

Image Added

Image Added

Image Added

Responsive design

Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

• Popups should always remain horizontally and vertically centred, regardless of the screen dimensions.

• On large screens popups should remain at their default size.

• The left and right internal padding for all popups should reduce to 24px at the same 900px breakpoint.

• Where the screen dimensions are smaller than the popup’s height or width, the popup size should be adjusted. A minimum margin of 24px should persist around all four sides of the popup.

  • When the popup size is reduced and the full content cannot be displayed:

    • the header text will be truncated with an ellipsis. The full header will be shown in a tooltip on hover.

    • the elements within the main content area will respond, following their own responsive guidelines. A vertical scrollbar may be added where necessary.

Examples at different screen sizes

Wide (1920px)	Standard (1366px)	Narrow (960px)
Image Added	Image Added	Image Added
Image Added	Image Added	Image Added

Design

See Message Popups and Dialogs.

Code

See Message Popups and Dialogs.