Related Pages: Message Popups, Dialogs

Lead:  Liav Nadler ONGOING

Description

A popup is a window that appears over the main display. It usually appears on user's action (e.g. clicking help icon) and must be dismissed by the user before returning to the parent application

Types

Type	Usage	Example
Message Popups	Display warnings, error messages and important information
Dialogs	Collect information from users or allowing them to make decisions

Usage & Behaviour

General guidelines

Structure

• A popup window may contain these elements:

  • A colored header, including a title and a close button (X)

  • A content area, which may contain text, inputs and controls

  • A primary action button

  • A secondary action button, if relevant

  • Other action buttons, if relevant

• The popup appears over a semi-transparent background

Positioning and Size

• 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 across the screen

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

Text

• 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 Dialogs

Validations and errors

• Message popups do not involve special validations.

• For validations and errors within dialog windows see Dialogs

Transitions

• 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

Code