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 for warnings 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.

...

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

...

• 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 will describe the object it is referring to. For example: Shifts. In some cases it may also contain

...

• a dynamic field

...

• .

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

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.

...