Skip to end of banner
Go to start of banner

Popups

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 48 Next »

Related Pages: Message Popups, Dialogs

Description

A popup is a window which appears over the primary screen. It usually appears as a result of a user action. A popup must be dismissed by the user before returning to the primary screen.

Types

Type

Usage

Example

Message Popups

To display warnings, error messages, and important information.

Shani Laendler (Unlicensed) Asaf Ben-Oved The buttons should be Ignore and Cancel; or should be an explicit action the use was doing.

Dialogs

To collect information from the user, or to allow them to make decisions.

Usage & Behavior

General guidelines

  • A popup window usually appears as a result of a user action, such as clicking a button, icon, or link.

Structure

A popup window consists of:

  • A colored header, including:

    • a title.

    • a closing button (X).

    • a help button (optional).

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

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.

Content

The popup header may contain hard-coded text, a dynamic field, or a combination of the two.

Interaction

  • The popup can be closed by either:

    • clicking the close (X) button,

    • clicking the primary or secondary action buttons, or

    • pressing the Esc key.

  • Clicking outside of the popup will not close it.

  • For interactions within dialog boxes see Dialogs.

Validations and errors

  • Message popups do not require special validations.

  • For information about dialogs validations, see Dialogs.

Transitions

  • The semi-transparent background will appear and disappear with a fade effect.

  • The popup window itself will appear and disappear with a fade effect.

Best practices

Use

  • to display important information. Remember that popups can be intrusive.

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.

  • to display unintrusive messages. In this case, consider using Toasts.

General

  • Keep the text short and informative.

  • Avoid multiple level popups.

Accessibility compliance

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

Design

See Message Popups and Dialogs.

Code

See Message Popups and Dialogs.

  • No labels